<script type="text/javascript">
// 解构赋值
{
let [a,b,c] = [1,2,3];
console.log(a,b,c); //1 2 3
}
//嵌套
{
let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
console.log(a,b,c,d,e,f); //1 2 3 4 5 6
}
// ... (三点运算符)
// 剩余运算符,声誉的部分放在数组中赋值
{
let [a,...b] = [1,2,3,4,5];
// console.log(a,b[3]);
let [c,d,e,f] = b;
console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
// console.log(a);
// console.log(b);
// console.log(c,d,e,f);
}
// 展开运算符,
{
let a = [1,2,3,4,5];
let b = [0,...a]
console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}
// 结构不成功
{
let [a,b,c] = [1,2];
console.log(a,b,c);//c = undefined(不会报错)
}
//不完全解构
{
let [a,b,c] = [1,2,3,4,5];
console.log(a,b,c);// 1 2 3 4,5 还有没有解构
}
//允许默认值
//必须 ===undefined 时才会使用默认值,用 ‘=’设置默认值,默认值可以使用变量,但是变量必须是被声明过的==>注意解构的执行顺序。
{
let [a=1,b=a,c] = [,,3];
console.log(a,b,c); // 1 1 3
}
//对象(键值对)的解构
//与数组的用法一样
{
let user = {
name:"栓单",
age:"21"
}
// name 属性,a 变量 ,age 属性 b 变量
// 等同于 {
// let {name,age} = {name:"栓单",age:"21"} //简写:属性名和变量名相同;
// }
let {name:a,age:b} = user; //正常写法 属性:变量;
console.log(a,b); //栓单 21
}
// 对象的 嵌套
{
let {a,b,c} = {
a:"1",
b:{aa:"aa"},
c:"3"
};
console.log(a, b.aa ,c); //1 aa 3
}
// 变量的交换
// Es5的写法:
// {
// var a = 1; var b = 2;
// console.log(a,b) // 1 2
// //变量交换 -- 需要再声明一个空的媒介
// var c = null;
// //进行交换
// c = a ; a = b ; b = c ;
// console.log(a,b) // 2 1
// //很神奇吧!就是代码有点多,在Es6里三行就搞定。
// }
// Es6的写法:
{
let a = 1;
let b = 2;
let c = 3;
console.log(a,b,c); //1 2
//a,b进行交换
[a,b,c] = [c,b,a];
console.log(a,b,c); //2 1
}
// 函数的返回值
{
function fn(){
return {
name:"栓单",
age:"21",
timer:"2018",
}
}
// 第一种写法==>直接赋值个给对象
let {name,age,timer} = fn();
console.log(name,age,timer); //栓单 21 2018
// 第二种写法==>赋值给变量,在调用变量(对象.键 得出 值)
user = fn();
console.log(user.name,user.age,user.timer);//栓单 21 2018
}
// json 数据的解构
{
// 模拟数据
let obj = {
title:"标题",
info:"扒拉扒拉扒拉",
spans:[
{
s_title:"标签1",
s_info:"标签1-巴拉巴"
},
{
s_title:"标签2",
s_info:"标签2-巴拉巴"
}
],
}
//结构数据
let {title,info,spans} = obj;
console.log(title,info,spans);//标题 扒拉扒拉扒拉 (2) [{…}, {…}]
console.log(spans[0]); // let.html:146 {s_title: "标签1", s_info: "标签1-巴拉巴"}
console.log(spans[1]); // let.html:147 {s_title: "标签2", s_info: "标签2-巴拉巴"}
let [a,b] = spans;
console.log(a);// let.html:150 {s_title: "标签1", s_info: "标签1-巴拉巴"}
console.log(b);// let.html:151 {s_title: "标签2", s_info: "标签2-巴拉巴"}
}
</script>
<script type="text/javascript">
// 解构赋值
{
let [a,b,c] = [1,2,3];
console.log(a,b,c); //1 2 3
}
//嵌套
{
let [a,[b,c,[d,e,f]]] = [1,[2,3,[4,5,6]]];
console.log(a,b,c,d,e,f); //1 2 3 4 5 6
}
// ... (三点运算符)
// 剩余运算符,声誉的部分放在数组中赋值
{
let [a,...b] = [1,2,3,4,5];
// console.log(a,b[3]);
let [c,d,e,f] = b;
console.log(a+"|"+b+"|"+c,d,e,f); //1 | 2,3,4,5 | 2 3 4 5
// console.log(a);
// console.log(b);
// console.log(c,d,e,f);
}
// 展开运算符,
{
let a = [1,2,3,4,5];
let b = [0,...a]
console.log(b); // (6) [0, 1, 2, 3, 4, 5]
}
// 结构不成功
{
let [a,b,c] = [1,2];
console.log(a,b,c);//c = undefined(不会报错)
}
//不完全解构
{
let [a,b,c] = [1,2,3,4,5];
console.log(a,b,c);// 1 2 3 4,5 还有没有解构
}
//允许默认值
//必须 ===undefined 时才会使用默认值,用 ‘=’设置默认值,默认值可以使用变量,但是变量必须是被声明过的==>注意解构的执行顺序。
{
let [a=1,b=a,c] = [,,3];
console.log(a,b,c); // 1 1 3
}
//对象(键值对)的解构
//与数组的用法一样
{
let user = {
name:"栓单",
age:"21"
}
// name 属性,a 变量 ,age 属性 b 变量
// 等同于 {
// let {name,age} = {name:"栓单",age:"21"} //简写:属性名和变量名相同;
// }
let {name:a,age:b} = user; //正常写法 属性:变量;
console.log(a,b); //栓单 21
}
// 对象的 嵌套
{
let {a,b,c} = {
a:"1",
b:{aa:"aa"},
c:"3"
};
console.log(a, b.aa ,c); //1 aa 3
}
// 变量的交换
// Es5的写法:
// {
// var a = 1; var b = 2;
// console.log(a,b) // 1 2
// //变量交换 -- 需要再声明一个空的媒介
// var c = null;
// //进行交换
// c = a ; a = b ; b = c ;
// console.log(a,b) // 2 1
// //很神奇吧!就是代码有点多,在Es6里三行就搞定。
// }
// Es6的写法:
{
let a = 1;
let b = 2;
let c = 3;
console.log(a,b,c); //1 2
//a,b进行交换
[a,b,c] = [c,b,a];
console.log(a,b,c); //2 1
}
// 函数的返回值
{
function fn(){
return {
name:"栓单",
age:"21",
timer:"2018",
}
}
// 第一种写法==>直接赋值个给对象
let {name,age,timer} = fn();
console.log(name,age,timer); //栓单 21 2018
// 第二种写法==>赋值给变量,在调用变量(对象.键 得出 值)
user = fn();
console.log(user.name,user.age,user.timer);//栓单 21 2018
}
// json 数据的解构
{
// 模拟数据
let obj = {
title:"标题",
info:"扒拉扒拉扒拉",
spans:[
{
s_title:"标签1",
s_info:"标签1-巴拉巴"
},
{
s_title:"标签2",
s_info:"标签2-巴拉巴"
}
],
}
//结构数据
let {title,info,spans} = obj;
console.log(title,info,spans);//标题 扒拉扒拉扒拉 (2) [{…}, {…}]
console.log(spans[0]); // let.html:146 {s_title: "标签1", s_info: "标签1-巴拉巴"}
console.log(spans[1]); // let.html:147 {s_title: "标签2", s_info: "标签2-巴拉巴"}
let [a,b] = spans;
console.log(a);// let.html:150 {s_title: "标签1", s_info: "标签1-巴拉巴"}
console.log(b);// let.html:151 {s_title: "标签2", s_info: "标签2-巴拉巴"}
}
</script>
了解更多;
原创地址:https://blog.csdn.net/china_dou
转载请注明出处~