JavaScript - js进阶 -解构

最新推荐文章于 2022-07-27 20:31:20 发布

Henry_ww

最新推荐文章于 2022-07-27 20:31:20 发布

阅读量200

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/119972782

版权

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

提供更加方便获取数组中元素或者对象中属性的写法

获取数组中的元素

      const [a, b, c, d] = [1, 2, 3, 4];
      console.log(a, b, c, d);// 1,2,3,4

元素交互顺序

    let a = 1111;
    let b = 2222;
    [b, a] = [a, b];
    console.log(a, b);// 2222 1111

获取对象中的属性（重点）

      const obj = {
        name: "悟空",
        skill: "72变",
        say() { }
      }
      const { name, skill,say } = obj;
      console.log(name, skill,say);// 悟空 72变 function(){}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>解构</title>
    </head>
    <body></body>
    <script>
        // 解构: 快速的从复杂数据中(数组或者对象,主要是对象), 批量的取出目标数据

        // 作用: 1. 方便使用   2. 性能更高 (取出来的数据是单独存储)
        // 缺点: 更占用内存

        // 解构
        // 数组解构: let/const [变量名,可以多个,逗号分隔] = 数组
        // 变量名 按照顺序 从数组中取出对应位置的元素, 放到变量中
        const arr = ["apple", "banana", "pitch", "lichy"];

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

        // 细节: 可以跳过某个元素,直接使用 ,,跳过即可
        let [h, , , i] = arr;
        console.log(h, i); // apple lichy
        // 实际开发中: 不会对数组进行解构

        // 有一道面试题
        let first = 1;
        let second = 2; // 加语句结束符 ;

        // 需求: 不用第三方变量,交换两个变量的值
        // 可以通过解构实现
        [first, second] = [second, first];
        console.log(first, second);

        // 对象解构(重点): let/const {属性名,可以多个} = 对象
        // 属性名: 必须是对象里面属性中存在的名字(如果不存在: 结果是undefined)
        const obj = { name: "安琪拉", age: 18, gender: "女", skill: "扔个球" }; // 实际开发中数据比这个复杂

        let { name, gender, skill, age, cp } = obj;
        console.log(name, gender, skill, age, cp);

        // 实际开发中对象解构应用特别多
        // let { 名字 } = 对象          === let 名字 = 对象.名字

        // 总结
        // 数组解构: 前面用[]包变量, 对象解构前面用{}包属性名(只能用一次)
    </script>
</html>