浅谈ES6的解构赋值

浅谈ES6 的解构赋值

一，数组的解构赋值

ES6允许按照一定的模式，从数组和对象中提取，对边力量进行复制，被称为结构，ES6以前我们对变量赋值只能直接赋值；
var a = 1;
var b = 2;
在ES6中可以写成：
var [a,b] = [1,2];
可以直接提取数组的值，按照变量的位置对变量直接赋值，本质就是“模式匹配”，即只要等号两边的模式相同，左右两边的变量就会被赋予相对应的值。
var [a,[ [b],[c] ] ] = [1, [ [2], 3] ];
a//1
b//2
c//3

不完全解构，即等号左边的模式，只会匹配一部分等号右边的数组，这种依旧可以解构成功。
var [x,y] = [1,2,3]
x//1
y//2

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

var [o,p,q] = [1,[2,3],4]
p//[2,3]

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

var [zz = true] = []
//zz的值为 true;

let [a, b = “ha”] = [“a”]
//a = “a”, b = “ha”

var [x=1] = [undefined]
// x = 1
Note: ES6内部是使用（===）来判定是否有值的

var [y = 1] = [null]
//null

二，对象的解构赋值

var {name,age} = {name:‘Faith’,age:18};
name//Faith;
age:18;

数组的元素是按照次序排列的的，变量的取值有他的位置决定，但是对象的属性没有次序，变量与属性同名才可以正确取值。

三，函数的解构赋值

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

四，字符串的解构赋值

为什么字符串也可以解构赋值呢，其实是因为字符串被转换成了一个类似数组的对象；
var [a,b,c,d,e] = ‘hello’
a//h

Note：类似数组的对象都有length属性，也可以对其进行赋值

var {length:len} = ‘hello’
len//5

五，解构赋值的用途

1，变量交换

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

2,从函数中返回多个值

函数只能返回一个值，如果要返回多个值，智能将他们放在数组或者是对象返回，但是利用解构赋值，取出这些值就会非常方便。
function eg () {
return [1,2,3];
}
var [a,b,c] = eg();

function eg() {
return {name:“Faith”,age:18}
}
var {name,age} =eg();

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:“Faith”,
age:18,
sex:“F”,
city:“郑州”,
job:“teacher”,
}
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 “FAITH”){
console.log(str)
}
//F
//A
//I
//T
//H

includes()和startsWith(),endsWith()

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

let name = “Faith4”;
name.includes(“T”);//false
name.startsWith(“i”);//false
name.endsWith(“4”);//true
repeat()方法返回一个新字符串,表示将原字符串重复n次

‘Faith’.repeat(3);
//“FaithFaithFaith”
‘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）是增强版的字符串,用反引号（``）标识，他可以普通字符串使用,也可以用来定义多行字符串,或者是在字符串中嵌入变量;
html =<li> <p>${obi.pname}</p> </li>