...扩展符的使用

...扩展符的使用

• rest参数

1. 允许函数接收无限的参数
2. rest参数只能是最后一个参数，否者会报错

function <function name> (…args)
og
function <function name> (a,b, …args)
复制代码

3.应用

function sumOf(){
    var sum = 0; 
    for (var i = 0; i < arguments.length; i++){
         sum += arguments[i];
    }
    console.log(sum)
    return sum;
}

function exectueWithSpread2(type, ...params) {
    var actions = {
        sum: sumOf
    }
    if (actions[type]) {
        actions[type].apply(null, params)
    }
}
复制代码

• 克隆对象

var obj = {
    id: 1,
    name: 'test'
}

var clone = {...obj}
clone.name = 'clone tester'
console.log(clone.name)
console.log(obj.name)
复制代码

• 合并对象

var obj1 = {
    a: 1,
    b: 2
}

var obj2 = {
    c: 1,
    d: 2
}

var obj3 = {...obj1, ...obj2}
console.log(obj3)
复制代码

• 克隆数组

var arr = [1, 2, 3]
var cloneArr = [...arr]
cloneArr.push(4)
console.log(cloneArr)
console.log(arr)
复制代码

• 合并数组

var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
var arr3 = [...arr1, ...arr2]
console.log(arr3)
复制代码

• 转换迭代器对象为数组对象

var map = new Map([[2, 3], [1, 2], [3, 4]])
var arr = [...map]
console.log(arr)
复制代码

• 展平多维数组

1. 使用扩展符展平数组，只适用二维数组

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
复制代码

2. 二维以上数组

function flattenArray(arr) {
  const flatten = [].concat(...arr);
  return flatten.some(item => Array.isArray(item)) ? 
    flattenArray(flatten) : flatten;
}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
复制代码

参考链接