search

博客列表 >PartIII 02 let、const与解构赋值（0901tue）

PartIII 02 let、const与解构赋值（0901tue）

老黑
老黑原创
2020年09月05日 22:01:24894浏览

主要内容：let、const与解构赋值

  1. let和const声明
    • let 与 const 相同之处
    • a. 禁止重复声明
    • b. 支持块作用域
    • c. 不同之外,let允许更新， 而const禁止更新
  2. var/let/const在全局作用域绑定上的区别
    • var会成为全局变量，从而污染全局环境。可以通过命名空间来解决这个问题
    • let、const则没有这个问题
  3. 解构：主要是针对对象和数组
    • 解构的目的: 将集合数据按规则打散到一些独立的变量中
    • 嵌套对象解构
  4. 其他两个点
    • 貌似对象都是{}，数组都是[]
    • console.log，外还有console.dir, console.table

1. let声明

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>let</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>itme1</li>
  11.       <li>itme2</li>
  12.       <li>itme3</li>
  13.       <li>itme4</li>
  14.       <li>itme5</li>
  15.     </ul>
  16.     <script>
  17.       // 1. let 声明变量
  18.       let num;
  19.       // 1.1 禁止重复声明
  20.       //   let num;
  21.       num = 100;
  22.       console.log(num);
  24.       let count = 1;
  25.       console.log(count);
  27.       //   console.log(username);
  28.       // 1.2 不存在变量声明提升
  29.       let username = "TomTom";
  30.       function fn() {
  31.         // console.log(username);
  32.         let username = "jack";
  33.       }
  34.       console.log(fn());
  35.       // 1.3 支持块作用域
  36.       if (true) {
  37.         let price = 99;
  38.       }
  39.       //   console.log(price);
  41.       let lis = document.querySelectorAll("li");
  43.       for (let i = 0; i < lis.length; i++) {
  44.         lis[i].addEventListener("click", function () {
  45.           console.log("点击了第 ", i, " 个");
  46.         });
  47.       }
  48.     </script>
  49.   </body>
  50. </html>

2. const

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>const</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // const 声明只读变量: 常量
  11.       // 1. const常量, 在一个脚本的生命周期内,禁止更新,所以在声明时必须初始化
  12.       const NATION = "CHINA";
  14.       // 2. 不允许重复声明
  15.       //   const NATION = "USA";
  17.       // 3. 支持块作用域
  18.       if (true) {
  19.         const EMAIL = "admin@qq.com";
  20.         console.log(EMAIL);
  21.       }
  22.       //   console.log(EMAIL);
  24.       //   let 与 const 相同之处
  25.       //   1. 禁止重复声明
  26.       //   2. 支持块作用域
  27.       //   不同之外,let允许更新， 而const禁止更新
  29.       //一种风格就是全部都用const,除非这个数据后期会有改变
  30.       // 可能会更新的或常用的都使用let,除非不会或不太可能被修改的才用const
  31.       // 有一些数据类型强烈推荐使用const
  32.       // 对象或数组
  33.       const arr = [10, 30, 50];
  34.       console.log(arr);
  35.       arr[1] = 90;
  36.       console.log(arr);
  37.       //   arr = ["a", "b"];
  39.       const obj = { x: "red", y: "blue" };
  40.       console.log(obj);
  41.       obj.x = "green";
  42.       console.log(obj);
  43.       //   obj = {};
  45.       const body = document.body;
  46.       body.style.backgroundColor = "yellow";
  47.     </script>
  48.   </body>
  49. </html>

3. var/let/const在全局作用域绑定上的区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>var/let/const在全局作用域绑定上的区别</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // var 全局
  11.       var email = "tony@123.com";
  12.       console.log(email);
  13.       console.log(window.email);
  14.       var email = "jack@qq.com";
  15.       console.log(window.email);
  16.       // 污染全局环境
  17.       (function () {
  18.         var role = "custom";
  19.       })();
  21.       console.log(window.role);
  23.       // 在当前全局环境中创建一个命名空间
  24.       //   var ns = Object.create(null);
  25.       // 如果在函数对象上添加就是静态成员
  26.       var ns = function () {};
  27.       ns.id = 10;
  28.       ns.username = "TomTom LogL";
  29.       ns.email = "TomTom@123.com";
  30.       console.log(window.ns.id, window.ns.username, window.ns.email);
  32.       // -------------------------------------------------------
  34.       // let
  35.       let colors = ["red", "green", "blue"];
  36.       const BRAND = "HUAWEI";
  37.       console.log(colors, BRAND);
  38.       // let /const声明的变量、常量不会成为全局对象window的属性
  39.       console.log(window.colors, window.BRAND);
  41.       //   var name = "hello world";
  42.       let name = "ok......";
  43.       //   let ,const声明的变量只会出现在词法作用域/块作用/静态作用域
  45.       //   在全局环境下,var, let,const行为类似
  46.     </script>
  47.   </body>
  48. </html>

4. 对象解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>解构</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 解构主要是针对对象和数组
  11.       // 解构的目的: 将集合数据按规则打散到一些独立的变量中
  12.       const product = {
  13.         name: "电脑",
  14.         price: 5800,
  15.       };
  16.       // 1. 传统
  17.       let name = product.name;
  18.       let price = product.price;
  19.       console.log("%s : %c %d", name, "color:red", price);
  21.       // 2. 对象解构
  22.       const user = {
  23.         username: "TomTom",
  24.         email: "TomTom@123.com",
  25.       };
  26.       // 解构语法: 解构变量声明 = 要被解构的数据
  27.       let { username, email } = { username: "TomTom", email: "TomTom@123.com" };
  28.       console.log(username, email);
  29.       // 1. 对象的属性名必须与左边解析变量声明模板中的变量同名
  30.       // 2. 解构变量必须初始化
  31.       //   let { x, y }
  32.       // 3. 可以将左侧的变量声明看来右侧的赋值模板
  34.       // 3. 解构表达式: 用来更新变量
  35.       let a = 10;
  36.       let b = 20;
  37.       console.log(a, b);
  38.       //   a = 150;
  39.       //   b = 250;
  40.       //   console.log(a, b);
  42.       // 1. 场景1
  43.       ({ a, b } = { a: 150, b: 250 });
  44.       console.log(a, b);
  46.       // 2. 场景2
  47.       function out({ a: x, b: y }) {
  48.         console.log(x, y);
  49.         x = 1;
  50.         y = 2;
  51.         console.log(x, y);
  52.       }
  53.       out({ a: 88, b: 99 });
  55.       // 4. 解构声明中设置默认值
  56.       let stu = {
  57.         stuName: "TomTom LogL",
  58.         gender: "male",
  59.       };
  60.       let { stuName, gender = "female", age = 18 } = stu;
  61.       console.log(stuName, gender, age);
  63.       // 5. 解构声明中使用变量别名
  64.       const book = {
  65.         name: "ES6开发指南",
  66.         price: 109,
  67.       };
  68.       let { name: bookName, price: bookPrice } = book;
  69.       console.log(bookName, bookPrice);
  70.     </script>
  71.   </body>
  72. </html>

5. 嵌套对象解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>嵌套对象解构</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 对象的属性值也可以是对象或其它复杂类型
  11.       const stu = {
  12.         name: "TomTom",
  13.         course: {
  14.           php: {
  15.             level: "basis",
  16.             grade: 80,
  17.           },
  18.           front: {
  19.             level: "advance",
  20.             grade: 70,
  21.           },
  22.         },
  23.       };
  24.       // course->php
  25.       let {
  26.         course: { php },
  27.       } = stu;
  29.       console.log(php);
  31.       let {
  32.         course: {
  33.           php: { level },
  34.         },
  35.       } = stu;
  37.       console.log(level);
  39.       let {
  40.         course: {
  41.           front: { level: frontLevel },
  42.         },
  43.       } = stu;
  45.       console.log(frontLevel);
  47.       // 多次解构
  48.       let {
  49.         course,
  50.         course: { php: phpinfo },
  51.         course: {
  52.           php: { level: levelinfo },
  53.         },
  54.       } = stu;
  56.       //   let { course } = stu;
  57.       //   let {
  58.       //     course: { php: phpinfo },
  59.       //   } = stu;
  60.       //   let {
  61.       //     course: {
  62.       //       php: { level: levelinfo },
  63.       //     },
  64.       //   } = stu;
  66.       console.log(course, php, level);
  67.     </script>
  68.   </body>
  69. </html>

6. 数组解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>数组解构</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       let user = [1, "admin", "123@123.com"];
  11.       // 1. 数组解构声明
  12.       let [id, name, email] = user;
  13.       console.log(id, name, email);
  15.       let [, username, ,] = user;
  17.       console.log(username);
  19.       // 2. 数组解构表达式： 更新数组元素
  20.       let lesson = "es6";
  21.       let grade = 60;
  22.       console.log(lesson, grade);
  24.       [lesson, grade] = ["php", 90];
  25.       console.log(lesson, grade);
  27.       // 3. 使用默认值
  28.       let [brand, model, color = "black"] = ["小米", "p40", "red"];
  29.       console.log(brand, model, color);
  31.       // 4. 在函数参数中也可以使用数组解构
  32.       function add([x, y = 90]) {
  33.         return x + y;
  34.       }
  36.       console.log(add([45, 55]));
  37.       console.log(add([20]));
  39.       // 5. 数组嵌套解构
  40.       let [a1, a2, [a3, a4], a5] = [10, 20, [30, 40], 50];
  41.       console.log(a1, a2, a3, a4, a5);
  42.     </script>
  43.   </body>
  44. </html>

7. 作业（在上面基础上修改的）

  1. 实例演示let ,const功能与应用场景，并分析异同
  2. 实例演示对象解析与数组解构的语法，应用场景

下面内容结合网上内容应用了下
（https://www.runoob.com/w3cnote/deconstruction-assignment.html）

在解构中，有下面两部分参与：
解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。

基本型

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

可嵌套

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

可忽略

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

不完全解构

  1. let [a = 1, b] = []; // a = 1, b = undefined

剩余运算符

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

字符串等

  1. let [a, b, c, d, e] = 'hello';
  2. // a = 'h'
  3. // b = 'e'
  4. // c = 'l'
  5. // d = 'l'
  6. // e = 'o'

解构默认值

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

对象的解构有很多类似的地方

上一条：PartIII 03 模板字面量与标签模板（0902wed）下一条：函数/闭包/类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多