一 对象解构
对象解构语法在赋值语句的左侧使用了对象字面量
- let node = {
- type: true,
- name: false
- }
- // 既声明又赋值
- let {
- type,
- name
- } = node;
- // 或者先声明再赋值
- let type, name
- ({type,name} = node);
- console.log(type);//true
- console.log(name);//false
type 与 name 标识符既声明了本地变量, 也读取了对象的相应属性值.
解构赋值表达式的值为表达式右侧的值. 当解构表达式的右侧的计算结果为 null 或者 undefined 时, 会抛出错误.
默认值
当你使用解构赋值语句时, 如果所指定的本地变量在对象中没有找到同名属性, 那么该变量会被赋值为 undefined
- let node = {
- type: true,
- name: false
- },
- type, name, value;
- ({type,value,name} = node);
- console.log(type);//true
- console.log(name);//false
- console.log(value);//undefined// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
你可以选择性地定义一个默认值, 以便在指定属性不存在时使用该值.
- let node = {
- type: true,
- name: false
- },
- type, name, value;
- ({
- type,
- value = true,
- name
- } = node);
- console.log(type);//true
- console.log(name);//false
- console.log(value);//true// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
赋值给不同的本地变量名
- let node = {
- type: true,
- name: false,
- value: "dd"
- }
- let {
- type: localType,
- name: localName,
- value: localValue = "cc"
- } = node;
- console.log(localType);
- console.log(localName);
- console.log(localValue);\// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
type:localType 这种语法表示要读取名为 type 的属性, 并把它的值存储在变量 localType 上. 该语法与传统对象字面量的语法相反
嵌套的对象结构
- let node = {
- type: "Identifier",
- name: "foo",
- loc: {
- start: {
- line: 1,
- column: 1
- },
- end: {
- line: 1,
- column: 4
- }// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
- }
- }
- let {
- loc: localL,
- loc: {
- start: localS,
- end: localE
- }
- } = node;
- console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
- console.log(localS);//{line: 1,column: 1}
- console.log(localE);//{line: 1,column: 4}// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
当冒号右侧存在花括号时, 表示目标被嵌套在对象的更深一层中 (loc: {start: localS,end: localE})
二 数据解构
数组解构的语法看起来跟对象解构非常相似, 只是将对象字面量换成了数组字面量.
- let colors = ["red", "blue", "green"];
- let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
- console.log(firstC//red
- console.log(secondC);//blue
- console.log(thirdC);//green
- console.log(thursC);//yellow// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
你也可以在解构模式中忽略一些项, 并只给感兴趣的项提供变量名.
- let colors = ["red","green","blue"];
- let [,,thirdC] = colors;
- console.log(thirdC);//blue// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
thirdC 之前的逗号是为数组前面的项提供的占位符. 使用这种方法, 你就可以轻易从数组任意位置取出值, 而无需给其他项提供名称.
解构赋值
- let colors = ["red","green","blue"],
- firstColor = "black",
- secondColor = "purple";
- [firstColor,secondColor] = colors;
- console.log(firstColor);//red
- console.log(secondColor);//green// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
数组解构有一个非常独特的用例, 能轻易的互换两个变量的值
- let a =1,b =2;
- [a,b] = [b,a];
- console.log(a);//2
- console.log(b);//1// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
嵌套的解构
- let colors = ["red", ["green", "blue"], "yellow"];
- let [firstC, [, ssc]] = colors;
- console.log(ssc);//blue
剩余项
- let colors = ["red", "green", "blue"];
- let [firstC, ...restC] = colors;
- console.log(firstC);
- console.log(...restC);
- console.log(restC[0]);//green
- console.log(restC[1]);//blue
使用剩余项可以进行数组克隆
- let colors = ["red", "green", "blue"];
- let [...restC] = colors;
- console.log(restC);//["red", "green","blue"]
三 混合解构
- let node = {
- type: "Identifier",
- name: 'foo',
- loc: {
- start: {
- line: 1,
- column: 1
- },
- end: {
- line: 1,
- column: 4
- }// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
- },
- range: [0, 3]
- }
- let {
- type,
- name: localName,
- loc: {
- start: {
- line: ll
- },
- end: {
- column: col
- }
- },
- range: [, second]
- } = node;
- console.log(type);//Identifier
- console.log(localName);//foo
- console.log(ll);//1
- console.log(col);//4
- console.log(second);//3// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/b4f8b0936a8929914d9d98d6de3a4a50.html