ES6语法笔记

在ES6（ECMAScript 2015）中，… 是所谓的展开运算符（spread operator）或剩余运算符（rest operator），它有几个用途。
1.展开运算符（Spread Operator）：
当你看到…在函数调用、数组字面量或对象字面量前时，它用作展开运算符。
数组：用于将一个数组的元素展开到另一个数组中，或者用于函数调用时传递数组的元素作为单独的参数。

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]   
function myFunction(a, b, c) {  
  console.log(a, b, c);  
  const args = [1, 2, 3];  
myFunction(...args); // 输出: 1 2 3
}  

对象：用于将一个对象的所有可枚举属性复制到另一个对象中。

const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

2.剩余运算符（Rest Operator）：
在函数参数或解构赋值中，…用作剩余运算符，用于收集一个函数的不定数量的参数到一个数组中，或者在解构赋值时收集剩余的属性到一个对象中。
函数参数：用于收集一个函数的不定数量的参数到一个数组中。

function myFunction(...args) {  
  console.log(args); // 数组形式，包含所有参数  
}  
myFunction(1, 2, 3); // 输出: [1, 2, 3]

解构赋值：用于在解构数组或对象时收集剩余的元素或属性。

const [first, ...rest] = [1, 2, 3, 4]; // first: 1, rest: [2, 3, 4]  
const { a, ...others } = { a: 1, b: 2, c: 3 }; // a: 1, others: { b: 2, c: 3 }

通过结合这些功能，ES6中的…运算符为处理数组和对象提供了更加灵活和简洁的方式。

箭头函数（Arrow Function）是ES6中引入的一种新的函数语法，它使用=>符号来定义函数。箭头函数提供了更简洁的语法，并且不绑定自己的this，arguments，super或new.target。这使得箭头函数在回调函数中特别有用，因为它可以更容易地处理this的上下文。
箭头函数的基本格式如下：

(parameters) => { functionBody }

无参数：

() => { console.log('Hello, World!'); }
单个参数：
javascript
x => { console.log(x); }

如果函数体只有一条语句，并且这条语句是一个返回语句，你还可以进一步简化箭头函数：

x => console.log(x)
多个参数：
javascript
(x, y) => { console.log(x, y); }

立即执行的函数表达式（IIFE）：
虽然箭头函数不能用作构造函数（即不能使用new关键字），但它们可以用作立即执行的函数表达式（IIFE）：

(() => {  
    console.log('This will run immediately.');  
})();

返回值：
当箭头函数返回一个值时，可以省略花括号，并且如果返回的是一个对象字面量，需要用圆括号包围对象，以避免与函数体的花括号混淆：

// 返回数字  
x => x * x  
// 返回一个对象  
x => ({ key: x })

使用this：
箭头函数不绑定自己的this，它会捕获其所在上下文的this值，作为自己的this值：

function OuterFunction() {  
    this.value = 1;  
    this.innerFunction = () => {  
        console.log(this.value); // 输出：1  
    };  
    this.innerFunction2 = function() {  
        console.log(this.value); // 输出：1  
    };  
}  
  
const outer = new OuterFunction();  
outer.innerFunction(); // 使用箭头函数  
outer.innerFunction2(); // 使用传统函数

注意，箭头函数没有arguments对象。如果需要访问类似arguments的东西，可以使用剩余参数（rest parameters）：

(...args) => {  
    for (let arg of args) {  
        console.log(arg);  
    }  
}

总之，箭头函数提供了一种更简洁、更直观的方式来编写函数，尤其是在处理回调函数和this上下文时。