[ES6]Day02—变量的解构赋值、箭头函数

ECMAScript 6 入门 (Day02)

接上篇：[ES6]Day01—ES6简介，Let，Const，块级作用域

2.1 解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

解构：分解数据结构，赋值：为变量赋值

解构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

1）数组解构

//let [a,b,c]=[1,2,3]

let ary=[1,2,3]
let [a,b,c]=ary
 
console.log(a);//1
console.log(b);//2
console.log(c);//3

左边的中括号[]表示解构，a，b，c 表示变量的名字，abc与值123一一对应

2）对象解构

 let person ={name:'zs',age:16};
 let {name,age} =person;
 
 console.log(name);//'zs'
 console.log(age);//16

解构起别名

let person ={name:'zs',age:16};
let {name:myName,age:myAge}=person;//myName myAge 属于别名

console.log(myName);//'zs'
console.log(myAge);//16

3）字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

4）数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

5）函数参数的解构赋值
函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

2.1.1解构赋值的具体应用

1. 交换变量的值

let x = 1;
let y = 2;
[x,y]=[y,x];

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数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

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 结构

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");

2.2 ES6新增语法：箭头函数

ES6中新增的定义函数的方式，用来简化函数定义语法的

()=>{}//匿名函数

//赋值给常量
const fn=()=>{
	console.log('123')
}  
fn();

1）函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(n1,n2){
	return n1+n2;
}
sum(1,2)

----------------------上下写法结果相同---------------------- 

const sum=(n1,n2)=>n1+n2;
sum(1,2)

2）形参只有一个，可以省略小括号

function fn(v){
	return v;
}
----------------------上下写法结果相同---------------------- 

const fn =v=>v;

3）只包含一个表达式，这时花括号和return都能省略

var arr = [1,4,9,16];
const map = arr.map(x => x *2);
console.log(map); //[2, 8, 18, 32]

4）包含多条语句，这时花括号和return都不能省略

var arr = [1, 4, 9, 16]; 
const map1 = arr.map(x => {
    if (x == 4) {
        return x * 2;
    }
}); 
console.log(map1); // [undefined, 8, undefined, undefined]

----------------------对比上下写法---------------------- 

const map2 = arr.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
}); 
console.log(map2); // [1, 8, 9, 16]  

6）箭头函数不绑定this关键字。

箭头函数中的this，指的是函数定义位置的上下文this。

const obj={name:'张三'}
function fn(){
	console.log(this);  //指向obj对象
	return ()=>{ 
	//箭头函数（本身无this，this指向的是其定义的地方），返回匿名函数
		console.log(this);//其定义的地方为fn(), 其this指向obj
	}
}
const resFn=fn.call(obj); //call方法可以改变this指向，将fn中的this 指向obj对象
resFn(); // 相当于fn()中return 的匿名函数()=>{}

输出结果：

拓展：面试题

var obj ={
	age:20,
	say:()=>{
		console.log(this.age)//undefined，因为window没有age属性，所以window.age=undefined
	} 
}
obj.say();//undefined

var age=100;//在此定义了age=100
var obj ={
	age:20,
	say:()=>{
		console.log(this.age) // window.age=100
	} 
}
obj.say();//100;

• 由于obj对象不能产生作用域 ，
• 所以obj对象中定义的箭头函数this，指向全局作用域window。

this 表示当前对象的一个引用，其指向问题：

• 在对象方法中， this 指向调用它所在方法的对象。
• 单独使用 this，它指向全局(Global)对象。
• 函数使用中，this 指向函数的所属者。
• 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
• apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

2.3 ES6新增语法：剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum(first,...args){
	console.log(first) //  10
	console.log(args) //  [20,30]
}
sum(10,20,30)

应用1： 计算未知参数个数 的参数之和

const sum =(...args)=>{
	let total=0;
	args.forEach(item=>total+=item);//遍历参数数组args，计算参数之和
	return total;
}
console.log(sum(10,30))
console.log(sum(10,20,30))

结果：

应用2： 与解构配合使用

let students=['zs','ls','ww'];
let [a,...b]=students;

console.log(a);// 'zs'
console.log(b);// ['ls','ww']

结果：

下一篇：[ES6]Day03—Array数组的拓展

学习网站：《阮一峰 ECMAScript 6入门》