search

博客列表 >let、const与解构赋值

let、const与解构赋值

王佳祥
王佳祥原创
2020年09月03日 08:52:181097浏览

let、const与解构赋值

一、let

  • es6新增了let命令，用来声明变量，它的用法类似var,但是所声明的变量只在let命令所在的代码块内有效。
  1. {
  2. let a = 'let变量';
  3. var b = 'var变量';
  4. }
  5. console.log(a);//a is not defined
  6. console.log(b);//正确输出
  1. 上面代码块，分别用let，var声明了两个变量，在代码块之外调用这两个变量时，let声明的变量就会报错，而var声明的变量正常输出，这说明了let只在它所在的代码块内有效。
  • let禁止重复声明
  1. //let声明变量
  2.     let num;
  3. //禁止重复声明
  4.     let num;//会报错
  • 不存在变量声明提升
  1. //不存在变量声明提升
  2.   console.log(username);//会报错
  3.   let username = "wang";
  4.   function fn() {
  5.         console.log(username);
  6.         let username = "jack";
  7.   }
  8.   console.log(fn());//会报错
  • 支持块作用域
  1.       //支持块作用域
  2.       if (true) {
  3.         var price = 99;
  4.         //let price = 50;
  5.       }
  6.       console.log(price);
  8.       let lis = document.querySelectorAll("li");
  9.       for (let i = 0; i < lis.length; i++) {
  10.         lis[i].addEventListener("click", function () {
  11.           console.log("点击了第" + i + "个");
  12.         });
  13.       }

二、const

  • const声明只读变量：常量
  1. //const声明只读变量：常量
  2.       //1.const常量，在一个脚本的声明周期内，禁止更新，所以在声明时必须初始化
  3.       const NATION = "中国";
  4.       //2.不允许重复声明
  5.       //const NATION ="CHINA";
  7.       //3.支持块作用域
  8.       if (true) {
  9.         const EMAIL = "wukong@qq.com";
  10.         console.log(EMAIL);
  11.       }
  12.       //console.log(EMAIL);会报错
  14.       /*
  15.       let 与 const相同之处
  16.       1.禁止重复声明
  17.       2.支持块作用域
  18.       不同之处，let允许更新，而const禁止更新
  19.       一种风格就是全部都用const,除非这个数据后期会有改变
  20.       可能会更新的或常用的都使用let,除非不会或不太可能被修改的采用const
  21.       有一些数据类型强烈推荐使用const
  22.       对象或数组
  23.       */
  25.       const arr = [1, 2, 3];
  26.       console.log(arr);
  27.       arr[1] = 20;
  28.       console.log(arr);
  29.       //arr = ["a","b"]这样更新会报错
  31.       const obj = { x: "red", y: "green" };
  32.       console.log(obj);
  33.       obj.x = "blue";
  34.       console.log(obj);
  35.       //obj = {};//这样更新会报错，不能直接赋值
  37.       const body = document.body;
  38.       body.style.backgroundColor = "yellow";

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

  1. //var 全局
  2.       var email = "wukong@qq.com";
  3.       console.log(email);
  4.       console.log(window.email);
  5.       var email = "bajie@qq.com";
  6.       console.log(email);
  7.       //污染全局环境
  8.       //尽量不要创建全局变量，可以创建临时变量
  9.       //var role = "custom";
  10.       //临时变量就是创建立即执行函数
  11.       (function () {
  12.         var role = "custom";
  13.       })();
  14.       //这样就不会显示在全局环境中
  15.       //在当前全局环境中创建一个命名空间
  16.       //如果在函数对象上添加就是静态成员
  17.       var ns = {};
  18.       ns.id = 10;
  19.       ns.username = "wang";
  20.       ns.email = "wang@qq.com";
  21.       console.log(window.ns.id, window.ns.username, window.ns.email);
  22.       /*------------------------------------------------------*/
  24.       //let
  25.       let colors = ["red", "green", "blue"];
  26.       const BRAND = "HUAWEI";
  27.       console.log(colors, BRAND);
  28.       //使用let/const声明的变量不会成为全局对象window的属性
  29.       console.log(window.colors, window.BRAND); //返回undefined
  30.       var name = "hello world";
  31.       let name = "hello php";
  32.       //let和const声明的变量只会出现在词法作用域/块作用域/静态作用域中
  33.       //在全局环境下,var,let,const行为类似

四、解构

  2.       //解构主要是针对对象和数组
  3.       const obj = { x: 1, y: 2, z: 3 };
  4.       /* for (k in obj) {
  5.         console.log(k);
  6.       } */
  7.       //模板解构
  8.       //对象
  9.       const { x, y, z } = { x: 1, y: 2, z: 3 };
  10.       console.log(x, y, z);
  11.       //数组
  12.       const [a, b, c] = ["a", "b", "c"];
  13.       console.log(a, b, c);
  15.       //解构的目的：将集合数据按规则打散到一些独立的变量中
  16.       //一.传统方式
  17.       const product = {
  18.         name: "电脑",
  19.         price: 5000,
  20.       };
  21.       let name = product.name;
  22.       let price = product.price;
  23.       console.log("%s:%c %d", name, "color:red", price);
  24.       //二.对象解构
  25.       const user = {
  26.         username: "wang",
  27.         email: "wang@qq.com",
  28.       };
  29.       //解构语法：解构变量声明 = 要被解构的数据
  30.       //let { username, email } 就是结构变量声明
  31.       let { username, email } = {
  32.         username: "wang",
  33.         email: "wang@qq.com",
  34.       };
  35.       console.log("%s (%s)", username, email);
  36.       //1.对象的属性名必须与左边解构变量声明模板中的变量名同名
  37.       //2.解构变量必须初始化
  38.       let { q, w } = {};
  39.       //3.可以将左侧的变量声明看成右侧的赋值模板
  41.       //三.解构表达式
  42.       let a1 = 10;
  43.       let b1 = 20;
  44.       console.log(a1, b1);
  45.       a1 = 150;
  46.       b1 = 300;
  47.       console.log(a1, b1);
  48.       //换种方式来更新
  49.       //1.场景1：用来更新变量
  50.       ({ a1, b1 } = { a1: 15, b1: 60 });
  51.       console.log(a1, b1);
  53.       //2.场景2
  54.       function out({ m: x, n: y }) {
  55.         console.log(x, y);
  56.         x = 20;
  57.         y = 40;
  58.         console.log(x, y);
  59.       }
  60.       out({ m: 8, n: 8 });
  62.       //四.解构声明中设置默认值
  63.       let stu = {
  64.         stuName: "wang",
  65.         gender: "male",
  66.       };
  67.       let { stuName, gender = "famale", age = 15 } = stu;
  68.       console.log(stuName, gender, age);
  70.       //五.解构声明中使用变量别名
  71.       const book = {
  72.         name: "ES6开发指南",
  73.         price: 109,
  74.       };
  75.       let { name: bookname, price: bookprice } = book;
  76.       console.log(bookname, bookprice);

五、嵌套对象解构

  1. //对象的属性值也可以是对象或其它复杂类型、
  2.       const stu = {
  3.         name: "wang",
  4.         course: {
  5.           php: {
  6.             level: "basis",
  7.             grade: 80,
  8.           },
  9.           front: {
  10.             level: "advance",
  11.             grade: 70,
  12.           },
  13.         },
  14.       };
  15.       console.log(stu);
  16.       let {
  17.         course: { php },
  18.       } = stu;
  19.       console.table(php);
  20.       let {
  21.         course: {
  22.           php: { level },
  23.         },
  24.       } = stu;
  25.       console.table(level);
  26.       let {
  27.         course: {
  28.           front: { level: frontlevel },
  29.         },
  30.       } = stu;
  31.       console.table(frontlevel);
  33.       //多次解构
  34.       let {
  35.         course,
  36.         course: { php: phpinfo },
  37.         course: {
  38.           php: { level: levelinfo },
  39.         },
  40.       } = stu;
  41.       console.log(course, php, level);

六、数组解构

  1.       //数组解构
  2.       const [c1, c2, c3] = ["上海", "北京", "广州"];
  3.       console.log(c1, c2, c3);
  5.       //1.数组解构声明
  6.       let user = [1, "admin", "admin@qq.com"];
  7.       let [id, name, email] = user;
  8.       console.log(id, name, email);
  9.       let [, username, ,] = user;
  10.       //数组解构和对象解构必须要初始化
  11.       console.log(name);
  13.       //2.数组解构表达式：更新数组元素
  14.       let lesson = "es6";
  15.       let grade = 60;
  16.       //不要加let,不要加括号([lesson, grade] = ["php", 90]);
  17.       [lesson, grade] = ["php", 90];
  18.       console.log(lesson, grade);
  20.       //3.使用默认值
  21.       let [brand, model, color = "red"] = ["huawei", "p40"];
  22.       console.log(brand, model, color);
  24.       //4.在函数参数中也可以使用数组解构
  25.       function add([x, y = 100]) {
  26.         return x + y;
  27.       }
  28.       console.log(add([50, 100]));
  29.       console.log(add([100]));
  31.       //5.数组嵌套解构
  32.       let [a1, a2, [a3, a4], a5] = [10, 20, [30, 40], 50];
  33.       console.log(a1, a2, a3, a4, a5);

七、学习总结

1.let

  • 禁止重复声明

  • 不存在变量提升

  • 支持块作用域

2.const

  • const声明只读变量：常量

  • const声明变量必须初始化

  • 禁止重复声明

  • 支持块作用域

  • 禁止更新

  • 可能会更新的或常用的都使用let,除非不会或不太可能被修改的采用const

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

  • 使用var声明的变量会出现在全局环境中

  • 可以用立即执行函数来创建临时变量，这样就不会污染全局环境

  1. (function () {
  2.         var role = "custom";
  3.       })();
  • 也可以创建一个命名空间
  1.       var ns = {};
  2.       ns.id = 10;
  3.       ns.username = "wang";
  4.       ns.email = "wang@qq.com";
  5.       console.log(window.ns.id, window.ns.username, window.ns.email);
  • 使用let/const声明的变量不会成为全局对象window的属性
  • let和const声明的变量只会出现在词法作用域/块作用域/静态作用域中

4.解构

  • 解构主要是针对对象和数组

  • 解构的目的：将集合数据按规则打散到一些独立的变量中

  • 解构语法：解构变量声明 = 要被解构的数据

  1. let { username, email } = {username: "wang",email: "wang@qq.com",};

  • 对象的属性名必须与左边解构变量声明模板中的变量名同名

  • 解构变量必须初始化

  • 解构表达式可以用来更新变量

  1. let a1 = 10;
  2. let b1 = 20;
  3. ({ a1, b1 } = { a1: 15, b1: 60 });
  4. console.log(a1, b1);
  • 解构声明中可以设置默认值
  1. let stu = {stuName: "wang",gender: "male",};
  2. let { stuName, gender = "famale", age = 15 } = stu;
  3. console.log(stuName, gender, age);
  • 解构声明中可以使用变量别名
  1. const book = {name: "ES6开发指南",price: 109,};
  2. let { name: bookname, price: bookprice } = book;
  3. console.log(bookname, bookprice);

5.嵌套对象解构

  • 对象的属性值也可以是对象或其它复杂类型
  1. const stu = {name: "wang",
  2.              course: {
  3.                   php: {level: "basis",grade: 80,},
  4.                   front: {level: "advance",grade: 70,},
  5.                      },
  6.             };
  7. let {course: { php },} = stu;
  8. console.table(php);
  9. let { course: { php: { level },},} = stu;
  • 多次解构
  1. let {
  2.         course,
  3.         course: { php: phpinfo },
  4.         course: { php: { level: levelinfo },},
  5.     } = stu;
  6.       console.log(course, php, level);

6.数组解构

  • 数组解构和对象解构必须要初始化

  • 数组解构表达式：可以更新数组元素

  1. let lesson = "es6";
  2. let grade = 60;
  3. //不要加let,不要加括号([lesson, grade] = ["php", 90]);
  4. [lesson, grade] = ["php", 90];
  5. console.log(lesson, grade);
  • 也可以使用默认值
  1. let [brand, model, color = "red"] = ["huawei", "p40"];
  2. console.log(brand, model, color);
  • 在函数参数中也可以使用数组解构
  1. function add([x, y = 100]) {
  2.         return x + y;
  3.       }
  4. console.log(add([50, 100]));
  5. console.log(add([100]));
  • 数组嵌套解构
  1. let [a1, a2, [a3, a4], a5] = [10, 20, [30, 40], 50];
  2. console.log(a1, a2, a3, a4, a5);
上一条：ES6标签模板的使用方式下一条：let ,const功能与应用场景对象解析与数组解构
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多