ES6中的(...)运算符详细学习
2023-03-31 10:44:38 时间
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 }
}
相关文章
- 一篇运维老司机的大数据平台监控宝典(2)-联通大数据集群平台监控体系详解
- 一篇运维老司机的大数据平台监控宝典(1)-联通大数据集群平台监控体系进程详解
- 空中换引擎 博时基金数字化转型经验谈
- 如何高效地学习编程语言
- 作为一名阿里巴巴数据分析大牛,送给学弟学妹的经验积分
- 为什么要学习R语言
- Hadoop大数据分析平台的介绍性讨论
- 最全面的Spring学习笔记
- 16个用于数据科学和机器学习的顶级平台
- 给有抱负的数据科学家的六条建议
- 如何做一枚合格的数据产品经理
- 除Kaggle外,还有哪些顶级数据科学竞赛平台
- 一个鲜为人知却可以保护隐私的训练方法:联合学习
- 干货 :送你12个关于数据科学学习的关键提示(附链接)
- 大数据行业有多少种工作岗位,各自的技能需求是什么?
- 中国移动研究院常耀斌:商用大数据平台的研发之路
- 这些数据科学家必备的技能,你拥有哪些?
- 自学成才的开发者有何优势和劣势?
- Gartner报告:正处于数据科学与机器学习工具 “大爆炸”的时代
- Ready Computing借助InterSystems IRIS医疗版为医疗机构提供具有高度互操作性和可扩展性的解决方案