对数组或对象类数据结构，尤其是复杂的JOSN数据结构，要从中取出想要的个别数据，往往会采用遍历方法进行，即麻烦又增加了运行时间。从ES6开始，JS增加了解构进行简化，本质上是打散复杂的数据结构，将其折分为更小的部分(复制出的小结构)，从而使用数据更为方便快捷。
一、对象解构
1.单层对象解构
let node={ //单层对象数据结构
type:"学生",
name:"张小玉",
}
let {type,name}=node;//进行单层对象解构，{变量名，变量名}中的变量名要与对象中的对应，从而将原node.type的使用进行了简化
console.log(type);//输出结果：学生
console.log(name);//输出结果：张小玉
2.选择性对象解构
let node={ //单层对象数据结构
id:1,
number:0325,
type:"学生",
name:"张小玉",
sex:"女",
address:"四海市"
}
let {type,name}=node;//只要变量名能对上，不管数量和顺序
console.log(type);//输出结果：学生
console.log(name);//输出结果：张小玉
3.单层对象解构赋值
let node={ //单层对象数据结构
type:"学生",
name:"张小玉"
};
let type="老师",name="孙小小";//先定义的已赋值的变量
({type,name}=node);//对已存在的变量进行解构赋值，覆盖了原赋值，表达式必须要用小括号包起
console.log(type);//输出结果：学生
console.log(name);//输出结果：张小玉
4.对象解构中的参数默认值
let node={ //单层对象数据结构
type:"学生",
name:"张小玉"
};
let {type,name="XXX",value=true}=node;//对解构中参数设置默认值
console.log(type);//输出结果：学生
console.log(name);//输出结果：张小玉，如果对象数据中没有找到name，则输出为XXX
console.log(value);//输出结果：true
5.给解构变量改名
let node={ //单层对象数据结构
type:"学生",
name:"张小玉"
};
let {type:localType,name:localName}=node;//相当于将type变量改名为localType
console.log(localType);//输出结果：学生
console.log(localName);//输出结果：张小玉
console.log(type);//无输出结果，表示解构中没有type这个变量
6.多层嵌套对象解构
let node={//多层对象数据结构
type:"学生",
name:"张小玉",
loc:{
start:{
line:1,
column:2
},
end:{
line:2,
column:4
}
}
};
let {loc:{start}}=node;//选择性的定义嵌套对象解构体(复制)，从而将遍历才能取得个别数据方法大大简化
console.log(start.line);//输出结果：1
console.log(start.column);//输出结果：2
二、数组解构
1.单层数组解构
let colors=["red","green","blue"]; //单层数组结构
let [firstColor,seconColor]=colors; //进行数组解构，将对应序号的值复制到对应序号变量上
console.log(firstColor);//输出结果：red
console.log(seconColor);//输出结果：green
2.选择性数组解构
let colors=["red","green","blue"];//单层数组结构
let [,,thirdColor]=colors;//选择性数组解构，将不需要的序号处用占位符逗号表示
console.log(thirdColor);//输出结果：blue
3.单层数组解构赋值
let colors=["red","green","blue"];//单层数组结构
let firstColor="black",secondColor="purple";//先定义的已赋值的变量
[firstColor,secondColor]=colors;//对已存在的变量进行解构赋值，覆盖了原赋值
console.log(firstColor);//输出结果：red
console.log(secondColor);//输出结果：green
4.单层数组解构赋值的一个特例应用
//在ES5中交换变量,需要通过一个中间临时变量进行转存
let a=1,b=2,tmp;
tmp=a;a=b;b=tmp;
console.log(a);//输出结果：2
console.log(b);//输出结果：1
//在ES6中交换变更，使用数据解构赋值，不需要中间变量了
let a=1,b=2;
[a,b]=[b,a];
console.log(a);//输出结果：2
console.log(b);//输出结果：1
5.数组解构参数默认值
let colors=["red"];//单层数组结构
let [firstColor,secondColor="green"]=colors;//如果在数组数据中，找不到secondColor则取默认值
console.log(firstColor);//输出结果：red
console.log(secondColor);//输出结果：green
6.多层嵌套数组解构
let colors=["red",["green","lightgreen"],"blue"];//嵌套数组结构
let [firstColor,[secondColor]]=colors;//嵌套数组解构
console.log(firstColor);//输出结果：red
console.log(secondColor);//输出结果：green
7.不定元素数组解构
let colors=["red","green","blue"];//不定元素数组结构
let [firstColor,...restColors]=colors;//定义不定元素数据解构，...restColors因为带有"..."前缀，被认定为不定元素，代表所有剩下的元素
console.log(firstColor);//输出结果：red
console.log(restColors.length);//输出结果：2
console.log(restColors[0]);//输出结果：green
console.log(restColors[1]);//输出结果：blue
三、混合解构(JOSN数据)
let node={//JOSN对象数据结构
type:"学生",
name:"张小玉",
loc:{
start:{
line:1,
column:2
},
end:{
line:2,
column:4
}
},
range:[0,3]
};
let{loc:{start},range:[startIndex]}=node;//定义混合解构
console.log(start.line);//输出结果：1
console.log(start.column);//输出结果：2
console.log(startIndex);//输出结果：0
四、JS解构数据结构注意事项
1.使用let进行解构时，右侧必须要有对应的已初始化了的数据结构，右侧数据不能为null或undefined，否则，程序将抛出错误。
2.在进行对象解构赋值时，表达式必须要用英文状态下的括号包起来，否则，JS会将表达式认为是一个代码块，只有加上小括号后，JS才进行赋值运算过程。
3.不定元素参数必须放到参数序列最后一个，否则将报错。
4.默认参数的使用条件是，将数据结构中无该变量属性或属性为undefinde时才生效。
标签：输出,console,log,JS,解构,let,数据结构,type From： https://blog.csdn.net/m0_74157361/article/details/142278612