Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ES6中let与const的用法以及解构
Blogger Information
Blog 60
fans 5
comment 3
visits 65256
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
ES6中let与const的用法以及解构
longlong
Original
602 people have browsed it

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>li{item$}*5 -->
  10.     <ul>
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.     </ul>
  17.     <script>
  18.       //   1. let不支持重复声明，但是支持重复赋值
  19.       let str1 = "aaa";
  20.       //   let str1 = "bbb";
  21.       //   上面这个行代码显示 “Identifier 'str1' has already been declared” 这样的报错，表示变量str1已经被使用，即不能重复声明
  23.       str1 = "bbb";
  24.       console.log(str1); // 输出：bbb
  25.       str1 = "ccc";
  26.       console.log(str1); // 输出：ccc
  27.       //   上面四行代码可以看出，是支持重复赋值的
  28.       /*====================================================================================================================*/
  29.       //   2. let不存在变量提升，无论是在全局作用域还是函数作用域
  30.       //   console.log(str2);
  31.       //   console.log(str2); 这行代码显示这样的报错：Cannot access 'str2' before initialization（不能在初始化以前使用str2）
  32.       //   说明在全局作用域下不存在变量声明的提升
  33.       let str2 = "hello";
  34.       console.log(str2); // 输出：hello
  36.       function demo() {
  37.         // console.log(str3); Cannot access 'str2' before initialization
  38.         let str3 = "world";
  39.         console.log(str3);
  40.       }
  41.       demo(); // 输出： world
  42.       //   从上面几行代码，也可以看出在函数作用域下也不支持变量声明提升
  43.       /*=====================================================================================================================*/
  44.       //   3. let支持块级作用域
  45.       if (true) {
  46.         let str4 = "didi";
  47.         console.log(str4); // 输出：didi
  48.       }
  49.       //   console.log(str4); 输出：str4 is not defined
  50.       //   说明在if(){}这个代码块中，str4是有效的，但是在这个块级作用域以外就无效了
  52.       //   let块级作用域示例
  53.       let lis = document.querySelectorAll("li");
  54.       for (var i = 0; i < lis.length; i++) {
  55.         lis[i].addEventListener("click", function () {
  56.           console.log("点击了 item" + (i + 1));
  57.         });
  58.       }
  59.       //   如果for()代码块中是用var声明的变量，最后不管你点击哪个item，都会出现item6，这就是var 不支持块作用域的原因，而且var声明会被提升
  60.       //   此案例中var声明会提升到全局，导致addEventListener这个代码块中的 i 不能共享到全局变量，当循环执行完以后，这个 i 就已经变成了 6
  61.       //   而let 就不一样，它支持块级作用域，所以每次循环的时候都会形成一个块级作用域，那么addEventListener这个代码块中的 i 就能得到其真实对应的值
  62.       for (let i = 0; i < lis.length; i++) {
  63.         lis[i].addEventListener("click", function () {
  64.           console.log("点击了 item" + (i + 1));
  65.         });
  66.       }
  67.     </script>
  68.   </body>
  69. </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 NAME;
  13.       // 报错信息：Missing initializer in const declaration (在const声明中缺少初始化)
  14.       const NAME = "jack";
  15.       console.log(NAME); // jack
  16.       /********************************************************************************************/
  17.       // 2. const 也不支持重复声明，并且不能重新赋值
  18.       // const NAME = "mike";
  19.       // 报错信息：Identifier 'NAME' has already been declared（变量NAME已经被使用了）
  21.       // NAME = "mike";
  22.       // console.log(NAME);
  23.       // 报错信息：Assignment to constant variable （常量类型的变量赋值出错）
  24.       /********************************************************************************************/
  25.       // 3. const 支持块级作用域
  26.       if (true) {
  27.         const GENDER = "male";
  28.         console.log(GENDER); // male
  29.       }
  30.       // console.log(GENDER); 报错： GENDER is not defined
  31.     </script>
  32.   </body>
  33. </html>

3. 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>let与const的区别</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // let与const的区别：
  11.       // 1. 相同之处：都不能重复声明，都支持块级作用域
  12.       // 2. 不同之处：let允许重新赋值（更新），而const禁止更新
  14.       // 实际开发中可能存在两种风格：
  15.       // 1. 全部都用const,除非这个数据后期会有改变
  16.       // 2. 可能会更新的或常用的都使用let,除非不会或不太可能被修改的才用const
  17.       // 基础上面两点总结：在开发中都尽量使用const会更加严谨，如果出现某个变量报错信息，修改它为let即可
  19.       // 有一些数据类型强烈推荐使用const，比如：对象或数组
  20.       // 1. 数组
  21.       const pics = ["image1", "image2", "image3"];
  22.       console.log(pics); // (3) ["image1", "image2", "image3"]
  23.       //  对数组中的元素进行增删改查也是没有问题的
  24.       pics.push("image4");
  25.       console.log(pics); // (4) ["image1", "image2", "image3", "image4"]
  26.       pics.splice(3, 2, "image5", "image6");
  27.       console.log(pics); // (5) ["image1", "image2", "image3", "image5", "image6"]
  29.       // 2. 对象
  30.       const obj = {
  31.         name: "jack",
  32.         age: 21,
  33.         email: "jack@qq.com",
  34.       };
  35.       console.log(obj.age); // 21
  36.       console.log(obj.name); // jack
  37.       obj.sex = "male";
  38.       console.log(obj.sex); // male
  40.       // 3. DOM操作时
  41.       const h1 = document.createElement("h1");
  42.       const body = document.querySelector("body");
  43.       h1.innerText = "标题";
  44.       h1.style.color = "red";
  45.       body.append(h1);
  46.     </script>
  47.   </body>
  48. </html>

3. 解构

3.1 解构的概述、目的、模型、语法

  • 概述：
    • 解构赋值是对赋值运算符的扩展。
    • 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
    • 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取
  • 目的：将集合数据按规则打散到一些独立的变量中
  • 模型：
    • 数组模型解构
    • 对象模型解构
  • 语法：解构变量声明 = 要被解构的数据 （解构表达式）
  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 数组示例：取出里面的元素分别赋值给变量
  11.       const arr = ["num1", "num2", "num3"];
  12.       // 传统做法
  13.       let num1 = arr[0];
  14.       let num2 = arr[1];
  15.       let num3 = arr[2];
  16.       console.log(num1, num2, num3); // num1 num2 num3
  17.       // 使用解构语法
  18.       let [n1, n2, n3] = arr;
  19.       console.log(n1, n2, n3); // num1 num2 num3
  21.       // 2. 对象示例：取出对象中的每个属性
  22.       const obj = {
  23.         name: "jack",
  24.         age: 20,
  25.         email: "jack@qq.com",
  26.       };
  27.       // 传统做法
  28.       let personName = obj.name;
  29.       let personAge = obj.age;
  30.       let personEmail = obj.email;
  31.       console.log(personName, personAge, personEmail); // jack 20 jack@qq.com
  32.       // 使用解构语法
  33.       let { name, age, email } = obj;
  34.       console.log(name, age, email); // jack 20 jack@qq.com
  36.       // 3. 在书写代码时，可能会直接使用解构语法为数组或对象赋值
  37.       let [p1, p2, p3] = ["pic1", "pic2", "pic3"];
  38.       console.log(p1, p2, p3); // pic1 pic2 pic3
  40.       // 注意点一：解构变量的声明必须初始化
  41.       // let [a, b, c];
  42.       // 报错信息：Missing initializer in destructuring declaration（解构声明中缺少初始值设定项）
  43.       let [a1, a2, a3] = [10, 20, 30];
  44.       console.log(a1 + a2 + a3); // 60
  45.       // 如果有值未初始化
  46.       let [b1, b2, b3] = [10, 20];
  47.       console.log(b1 + b2 + b3); // NAN
  48.       // 声明的同时赋上默认值
  49.       let [c1, c2, c3 = 50] = [10, 20];
  50.       console.log(c1 + c2 + c3); // 80
  51.       // 通过上面示例：可以理解成，此种书写方式下，左边看成是变量的声明，右边就是根据声明的变量为它赋值
  53.       // 注意点二：模板语法
  54.       // 解构数组使用 [] ， 解构对象使用 {} ，一定要一一对应
  56.       // 在解构的过程中，是有两部分在参与，整个过程可以理解为一个解构表达式
  57.       // 1. 解构的源就是解构表达式的右边部分
  58.       // 2. 解构的目标就是解构表达式的左边部分
  59.     </script>
  60.   </body>
  61. </html>

3.2 数组模型的解构

  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.       const arr1 = ["name1", "name2", "name3"];
  11.       // 1. 解构所有元素
  12.       let [name1, name2, name3] = arr1;
  13.       console.log(name1, name2, name3); // name1 name2 name3
  15.       // 2. 解构部分元素，使用空占位符
  16.       let [n1, , n3] = arr1;
  17.       console.log(n1, n3); // name1 name3
  19.       // 3. 使用解构表达式更新变量
  20.       let num1 = 10;
  21.       let num2 = 20;
  22.       console.log(num1 + num2); // 30
  23.       [num1, num2] = [30, 40];
  24.       console.log(num1 + num2); // 70
  26.       // 4. 解构默认值
  27.       const arr2 = ["blue", "green", "yellow"];
  28.       let [c1, c2 = "black", c3] = arr2;
  29.       console.log(c1, c2, c3); // blue green yellow
  30.       let [d1, d2, d3, d4] = arr2;
  31.       console.log(d1, d2, d3, d4); // blue green yellow undefined
  32.       let [e1, e2, e3, e4 = "black"] = arr2;
  33.       console.log(e1, e2, e3, e4); // blue green yellow black
  34.       // 变量声明时使用默认值的话，如果数组中有对应的元素，那么会覆盖默认值，如果没有，那么会使用默认值
  36.       // 5. 嵌套解构
  37.       const arr3 = [1, 2, [3, 4], [[5, 6]], 7, 8];
  38.       //   取出所有数字
  39.       let [a1, a2, [a3, a4], [[a5, a6]], a7, a8] = arr3;
  40.       console.log(a1, a2, a3, a4, a5, a6, a7, a8); // 1 2 3 4 5 6 7 8
  41.       //   取出 5 和 6
  42.       let [, , [,], [[b5, b6]], ,] = arr3;
  43.       console.log(b5, b6); // 5 6
  45.       // 6. 函数参数中使用数组解构
  46.       function demo([x, y = 30]) {
  47.         return x + y;
  48.       }
  49.       console.log(demo([10, 20])); // 30
  50.       console.log(demo([10])); // 40
  52.       // 7. 剩余运算符解构
  53.       const arr4 = [10, 20, 30, 40, 50];
  54.       let [r1, ...r4] = arr4;
  55.       console.log(r1, r4); // 10 (4) [20, 30, 40, 50]
  56.       // 相当于把后面的参数解析成一个数组r4，let声明中的...r4，表示将数组r4展开，以便获取后面的所有元素，而r4就是保存这些元素的数组
  58.       // 8. 解构字符串
  59.       let str = " hello world   ";
  60.       let [s1, s2, s3] = str;
  61.       console.log(s1, s2, s3); // h e   因为hello前面有一个空格，所以只得到 h e
  62.       let [, , , , , , ...ss] = str.trim(); // 将字符串两边空白去掉
  63.       console.log(ss); // (5) ["w", "o", "r", "l", "d"]  获得一个数组
  64.     </script>
  65.   </body>
  66. </html>

3.3 对象模型的解构

  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.       // 1. 基本解构
  11.       const obj1 = { num1: 10, num2: 30 };
  12.       let { num1, num2 } = obj1;
  13.       console.log(num1, num2); // 10 30
  14.       let { n1, n2 } = obj1;
  15.       console.log(n1, n2); // undefined undefined
  16.       // 解构对象时，变量的声明与对象中的属性名要一致，否则解析不了
  18.       // 2. 嵌套解构
  19.       const obj2 = {
  20.         name: "alice",
  21.         age: 20,
  22.         score: {
  23.           php: 80,
  24.           js: {
  25.             basis: 90,
  26.             advance: 78,
  27.           },
  28.         },
  29.         hobby: {
  30.           h1: "book",
  31.           h2: "run",
  32.         },
  33.       };
  34.       // 解析对象中的hobby
  35.       let { hobby } = obj2;
  36.       console.log(hobby); // {h1: "book", h2: "run"}
  37.       // 解析scroe-->js-->basis
  38.       let {
  39.         score: {
  40.           js: { basis },
  41.         },
  42.       } = obj2;
  43.       console.log(basis); // 90
  44.       // 按照模板将对应的属性名放入声明中就能很好的解析了，仔细一点就不会出错
  46.       // 3. 多次解构
  47.       // 解构出advance和h2
  48.       let {
  49.         score: {
  50.           js: { advance },
  51.         },
  52.         hobby: { h2 },
  53.       } = obj2;
  54.       console.log(advance, h2); // 78 "run"
  56.       // 4. 解构声明中可使用变量别名（解决不同对象中出现命名冲突的问题）
  57.       const obj3 = {
  58.         name: "jack",
  59.         age: 30,
  60.       };
  61.       let { name, age } = obj2; // alice 20
  62.       // let { name, age } = obj3; //Identifier 'name' has already been declared，如果变量名之前被使用过，现在就不能再使用了，所以要取别名
  63.       console.log(name, age);
  64.       let { name: objName, age: objAge } = obj3;
  65.       console.log(objName, objAge); // jack 30
  67.       // 5. 解构声明中可设置默认值
  68.       const obj4 = { a: "hello", b: "world", c: "yes" };
  69.       let { a, b, c = "嘿嘿" } = obj4;
  70.       console.log(a, b, c); // hello world yes  如果对象中存在对应的值，会覆盖默认值
  71.       let { a: obja, b: objb, c: objc, d = "no" } = obj4;
  72.       console.log(d); // no   如果对象中不存在对应的值，那么会使用声明中的默认值
  74.       // 6. 解构表达式更新变量
  75.       let s1 = 10;
  76.       let s2 = 20;
  77.       console.log(s1 + s2); // 30
  78.       ({ s1, s2 } = { s1: 50, s2: 60 });
  79.       // 对象解构与数组解构的不同：1. 表达式右边要添加变量名  2. 表达式外层要套上一对小括号()
  80.       console.log(s1 + s2); // 110
  82.       // 7. 函数参数中使用对象解构
  83.       function show({ number1: x, number2: y }) {
  84.         console.log(x * y); // 50
  85.         y = 6;
  86.         console.log(x + y); // 11
  87.       }
  88.       show({ number1: 5, number2: 10 });
  89.       // 如果参数中有默认值，会优先使用参数的值
  91.       // 8. 解构剩余参数
  92.       const obj5 = {
  93.         personName: "tom",
  94.         personAge: 18,
  95.         personEmail: "tom@qq.com",
  96.         personHobby: "book",
  97.       };
  98.       let { personName, personAge, ...person } = obj5;
  99.       console.log(person); // {personEmail: "tom@qq.com", personHobby: "book"}
  100.       // 剩余参数会组成一个新的对象
  101.     </script>
  102.   </body>
  103. </html>
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