121-解构赋值

最新推荐文章于 2023-07-13 19:45:42 发布

曾经沧海难为水850

最新推荐文章于 2023-07-13 19:45:42 发布

阅读量125

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_56008519/article/details/125684592

版权

本文深入探讨了JavaScript中的解构赋值，包括对象和数组的解构，以及如何设置默认值。通过实例展示了如何利用解构赋值来简化变量声明，并解释了解构赋值在面对对象层次结构时的工作原理。同时，提到了解构赋值在不同场景下的应用，如复制对象方法和避免块级作用域问题。此外，还讨论了如何结合使用对象和数组的解构，以及注意事项，如变量作用域的问题。

摘要由CSDN通过智能技术生成

格式

            let obj={a:100,b:"hello",c:[10,203,0]}
            let {a,b,c}=obj
			// 隐式操作: let a=obj.a; let b=obj.b; let c=obj.c
			// console.log(a)
			// console.log(b)
			// console.log(c)

解构赋值:解析数据源然后按照数据模型进行取值再赋值给变量

声明变量的高级写法

变量修饰符数据模型=数据源

解构按照数据模型取出数据源中的数据赋值:然后赋值给模型变量

大括号代表的就是对象，方括号则代表的就是数组

解构赋值允许设置默认值

let [goo = true] = [];
goo // true

给默认值的时候注意undefined，因为undefined是不能赋值的。


let [x = 5] = [undefined];
x // 5
 
let [x = 5] = [null];
x // null

通过解构我们还能够对象的方法复制给变量，例如

const { log } = console;
log('hello') // hello

还可以使用自己自定义的方法名


const { log:log } = console;
log ('hello')//hello

a:b的这种形式中，a必须是对应中的属性名，b是自定义的，只要合法，写成a:a的形式也是可以的,前面一个是匹配的模式，冒号后的才是被赋值的变量。

对象的解构赋值是可以一层一层进行解构的

        const { log:log } = console;
        const node = {loc: {start: {line: 1,column: 5}}};

        let {loc,loc:{start},loc: { start: { line }},loc: { start: { column }}}=node
  
        minelog(loc) // Object {start: Object}
        minelog(start) // Object {line: 1, column: 5}
        minelog(line) // 1
        minelog(column) //  5

并且对象和数组的解构赋值是可以混用的

解构赋值需要注意变量的作用域问题


// 错误的写法
let x;
{x} = {x: 1};
 
// 正确的写法
let x;
({x} = {x: 1});

上面的例子中错误的原因是{x}被认为是一个块级作用域，导致解构失败，我们在使用解构要尽量避免这种大括号直接在行首的情况。