通过本文主要向大家介绍了es6,解构赋值,Destructur等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）;
一、解构赋值
1. 基本示例
//ES5
var a=1,
b=2,
c=3;
//ES6 数组
let [a,b,c]=[1,2,3];
/*es6 对象
*对象解构赋值时需注意
*被赋值的部分也是个复杂对象时，取值需使用冒号后边那个值
*/
let {name,age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
console.log(name); //cursor
console.log(age); //19
console.log(id); //vc6dfuoc91vpdfoi87s
let {type:tipType,min:minNumber}={type:'message',min:20};
console.log(tipType); //message
console.log(minNumber); //20
console.log(type) //VM626:1 Uncaught ReferenceError: type is not defined
2. 嵌套解构
保证解析对象与赋值对象结构一致即可。
示例如下
let [age, [{name: fname}]] = [20, [{
name: 'qc'
}]];
console.log(age); //20
console.log(fname); //qc
3. 不完全解构
等号左边的模式，只匹配一部分等号右边的数组或对象。
let [name,[age,[fname],[lname]],email]=['steven',[20,['qc'],[]]];
console.log(name); //steven
console.log(age); //20
console.log(fname); //qc
console.log(lname); //undefined
console.log(email); //undefined
坑点注意：
- 当使用let给一些属性进行解构赋值，即便某个值对应位置为空（得到结果为undefined），也不能通过let再次赋值。
- 当进行解构赋值时尽量保证结构一致，当等号右边的部分无法构造出等号左边的的解构，会提示迭代器错误，深入了解请看如下代码：
//因为lname外层是一个数组，而右边的表达式无法解析出对应解构便会报错
let [name,[age,[fname],[lname]],email]=['steven',[20,['qc']]];
//报错信息
VM57:1 Uncaught TypeError: ["steven",[20,["qc"]]] is not iterable
at <anonymous>:1:40
4.解构赋值的默认值
在给对象或者与元素赋值时，可给被赋值的对象设置一个默认值，当被复制对象无法通过解构赋值取到值时会被赋予默认值。
默认值的生效条件是对象的属性值严格等于undefined。
let [temp="string"] = ["tempString"];
console.log(temp); //tempString
let [head, ...other] = [0,1,2,3,4,5,6,7,8,9,10];
console.log(head); //0
console.log(other); //[1,2,3,4,5,6,7,8,9,10];
let {message: msg="Just do it!"} = {};
console.log(msg); //Just do it!
let {color='yellow'} = {color: null}
console.log(color); //null
let {sin,cos,tan,log}=Math;
console.log(Math.sin===sin); //true
console.log(Math.cos===cos); //true
console.log(Math.tan===tan); //true
console.log(Math.log===log); //true
5.字符串解构
const [a,b,c,d,e,f]="hello";
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o
console.log(f); //undefined
字符串在使用解构赋值时有个隐藏属性length
const {length:len}="interesting";
console.log(len); //11
const {length}="Hello world!";
console.log(length);
6.函数参数解构
function({x,y}={x:0,y:0}){
return [x,y];
}
console.log(fun({x:100,y:200})); //[100,200];
console.log(fun({x:100})); //[100,undefined]
console.log(fun({})); //[undefined,undefined]
console.log(fun()); //[undefined,undefined]
二、其他用法
1.交换变量
let a=100,b=200;
[a,b]=[b,a];
2.接收不定参数
- 可用解构赋值的方法接收函数返回的多个参数
- 不定参数可用
...号接收
const fn=()=>({name:'k',age:'t',size:'m'});
let {name,age,size}=fn();
console.log(name);
console.log(age);
console.log(size);
let {id:userid,name:username,age:mage}=fn();
console.log(userid);
console.log(username);
console.log(mage);
let {name,...other}=fn();
console.log(other); //{age: "t", size: "m"}
3.Map对象的遍历解构
var map=new Map();
map.set("id","007");
map.set("name","cursor");
for(let [key,value] of map){
console.log(key+ ' is '+value);
}
// id is 007
// name is cursor
for(let [key] of map){
console.log(key);
}
// id
// name
for(let [,value] of map){
console.log(value);
}
// 007
// cursor