ES6-10笔记（function update ）

function新特性

Default Parameters

对于函数而言，经常会用到参数，关于参数的默认值通常写在函数体内。函数

函数参数是为从左到右解析，没有默认值会被解析为undefined

ES5默认参数写法，过于臃肿，且重复

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1) === 50;

ES6默认参数写法，有默认值参数一般写在无默认值参数之后。（即使不按顺序写，现在也不报错，）

function f (x, y = 7, z = 42) {
  return x + y + z
}
console.log(f(1, undefined, 43))// 51
//从左向右解析，想让某个参数使用默认值，就使用undefined来赋值

function f (x, y = 7, z = 42, h = 5) {
  return x + y + z+ h
}
console.log(f(1, undefined, 43))// 56
//从左向右解析，如果有剩余参数未传入值，也按默认值处理

ES6中参数可以用于后面的参数的逻辑计算进行赋值

function f (x, y = 7, z = x + y) {
  return z * 0.5
}
console.log(f(1, 7))// 4

在函数体内的函数声明不能引用内部的默认参数，会报错。

// Doesn't work! Throws ReferenceError.
function f(a = go()) {
  function go() { return ':P'; }
}

还可以通过解构赋值为参数赋值

function f([x, y] = [1, 2], {z: z} = {z: 3}) { 
  return x + y + z; 
}

f(); // 6

arguments改动

判断函数体内有几个参数

ES5 中可以在函数体内使用 arguments 来判断

function test (a, b = 1, c) {
  console.log(arguments.length)
}
test('a', 'b')//2

ES6 中不能再使用 arguments 来判断了，但可以借助 Function.length 来判断，但是只能统计一个默认参数之前的变量数

function test (a, b = 1, c) {
  console.log(test.length)
}
test('a', 'b')// 1

Rest Parameter（Rest 参数）

ES5中，不确定剩余参数有多少个，或不需要知道剩余参数都是什么玩意的情况下进行逻辑运算

比如求和运算

function sum () {
  let num = 0
  Array.prototype.forEach.call(arguments, function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(1, 2, 3))// 6
console.log(sum(1, 2, 3, 4))// 10

ES6中arguments不好使，提供了新的方式.即rest 参数。

rest 参数之后不能再有其他参数，且函数的 length 属性，不包括rest参数

function sum (...nums) {
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(1, 2, 3))// 6
console.log(sum(1, 2, 3, 4))// 10
//...nums（Rest Paramete）代表参数的集合，并且是一个数组

Rest Paramete也可以和其他参数一起来使用

function sum (base, ...nums) {
  let num = base
  nums.forEach(function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(30, 1, 2, 3))// 36
console.log(sum(30, 1, 2, 3, 4))// 40

Rest参数和arguments对象的区别：

1.rest参数只包括那些没有给出名称的参数，arguments包含所有参数

2.arguments 对象不是真正的数组，而rest 参数是数组实例，可以直接应用sort, map, forEach, pop等方法

3.arguments 对象拥有一些自己额外的功能

Spread Operator（扩展运算符）

很方便易懂的语法，把固定的数组内容“打散”到对应的参数

function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}

console.log(sum(...[4]))// 9
console.log(sum(...[4, 5]))// 12
console.log(sum(...[4, 5, 6]))// 15

Arrow Function（箭头函数）

ES5函数必须使用function。而箭头函数不需要，并且使函数简短。

let hello = () => {
  console.log('say hello')
}

箭头函数的语法示例

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

//加括号的函数体返回对象字面量表达式：
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数的this问题

箭头函数不会创建自己的this它只会从自己的作用域链的上一层继承this

let test = {
  name: 'test',
  say: () => {
    console.log(this.name, this)
  }
}
console.log(test.say())// undefined
//this 的指向也就是 test 外层的所指向的 window，而 window 没有 name 属性，所以结果是 undefined

由于 箭头函数没有自己的this指针，通过 call()或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2