ES6之解构赋值/剩余运算符/箭头函数

扩展运算符(对象)

// 以往我们这样合并对象
let name = { name:"对象" }
let age = { age:28 }
let person = {}
Object.assign(person,name,age)
console.log(person) // { name: '对象', age: 28 }

// 使用扩展运算符
let name = { name:"对象" }
let age = { age:28 }
let person = {...name,...age}
console.log(person) // { name: '对象', age: 28 }

扩展运算符(数组)

// 以往我们是这样拼接数组的
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = arr1.concat(arr2)
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]

// 现在我们用扩展运算符看看
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]

扩展运算符和Object.assign对对象进行合并的行为，是属于浅拷贝

对象模型的解构（Object）

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

const {
    className,
    img: mainImg,
    title: mainTitle,
    moreButtons,
    tooltipPlace,
    onClick
} = this.props;

https://blog.csdn.net/weixin_43623871/article/details/89317031

箭头函数的用法

箭头函数没有function的关键字
小括号和大括号之间有个箭头
如果参数是一个，可以省略小括号
如果没有return，可以不写大括号（return和大括号可以一起省略）

//普通函数
function fn(a){
    return a;
}
//普通函数转化为箭头函数h
//1,不希望有函数声明的预编译环节，用let
let fn =  (a)=>{
    return a;
}
//2. 如果参数是一个，可以省略小括号
let fn =  a =>{
    return a;
}
//3. 省略return和大括号
let fn =  a => a;
console.log(fn(1));//1

扩展运算符

1. 函数的调用

数组作为参数，通常使用的方法是 Function.prototype.apply，例如

var students = ['Abby', 'Andy'];
var otherStudents = ['Jane', 'Tom'];
students.push.apply(students, otherStudents);
console.log(students); // ["Abby","Andy","Jane","Tom"]

现在有了扩展运算符，它可以将数组，更确切的说是（可遍历对象）进行展开作为参数。现在只需直接调用 push 方法就行了。

var students = ['Abby','Andy'];
var otherStudents = ['Jane','Tom'];
students.push(...otherStudents);
console.log(students); // ["Abby","Andy","Jane","Tom"]

2. 数组构造

在扩展运算符之前，我们如果想让一个数组成为另一个数组的一部分，不可避免地就要用到 push, splice, concat 等等。现在使用扩展运算符，如下面代码

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
console.log(lyrics)// ['head', 'shoulders, 'knees', 'and', 'toes']

除此之外，我们还可以使用它来快速复制一个数组。

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
console.log(arr2); //  [1, 2, 3, 4]

3. 数组解构

除了可以快速构造数组之外，还可以用来实现数组的解构。可以用来提取数组中的部分值，并且提取的结果是一个数组对象。注意延展操作符总是应该位于解构赋值的最后一个位置。举个栗子。

var students = ['Abby', 'Andy', 'Jane', 'Tom'];
var somestudents, otherStudents;
[somestudents, ...otherStudents] = students ;
console.log(somestudents); // Abby
console.log(otherStudents); // Andy Jane Tom

4. 将类数组对象转换成数组

扩展运算符可以将一个类数组对象中索引范围在[0,length)之间的所有属性的值添加到一个数组中，这样可以得到一个真正的数组：

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

5. React 里面的延展属性（Spread Attributes）

React 里面，延展操作符可以在 JSX 中，{…props}可以将 ReactElement 的 props 属性展开。

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

传入对象的属性会被复制到组件内。

它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

剩余操作符

剩余参数（rest parameter）允许长度不确定的实参表示为一个数组。如果一个函数的最后一个形参是以 … 为前缀的，则在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。

1. 获取参数

剩余操作符可以用来方便地获取传进来的参数。

function fn(a, b, ...args) {  
   return args.length;
}
fn(1, 2, 3, 4, 5 ); // 传进来的参数的个数 3

其中第一个形参 a 对应的是 1,第二个形参 b 对应的 2,…args 表示的就是[3, 4, 5]。

2. 与 arguments 的不同

上面 args 可以有 length 属性，也说明了 args 是一个数组而不是像 arguments 一样是一个伪数组，因此能在在它上面直接使用所有的数组方法，比如 sort，map，forEach，pop。

arguments 想要变成数组，可以通过 Array.prototype.slice.call 方法，使用剩余操作符可以避免将 arguments 转为数组的麻烦。这种用法和上面扩展运算符的用法还有点异曲同工之妙。

// 下面的代码模拟了剩余数组
function fn1(a, b){
  var args = Array.prototype.slice.call(arguments, fn1.length);
  console.log(args.length);
}

// 现在代码可以简化为这样了
function fn2(a, b, ...args) {
   console.log(args.length);
}
fn1(1,2,3); // 1
fn2(1,2,3); // 1

扩展运算符与剩余操作符的区别

关于扩展运算符与剩余操作符之间的区别，简单地说，在某种程度上，剩余操作符和扩展运算符相反，扩展运算符会“展开”数组变成多个元素，剩余操作符会收集多个元素和“压缩”成一个单一的元素。
https://hacpai.com/article/1539350981967