作用: ES6允许按照一定方式从数组和对象中提取值, 并对变量进行赋值, 这被称为解构赋值.
数组解构:
let [a, b, c] = [1, 2, 3]; console.log(a) console.log(b) console.log(c)
如果解构不成功，变量的值为undefined。
let [foo] = []; //Cannot redeclare block-scoped variable 'foo' let [bar, foo] = [1]; //Cannot redeclare block-scoped variable 'foo'.
补充:
// 定向取法 let arr1 = [1, 2, 3]; let [,,d] = arr1; console.log(d); //3 // 嵌套写法 let arr = [1, [2, 3], 4]; let [a, [b, ], c] = arr; console.log(b); //2
对象解构:
let person = { name: 'zhangsan', age: 20 }; let { name, age } = person; console.log(name); // 'zhangsan' console.log(age); // 20
let person = { name: 'zhangsan', age: 20 }; let {name: myName, age: myAge} = person; // myName myAge 属于别名 console.log(myName); // 'zhangsan' console.log(myAge); // 20
补充:
let code = "AAAA" let res = { code: 200, data: { list: ["aaa", "bbb", "ccc"] } } // 重命名写法 let {code:co} = res; console.log(co); // 200 // 数组嵌套写法 let {data:{list:[x, y, z]}} = res; console.log(x, y, z); // aaa bbb ccc
实际应用:
对返回参数进行解构
function getData() { let res = { code: 200, data: { list: ["aaa", "bbb", "ccc"] } } test(res) } function test({code, data:{list}}) { console.log(code, list); } getData(); // 200 ['aaa', 'bbb', 'ccc']
注意：在解构语法中，冒号左边的用于匹配值，冒号右边的是真正的变量
