本文介绍了深入理解es6之数据解构的用法，现在分享给大家，也给大家做个参考。
一 对象解构
对象解构语法在赋值语句的左侧使用了对象字面量
let node = { type: true, name: false}//既声明又赋值let { type, name} = node;//或者先声明再赋值let type, name({type,name} = node);console.log(type);//trueconsole.log(name);//false
type与name标识符既声明了本地变量，也读取了对象的相应属性值。
解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时，会抛出错误。
默认值
当你使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为undefined
let node = { type: true, name: false}, type, name, value;({type,value,name} = node);console.log(type);//trueconsole.log(name);//falseconsole.log(value);//undefined
你可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。
let node = { type: true, name: false }, type, name, value;({ type, value = true, name} = node);console.log(type);//trueconsole.log(name);//falseconsole.log(value);//true
赋值给不同的本地变量名
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);
type:localtype这种语法表示要读取名为type的属性，并把它的值存储在变量localtype上。该语法与传统对象字面量的语法相反
嵌套的对象结构
let node = {type: "identifier",name: "foo",loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 }}}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}
当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中（loc: {start: locals,end: locale}）
二 数据解构
数组解构的语法看起来跟对象解构非常相似，只是将对象字面量换成了数组字面量。
let colors = ["red", "blue", "green"];let [firstc, secondc, thirdc, thursc = "yellow"] = colors;console.log(firstc//redconsole.log(secondc);//blueconsole.log(thirdc);//greenconsole.log(thursc);//yellow
你也可以在解构模式中忽略一些项，并只给感兴趣的项提供变量名。
let colors = ["red","green","blue"];let [,,thirdc] = colors;console.log(thirdc);//blue
thirdc之前的逗号是为数组前面的项提供的占位符。使用这种方法，你就可以轻易从数组任意位置取出值，而无需给其他项提供名称。
解构赋值
let colors = ["red","green","blue"], firstcolor = "black", secondcolor = "purple";[firstcolor,secondcolor] = colors;console.log(firstcolor);//redconsole.log(secondcolor);//green
数组解构有一个非常独特的用例，能轻易的互换两个变量的值。
let a =1,b =2;[a,b] = [b,a];console.log(a);//2console.log(b);//1
嵌套的解构
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]);//greenconsole.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 }},range: [0, 3]}let {type,name: localname,loc: { start: { line: ll }, end: { column: col }},range: [, second]} = node;console.log(type);//identifierconsole.log(localname);//fooconsole.log(ll);//1console.log(col);//4console.log(second);//3
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
react-native桥接android如何实现，具体步骤又是什么？
详细解读angularjs中$window窗口对象的概念
在vuejs中如何监听window.resize具体该怎么实现？
angularjs中如何实现页面自适应？
在vue中如何开发自定义指令directive
以上就是详细解读es6的数据解构的详细内容。