ES6中的（...）运算符详细学习

1.1 合并数组

//es5写法，使用concat
let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
newArr = newArr.concat(arr1).concat(arr2);
//es6写法
let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];
newArr = [20,...arr1,...arr2];  

** 1.2合并对象**

const baseSquirtle = {
  name: 'Squirtle',
  type: 'Water'
};

const squirtleDetails = {
  species: 'Tiny Turtle Pokemon',
  evolution: 'Wartortle'
};

const squirtle = { ...baseSquirtle, ...squirtleDetails };
console.log(squirtle); 
//Result: { name: 'Squirtle', type: 'Water', species: 'Tiny Turtle Pokemon', evolution: 'Wartortle' }

2.1 为数组新增成员

const pokemon = ['小红', '小李'];
const charmander = '大大';

const pokedex = [...pokemon, charmander];

console.log(pokedex); 

//Result: [ '小红', '小李', '大大' ]

** 2.2 为对象新增属性**

const aa= { name: '小红', type: '123' };
const obj= {
  ...aa,
  unit: '米',
  id: '1'
};

console.log(obj); 

//Result: { name: '小红', type: '123', unit: '米', id: '1' }

• 将一个数组添加到另一个数组的尾部：
• let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; //es5写法Array.prototype.push.apply(arr1, arr2); //es6写法let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1.push(...arr2);
• 将字符串转换成数组：
• //es5写法需要split和join的操作//...//es6写法[...'hello'] // [ "h", "e", "l", "l", "o" ] 解构赋值
• 例1：
• let obj = {name:"小明",age:18,hobby:"小红"}; let newobj = { ...obj } console.log(newobj)//和obj一样例2：
• let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };console.log(x); // 1console.log(y); // 2console.log(z); // { a: 3, b: 4 }可以对数组进行浅克let arr = [1,2,[1,2],3];let arr2 = [...arr];arr2.push(1);console.log(arr);//[1,2,[1,2],3]console.log(arr2);//[1,2,[1,2],3,1]

** 进阶:**

1. 复制具有嵌套结构的数据/对象

先看一个例子：

const pokemon = {
  name: 'Squirtle',
  type: 'Water',
  abilities: ['Torrent', 'Rain Dish']
};

const squirtleClone = { ...pokemon };

pokemon.name = 'Charmander';
pokemon.abilities.push('Surf');

console.log(squirtleClone); 

//Result: { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish', 'Surf' ] }

当我们修改原对象的name 属性时，我们的克隆对象的 name 属性没有受影响， 这是符合我们预期的。但是当修改原对象的abilities 属性时，我们的克隆对象也被修改了。

原因: 因为复制过来的abilities 是一个引用类型， 原数据改了， 用到他的地方也会跟着改

解决办法：const squirtleClone = { ...pokemon, abilities: [...pokemon.abilities] };

 const pokemon = {
  name: 'Squirtle',
  type: 'Water',
  abilities: ['Torrent', 'Rain Dish']
};

const squirtleClone = { ...pokemon, abilities: [...pokemon.abilities] };

pokemon.name = 'Charmander';
pokemon.abilities.push('Surf');

console.log(squirtleClone); 

//Result: { name: 'Squirtle', type: 'Water', abilities: [ 'Torrent', 'Rain Dish' ] }

增加条件属性

方式一：

const pokemon = {
  name: 'Squirtle',
  type: 'Water'
};

const abilities = ['Torrent', 'Rain dish'];
const fullPokemon = abilities ? { ...pokemon, abilities } : pokemon;

console.log(fullPokemon);

方式二：简化一下

const fullPokemon = abilities && { ...pokemon, abilities };

短路

const pokemon = {
  name: 'Squirtle',
  type: 'Water'
};

const abilities = ['Torrent', 'Rain dish'];
const fullPokemon = {
  ...pokemon,
  ...(abilities && { abilities })
};

console.log(fullPokemon);

如果 abilities 为 true， 就相当于是

const fullPokemon = {
  ...pokemon,
  ...{ abilities }
}