此文为学习笔记,参考 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.comconsole.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;}