ES6中的（...）运算符详细学习_es6...运算符

一、是什么

es6中引入了一个扩展运算符（…）三个点，初期的理解仅当作了es6参数增强中的剩余参数去使用，其实这个运算符还可以用在打散数组，合并数组等操作。

二、为什么

所有的运算符都是为了简化操作，所以本文将对比着学习这个运算符。

三、怎么用

1.首先减少了arguments（伪数组）的使用，但使用剩余参数我们可以得到一个数组，从而方便后续操作。

 function fun(a,...arr){
        console.log(a)
       //此处的arr是可以用数组API的，但arguments不可以 
        console.log(arr)
      }
      fun(1,2,3)
1
2
3
4
5
6

2.打散数组需要使用到apply，但是apply的作用是为了改变this，有点功能浪费。

// es5 的写法 
 function fun(x, y, z) {  
 console.log(x,y,z) 
 }  
 var args = [0, 1, 2];  
//apply的作用是为了改变this，而不是打散数组
 fun.apply(null, args);  
// es6 的写法  
function fun(x, y, z) {  
console.log(x,y,z)
}  
var args = [0, 1, 2];  
fun(...args);
1
2
3
4
5
6
7
8
9
10
11
12
13

3.更加便捷的进行数组操作

• 数组合并：

//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
3
4
5
6
7
8
9
10

• 将一个数组添加到另一个数组的尾部：

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); 
1
2
3
4
5
6
7
8

• 将字符串转换成数组：

//es5写法需要split和join的操作
//...
//es6写法
[...'hello']  
// [ "h", "e", "l", "l", "o" ] 
1
2
3
4
5

4.解构赋值（虽然没有开始上手做项目，但是我认为这个操作在项目中可以用得到很多地方）

• 例1：

let obj = {name:"小明",age:18,hobby:"小红"};
        let newobj  = {
            ...obj
        }
        console.log(newobj)//和obj一样
1
2
3
4
5

• 例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 }
1
2
3
4

5.将伪数组转化成真正的数组

<div>
    <div>
         <div></div>
     </div>
</div>
<script>
    let box = document.querySelectorAll("div");
    let arr = [...box]//这样就可以使用数组家的API啦！
 </script>
1
2
3
4
5
6
7
8
9

学习总结内容可能还不够完善，欢迎指正与补充！！！

6.新补充：可以对数组进行浅克隆

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
2
3
4
5