ES6——扩展运算符(...)
文章目录
- 一、扩展运算符(...)
- 二、数组扩展运算符的应用
- 1、合并数组
- 2、与解构赋值结合
- 3、字符串转数组
- 4、实现了 Iterator 接口的对象
- 5、Map 和 Set 结构, Generator 函数
- 6、替代数组的 apply 方法
- 三、对象扩展运算符的应用
一、扩展运算符(…)
扩展运算符( spread )是三个点(…).功能是把数组或类数组对象展开成一系列用逗号隔开的参数序列,与rest运算符刚好相反。
主要一下作用:
- 抛弃apply来转换数组为参数序列的方法
- 复制数组 arr_new=[…arr_old] (浅拷贝)
- 合并数组 [1, 2, …more]
- 将字符串转为真正的数组 […‘hello’] // [ “h”, “e”, “l”, “l”, “o” ]
- Array.form() 将类数组和可遍历对象(set和map)转为数组
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
二、数组扩展运算符的应用
1、合并数组
// ES5
[1, 2].concat(more)// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
2、与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list//下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
如果将扩展运算符用于数组赋值
,只能放在参数的最后一位,否则会报错。
3、字符串转数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
上面的写法,有一个重要的好处,那就是能够正确识别 32 位的 Unicode 字符。
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
凡是涉及到操作 32 位 Unicode 字符的函数,都有这个问题。因此,最好都用扩展运算符改写。
let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'
[...str].reverse().join('')
// 'y\uD83D\uDE80x'
上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。
4、实现了 Iterator 接口的对象
遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
Iterator的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创造了一种新的遍历命令for…of循环,Iterator接口主要供for…of消费。
在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for…of循环遍历,有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator属性(详见下文),另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。
有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
Iterator 接口参考链接:https://www.cnblogs.com/zczhangcui/p/6502836.html
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 接口。
对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
let arrayLike = {'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。如下:
这时,可以改为使用Array.from
方法将arrayLike转为真正的数组。或者
为该类数组对象部署 Iterator 接口,[Symbol.iterator]: Array.prototype[Symbol.iterator]
。如下图:
5、Map 和 Set 结构, Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
Generator 函数?
var go = function*(){yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
上面代码中,变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
如果对没有iterator接口的对象,使用扩展运算符,将会报错。
var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
6、替代数组的 apply 方法
由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。
// ES5 的写法
function f(x, y, z) {// ...
}
var args = [0, 1, 2];
f.apply(null, args);// ES6 的写法
function f(x, y, z) {// ...
}
var args = [0, 1, 2];
f(...args);
下面是扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
上面代码表示,由于 JavaScript 不提供求数组最大元素的函数,所以只能套用Math.max函数,将数组转为一个参数序列,然后求最大值。有了扩展运算符以后,就可以直接用Math.max了。
另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
上面代码的 ES5 写法中,push方法的参数不能是数组,所以只好通过apply方法变通使用push方法。有了扩展运算符,就可以直接将数组传入push方法。
下面是另外一个例子。
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);
三、对象扩展运算符的应用
对象中的扩展运算符(…),用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中。
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
上述方法实际上等价于:
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
Object.assign
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。Object.assign
方法的第一个参数是目标对象,后面的参数都是源对象。(如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性)。
同样,如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}
利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数(如果不是很清楚什么是纯函数的可以参考这里),reducer中的state对象要求不能直接修改,可以通过扩展运算符把修改路径的对象都复制一遍,然后产生一个新的对象返回。
这里有点需要注意的是扩展运算符对对象实例的拷贝属于一种浅拷贝。肯定有人要问什么是浅拷贝?
- 我们知道javascript中有两种数据类型,分别是基础数据类型和引用数据类型。基础数据类型是按值访问的,常见的基础数据类型有Number、String、Boolean、Null、Undefined,这类变量的拷贝的时候会完整的复制一份;引用数据类型比如Array,在拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化,比如:
let obj1 = { a: 1, b: 2};
let obj2 = { ...obj1, b: '2-edited'};
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: "2-edited"}
上面这个例子扩展运算符拷贝的对象是基础数据类型,因此对obj2的修改并不会影响obj1,如果改成这样:
let obj1 = { a: 1, b: 2, c: {nickName: 'd'}};
let obj2 = { ...obj1};
obj2.c.nickName = 'd-edited';
console.log(obj1); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
console.log(obj2); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
这里可以看到,对obj2的修改影响到了被拷贝对象obj1,原因上面已经说了,因为obj1中的对象c是一个引用数据类型,拷贝的时候拷贝的是对象的引用。
ES6——扩展运算符(...)相关推荐
- ES6扩展运算符的几个小技巧
es6扩展运算符,也就是... ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...
- ES6 - 扩展运算符与Object.assign对象拷贝与合并
文章目录 扩展运算符能做什么? 什么是深浅拷贝 使用ES6扩展运算符 对象浅拷贝 对象合并 Object.assign Object.assign详解 Object.assign()实用 给对象添加属 ...
- php es6写法,ES6...扩展运算符(示例代码)
在数组中的应用 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,++将一个数组转为用逗号分隔的参数序列++. console.log(...[1, 2, 3]) // 1 ...
- ES6——扩展运算符的作用以及使用场景
文章目录 对象扩展运算符 解构赋值 扩展运算符 数组扩展运算符 替代函数的apply() 方法 扩展运算符的应用 复制数组 合并数组 与解构赋值结合 字符串 实现了Iterator接口的对象 对象扩展 ...
- js数组合并、去重、降维(ES6:扩展运算符、Set)
js数组合并.去重.降维 1.合并 1.1使用concat()进行合并数组 function get_concat(collection_a, collection_b) {return collec ...
- JS之ES6扩展运算符三个点(...)用于剥离{} 获取属性值
1.用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 } 等价于 ...
- ES6——扩展运算符/三点运算符(...)
扩展运算符(spread)是三个点(...). 数组的扩展运算符 对于数组来说,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) ...
- ES6 “...“ 扩展运算符 (点点点)
1.定义 扩展运算符(spread)是三个点(-),它如同rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. 2.使用 console.log(...[1,2,3]); //1 2 3 con ...
- ES6扩展运算符用法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中 用法: 1.将一个数组放入另一个数组中 var middle = [3, ...
最新文章
- 专访百度熊辉:有人转AI纯粹因为好找工作,这样的人不是我想要的
- Docker安装部署ELK教程 (Elasticsearch+Kibana+Logstash+Filebeat)
- js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
- security center拒绝访问_Steam被曝出0day提权漏洞,但厂商拒绝修复
- pearson特征选择matlab,使用sklearn做特征选择
- 面试题——C++/C
- 一个小小的抽奖活动测试脚本(python2.7)
- 数据结构与算法 完整版单链表(附GIF)
- 初中动画flash作品_初中Flash动画设计基础知识试题及答案.doc
- linux如何设置显示器亮度调节软件,为 Linux 启用色温和亮度调节工具
- 浅析 HLS 流媒体协议
- 文件服务器raid1+5,服务器上的raid1 raid5,什么意思啊!
- MSDC 4.3 接口规范(20)
- 计算机英语选词填空题,新视野大学英语读写教程第一册课后习题选词填空和完型翻译...
- Unity 物体自发光
- 2.前端性能优化-web性能指标
- Terraria及tModloader开服教程
- 收藏!教育部发布67家出版社中小学春季教材电子版!网址都在这里,一键获取!...
- java三大特征之封装,继承,多态浅析
- 重建同义词+oracle,[ORACLE]Oracle 同义词(synonym)
热门文章
- c语言小明今年16岁,五一C语言作业
- ios:播放在线的网络视频
- 2021年,有哪些堪称神器的Python工具包?
- ORA-01722:invalid number 解决方法
- Matlab 2017b错误使用 mex 未找到支持的编译器或 SDK。您可以安装免费提供的 MinGW-w64 C/C++ 编译器;请参阅安装 MinGW-w64 编译器
- 50+ 个有用的 Docker 工具
- 系统如何达到秒杀而不被薅羊毛
- python中用matplotlib画多幅图时出现图形部分重叠的解决方案
- 今天去了irc://freenode/#fedora-cn
- 全能虚拟服务器,服务器做全能虚拟主机