变量的结构赋值

一，数组的解构赋值
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
0false//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 “+basket.count+””+“items in your basket,”+
“”+basket.onSale+" are on sale!"
);
这种写法是相当繁琐的，为此ES6引入了模板字符串（template string）是增强版的字符串,用反引号（）标识，他可以普通字符串使用,也可以用来定义多行字符串,或者是在字符串中嵌入变量; 那么上面的代码可以这样写: $(selector).append(there are $basket.count</b>itemsinyourbasket,<em>${basket.onScale} are on sale!`);