此文为学习笔记,参考 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;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。