微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > PartIII 02 let、const与解构赋值（0901tue）
博主信息
博文 62
粉丝 2
评论 1
访问量 58154
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PartIII 02 let、const与解构赋值（0901tue）
老黑
原创
1580人浏览过

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

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：解构很强大, 有用, 以后尽可能得去用它
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录