ES6-数组1-扩展运算符

此文为学习笔记，参考 ES6入门-数组的扩展（阮一峰）

扩展运算符

含义

扩展运算符（spread）是三个点(...)，把数组转换为逗号分隔的参数序列。

console.log([1, 2, ...[3, 4, 5], 6]);    //[1,2,3,4,5,6]

主要运用于函数调用
用于形参：

function push(array, ...items) {
    array.push(...items)
}
let a1 = [1, 2];
push(a1, 3, 4, 5);
console.log(a1);    //[1, 2, 3, 4, 5]

用于实参：

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

扩展运算符和正常的函数参数可以结合使用

function f(a, b, c, d, e) {
    console.log(...arguments);    //1,2,3,4,5
}
const arry = [2, 3];
f(1, ...arry, 4, ...[5])

扩展运算符后面还可以使用表达式

let odd = true;
const arry = [...(odd ? [1, 3, 5] : [2, 4, 6]), 10];    //[1, 3, 5, 10]

⚠️注意：只有函数调用时，扩展运算符才可以放在圆括号里，否则会报错。

console.log((...[1, 2]));
//Uncaught SyntaxError: Unexpected token '...'
console.log(...[1, 2])
//1 2

替代函数的apply()方法

替代apply

es6之前如果需要将数组转成函数的参数，会使用apply()方法

function add(a, b, c) {
    return a + b + c;
}
var arr = [3, 4, 5];
add.apply(null, arr); // ES5 的写法

add(...arr); //ES6 的写法

实际样例1

Math.max.apply(null, [5, 51, 54, 3, 1]); // ES5 的写法

Math.max(...[5, 51, 54, 3, 1]); // ES6 的写法

样例2

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2); //ES5 的写法

arr1.push(...arr2); //ES6 的写法

Function.prototype.apply()

在这，补充一下关于apply()源码手写

apply()方法ES3版

实现es3apply

Function.prototype.es3apply = function (context, arr) {
    var target = context || window;
    target.fn = this;
    var result;
    if (!arr) {
        result = target.fn();
    } else {
        var args = [];
        for (let i = 0; i < arr.length; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('target.fn(' + args + ')');
    }
    return result;
}

应用样例

function Project() {
    return {
        type: 'PRD',
        path: 'https://domain-prd.com',
        getPath: function () {
            return this.path
        }
    }
}

var envDev = {
    type: 'DEV',
    path: 'http://127.0.0.1:8080'
}

var myPro = new Project();

console.log(myPro.getPath());   //https://domain-prd.com

console.log(myPro.getPath.es3apply(envDev));    //http://127.0.0.1:8080

apply()方法ES6版

Function.prototype.es6apply = function (context, arr) {
    var target = context || window;
    target.fn = this;
    var result;
    if (!arr) {
        result = target.fn();
    } else {
        result = target.fn(...arr)
    }
    return result;
}