Javascript之函数(ES5 ES6)

心已赠人 2022-05-22 03:10 186阅读 0赞

# ES5函数： #

##### 1：静态方法 #####

function add(num1,num2)\{  
      return num1+num2;  
  \}

##### 2：直接量方法 #####

var add(函数名)= function(num1,num2)\{　　        // 通过变量add即可引用函数;  
                  return num1+num2;  
                \};　　　　　　　　　　　 　            // 注意函数末尾有一个分号,就像声明其他变量时一样;  
　var another = add;　　　　　　　　         // 使用不带圆括号的函数名是访问函数指针;而非调用函数;  
　console.log(another(10,10));

##### 3：动态匿名方法：使用Function构造函数 #####

var add = new Function('num1','num2','return num1+num2');

第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能; 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;

# ES6函数： #

##### 1：ES6对默认参数的支持 #####

function log(x, y = 'World') \{  
  console.log(x, y);  
\}  
log('Hello')            // Hello World  
log('Hello', 'China')   // Hello China

log('Hello', '')        // Hello

**参数默认值可以与解构复制的默认值，结合起来使用。**

function foo(\{x, y = 5\}) \{  
  console.log(x, y);  
\}  
foo(\{\})             // undefined 5  
foo(\{x: 1\})         // 1 5  
foo(\{x: 1, y: 2\})   // 1 2

foo()               // TypeError: Cannot read property 'x' of undefined

**解构赋值的例子:**

function fetch(url, \{ body = '', method = 'GET', headers = \{\} \}) \{  
  console.log(method);  
\}  
fetch('http://example.com', \{\})  
// "GET"  
fetch('http://example.com')  
// error

##### 2：rest参数 #####

ES6 引入 rest 参数（形式为 `...变量名` ），用于获取函数的多余参数，这样就不需要使用 `arguments` 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) \{  
  let sum = 0;  
  for (var val of values) \{  
    sum += val;  
  \}  
  return sum;  
\}  
add(2, 5, 3) // 10

##### 3：箭头函数 #####

var f = v => v;

等同于  
var f = function (v) \{  
  return v;  
\};