简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > let、const与解构赋值
Blogger Information
Blog 55
fans 3
comment 0
visits 54076
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
let、const与解构赋值
王佳祥
Original
1086 people have browsed it

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);
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！