JS展开运算符

news/2024/7/19 14:10:48 标签: js

转自
ES6 JS展开运算符JavaScript是ECMAScript的实现和扩展,ES6标准的制定也为JavaScript加入了许多新特性。本文主要记录展开运算符。

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

函数调用中使用展开运算符
在以前我们会使用apply方法来将一个数组展开成多个参数:

function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);
如上,我们把args数组当作实参传递给了a,b,c,这边正是利用了Function.prototype.apply的特性。

不过有了ES6,我们就可以更加简洁地来传递数组参数:

function test(a,b,c) { }
var args = [0,1,2];
test(…args);
我们使用…展开运算符就可以把args直接传递给test()函数。

数组字面量中使用展开运算符
‘’
在ES6的世界中,我们可以直接加一个数组直接合并到另外一个数组当中:

var arr1=[‘a’,‘b’,‘c’];
var arr2=[…arr1,‘d’,‘e’]; //[‘a’,‘b’,‘c’,‘d’,‘e’]
展开运算符也可以用在push函数中,可以不用再用apply()函数来合并两个数组:

var arr1=[‘a’,‘b’,‘c’];
var arr2=[‘d’,‘e’];
arr1.push(…arr2); //[‘a’,‘b’,‘c’,‘d’,‘e’]
用于解构赋值
解构赋值也是ES6中的一个特性,而这个展开运算符可以用于部分情景:

let [arg1,arg2,…arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //[‘3’,‘4’]
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,将多个数组项组合成了一个新数组。

不过要注意,解构赋值中展开运算符只能用在最后:

let [arg1,…arg2,arg3] = [1, 2, 3, 4]; //报错
类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:

var list=document.getElementsByTagName(‘div’);
var arr=[…list];
list是类数组对象,而我们通过使用展开运算符使之变成了数组。

ES7草案中的对象展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象:

let {x,y,…z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}
如上,我们可以将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数。

同时,我们也可以像数组插入那样将一个对象插入另外一个对象当中:

let z={a:3,b:4};
let n={x:1,y:2,…z};
n; //{x:1,y:2,a:3,b:4}
另外还要很多用处,比如可以合并两个对象:

let a={x:1,y:2};
let b={z:3};
let ab={…a,…b};
ab //{x:1,y:2,z:3}


http://www.niftyadmin.cn/n/861566.html

相关文章

React 路由匹配问题

1.匹配顺序 每个路由都是从头往后匹配的,如:/movie/:type/:page,首先会匹配到/movie页面,然后渲染相对应的组件,然后再往后匹配,若一开始在/movie路由上加exact属性,那么后面的路由就匹配不上了…

美团2020前端刷题记录

1. class A {String i "op";void func(String s) {s ""9;}static void test() {A a new A();a.func(a.i);} }变量i,s,a在堆还是在栈中? 第8行执行完后a.i的值是什么? 1、考察js堆与栈:栈内存主要用于存储各种基本类…

JS宏队列微队列

javascript在执行时,遇到异步执行的方法,不会等异步方法返回结果再继续向下执行,而是先将异步方法放到一个队列中,然后继续执行,最后主线程空闲时,再按照顺序执行队列里的异步方法,叫做事件轮回…

2020-08-05

正则表达式里: ?出现0次或1次. [0,1] ‘*’ 出现0次或多次. [0,∞] ‘’ 出现1次或多次 [1,∞]

css可继承属性

在这里列举下css可继承属性: 所有元素可继承:visibility和cursor。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decorati…

常用的各种文件文档视频音频图片类型

//文件类型 TXT、DOC、XLS、PPT、DOCX、XLSX、PPTX,pdf ppt、word、pdf、excel、txt //图片类型 .jpg,.png,.jpeg,.bmp,.gif,.raw //视频类型 .mp4,.mov,.avi,.wmv,.3gp,.mkv,.flv //音频类型 WMA、MP3,wav //网页类型 html

CSS权重

标签选择器计算权重公式继承或者 *0,0,0,0每个元素(标签选择器)0,0,0,1每个类,伪类0,0,1,0每个ID0,1,0,0每个行内样式 style""1,0,0,0每个!important 重要的∞ 无穷大

转换blob类型的数据,然后进行下载各种文件

转换blob类型的数据,然后进行下载各种文件 ress //返回的数据流 var blob new Blob(ress, {type: application/vnd.ms-excel;}); //type这里表示xlsx类型 var link document.createElement(a); var href window.URL.createObjectURL(blob); //创建下载的链接 li…