【JavaScript】45_结构对象与对象的解构

简介: # 1、解构对象数组中可以存储任意类型的数据,也可以存数组,如果一个数组中的元素还是数组,则这个数组我们就称为是二维数组解构对象,方便两数交换数值;可以反向赋值对象,数组可以在解构的同时,进行声明```html <script> const arr = ["孙悟空", "猪八戒", "沙和尚"] let a, b, c // a = arr[0] // b = arr[1] // c = arr[2] ; [a,b,

1、解构对象

数组中可以存储任意类型的数据,也可以存数组,

如果一个数组中的元素还是数组,则这个数组我们就称为是二维数组

解构对象,方便两数交换数值;可以反向赋值对象,数组

可以在解构的同时,进行声明

    <script>
        const arr = ["孙悟空", "猪八戒", "沙和尚"]

        let a,
        b,
        c
        // a = arr[0]
        // b = arr[1]
        // c = arr[2]
        ;
        [a,b,c] = arr;//解构赋值

        let [d,e,f,g] = ['唐僧','白骨精','蜘蛛精','玉兔精']//声明同时解构
        
        // ;[d,e,f,g] = [1,2,3]
        // ;[d,e,f=77,g=10] = [1,2,3]
        ;[d,e,f=43,g=g] = [1,2,3]//直接这样的话,会显得g未定义
        console.log(d,e,f,g)

        let [n1,n2,...n3] = [4,5,6,7] // 解构数组时,可以使用...来设置多余的元素

        function fn(){
            return ['二郎神','猪八戒']
        }

        let [name1,name2] = fn();
        console.log(name1,name2)

        //可以通过解构赋值来快速交换两个变量的值
        let a1 = 10
        let a2 = 20

        //以前的方法,需要一个中间值来交换两数值
        // let temp = a1
        // a1 = a2
        // a2 = temp

        ;[a1,a2] = [a2,a1]//[20,10]

        const arr2 = ['孙悟空','猪八戒']
        ;[arr2[0],arr2[1]] = [arr2[1],arr2[0]]
        console.log(arr2)

        const arr3 = [['孙悟空',18,'男'],['猪八戒',45,'男']]
        for(let stu of arr3){
            for(let v of stu){
                console.log(v)
            }
        }

        let [[name,age,gender],obj] = arr3
        console.log(name,age,gender)
        console.log(obj)
    </script>

2、对象的解构

    <script>
        const obj = {name:'孙悟空',age:18,gender:'男'}

        // let {name,age,gender} = obj // 声明变量同时解构对象

        let name,age,gender
        ;({name,age,gender} = obj)//如果不加小括号的话,会被JS认为是代码块,但是加了小括号之后还需要添加分号,防止JS误认

        let {address} = obj;//没有的属性返回undefined
        console.log(name,age,gender,address)

        let {name: a,age: b,gender: c,address: d='花果山'} = obj
        console.log(a,b,c,d)
</script>
相关文章
|
22天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
24 1
JavaScript基础知识-枚举对象中的属性
|
8天前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
26 8
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
27 2
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
24 0
JavaScript基础知识-对象字面量
|
18天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
13 1
|
29天前
|
存储 JavaScript 前端开发
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
70 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
63 4