ECMA6--解构赋值

什么是解构

将函数拆解开

1. 左右两边解构必须一样
2. 右边必须是个东西
3. 声明和赋值不能分开(必须在一句话里完成)

应用场景

• 数组
• JSON

let arr = [1,2,3]
let [a,b,c] = [1,2,3]
let {a,c,d} = {c:2,a:12,d:2}
console.log(c,a,d);

• 左边是数组右边也必须是数组(JSON)
• JSON键值对形式传入

let [{a,b},{c,d},n,s] = [{b:1,a:23},{c:23,d:12},1,'2'];
console.log(a,b,c,d,n,s)
alert([a,b,c,d,n,s])

根据自己想要的粒度进行控制

let [json,arr,n,s] = [{b:1,a:23},[24,2],1,'2'];
console.log([json,arr,n,s])
//(4) [{…}, Array(2), 1, "2"]

[注]

1. 数据格式不一致

let [a,b] = {1,2}
alert([a,b])

2. 非法格式，JSON为键值对

let {a,b} = {2,3}
console.log(a,b);

3. 声明和赋值不能分开，属于非法

个人理解，程序是按照一定规则进行传输,如果你想写出没有BUG或者流畅的代码必须了解规则,这也是我们学习ECMA标准的一个必要理由

let [a,b];
[a,b] = [12,5]
console.log([a,b]);

【栗子】

解构赋值：
let {name,title,id} = obj

• let name = obj.name;
• let title = obj.title;
• let id = obj.id;

【注】解构赋值无法直接修改需通过 别名来进行修改 let{name:n,title,id}=obj;
可以按需获取顺序是可以随便改变的，里面的值必须是一样的，之前声明后如果想重新赋值需通过 :别名 来存储
如果console.log(name),undefined如果被解构赋值的时候，被打印会undefined
如果里面结构赋值的时候没有值或不需要，需要为空（默认值）必须要有否则会保持

结构参数的时候需要加上小括号

看数据，注意格式否则会报错

this.goodsList = data;
let newList = [];
data.map(({goodsName,discount,price，imgsUrl})=>{
    <!--转换格式 
    let imgSrc = JSON.PARSE(imgsUrl)[0];
    -->
    <!-- 解构前
    let obj = {
        goddsName : goods.goodsName,
        imgSrc : '',
        price : goods.price
    -->
    <!-- 解构后 -->
    let obj = {
        goddsName,
        imgSrc,
        price
    }
})

价格转换：保留小数点后两位

let abc = abc.toFixed(2);

解构赋值：Destructuring

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
数组的解构赋值：按照对应的顺序解构。

【Dome1】
var arr = [1,2,3];
var [a,b,c] = arr;
console.log(a,b,c)//可以解析出1,2,3，相当于a,b,c的值都已经赋上，只要结构对应没有问题
【Dome2】
var obj = {
    foo:function(){
    },
    o:{
    },
    arr:[],
    str:'abc'
}
var {foo,arr,str,o} = obj; //并没有按照原有obj的顺序，但是同样可以赋值，只要对象中的Key的名字能对应找到即可
console.log(foo,arr,str,o);
//如果var {foo1,arr} = obj;因为原来obj中没有foo1这个键，会出现undefined，所以如果要对对象解构赋值，需要和原对象的Key名称一致，顺序无所谓
【Dome3】
//还可以做值的交换，原来要用到中间临时变量，但是现在可以这么做
var y = 1;
var x = 2;
var [x,y] = [y,x];
console.log(x,y); //这里x和y的值已经交换了