你会使用ES6 ,但这几点你可能不知道,感觉身体被掏空!

2023-12-26 06:10

本文主要是介绍你会使用ES6 ,但这几点你可能不知道,感觉身体被掏空!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

let 的使用

我们知道 let 主要有三个特性:

  1. let 声明的变量的作用域是块级的 (es5中只有全局和函数作用域)
  2. let 不能重复声明已存在的变量;
  3. let 有暂时死区,不会被提升。

我们早期面试的时候,经常会考的一道题目是:

// 代码段1
var liList = document.querySelectorAll('li') // 共5个li
for( var i=0; i<liList.length; i++){liList[i].onclick = function(){console.log(i)}
}

大家都知道依次点击 li 会打印出 5 个 5。如果把 var i 改成 let i,就会分别打印出 0、1、2、3、4:

// 代码段2
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){liList[i].onclick = function(){console.log(i)}
}

然而,你会发现 for( let i=0; i<liList.length; i++),这样声明 i 的作用域是哪个?这边直接跟你说吧,i 的作用域只在for()括号里面,所以代码中依然只声明了一个 i,在 for 循环结束后,i 的值还是会变成 5 才对。这里可能就说明有一部分的人对 let 理解有误了。

于是我们方方老师大佬去看 MDN 的例子,发现鸡贼的 MDN 巧妙地避开了这个问题,它的例子是这样的:

clipboard.png

它直接在另外声明了一个 j 来保存, 为什么不直接用 i 呢?MDN 为了简化知识,隐瞒了什么?

经过我们方方老师大佬饥渴精神,不断的查资料,最后他总结这么几句自己的理解:

  1. for( let i = 0; i< 5; i++) 这句话的圆括号之间,有一个隐藏的作用域
  2. for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前,JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。

也就是说上面的代码段2可以近似近似近似地理解为:

// 代码段3
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){let i = 隐藏作用域中的i // 看这里看这里看这里liList[i].onclick = function(){console.log(i)}
}

那样的话,5 次循环,就会有 5 个不同的 i,console.log 出来的 i 当然也是不同的值。

再加上隐藏作用域里的 i,一共有 6 个 i。

这就是 MDN 加那句 let j = i 的原因:方便新人理解。

总得来说就是 let/const 在与 for 一起用时,会有一个 perIterationBindings 的概念(一种语法糖)。

let 到底有没有提升

之前我写过一篇 《你一度模糊的javascript执行上下文详解》, 说到js在一段<script>或者一个函数,都会生成一个执行上下文,就是js会先把声明的变量都 拿出来,并初始化为 undefined,这就解释了为什么在 var x = 1 之前 console.log(x) 会得到 undefined。

那let 的执行上下文,会是怎么样的呢?假设代码如下:

{let x = 1x = 2
}

我们只看 {} 里面的过程:

  1. 找到所有用 let 声明的变量,在环境中「创建」这些变量
  2. 开始执行代码(注意现在还没有初始化)
  3. 执行 x = 1,将 x 「初始化」为 1(这并不是一次赋值,如果代码是 let x,就将 x 初始化为 undefined)
  4. 执行 x = 2,对 x 进行「赋值」

这就解释了为什么在 let x 之前使用 x 会报错:

let x = 'global'
{console.log(x) // Uncaught ReferenceError: x is not definedlet x = 1
}

原因有两个:

  1. console.log(x) 中的 x 指的是下面的 x,而不是全局的 x
  2. 执行 log 时 x 还没「初始化」,所以不能使用(也就是所谓的暂时死区)

看到这里,你应该明白了 let 到底有没有提升:

  1. let 的「创建」过程被提升了,但是初始化没有提升。
  2. var 的「创建」和「初始化」都被提升了。
  3. function 的「创建」「初始化」和「赋值」都被提升了。

get 与 set 的方法

  1. Get指读取属性时调用的函数
  2. Set指写入属性时调用的函数。

有这么一道题是这样的:有没有可能存在一个变量同时满足下列条件:

a === 1 && a === 2 && a ===3

有的人可能会觉得这怎么可能变成立呢,一个变量两个值?这边就要引入我们set的方法了,我们可以在window,设置一个属性a ,如下定义:

var i = 0;Object.defineProperty(window, 'a',{get:function() {i += 1;return i;},
})

通过在window定义一个a,然后每次访问a的 i 的值会加作为a的值返回,所以我们在控制台输入:

clipboard.png

当然这个除了面试感觉没啥软用,但这能告诉你 get, set有什么用。

Symbol的巧用

我们知道:ES 6 引入了一个新的数据类型 Symbol, Symbol 可以创建一个独一无二的值(但并不是字符串)。

假如现在有一个对象,里面有一个私有属性,只能自己内部使用,外部调用不到,这时我们可以利用 Symbol来做:如下:

{let a = Symbol();let obj = {name: '小智',age: 18,[a]: '这个是私有属性'}window.obj = obj;
}

clipboard.png

如下,我有在外部无语你怎么用,都是调用不到 “这个是私有属性”,你可能会说这个有啥用,我只能回答你装x用的,面试可能也会问你 我们如何弄一个隐藏属性呢?答案就是 Symbol ,满婚满婚满婚。

以上,就是 Symbol 的简述,更详细更权威的知识参考下面的自学链接。

MDN: Symbol - JavaScript
阮一峰:ECMAScript 6入门

参考:

我用了两个月的时间才理解 let

一个笨笨的码农,我的世界只能终身学习

这篇关于你会使用ES6 ,但这几点你可能不知道,感觉身体被掏空!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/538348

相关文章

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流(parallelStream)的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本,并kill2.1 进程查看2.2 遇到的

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储:配置灵活性:编码示例引入依赖:配置ehcache.XML文件:配置

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程?1.2 为什么需要虚拟线程?二、虚拟线程与平台线程对比代码对比示例:三

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV(使用 StorageClass)创建 StorageClass2.创建 PV

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash