search

博客列表 >ES6中let与const的用法以及解构

ES6中let与const的用法以及解构

longlong
longlong原创
2020年09月02日 13:18:08603浏览

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>
上一条：PHP分页效果和扩展（0803）下一条：为什么不建议把数据库部署在Docker容器内？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多