学习总结-ES6 --- 基础-解构赋值

学习总结-ES6 — 基础-解构赋值

首先是变量的解构赋值(数组)

    <script>
        let [a,b] = [1,2]
        console.log(a);//1
        console.log(b);//2
    </script>

这样简化了赋值的过程其中友以下的集中情况也可以赋值

---

    <script>
        let [a, ,c] = [1,2,3]
        console.log(a);//1
        console.log(c);//3
        console.log(b);// b is not defined
    </script>

这样情况下 将不会定义和声明b 而是将3 赋值给c

---

        let [a, ...c] = [1,2,3]
        console.log(a);//1
        console.log(c);//[2,3]

这样会将1赋值给a 其他全部赋值给c （注意c的右侧不能有 ，了 也就是说 c必须是最后一个参数）

---

        let [a,b,c='defalut',d='defalut']  = [1,2,3]
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);

还可以设置默认值 结果如下图所示

==============================================================

变量的解构赋值(对象)

        let o = {p: 42, q: true};
        let {p, q} = o;

        console.log(p); // 42
        console.log(q); // true

这里值得注意的是 如果解构的内容对象中没有对应 则会出现undefined

---

        let o = {p: 42, q: true, a: 4444};
        ({p:P, q, r} = o);

        console.log(P); // 42
        console.log(q); // true
        console.log(r); // undefined
        console.log(p); // p is not defined

以上的代码首先是通过解构可以无需声明来赋值一个变量。 其次是可以将小p 重命名为P 可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

---

let res = {
    status: 200,
    id: 12,
    data: [{name:'wosj '},{name:'shaingdan'}] 
}
let { status,id,data} =res;

console.log(status);
console.log(id);
console.log(data);

例如返回一个res的数据 然后利用解构可以便捷的为其赋值

解构函数


let {floor, pow} =Math;
let a = 1.1;
console.log(floor(a)) //1
console.log(pow(2,3))//8
,
将Math函数 中的floor 解构出来使用 我们也可以将字符串的自带方法解构出来如下

let{length:mylength} ="123456";
console.log(mylength);// 6 

解构十分方便 简化了赋值的过程
还有很多用法待补充 如有错误望指正