ES6学习-展开运算符(...) 的使用

347 阅读1分钟

1,含义

展开运算符(...)是将一个数组转为类函数参数序列;

console.log(...[1,2,3])   //1 2 3
function add(x,y){
    return x+y;
}
let arr=[5,8]
add(...arr);  // 13

2,替代 apply 方法

扩展运算符与apply一样是展开数组,可将数组转为函数的参数

function add(x,y,z){
   console.log(x+y+z)
};
var arr = [6,7,8];
//ES5写法  :         
add.apply(null,arr); //21
//ES6写法  :         
add(...arr);  //21

3,常用情景

可以合并数组

var arr1 = [1,2];
var arr2 = [3,4,5];
var arr3 = [7,,8];
[...arr1,..arr2,...arr3] //[1,2,3,4,5,7,8]

二维数组降维

var arr = [1,2,[3,4,5]];
var newArr = [].concat(...arr); //[1,2,3,4,5]

多维数组扁平化

var arr = [1,[2,[3,[4,5]]]];
function newArr = (arr)=>{
  let  hasArr = (item)=>{
   return Array.isArray(item)
 }
  while(arr.some(hasArr )){
  arr = [].concat(...arr)
  }
  return arr;
}
newArr(arr);   //[1,2,3,4,5]

字符串转数组

[...'string'] 
输出:["s", "t", "r", "i", "n", "g"]

解构赋值

const [a,...b] = [1,2,3,4]
//a = 1
//b = [2,3,4]