什么是箭头函数?
箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:
不能通过new关键字调用
没有原型, 因为不能通过new调用,所以没有原型
没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的
箭头函数中的this,取决于他的上层非箭头函数的this指向
没有arguments对象,但是可以获取到外层函数的arguments
call,apply,bind不能改变箭头函数的this指向
箭头函数语法由函数参数、箭头、函数体组成.
第一种形式: 没有参数的写法
1 /*
2 (): 空括号代表: 没有传递参数
3 函数体: console.log( 'ghostwu' ), 只有这一句话,可以不加花括号{}
4 */
5 let show = () => console.log( 'ghostwu' );
6 show();
1 //函数体只有一句话,当然也可以加花括号
2 let show = () => { console.log( 'ghostwu' ); }
3 show();
第二种形式: 带一个参数的写法
1 /*
2 第一个a 表示 参数a
3 第二个a 表示函数体a, 相当于 return a
4 */
5 let show = a => a;
6 console.log( show( 10 ) );
1 //如果函数体加了花括号,要用return
2 let show = a => { return a; };
3 console.log( show( 10 ) );
1 // 当然也可以加小括号
2 let show = (a) => { return a; };
3 console.log( show( 10 ) );
1 // let show = ( a ) => console.log( a );
2 // show( 100 ); //100
3
4 // 当函数体有return的时候,必须要加花括号
5 let show = ( a ) => return a; //错误
第三种形式: 带2个以上参数的写法
1 //当函数有2个以上参数的时候,一定要用小括号
2 // let add = ( a, b ) => a + b;
3 // console.log( add( 10, 20 ) ); //30
4
5 // let add = a, b => a + b; //错误
6 // console.log( add( 10, 20 ) );
7
8 //有return需要加花括号
9 // let add = (a, b) => return a + b; //错误
10 // console.log( add( 10, 20 ) );
11
12 // let add = (a, b) => console.log( a + b );
13 // add( 10, 20 ); //30
14
15 // let add = ( a, b ) => { return a + b; };
16 // console.log( add( 10, 20 ) ); //30
返回值如果是对象:
1 //返回值是对象,为了以示区分,用小括号
2 let show = name => ( { ‘user’ : name } );
3 let oUser = show( ‘ghost’ );
4 console.log( oUser.user );
1 //用了return关键字,要用花括号{}
2 let show = name => { return { ‘user’ : name } };
3 let oUser = show( ‘ghostwu’ );
4 console.log( oUser.user );
1 //对象与传参用法
2 let show = ( name, age ) => {
3 return {
4 'uName' : name,
5 'uAge' : age
6 };
7 }
8 let oUser = show( 'ghostwu', 22 );
9 console.log( oUser.uName , oUser.uAge ); //ghostwu, 22
立即表达式的写法:
1 //立即表达式的写法
2 let oUser = ((name, age)=>{
3 return {
4 "uName" : name,
5 "uAge" : age
6 }
7 })('ghostwu', 25 );
8 console.log( oUser.uName , oUser.uAge );
箭头函数不能new
1 let User = () => 'ghostwu';
2 console.log( User() );
3 console.log( new User() ); //报错,箭头函数不能new
箭头函数中的this,取决于他的上层非箭头函数的this指向
1 //this指向他的外层window
2 // var a = 10;
3 // let user = () => {
4 // console.log( this.a ); //this->window
5 // }
6 // user(); //10
1 // 箭头函数中的this取决于外层函数的this
2 function User( name ) {
3 this.name = name;
4 this.getName = () => {
5 console.log(this); //this指向oUser
6 return this.name;
7 };
8 }
9 var oUser = new User( 'ghostwu' );
10 console.log( oUser.getName() );
箭头函数可以简化数组的处理
1 //箭头函数简化数组处理
2 // let arr = [10,100,0,3,-5];
3 // arr.sort( ( a, b ) => a - b );
4 // arr.sort( ( a, b ) => b - a );
5 // console.log( arr );
箭头函数取到的是外层的arguments
1 let show = function( name ){
2 return () => arguments[0]; // ghostwu, 箭头函数获取到的是外层的arguments
3 }
4 let fn = show( 'ghostwu' );
5 console.log( fn() );
call,bind,apply都不能改变箭头函数中this的指向
1 var n1 = 100;
2 var n2 = 200;
3 let add = () => {
4 return this.n1 + this.n2;
5 };
6 console.log( add.call( null ) ); //300
7 console.log( add.apply( null ) );//300
8 console.log( add.bind( null )() );//300
用途
变量的解构赋值用途很多。
(1)交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
(4)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
上面代码可以快速提取 JSON 数据的值。
(5)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。
(6)遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
(7)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");