阮一峰的ES6---变量的结构赋值-原创手记-慕课网

一，数组的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为结构(destructuring),以前，为变量赋值只能直接赋值;
let a =1;let b =2;let c=3;
在ES6中可以写成:

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

可以从数组中提取值，按照对应位置,对变量赋值，本质上这是属于"模式匹配"的写法：只要等号两边的模式相同，左边的变量会就被赋予对应的值;

let [foo,[ [bar],baz] ] = [1,[ [2] ,3] ];
foo//1
bar//2
baz//3

let [ , , third] = [1,2,3];
third//3

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

let [head ,...tail] =[1,2,3,4];
head //1
tail //[2,3,4]

let  [x,y, ...z] =["a"];
x//"a"
y//undefined结构不成功的话变量的值就等于undefined
z//[]

不完全结构，即等号左边的模式，只会匹配一部分的等号右边的数组，这种依然可以解构成功;

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

let [a,[b],d] = [1,[2,3],4];
b//2

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

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

let [foo=true] = []; //foo为true
let [x,y="b"] = ["a"];//x="a",y="b"
let [x=1] = [undefined];//x =1;
let [x=1] = [null];//x =null

ES6内部使用严格相等运算符(===)判断一个位置是否有值，所以如果一个数组成员严格不等于undefined，那么默认值是不会生效的

 ' '==false;//true  ' ' ===false//false
[]==false//true     []===false//false
0==false//true     0===false//false

二，对象的解构赋值
解构不仅可以用于数组，还可以用于对象

let {name,age} = {name:"MGT360124",age:18};
name//MGT360124
age//18

数组的元素是按次序排列的，变量的取值由他的位置决定,但是对象的属性没有次序，变量必须与属性同名，才能取得到正确的值；

let {name,age,sex} ={name:"MGT360124",age:18}
sex//undefined

let obj = {name :"MGT360124",age:18};
let {name:n,age:a} = obj
n//MGT360124
a//18

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

let [a,b,c,d,e] = "hello";
e//o
let {length:len} = 'hello'
len//5
//类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值

四，数值和布尔值的解构赋值
解构赋值时，如果等号右边的是数值或布尔值，则会转为对象;
解构赋值的规则是: 只要等号有的值不是对象或者数组,那就先将其转换为对象,由于undefined和null无法转为对象，所以对他们进行解构赋值为报错。

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

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

五，函数参数的解构赋值

function add([x,y]){
 return x+y;
}
add([1,2]);//3

六，圆括号问题
ES的规则是：只要有可能导致解构的歧义就不得使用圆括号；
七，用途：变量的解构赋值用途很多
(1)交换变量的值

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

(2)从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将他们放在数组或者对象返回，利用解构赋值，取出这些值就非常方便

function example () {
          return [1,2,3];
}
let [a,b,c] = example();

function example() {
 return {name:"MGT360124",age:18}
}
let {name,age} =example();

(3)函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来

//参数是一组有次序的值
function  add([x,y,x]){   }
add([1,2,3])
//参数是一组无次序的值
function add ( {x,y,z} ) {     }
add({y:1,z:2,x:3});

提取json数据：解构赋值对提取json对象中的数据尤其有用

let personData = {
name:"MGT360124",
age:18,
sex:"M",
city:"秦皇岛",
job:"student",
}
let {name,age,sex,city,job} = personData;
console.log(name,age,sex,city,job);

遍历Map结构

let 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

字符串和数值的扩展

字符串的遍历器接口
ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历

for(let str of "MGT"){
console.log(str)
}
//M
//G
//T

includes()和startsWith(),endsWith()0
ES5只有indexOf()方法，可以用来确定一个字符串是否包含在另一个字符串，ES6又提供了三种方法:
includes()：返回布尔值，表示是否找到了参数字符串；
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

let name = "MGT360124";
name.includes("T");//true
name.startsWith("i");//true
name.endsWith("4");//true

repeat()方法返回一个新字符串,表示将原字符串重复n次

'MGT360124'.repeat(3);
//"MGT360124MGT360124MGT360124"
'name'.repeat(0) ;
//' '

padStart()和padEnd()
字符串长度补全功能，如果某个字符串不够指定长度，那么会在头部或者尾部补全,padStart()用于头部补全，padEnd()用于尾部补全
x.padStart(4,'ab'); //'abax'
x.padEnd(4,"ab");//'xaba'
padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
模板字符串
传统的js语言，输出模板通常是：

$(selector).append(
"There are <b>"+basket.count+"</b>"+"items in your basket,"+
 "<em>"+basket.onSale+"</em> are on sale!"
);

这种写法是相当繁琐的，为此ES6引入了模板字符串（template string）是增强版的字符串,用反引号（`）标识，他可以普通字符串使用,也可以用来定义多行字符串,或者是在字符串中嵌入变量;
那么上面的代码可以这样写:

$(selector).append(
 `there are <b>${basket.count}</b> items in your basket ,<em>${basket.onScale}</em> are on sale!`);