扩展运算符

[18888628835]

扩展运算符

基本用法

扩展运算符实际上就是...运算符，它可以将一个数组转为逗号分割的参数

以下是例子:

console.log(...[1,2,3]) // 1 2 3
console.log(1,...[2,3,4],5) //1 2 3 4 5
[...document.querySelectorAll('div')] //div div div

这个运算符主要用来做函数的调用

function fn(x,y){
	return x + y
    }
let arr =[1,2]
fn(...arr) //3

上面的代码中，将数组用扩展运算符处理后，数组就变成参数

扩展运算符可以跟正常的参数一起使用

function fn(a,b,c,d,e){
	console.log(a,b,c,d,e)
    }
let arr=[2,3,4]
fn(1,...arr,5) //1 2 3 4 5

注意：
只有函数调用时，才能放在圆括号中，否则会报错

(...[1,2,3]) //Uncaught SyntaxError: Unexpected token '...'

在es5时，如果我们想在把一个数组中的值当成函数中的参数，我们使用的是apply方法

function fn(x,y,z){console.log(x+y+z)}
fn.apply(null,[1,2,3]) //6

现在，有了扩展运算符，我们完全没必要这么做

function fn(x,y,z){console.log(x+y+z)}
fn(...[1,2,3]) //6

我们以前使用Math.min.apply来求数组中的最小数

Math.min.apply(null,[1,2,3,4,5,6]) //1

现在我们可以直接使用扩展运算符

Math.min(...[1,2,3,4,5,6]) //1
//等同于
Math.min(1,2,3,4,5,6)

当以前我们需要连接两个数组时，一般都使用concat或者使用Array.prototype.push.apply

let a=[1,2,3]
let b=[4,5,6]
a.concat(b) //[1,2,3,4,5,6]
Array.prototype.push.apply(a,b) //[1,2,3,4,5,6]

现在我们可以用扩展运算符来直接push,结果是一样的

a.push(...b)//[1,2,3,4,5,6]

扩展运算符的常见用途

1.克隆数组

在以前，由于数组是复杂数据结构，当我们直接给予赋值时，会把保存的地址赋值过去,所以我们不得不变通来复制

let a=[1,2,3]
let b= a //这种方法并不能克隆，只是传递地址
let c=a.slice() 使用slice克隆
let d=a.concat([]) //使用这个方法也可以克隆

有了扩展运算符，我们可以很方便进行克隆

let e=[...a] // [1,2,3]
e[0]=0 // e为[0,2,3]
a // [1,2,3] 不影响a

2.合并数组

我们甚至也不需要用push或者concat来连接数组，直接用这个方法

let a=[1,2,3]
let b=[4,5,6]
let c=[...a,...b] //[1,2,3,4,5,6]

需要注意：js所有内置的方法都是浅拷贝，当数组内包含的是复杂数据类型时，对其进行修改会改变新的数组

let a=[{name:1}]
let b=[{age:2}]
let c=[...a,...b] //[{name:1},{age:2}]
a[0].name=2
c //[{name:"qiuyanxi"},{age:2}]

3.与解构赋值结合

let [b,...c]=[1,2,3,4,5]
b // 1
c // [2,3,4,5]
let [...c,b]=[1,2,3,4,5]
b //Uncaught SyntaxError: Rest element must be last element
c //Uncaught SyntaxError: Rest element must be last element

上面代码中，使用结构赋值与扩展运算符相结合的形式来赋值数组，会发现，浏览器报错，要我们将扩展运算符的参数放在最后才有效

4.字符串

我们以前如果想要将字符串变成数组，我们会怎样做？

Array.from('hello') // ["h", "e", "l", "l", "o"]

扩展运算符可以做更多的事
[...'hello'] // ["h", "e", "l", "l", "o"]

5.伪数组

我们还可以使用扩展运算符将伪数组变成真正的数组

function fn(){
	return [...arguments]
}
fn(1,2,3) //[1,2,3]

6.用于具备 iterator 接口的数据

例如 Map 数据解构和 Set 数据解构就可以用

//数组去重
let set=new Set([1,1,2,3])
[...set] //[1,2,3]

对于没有部署iterator接口的数据解构，使用这个会报错

const obj = {a: 1, b: 2};
let arr = [...obj]; 
//Uncaught TypeError: obj is not iterable
    at <anonymous>:2:15