解构赋值的认识

Michael哥哥

已于 2022-07-11 08:58:59 修改

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： es6

于 2022-07-08 16:41:54 首次发布

本文链接：https://blog.youkuaiyun.com/WiChat/article/details/125680595

本文详细介绍了JavaScript中的解构赋值语法，包括基本用法、嵌套解构、忽略字段以及不完全解构的情况。通过示例解析了数组和对象的解构，并展示了如何利用解构赋值进行默认值设定，帮助读者深入理解这一强大的语法特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本

let { foo, bar } = {  foo: 'aaa',bar: 'bbb'};
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

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

let [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o

let [a = 2] = [undefined]; // a = 2

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

1. a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3

2. a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

3. a 与 b 正常解构赋值，匹配结果：a = 1，b = 2