提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

ES6 从入门到精通 # 07：解构赋值

入门
2023-03-14 22:58:23 时间

说明

ES6 从入门到精通系列（全23讲）学习笔记。



解构赋值


解构赋值是对赋值运算符的一种拓展，它针对数组和对象来进行操作。

优点：代码书写上简单易读

let man = {
    name: "kaimo",
    value: 313
}
// es5
let name = man.name;
let value = man.value;
// es6 完全解构
let { name, value } = man;
console.log(name, value)



e45c041013744d919a2e6b546e5efd7a.png

let obj = {
    a: {
        name: "kaimo"
    },
    b: [],
    c: "hello cat"
}
// 不完全解构
let { a } = obj;
console.log(a);

// 剩余运算符
let { a, ...res } = obj;
console.log(a, res)

// 默认值
let { a, b = 30 } = { a: 20 };



7fb14e1c516b43f59ecfc6fd80045831.png


对数组解构

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


04fb306ce10e4559a9684d3330151ce6.png


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



ad2d90ed6a514759b9afe98df96690d9.png





相关文章