当前位置: 首页 > news >正文

ES6:let和const命令解读以及变量的解构赋值

有时候,我们需要的不是答案,而是一双倾听的耳朵

文章目录

          • let和const命令
          • 变量的解构赋值

let和const命令
  • let和const命令都是声明变量的关键字,类同var
  • let特点
    • 用来声明变量,不能再次定义,但是值可以改变
    • 存在块级作用域
    • 不存在变量提升(暂时性死区),好的语法习惯先声明后使用
    • let在全局环境下统一的变量,不会挂载到window对象下
    {let a = 10var b = 2
    }
    a // a is not defined
    b // 2
    
  • const特点
    • 定义常量(固定的值),不能再次定义,不能修改值
    • 定义常量的时候必须有值
    • 存在块级作用域
    • 不存在变量提升(暂时性死区),好的语法习惯先声明后使用
    • const在全局环境下统一的变量,不会挂载到window对象下
    const PI = 3.1415
    PI // 3.1415
    PI = 3  // Assignment to constant variable
    
变量的解构赋值
  • 数组的结构赋值
    const arr = [40, 10, 100]
    // 得到所有数据,通过变量去接收
    const a = arr[0]
    const b = arr[1]
    const c = arr[2]
    console.log(a, b, c) // 40 10 100
    // ES6中解构赋值
    const arr1 = [40, 10, 100]
    // 情况1:数组有几项数据,就定义几个变量,一一对应
    const [a1, b1, c1] = arr
    console.log(a1, b1, c1) // 40 10 100
    // 情况2:变量少于数组长度,按照变量的顺序进行对应即可
    const [a2, b2] = arr
    console.log(a2, b2) // 40 10
    // 情况3:变量多于数组长度,按照变量的顺序进行对应,多余的变量值就是undefined
    const [a3, b3, c3, d] = arr
    console.log(a3, b3, c3, d) // 40 10 100 undefined
    // 情况4:按需取值,使用空占位即可
    const [, b4, c4] = arr
    console.log(b4, c4) // 10 100
    // 情况5:除去某几项,得到剩余的所有选项 (...的作用:剩余匹配)
    const [a5,...arr2] = arr
    console.log(arr2) // [10, 100]
    // 情况6:多维数组解构赋值,把握结构对应即可
    const arr3 = [1, 2, [100, 200]]
    const [, , [a6, b6]] = arr3
    console.log(a6, b6) // 100 200
    
  • 对象的解构赋值
    const obj = { name: 'tom', age: 10, hobby: { ball: '打球', game: '游戏' }
    }
    // 解构赋值
    const {name, age, hobby: {game}} = obj
    // 等同于
    const name = obj.name
    const age = obj.age
    const game = obj.hobby.game
    console.log(name, age, game) // tom 10 游戏
    
  • 函数相关
    • 箭头函数

      // 1.如果形参只有一个,则可以省略小括号
      var fn = x => {return x * x
      }
      console.log(fn(4)) // 16
      // 2.如果函数只有一行代码,则可以省略大括号,并且自带return效果(意思是自动将函数体返回)
      var fn1 = (x, y) => x + y
      console.log(fn1(2, 3)) // 5
      var fn2 = x => x * x 
      console.log(fn2(2)) // 4
      // 3.箭头函数内部没有arguments对象 (arguments对象,可以获取到函数所有的实参)
      var fn3 = () => { console.log(arguments) } // 报错,没有找到arguments对象
      fn3()
      var fn4 = (x, y, ...z) => {// x 用于接收第一个实参的值// y 用于接收第二个实参的值// z 用于接收剩余所有实参的值console.log(x) // 1console.log(y) // 3console.log(z) // 5, 7, 9, 10
      }
      fn4(1, 3, 5, 7, 9, 10)
      var fn5 = (...value) => { console.log(value) } // 使用value接收所有实参的值
      fn5(2, 4, 6, 8, 10)
      // 4.注意: 箭头函数内部的this执行和之前不一样了
      // this的值取决于声明的环境,不取决于调用的环境
      // 理解为: 箭头函数没有自己的this 或者 箭头函数内部的this执行外部作用域
      var fn6 = () => { console.log(this) } // window
      fn6()
      var obj = { abc: fn }
      obj.abc() // 还是window对象,和谁来调用没关系
      const obj1 = {age: 17,say() {console.log(this.age) // 此时的this是obj本身},say2: () => {console.log(this.age) // 此时的this是window,是当前函数作用域外部的作用域},// say3属于obj的一个普通函数,此时this就是obj本身say3() {setTimeout(function () {// 这个位置是一个匿名函数,一般this指向的是windowconsole.log(this.age)}, 1000)setTimeout(() => {// 没有this,使用的是外层作用域的this,就是obj本身console.log(this.age)}, 1000)}
      }
      obj1.say() // 17
      obj1.say2() // undefined
      obj1.say3() // undefined 17
      // 5.箭头函数不能当做构造函数
      var fn7 = () => {}
      var obj = new fn7() // 报错,fn is a constructor
      

      在这里插入图片描述

    • 参数默认值

      // 之前的写法
      function fn(a) {// 没有传参的时候,可以做一个默认值处理a = a || '默认值'console.log(a)
      }
      fn()
      // ES6写法
      function fn(a = '默认值') {// 如果调用参数没有传参a, 那么a的默认值就是 = 后的值console.log(a)
      }
      fn()
      
    • 匹配剩余参数

      // 之前的写法
      const add = (a, b, c) => {// 累加所有的参数return a + b + c
      }
      console.log(add(1, 4, 5))
      // 假设传参的个数不固定 有多个 此时用ES6语法会更容易
      const add = (...args) => {// args匹配到所有的参数,是数组类型let result = 0for (let i = 0; i < args.length; i++) {result += args[i]}return result
      }
      console.log(add(1, 2, 4))
      
  • 数组相关
    • 展开运算符 ...
      // 之前的写法
      const arr = [1, 10, 4, 50, 60]
      const max1 = Math.max(1, 10, 4, 50)
      console.log(max1) // 50
      // ES6写法
      const max2 = Math.max(...arr)
      console.log(max) // 50
      // 拼接数组
      const arr1 = [1, 2]
      const arr2 = [3, 4]
      const arr3 = [...arr1, ...arr2]
      console.log(arr3) // [1, 2, 3, 4]
      // 对象的合并
      const obj1 = { name: 'tom' }
      const obj2 = {age: 10,gender: '女',...obj1 // 把obj1的属性合并到obj2中
      }
      console.log(obj2) // {age: 10, gender: "女", name: "tom"}
      
    • Array.from() 把伪数组转成数组
      // 伪数组
      const arrObj = {0: 'tom',1: 'tony',2: 'lucy',length: 3
      }
      // 将上述伪数组转成真数组
      const arr = Array.from(arrObj)
      console.log(arr) // ['tom', 'tony', 'lucy']
      // 1.length决定数组的长度
      // 2.如果伪数组中数据不够length定义的长度,剩余的显示undefined
      
    • forEach() 遍历函数
      const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
      // item是每次遍历对应的数据选项
      // i 是每次对应的索引
      arr.forEach((item,i)=>{console.log(item,i)
      })
      
    • find() 查找数组中符合条件的选项
      const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
      const item = arr.find(item => {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name === 'nick'
      })
      console.log(item)
      
    • findIndex() 查找数组中符合条件的第一个选项的索引
      const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
      const i = arr.findIndex(item => {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name === 'tom'
      })
      console.log(i)
      
  • 字符串相关
    • 模板字符串 (字符串拼接更方便;支持换行)
      const name = 'tony'
      const age = 20
      const str = name + '今年' + age + '岁'
      console.log(str)
      // 模板字符串写法
      const str1 = `${name}今年${age}`
      console.log(str1)
      const html = '<div><p>名字:Lucy</p><p>年龄:28</p></div>'
      const html1 = `<div><p>名字:Lucy</p>;<p>年龄:28</p>;</div>
      `
      
    • 字符串扩展API
      • includes() 判断当前字符串是否包含某段字符串
      • startsWith() 判断是否以某一段字符串开头
      • endWith() 判断是否以某一段字符串结尾
      • repeat() 重复拼接同一段字符串
      • padStart() 补齐字符串长度,不够使用某一个字符串进行补全,往前补
      • padEnd() 补齐字符串长度,不够使用某一个字符串进行补全,往后补
      const str = 'Hi es6'
      // 判断是否包含 es 字符串      
      console.log(str.includes('es')); // true
      console.log(str.includes('es1')); // false
      // 判断是否以 Hi 字符串开头     
      console.log(str.startsWith('Hi')); // true
      console.log(str.startsWith('hi')); //false
      // 判断是否以 s6 字符串结尾   
      console.log(str.endsWith('s6')); // true
      console.log(str.endsWith('S6')); // false
      // 重复拼接3次 Hi es6 字符串   重复拼接同一段字符串
      console.log(str.repeat(3)); // Hi es6Hi es6Hi es6
      const str2 = '1'
      // 往 1 之前补 0 , 补齐之后一共6位    
      console.log(str2.padStart(6, '0'));
      // 往 1 之后补 0 , 补齐之后一共6位     
      console.log(str2.padEnd(6, '0'));
      
  • Number相关
    • 以前学的转换数字函数
      • parseInt() 转成整数
      • parseFloat() 转换成浮点数(小数)
    • ES6中的转换数字函数
      • Number.parseInt()
      • Number.parseFloat()
  • ES6集合-Set
    • Set是一个集合,和Array类似,数组的值可以重复,而Set的值不可重复。Set用于数组去重
    • 在js环境中,提供了Set的构造函数,就是创建一个Set集合:newSet()
    • 集合的值不能重复
      // 创建Set集合
      const set = new Set()
      // Set添加数据使用add()函数
      set.add(1)
      set.add(2)
      set.add(3)
      // 添加一个重复的数据,添加无效
      set.add(2)
      console.log(set)
      
    • Set数组去重
      const arr = [1, 2, 2, 3, 5, 4, 5]
      // 将数组转换成set, new Set(数组) 得到一个Set集合
      const set = new Set(arr)
      console.log(set)
      // 将set转换成数组
      // 方式1:
      const arr2 = Array.from(set)
      console.log(arr2)
      // 方式2:
      const arr3 = [...set]
      console.log(arr3)
      
  • ES6语法兼容
    • 总结:ES6提升了语法和API两个方面
    • 采用banel工具使用ES6语法降级到ES5语法,从而去兼容更多的浏览器
    • 官网地址: https://babeljs.io/
    • 工具作用:Babel is a JavaScript compiler. (babel是一个js编译器)
      • 将ES6语法转换成ES5语法

相关文章:

ES6:let和const命令解读以及变量的解构赋值

有时候&#xff0c;我们需要的不是答案&#xff0c;而是一双倾听的耳朵 文章目录 let和const命令变量的解构赋值 let和const命令 let和const命令都是声明变量的关键字&#xff0c;类同varlet特点 用来声明变量&#xff0c;不能再次定义&#xff0c;但是值可以改变存在块级作用…...

java-collection集合整理0.9.4

java-集合整理0.9.0 基本结构基本概念实例化举例遍历获取指定值 2024年10月17日09:43:16–0.9.0 2024年10月18日11:00:59—0.9.4 基本结构 Collection 是最顶级的接口。分为 List 和 Set 两大类。List 分为&#xff1a;ArrayList、LinkedList、Vector。Set 分为&#xff1a;Ha…...

ParallelsDesktop20最新版本虚拟机 一键切换系统 游戏娱乐两不误

让工作生活更高效&#xff1a;Parallels Desktop 20最新版本虚拟机的神奇之处 大家好&#xff01;&#x1f44b; 今天我要跟大家安利一款让我工作效率飞升的神器——Parallels Desktop 20最新版本虚拟机。作为一个日常需要在不同操作系统间来回穿梭的人&#xff0c;这款软件简直…...

现代C语言:C23标准重大更新

虽然没有固定标准&#xff0c;但一般将C99之后的C语言标准称为“现代C语言”&#xff0c;目前的最新标准为C23。C语言的演化包括标准C89、C90、C99、C11、C17和C23&#xff0c;C23是C语言标准的一次重大修订&#xff0c;截至2024年3月&#xff0c;最新版本的gcc和 clang实现了C…...

Maven进阶——坐标、依赖、仓库

目录 1.pomxml文件 2. 坐标 2.1 坐标的概念 2.2 坐标的意义 2.3 坐标的含义 2.4 自己项目的坐标 2.5 第三方项目坐标 3. 依赖 3.1 依赖的意义 3.2 依赖的使用 3.3 第三方依赖的查找方法 3.4 依赖范围 3.5 依赖传递和可选依赖 3.5.1 依赖传递 3.5.2 依赖范围对传…...

Android中的内存泄漏及其检测方式

Android中的内存泄漏及其检测方式 一、Android内存泄漏概述 在Android开发中&#xff0c;内存泄漏是一个常见且严重的问题。内存泄漏指的是在应用程序中&#xff0c;由于某些原因&#xff0c;已经不再使用的对象仍然被引用&#xff0c;导致垃圾回收器&#xff08;Garbage Col…...

【雷电模拟器命令合集操作大全】官方文档整理贴

此贴是官方的帮助整理文档在这里插入代码片 一起来看看几个主要命令&#xff0c;大部分命令读者可以自己试试~ 1、launch 支持2种启动雷电模拟器的方式 –name顾名思义&#xff0c;应该是模拟器的标题栏的名字&#xff0c;本人经过验证果然如此! –index mnq_idx&#xff0c;模…...

redis的配置文件解析

我的后端学习大纲 我的Redis学习大纲 1.1.Redis的配置文件&#xff1a; 1.Redis的配置文件名称是&#xff1a;redis.conf 2.在vim这个配置文件的时候&#xff0c;默认是不显示行号的&#xff0c;可以编辑下面这个文件&#xff0c;末尾加上set nu&#xff0c;就会显示行号: 1.…...

Python中的元组和列表

‌Python 列表 Python有6个序列的内置类型&#xff0c;但最常见的是列表和元组。 列表是最常用的Python数据类型&#xff0c;它可以作为一个方括号内的逗号分隔值出现。 列表的数据项不需要具有相同的类型 创建一个列表&#xff0c;只要把逗号分隔的不同的数据项使用方括号…...

【AI战略思考7】粮草筹集完毕和我的朋友分类

注明&#xff1a;这是我昨晚12点多发布在朋友圈的&#xff0c;更新加工后的版本 粮草筹集完毕 统计完成 昨晚从7点半到晚上11点&#xff0c;借款的意向统计完成了&#xff0c;刚好凑够6个月&#x1f604;&#xff0c;我觉得应该够了&#xff0c;我乐观估计是3个月内找到工作&…...

科大讯飞AI开发者大赛颁奖典礼,万码优才荣获前三甲!

在近日揭晓的科大讯飞AI开发者大赛中&#xff0c;万码优才APP凭借其卓越的技术实力、创新的应用方案以及深厚的行业洞察力&#xff0c;在上百个参赛队伍中脱颖而出&#xff0c;在AI Agent助力行业应用升级赛道荣获三甲排名&#xff01;再次证明了其在人工智能领域的领先地位与无…...

Redis 哨兵机制

哨兵机制 哨兵机制的介绍 哨兵 (Sentinel) 先来看一下Redis Sentinel 相关名词解释&#xff1a; 在之前的主从复制中&#xff0c;存在一个问题&#xff0c;那就是当主节点挂了后&#xff0c;通过人工干预的方式来解决是比较繁琐且不那么靠谱的。 在实际开发中&#xff0c;对…...

linux-磁盘io情况、性能排查

命令安装 iostat属于sysstat软件包。可以直接安装。 yum install sysstat操作命令解析 iostat %user&#xff1a;CPU处在用户模式下的时间百分比。%nice&#xff1a;CPU处在带NICE值的用户模式下的时间百分比。%system&#xff1a;CPU处在系统模式下的时间百分比。%iowait&a…...

NC 单据模板自定义项 设置参照,比如部门参照、自定义参照等

NC 单据模板自定义项 设置参照&#xff08;自定义参照&#xff09; 一、如图下图&#xff0c;NC 单据模板自定义项 设置自定义参照&#xff1a; 1、选择需要设置参照的自定义字段&#xff0c;选择高级属性页签&#xff0c;在类型设置中&#xff0c;数据类型选择参照信息&#…...

table-cascade 使用

stable-cascade 使用教程 English 中文 1.安装最新版本的 Comyfui 2.将 https://huggingface.co/stabilityai/stable-cascade/tree/main 下面的 stage_b 和 stage_c 模型放到 ComfyUI/models/unet 下面 3.将 https://huggingface.co/stabilityai/stable-cascade/tree/main …...

Android SELinux——策略文件配置结构(八)

在 Android 系统中,SELinux 主要是通过一系列配置文件来进行管理和配置的。这些配置文件涵盖了策略定义、标签映射、签名信息等多个方面。 一、SeLinux文件体系 之前提到 Android 架构中大致包含 AOSP、厂商、Vendor 等部分。在 Android 8 以上的系统中,AOSP 和厂商、供应商…...

【数据结构与算法】队列——数据世界中的“有序使者”

大家好&#xff0c;我是小卡皮巴拉 文章目录 目录 引言 一.队列的基本概念 1.1 队列的定义 1.2 队列的特性 1.3 队列的基本操作 二.队列的实现方式 2.1 基于链表的队列 2.2 基于数组的队列 三.基于链表的队列实现 定义链表队列的结构 初始化 入队列——向队列中插…...

yolov11 部署 TensorRT,预处理和后处理用 C++ cuda 加速,速度快到飞起

之前搞过不少部署&#xff0c;也玩过tensorRT部署模型&#xff08;但都是模型推理用gpu&#xff0c;后处理还是用cpu进行&#xff09;&#xff0c;有网友问能出一篇tensorRT用gpu对模型后处理进行加速的。由于之前用的都是非cuda支持的边缘芯片&#xff0c;没有写过cuda代码&am…...

国际期货收费行情源CTP推送式/期货配资软件开发对接行情源的技术性说明

在现代金融市场中&#xff0c;期货交易因其高风险和高回报特性而备受关注。为了满足期货交易者的需求&#xff0c;开发高效、稳定和安全的期货交易软件变得尤为重要。本文将对国际期货收费行情源CTP推送式及期货配资软件的开发对接行情源的技术细节进行详细说明。 一、CTP&…...

上拉电阻和下拉电阻在电路中的作用(一)

上拉电阻和下拉电阻在电路中的作用&#xff08;一&#xff09; 1.什么是上下拉电阻2.上下拉电阻的作用&#xff1a;2.1.维持输入引脚处于稳定状态。2.2.配合三极管和MOS进行电平转换电路设计2.3.OC、OD电路&#xff08;Open Collector集电极开路、Open Drain漏电极开路&#xf…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...