12.6箭头函数

什么是箭头函数?

箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性:

不能通过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");