ES6之函数优化(默认参数、剩余参数、 箭头函数)

一、默认参数

在ES6之前，我们无法给一个参数设置默认值，我们只能采取变通的写法：

 function add(a , b) {
    // 判断b是否为空，为空就给默认值1
    b = b || 1;
    return a + b;
 }
  // 传一个参数
  console.log(add(10));

现在es6可以这么写：

function add(a , b = 1) {
  return a + b;
}
// 传一个参数
console.log(add(10));

---

二、剩余参数

ES6中，当参数个数无法确定时，可以使用剩余参数（rest parameter）来表示，剩余参数就相当于一个容器，调用函数时传入几个参数值，这个容器就装载几个参数值。剩余参数能够将多个独立的参数合并到一个数组中去，剩余参数表示为...keys,有三个点加上一个具名参数标识符组成。

function fn(...keys){
	console.log(keys)
}
fn(11,22,'aa'); // [11, 22, "aa"]

---

三、箭头函数

箭头函数相当于匿名函数，并且简化了函数定义。

1. 简洁的语法

箭头函数使用=>符号来定义函数，相比普通函数更加简洁。
这种简洁性不仅体现在函数声明的方式上，还体现在可以省略function关键字、圆括号和大括号。

let fun = (obj) => {
    console.log(obj)
};

2. 隐式返回

如果箭头函数只有一条语句，那么可以省略大括号，并且自动将该语句的结果作为返回值。这种隐式返回的特性进一步简化了函数的书写。

• 一个参数时： ()可以省略

  var print = obj => console.log(obj);
  

• 多个参数： ()不可省略

  var sum2 = (a,b) => a+b;
  

• 没有参数： ()不可省略

  var sayHello = () => console.log("hello!");
  

3. this指向

箭头函数没有自己的this值，它会捕获其所在上下文的this值作为自己的this（会在自己作用域的上层继承this，继承自外层函数）。箭头函数内部的this是词法作用域，由上下文确定

// 传统函数
function fn1() {
    this.value = 1;
    setTimeout(function() {
        console.log(this.value); // 输出: undefined，因为这里的 this 指向全局对象（在浏览器中是 window）
    }, 100);
}

// 箭头函数
function fn2() {
    this.value = 1;
    setTimeout(() => {
        console.log(this.value); // 输出: 1，因为箭头函数的 this 继承自外层函数（即 fn2）
    }, 100);
}

var age = 18;
var obj = {
    name: '张三',
    age: 20,
    getAge1() {
        var fn = function () {
            return this.age // 匿名函数的this指向window
        }
        return fn()
    },
    getAge2() {
        var fn = () => this.age; // 箭头函数的this总是指向词法作用域，也就是外层调用者obj
        return fn()
    }
}
alert(obj.getAge1()); // 18
alert(obj.getAge2()); // 20

call()、apply()、bind()等方法不能改变箭头函数中this的指向

var id = 'Global';
let fun1 = () => {
    console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'

4. 没有arguments对象

箭头函数没有自己的arguments对象，因此不能通过arguments来获取函数参数列表。

// 传统函数
function traditionalFunc() {
    console.log(arguments); // 输出: [Arguments] { '0': 1, '1': 2, '2': 3 }
}
traditionalFunc(1, 2, 3);


// 箭头函数
const arrowFunc = () => {
    console.log(arguments); // 报错: ReferenceError: arguments is not defined
};
arrowFunc(1, 2, 3); 

不过，可以通过 展开操作符... 或使用 默认参数 来获取参数列表。

const arrowFunc = (...args) => {  
    console.log(args); // 输出参数列表的数组  
};  
  
arrowFunc(1, 2, 3); // 输出 [1, 2, 3]

const arrowFunc = (param1 = 'default1', param2 = 'default2') => {  
    console.log(param1, param2);  
};  
  
arrowFunc(); // 输出 'default1' 'default2'  
arrowFunc('value1'); // 输出 'value1' 'default2'  
arrowFunc('value1', 'value2'); // 输出 'value1' 'value2'

5. 不能使用 new 关键字（构造函数）

箭头函数没有自己的 this，也没有 prototype 属性，因此不能使用 new 关键字 来创建对象实例。

const arrowFunc = () => {  }; 

// 不能用new来创建实例
new arrowFunc();  // Uncaught TypeError: arrowFunc is not a constructor

// 没有prototype属性
console.log(arrowFunc.prototype  === undefined);  // true

6. 不能使用 yield 关键字（生成器函数）

箭头函数不能使用yield关键字来定义生成器函数，因此无法迭代返回多个值。

// 生成器函数（传统函数）
function* generatorFunc() {
    yield 1;
    yield 2;
    yield 3;
}

// 箭头函数不能作为生成器函数
// const generatorFunc= *() => {
//     yield 1; // 报错: Unexpected token '*'
// };

---

四、对象的函数属性的简写

let person = {
    name: "jack",
    // es5写法：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // es6箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food), // 这里拿不到this
    // es6简写版：
    eat3(food) {
        console.log(this.name + "在吃" + food);
    }
}