ES6中的(...)运算符详细学习

发布时间:2023-10-29 17:30

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 }
}

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号