es6进修笔记-箭头函数_v1.0
箭头函数运用要领
var f = v => v; //平常函数合营箭头函数写法,这里而且是传参的
//相当于
var f = function(v) {
return v;
};
/*------------------------*/
var f = () => 5; //匿名函数合营箭头函数写法
// 等同于
var f = function () { return 5 };
/*------------------------*/
//传多个参数
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
/*------------------------*/
//传入一个id参数,然后返回一个对象
const id = 'ooo';
const getTempItem = id => ({ id: id, name: "Temp" });
//直接返回一个新对象{ id: 'ooo', name: 'Temp' }
/*------------------------*/
//传入一个对象,而且能够直接剖析对象,然后获取到对象的元素
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) { //平常的写法须要借助一个对象变量来挪用对象属性
return person.first + ' ' + person.last;
}
/*------------------------*/
// 一般函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
/*------------------------*/
// 一般函数写法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭头函数写法
var result = values.sort((a, b) => a - b);一个比较完全的例子:
const names = ['will', 'jack', 'peter', 'steve', 'john', 'hugo', 'mike'];
const newSet = names
//返回[ { id: 0, name: 'will' },{ id: 1, name: 'jack' },.....],一个对象,花样为{id,name},id是本来数组的中的位置
.map((name, index) => ({
id: index,
name: name
}))
//对这个对象的id值举行处置惩罚(只保留偶数),而且返回一个新的对象[ { id: 0, name: 'will' }, { id: 2, name: 'peter' },....]
.filter(man => man.id % 2 == 0)
//将剩下的元素转换为一个包括当前元素华夏名字的单位数组[ [ 'will' ], [ 'peter' ], [ 'john' ], [ 'mike' ] ]
.map(man => [man.name])
//不停兼并相邻的两个数组,末了获得一个总数组
.reduce((a, b) => a.concat(b));
console.log(newSet);//返回[ 'will', 'peter', 'john', 'mike' ]
相当于
const newSet = names
.map(function (name,index) {
return {'id':index,'name':name}
})
.filter(function (man) {
return man.id % 2 == 0
})
.map(function (man) {
return [man.name];
})
.reduce(function (a,b) {
return a.concat(b);
});箭头函数的this
箭头函数没有自身的this,也就不能用call()、apply()、bind()这些要领去转变this的指向。
箭头函数的this是牢固的,都指向函数定义时的作用域,重要是由于他自身并有this,所以要指向外层代码的this
在箭头函数内里,函数体内的this对象，就是定义时地点的对象，而不是运用时地点的对象。
由于箭头函数自身没有this,所以不能够看成组织函数，也就是说，不能够运用new敕令，否则会抛出一个毛病。
箭头函数不能够运用arguments对象，该对象在函数体内不存在。假如要用，能够用Rest参数替代。
箭头函数也不能够运用arguments、super、new.target.也不能够运用bind
箭头函数不能够运用yield敕令，因而箭头函数不能用作Generator函数。
箭头函数内部的简朴逻辑:
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// 运用babel将上述es6代码转译为ES5代码
function foo() {
var _this = this; //能够看到这里是经常使用的保留当前this作用域的做法
//由于内层代码能够接见外层代码的变量,所以能够运用到这个被保留的this
setTimeout(function () { //由于setTimeout传入函数的话,会被全局对象挪用,所以this会被指向到全局对象,能够参考setInterval
console.log('id:', _this.id);
}, 100);
}关于明白箭头函数的样例:
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数,this被(箭头函数)绑定在定义时地点的作用域（即Timer函数)
setInterval(() => this.s1++, 1000);
// 平常函数,setInterval在传入函数作为参数的时刻,会以全局作用域挪用
setInterval(function () {
this.s2++;//在全局对象下并没有s2
}, 1000);
}
var timer = new Timer(); //new了以后,this指向就指向了新对象timer
setTimeout(() => console.log('s1: ', timer.s1), 3100);
//由于没有找到Timer的s2,所以一向没有转变他的值
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0由setInterval（）实行的代码会在零丁的实行上下文环境中运转。因而，被挪用函数的this关键字将被设置为窗口（或全局）对象，
另有一个测试this的例子
const obj = {
msg: 'ping',
ping: () => this.msg
};
//由于箭头指向了全局作用域,所以返回undefined
console.log(obj.ping()); //返回undefined
//设置了一个全局作用域下的变量,由于自身箭头函数指向了全局,所以能够一般返回
var msg = 'bang!';
console.log(obj.ping()); //返回bang!不过须要注重的是,不能在node下测试,由于node下的全局作用域并非global,而是跟module.exports有关
Meaning of “this” in node.js modules and functions
参考援用:
ranyifeng的es6入门 我是买了实体书然后再看电子版的
