likes
comments
collection

ES6知识点详细解析

作者站长头像
站长
· 阅读数 24

🍔let const 其他知识点补充

块级作用域的补充

  1. const 不可以在循环体里面声明变量

ES6知识点详细解析

ES6知识点详细解析

  1. ES6新增的遍历可迭代数组(对象)

for(var item of names)

for(let item of names)

ES6知识点详细解析

for(const item of names)

ES6知识点详细解析

ES6知识点详细解析

暂时性死区

在ES6中,有一个概念叫做暂时性死区,它表达的意思是在一个代码中,使用let、const声明的变量,在声明之前,变量都是不可以访问的

我们称这种现象为 temporal dead zone (暂时性死区,TDZ)ES6知识点详细解析

var let const 的选择

var 的使用
  1. var 的问题

我们需要明白一个事实,var表现出来的特殊性:比如作用于提升,window全局对象,没有块级作用域等都是一些历史遗留问题,是JavaScript在设计之初的一种缺陷,所以在以后的开发中不再使用var来定义变量了

  1. 关于 let 和 const 声明变量的担心

构建工具的基础上创建项目\开发项目 webpack/vite/rallup

babel 工具会将我们的 ES6 代码转化成 ES5 代码 ES6-->ES5

let 和 const 如何选择
  1. 优先推荐 const

因为 const 可以保证数据的安全性,如果用 let 声明的变量,后续有可能自己不小心更改了,如果不确定后续更改不更改这个变量,优先推荐使用 const 声明,只有当我们明确知道一个变量后续需要被重新赋值的话,再使用 let

ES6知识点详细解析

🍔字符串模板

🥗字符串模板的基本使用

ES6之前拼接字符串和其他标识符

ES6知识点详细解析

ES6之后模板字符串

ES6知识点详细解析

标签模板字符串的使用

ES6知识点详细解析

🍔ES6中的参数默认值

在 ES5 里面实现函数参数默认值

ES6知识点详细解析

ES6 里面的函数参数默认值

ES6知识点详细解析

对象参数和默认值以及解构

ES6知识点详细解析

有默认值的形参最好放在最后

ES6知识点详细解析

有默认值的函数的 length 属性(函数中的length值是形参的个数)

ES6知识点详细解析

🍔函数的剩余参数

ES6中引用了 rest parameter,可以将不定数量的参数放入到一个数组中

如果最后一个参数是...为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组

ES6知识点详细解析

arguments 与 剩余参数有什么区别呢?

  1. 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参
  2. arguments 对象不是一个真正的数组,而rest 参数是一个真正的数组,可以进行数组的所有操作
  3. arguments 是早期的 ECMAScript 中为了方便去获取所有的参数提供的一个数据结构,而 rest 参数是 ES6 中提供并且希望以此来代替 arguments 的

ES6知识点详细解析

🥗函数箭头参数的补充

  1. 箭头函数是没有显示原型的,所以不能作为构造函数,不能使用 new 来创建对象

👻

  1. 一句话答案:

因为箭头函数里面没有 [[Construct]] 这个内部槽,箭头函数的本质是变量,所以没有call

ES6知识点详细解析

  1. 进一步解释:

函数对象是一个支持[[Call]][[Construct]]内部方法的对象。每个支持[[Construct]]的对象必须支持[[Call]],也就是说,每个构造函数必须是一个函数对象。因此,构造函数也可以被称为 构造函数函数构造函数对象。 所以,想要对某个对象使用 new,就得确保该对象具有[[Construct]]这个内部方法。而箭头函数没有[[Construct]]

  1. 为什么没有 [[Construct]]

因为箭头函数设计之初,就是为了设计一种更简短的函数并且不绑定 this。所以箭头函数不为参数 super、this 或 new.target 定义本地绑定。箭头函数中的 this、super、arguments 及 new.target 这些值由外围最近一层非箭头函数决定。

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 不一定是全局对象

ES6知识点详细解析

ES6知识点详细解析

  1. 普通函数会做一个操作,在 new 的时候会把构造函数的显示原型赋值给 new 出来新对象的隐式原型

箭头函数为什么没有显示原型

ES6知识点详细解析

ES6知识点详细解析

箭头函数返回一个对象

ES6知识点详细解析

箭头函数与变量解构结合

ES6知识点详细解析

React 与 Immutable 的技术选型中的应用

很多时候,你可能想不到要这样用,所以再来举个例子,比如在 React 与 Immutable 的技术选型中,我们处理一个事件会这样做:

ES6知识点详细解析

箭头函数里面没有 this

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 但不一定是全局对象。箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值。

模拟一个实际开发中的例子:juejin.cn/post/684490…

我们的需求是点击一个按钮,改变该按钮的背景色。

为了方便开发,我们抽离一个 Button 组件,当需要使用的时候,直接:

ES6知识点详细解析

看着好像没有问题,结果却是报错Uncaught TypeError: Cannot read property 'style' of undefined

这是因为当使用 addEventListener() 为一个元素注册事件的时候,事件函数里的 this 值是该元素的引用。所以如果我们在 setBgColorconsole.log(this),this 指向的是按钮元素,那 this.element 就是 undefined,报错自然就理所当然了。

也许你会问,既然 this 都指向了按钮元素,那我们直接修改 setBgColor 函数为:

ES6知识点详细解析

确实可以这样做,但是在实际的开发中,我们可能会在 setBgColor 中还调用其他的函数,比如写成这种:

ES6知识点详细解析

最终版本:

ES5

ES6知识点详细解析

为避免 addEventListener 的影响,使用 bind 强制绑定 setBgColor() 的 this 为实例对象,使用 ES6,我们可以更好的解决这个问题:

ES6知识点详细解析

由于箭头函数没有 this,所以会向外层查找 this 的值,即 bindEvent 中的 this,此时 this 指向实例对象,所以可以正确的调用 this.setBgColor 方法, 而 this.setBgColor 中的 this 也会正确指向实例对象。

在这里再额外提一点,就是注意 bindEvent 和 setBgColor 在这里使用的是普通函数的形式,而非箭头函数,如果我们改成箭头函数,会导致函数里的 this 指向 window 对象 (非严格模式下)。

最后,因为箭头函数没有 this,所以也不能用 call()、apply()、bind() 这些方法改变 this 的指向,可以看一个例子:

ES6知识点详细解析

箭头函数中没有 arguments

箭头函数中的 arguments 会去上层作用域查找 arguments

ES6知识点详细解析

箭头函数没有自己的 arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的 arguments 对象:

ES6知识点详细解析

那如果我们就是要访问箭头函数的参数呢?你可以通过命名参数或者 rest 参数的形式访问参数:

ES6知识点详细解析

🥗Rest运算符

juejin.cn/post/684490…

函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

ES6知识点详细解析

rest参数和arguments对象的区别

剩余参数和arguments对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sortmapforEachpop
  • arguments对象还有一些附加的属性 (如callee属性)
  • 题外知识点,arguments 转化为真正的数组: var arr = Array.prototype.slice.call(arguments);

从 arguments 到数组

ES6知识点详细解析

解构剩余参数

剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。请参阅解构赋值

ES6知识点详细解析

数组中的应用

ES6中对数组以及对象使用解构(destructing)和rest参数语法

ES6知识点详细解析

然而当使用rest参数的时候,你必须将它放置在最后一个位置:

ES6知识点详细解析

当解构的参数个数超过了数组中元素个数的时候,多出来的参数的值会是undefined:

ES6知识点详细解析

但是我们可以对参数设置默认值,这样就不用担心出现undefined啦:

ES6知识点详细解析

利用rest可以实现的效果

ES6知识点详细解析

rest在对象中的应用

ES6知识点详细解析

rest对象基本用法

ES6知识点详细解析

显然,如果你想取不同的参数名,那么就无法使用简写形式。 起别名无法简写,让我们继续看一下其他例子:

ES6知识点详细解析

在解构对象的时候,同时使用rest参数语法可能会导致失败:

ES6知识点详细解析

接下来展示一下当使用对象解构语法,我们对代码可以做到怎样的精简:

ES6知识点详细解析

举例

让我们看一下在实际编码中,解构以及rest参数语法的使用场景。首先我们看一下函数的可变参数实现:

ES6知识点详细解析

Redux中的例子

让我们在redux中寻找一些例子。在redux源码中,存在一个util方法 - compose,它常被用来简化代码:

ES6知识点详细解析

使用compose:

ES6知识点详细解析

让我们看一下compose实际做了啥,这是一个精简的源码解释:

ES6知识点详细解析

让我们继续看一个例子,来理解上述的args到底是如何被转变的:

ES6知识点详细解析

ES6 JavaScript quiz 中关于解构和rest

ES6知识点详细解析

reduce

reduce的精华所在是将累计器逐个作用于数组成员上,把上一次输出的值作为下一次输入的值

reduce实质上是一个累计器函数,通过用户自定义的累计器对数组成员进行自定义累计,得出一个由累计器生成的值。另外reduce还有一个胞弟reduceRight,两个方法的功能其实是一样的,只不过reduce是升序执行,reduceRight是降序执行。

ES6知识点详细解析

基础知识点

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

reducer 逐个遍历数组元素,每一步都将当前元素的值与上一步的计算结果相加(上一步的计算结果是当前元素之前所有元素的总和)——直到没有更多的元素被相加。

ES6知识点详细解析

语法

callback:回调函数(必选)

initValue:初始值(可选)

一个 “reducer” 函数,包含四个参数:

  1. 形式:array.reduce((t, v, i, a) => {}, initValue)

total(t):上一次调用 callbackFn 完成计算的返回值(必选) 。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。

value(v):数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。

index(i):数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。 array(a):用于遍历的数组

  1. 初始值参数initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

计算过程

以t作为累计结果的初始值,不设置t则以数组第一个元素为初始值

开始遍历,使用累计器处理v,将v的映射结果累计到t上,结束此次循环,返回t

进入下一次循环,重复上述操作,直至数组最后一个元素

结束遍历,返回最终的t

异常

TypeError 数组为空且初始值 initialValue 未提供。

对空数组调用reduce()和reduceRight()是不会执行其回调函数的,可认为reduce()对空数组无效

示例

用法

ES6知识点详细解析

求数组所有值的和

ES6知识点详细解析

写成箭头函数的形式:

ES6知识点详细解析

累加对象数组里的值

要累加对象数组中包含的值,必须提供 initialValue,以便各个 item 正确通过你的函数。

ES6知识点详细解析

写成箭头函数的形式:

ES6知识点详细解析

更多用法: juejin.cn/post/684490…

🍔展开语法(Spread syntax)

基础知识

  1. 展开语法 (Spread syntax) , 可以在函数调用/数组构造时,将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时,将对象表达式按 key-value 的方式展开。字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)
  2. 三个连续的点具有两个含义:展开运算符(spread operator)和剩余运算符(rest operator)

展开运算符和rest运算符的区别(同样是...)

  1. 当...出现在 形参上 或 赋值运算符 左侧,表示 rest 运算符
  2. 当...出现在 实参上 或 赋值运算符 右侧,表示 展开运算符

展开语法的浅拷贝

展开运算符使用的对象如果只是针对简单的一级基础数据,就是深拷贝;

展开运算符使用的对象内容包含二级或更多的复杂的数据,那就是浅拷贝;

所以日常代码中如果对象中包含的数据比较单一且不做多于处理,用展开运算符和JSON.parse(JSON.stringify(obj))都可,但是数据格式复杂的情况下,还是要用深拷贝处理数据,避免相互影响。

ES6知识点详细解析

ES6知识点详细解析

函数传参中的应用

ES6之前,如果我们希望将数组作为参数传递给函数中的参数,我们可以使用Function的apply()方法。如下段代码所示:

ES6知识点详细解析

从上述代码,apply方法接受一个数组,将它们分拆成单个参数传递给函数进行调用。

ES6的展开语法能让我们以更简洁的方式进行调用,如下段代码所示:

ES6知识点详细解析

代码运行期间,JavaScript解释器调用myFunction之前,将会用1,4表达式替换...运算符:

ES6知识点详细解析

上述代码将会进行如下替换:替换后,函数中的代码将会继续执行。

ES6知识点详细解析

数组的相关应用

展开运算在数组中的工作原理。

没有展开语法的时候,只能组合使用 push, splice, concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法,通过字面量方式,构造新数组会变得更简单、更优雅。

展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置多次使用:

ES6知识点详细解析

代码运行期间,如下代码:

ES6知识点详细解析

上述代码将会替换成如下代码:

ES6知识点详细解析

ES5中push与ES6展开运算符

有时候,我们需要将一个数组的内容追加到另一个数组的末尾,ES6之前我们可以这么做,如下段代码所示:

ES6知识点详细解析

ES6的展开语法能以更简洁的形式实现,如下段代码所示:

ES6知识点详细解析

代码运行期间,如下代码:

ES6知识点详细解析

上述代码将会替换成如下代码:

ES6知识点详细解析

传递多个数组参数

我们可以使用展开语法传递多个数组进行参数传递,如下段代码所示:

ES6知识点详细解析

复制数组

当我们需要修改一个数组,但又不想改变原始数组(其他人可能会使用它)时,就必须复制它。

它正在选择数组中的每个元素,并将每个元素放在新的数组结构中。我们也可以使用 map 操作符实现数组的复制并进行身份映射。

ES6知识点详细解析

唯一数组

如果我们想从数组中筛选出重复的元素,那么最简单的解决方案是什么?

Set 对象仅存储唯一的元素,并且可以用数组填充。它也是可迭代的,因此我们可以将其展开到新的数组中,并且得到的数组中的值是唯一的。

ES6知识点详细解析

串联数组

可以用 concat 方法连接两个独立的数组,但是为什么不再次使用展开运算符呢?

ES6知识点详细解析

将参数作为数组进行传递

当传递参数时,展开运算符能够使我们的代码更具可读性。在 ES6 之前,我们必须将该函数应用于 arguments。现在我们可以将参数展开到函数中,从而使代码更简洁。

ES6知识点详细解析

数组切片

使用 slice 方法切片更加直接,但是如果需要的话,展开运算符也可以做到。但是必须一个个地去命名其余的元素,所以从大数组中进行切片的话,这不是个好方法。

ES6知识点详细解析

将参数转换为数组

Javascript 中的参数是类似数组的对象。你可以用索引来访问它,但是不能调用像 mapfilter 这样的数组方法。参数是一个可迭代的对象,那么我们做些什么呢?在它们前面放三个点,然后作为数组去访问!

ES6知识点详细解析

复制对象

最后,我们介绍对象操作。复制的工作方式与数组相同。在以前它可以通过 Object.assign() 和一个空的对象常量来实现。

ES6知识点详细解析

合并对象

合并的唯一区别是具有相同键的属性将被覆盖。最右边的属性具有最高优先级。

ES6知识点详细解析

将字符串拆分为字符

最后是字符串。你可以用展开运算符把字符串拆分为字符。当然,如果你用空字符串调用 split 方法也是一样的。

ES6知识点详细解析

将 NodeList 转换为数组

参数就像从 querySelectorAll 函数返回的 NodeList 一样。它们的行为也有点像数组,只是没有对应的方法。

ES6知识点详细解析

知识点扩充 map filter
  1. MDN map
  2. 🍇【定义】:一个带键的数据项的集合
  3. 🍈【区别】:像一个 Object 一样,它们最大的差别是 Map 允许任何类型的键(key)
  4. 🍉【方法和属性】:

ES6知识点详细解析

  1. 示例

ES6知识点详细解析

ES6知识点详细解析

juejin.cn/post/702598…

  1. MDN filter
  2. 箭头函数 filter((element, index, array) => { /* … */ } )
  3. 回调函数 filter(callbackFn, thisArg)
  4. 内联回调函数 filter(function(element, index, array) { /* … */ }, thisArg)
  5. 参数

callbackFn

用来测试数组中每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:

element 数组中当前正在处理的元素。

index 正在处理的元素在数组中的索引。

array 调用了 filter() 的数组本身。

thisArg 可选执行 callbackFn 时,用于 this 的值。

  1. 返回值:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
  2. filter() 不会改变原数组。

juejin.cn/post/684490…

map filter应用场景
  1. 第一组(包含名、姓、出生日期以及死亡日期)

ES6知识点详细解析

  1. 第二组(people数组,包含一组人名,名姓之间用逗号分隔)

ES6知识点详细解析

  1. 根据两组数据完成如下题目
  1. 筛选出生于16世纪的发明家;
  2. 以数组形式,列出其名与姓;
  3. 根据其出生日期,并从大到小排序;
  4. 计算所有的发明家加起来一共活了几岁;
  5. 按照其年龄大小排序;
  1. filter() 过滤操作,筛选符合条件的所有元素,若为true则返回组成新数组,以第一题为例:

ES6知识点详细解析

  1. map 映射操作,对原数组每个元素进行处理,并回传新的数组。以第二题为例:

ES6知识点详细解析

  1. sort 排序操作,默认排序顺序是根据字符串Unicode码点,如10在2之前,而数字又在大写字母之前, 大写字母在小写字母之前。也可使用比较函数,数组会按照调用该函数的返回值排序,格式如下

ES6知识点详细解析

  1. reduce() 归并操作,总共两个参数,第一个是函数,可以理解为累加器,遍历数组累加回传的返回值,第二个是初始数值。如果没有提供初始值,则将使用数组中的第一个元素。以第四题为例:

ES6知识点详细解析

juejin.cn/post/684490…

🍔复盘剩余参数与展开运算符的区别

剩余参数的应用

我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数,我们可以使用展开语法...进行获取。

ES6之前,我们可以这样获取剩余参数,如下段代码所示:

ES6知识点详细解析

ES6中,上述代码我们可以这样改下,如下段代码所示:

ES6知识点详细解析

有个我们需要注意的事项,一旦函数中的参数第一个参数使用剩余参数,便不能添加任何参数,否则将会抛出错误。例如下段代码所示:

ES6知识点详细解析

made by Q7Long 2022-09-10 16:23