Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PartIII 02 let、const与解构赋值（0901tue）
Blogger Information
Blog 62
fans 2
comment 1
visits 42217
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PartIII 02 let、const与解构赋值（0901tue）
老黑
Original
893 people have browsed it

主要内容：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

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：解构很强大, 有用, 以后尽可能得去用它
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post