本文记录了一些 ES6 函数相关的改动,比较重要的就是箭头函数及箭头函数内部 this 的变化,其他一些不常见的概念我也仅仅是看了看,并没有实际操作测试效果。待需要用到的时候再研究。
const add = (...values) => {
let sum = 0;
for (let value of values) {
sum += value;
}
return sum;
}
console.log(add(10, 4, 1, 5));
扩展运算符就是三个点 ...
,将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3, 4]);
// 1 2 3 4
console.log(1, ...[2, 3, 4], 5);
// 1 2 3 4 5
扩展运算符用于函数调用
function sum(a, b) {
return a + b;
}
var numbers = [2, 17];
console.log(sum(...numbers));
// 19
function f(v, w, x, y, z) {/*...*/}
var args = [1, 2];
f(-1, ...args, 2, ...[3]);
替代 ES5 的 apply,ES5 中如果要将一个数组转为参数传递,需要用到 apply 方法,而 ES6 中拓展运算符则替代了这一功能。
let max;
// ES5 写法
max = Math.max.apply(null, [14, 3, 77]);
console.log(max);
// ES6 写法
max = Math.max(...[11, 2, 100]);
console.log(max);
另外一个例子是在一个数组后追加元素的例子。
// ES5 写法
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// [ 1, 2, 3, 4, 5, 6 ]
// ES6 写法
var arr3 = [1, 2, 3];
var arr4 = [4, 5, 6];
arr3.push(...arr4);
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]
// ES5
var f_es5 = function (v) {
return v;
}
// ES6
var f_es6 = v => v;
如果不需要参数或需要多个参数,则吧多个参数用括号括起来
var f_es6_1 = () => 5;
// 等同于
var f_es5_1 = function () { return 5; };
var f_es6_2 = (value1, value2) => value1 + value2;
// 等同于
var f_es5_2 = function (value1, value2) { return value1 + value2; };
this 对象的变化,使用箭头函数,this 是 undefined,而使用普通函数,this 返回的是全局对象。
setInterval(() => console.log(this), 1000);
// undefined
setInterval(function () { console.log(this); }, 1000);
// 返回全局对象
箭头函数中是没有 this 指针的,如果在箭头函数中打印 this 有具体的值,是因为其使用了外层代码块的 this。如下案例来自书中。
// ES6
function foo() {
setTimeout(() => {
console.log('id', this.id);
}, 100);
}
// 转为 ES5 表达就是类似如下代码
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}