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); // 1
  console.log(y); // 2
  console.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 }
}