es6数组扩展运算符,es6展开运算符作用
这篇文章给大家带来了一些关于javascript的知识，包括关于扩展运算符的相关问题，S6的扩展运算符。它的语法非常简单，用三个点表示“…”。您可以将数组转换为逗号分隔的参数序列。让我们来看看吧。希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
ES6的扩展运算符，它的语法非常简单，它用三个点来表示“…”。您可以将数组转换为逗号分隔的参数序列。
它将iterable对象扩展成它的单个元素。所谓iterable对象，就是任何可以被for of循环遍历的对象，比如数组、字符串、映射、集合、DOM节点等。
基础语法
var array=[1，2，3，4]；
console.log(.数组)；//1 2 3 4
var str= String
console.log(.str)；//S t r i n g
该运算符主要用于函数调用
函数推送(数组，项目){
array.push(.项)；
}
函数add(x，y) {
返回x y；
}
常数numbers=[4，38]；
添加(.numbers) //42在上面的代码中，两行array.push(.项)并添加(.numbers)，都是函数调用，都使用了扩展运算符。这个操作符将一个数组变成一个参数序列。
扩展运算符后面还可以放置表达式
const arr=[
.(x 0？[a] : [])，
b ，
];如果扩展运算符后面跟一个空数组，它将不起作用。
[.[], 1]
//[1]扩展运算符还有许多用法...
一、 替代数组的 apply 方法
使用 Math.max() 函数来获取最大值的用法是：
const m=math . max(1，2，3)；//结果是3
使用 apply 方法结合 Math.max():
但是如果要计算数组中的最大值，显然数组不能直接作为Math.max()的参数，需要对其进行扩展。在ES6之前，我们还需要结合应用来处理：
var arr=[2，4，8，6，0]；
函数最大值(arr) {
return Math.max.apply(null，arr)；
}
console . log(max(arr))；ES6可以通过使用扩展操作符(.)，上面的例子就变成了：
var arr=[2，4，8，6，0]；
console.log(Math.max(.arr))；//3
二、扩展运算符的应用
1. 合并数组
扩展运算符为我们提供了一种全新的合并数组的方式。
//ES5应用书写
var arr1=[0，1，2]；
var arr2=[3，4，5]；
array . prototype . push . apply(arr 1，arr 2)；
//arr1 [0，1，2，3，4，5]您可以使用扩展运算符将数组扩展为参数列表。
const a1=[{ foo:1 }]；
const a2=[{ bar:2 }]；
const a3=a1 . concat(a2)；
常数a4=[.a1，a2]；
a3[0]===a1[0] //true
A4[0]===a1[0] //true在上面的代码中，a3和A4是由两种不同的方法合并而成的新数组，但它们的成员都是对原数组成员的引用，称为浅拷贝。如果引用指向的值被修改，它将同步反映到新数组中。
注意：两种方法都是浅拷贝，使用时要注意。
2. 拷贝数组
数组是一种复合数据类型。如果直接复制，只是把指针复制到底层数据结构，而不是克隆一个全新的数组。
ES5只能使用变通方法来复制数组。
const a1=[1，2]；
const a2=a1 . concat()；
a2[0]=2；
A1 //[1，2]在上面的代码中，A1会返回原数组的克隆体，然后修改a2不会影响a1。
扩展运算符提供了一种复制数组的简单方法。
//复制数组
var array0=[1，2，3]；
var array1=[.array 0]；
console . log(array 1)；//[1, 2, 3]
//复制数组
var obj={
年龄：1，
名称： lis ，
arr:{
a1:[1，2]
}
}
var obj2={.obj }；
console . log(obj 2)；//{age: 1，name: lis ，arr: {…}}记住：数组还是由指针获得的，所以我们没有复制数组本身，只是复制了一个新的指针。
3. 将伪数组转换为数组
伪数组(如NodeList和arguments)类似于数组，但不是数组。他们没有数组的所有方法，比如find，map，filter等。但是可以使用forEach()进行迭代。
您可以通过扩展运算符将其转换为数组，如下所示：
const nodeList=document . query selector all(。行’)；
const nodeArray=[.nodeList]；
console.log(节点列表)；
console . log(node array)；注意：使用扩展操作符将伪数组转换为数组有一些限制。这个类数组必须有一个默认的迭代器，并且是伪遍历的。
4.与解构赋值结合
扩展运算符可与解构赋值结合使用，以生成数组。
//ES5
a=list[0]，rest=list.slice(1)
//ES6
【答，rest]=list以下是其他一些例子：
const[第一，rest]=[1，2，3，4，5]；
第一//1
rest //[2，3，4，5]
const[第一，rest]=[]；
第一个//未定义
rest //[]
const[第一，rest]=[ foo ]；
第一个//foo
Rest //[]注意：如果扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
常数[.butLast，last]=[1，2，3，4，5]；
//报告错误
const[第一，中间，最后]=[1，2，3，4，5]；
//错误
5. 字符串
ES6的扩展语法可以很容易地将一个字符串分成一个由单个字符组成的数组：
[.你好]
//[H ， E ， L ， L ]
6.Map 和 Set 结构，Generator 函数
扩展运算符内部调用数据结构的迭代器接口，所以只要有迭代器接口的对象都可以使用扩展运算符，比如Map结构。
let map=新地图([
[1，一]，
[2，二]，
[3，三]，
]);
让arr=[.map . keys()]；//[1，2，3]生成器函数运行后，返回一个遍历对象，所以也可以使用扩展运算符。
var go=function*(){
产量1；
产量2；
产量3；
};
[.go()] //[1，2，3]在上面的代码中，变量go是一个生成器函数，执行后返回一个遍历对象。如果在这个遍历对象上执行extension操作符，内部遍历得到的值就会变成一个数组。
如果扩展操作符用于没有迭代器接口的对象，将会报告一个错误。
const obj={a: 1，b:2 }；
让arr=[.obj]；//TypeError: CannotSpread不可迭代对象【相关推荐：javascript视频教程，web前端】以上就是说说ES6中扩展运算符的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。