<script>
//1.es6允许使用箭头=>定义函数
var f = v => v;
f(44);//44
/*
var f = function (v) {
return v;
}
*/
//2.如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var a = () => 5;
a();//5
/*
var a = function () {
return 5;
}
*/
var sum = (num1, num2) => num1 + num2;
sum(3,4);//7
/*
var sum = function (num1, num2) {
return num1 +num2;
}
*/
//3.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var plus = (num1,num2) => { return num1 + num2; };
plus(5,6);//11
// 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
let getTempItem = id => ({ id: id, name: 'Temp' });
getTempItem(4);//{ id: 4, name: 'Temp' }
//4.箭头函数可以与变量解构结合使用
const full = ({ first, last }) => first + ' ' + last;
full({first: 'john', last: 'beer'});//john beer
/*
function full(person) {
return person.first + ' ' + person.last;
}
*/
//5.箭头函数使得表达更加简洁。
const isEven = n => n % 2 === 0;
isEven(4);//true
const square = n => n * n;
square(4);//16
//6.箭头函数的一个用处是简化回调函数。
/*
$re = [1,2,3].map(function (x) {
return x * x;
});
*/
[1,2,3].map(x => x * x);//[1,4,9]
/*
var result = [2,1,3,5,4,7,9,8].sort(function (a, b) {
return a-b;
});
*/
[2,1,3,5,4,7,9,8].sort((a, b) => a - b);//[1,2,3,4,5,7,8,9]
//7.下面是 rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;
numbers(1,2,3);//[1,2,3]
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1,2,3,4,5); [1,[2,3,4,5]]
//8.使用注意点:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。也就是说this对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() {
setTimeout(() => {
console.log(this.id);
}, 100)
}
var id = 21;
foo.call({ id: 42 });
/*
上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
* */
</script>