jspush(职场上push是什么意思)

大家好，我是讯享网，大家多多关注。

全文5530字，预计学习时间11分钟。

扩展操作符在ES6中首次引入，并很快成为最流行的功能之一。事实上，扩展操作符只适用于数组，但仍有建议认为它的功能可以扩展到对象。最后，ES9中引入了这个功能。

本教程将解释为什么应该使用扩展操作符以及它是如何工作的。

目录

1.为什么要使用扩展运算符？

2.克隆阵列/对象

3.将类数组结构转换成数组。

4.将运算符扩展为参数。

5.将元素添加到数组/对象中

6.合并数组/对象

为什么使用扩展操作符？

看完上面的列表，你可能会想，“JavaScript已经可以满足要求了，为什么还要用扩展操作符呢？”先介绍不变性。

牛津词典:不变的-随着时间的推移不变或不变的。

作为软件开发的一个术语，不变性指的是一个状态不能随时间改变的值。其实最常用的值(原始值，比如字符串，整数等。)都是不可变的。

然而，JavaScript中非常特殊的一点是，其中的数组和对象实际上是可变的。这可能会成为一个大问题。以下例子说明了原因:

const mySquirtle={name:’杰尼龟’，type:’水’，HP:100 }；const anothers quirtle = mySquirtle；anothersquirtle . HP = 0；console . log(mySquirtle)；//结果:{ name:’杰尼龟’，type:’水’，hp: 0 }

从上面的代码可以看出，我们有一个变量松鼠(杰尼龟)。因为我刚去了神奇宝贝中心，这个杰尼龟的HP值是100。

因为您想要anothers squirtle，所以您声明了变量anothers squirtle，并将初始杰尼龟指定为其值。经过一场苦战，另一个杰尼龟被打败了。因此，访问另一个杰尼龟的HP值，并将其更改为0。接下来，检查初始杰尼龟，输入console.log和…

等等，什么？初始杰尼龟的HP下降到0。这怎么可能呢？可怜的杰尼龟怎么了？原来是JavaScript出现了变异。接下来，我来解释一下原因。

当创建anotherSquirtle变量并指定初始杰尼龟作为其值时，实际上是为初始杰尼龟对象的内存位置分配了一个引用。这是因为JavaScript数组和对象是引用数据类型。与基本数据类型不同，引用数据类型指向存储实际对象/数组的内存地址。

为了便于理解，您可以将引用数据类型视为指向全局变量的指针。更改引用数据类型的值实际上是更改全局变量的值。

这意味着当你将anotherSquirtle的HP值改为0时，你实际上是将内存中存储的杰尼龟对象的HP值改为0。这就是为什么MyQuirtle的HP值是0——因为MyQuirtle是对存储在内存中的对象的引用，可以通过anotherSquirtle变量来更改。谢谢JavaScript。

如何解决这个问题？

为了避免变量的变化，当你想要复制数组/对象时，你需要创建一个数组/对象实例。如何实现这种操作？

使用扩展运算符。

扩展运算符是如何工作的？

从MDN文档中我们可以发现:spread syntax，可以在函数调用或数组构造时，在语法层面扩展数组表达式或字符串等iterable，也可以在构造literal对象时，以key-value方式扩展对象表达式。

简而言之，扩展运算符…..扩展iterable中的项(iterable指的是接收方的任何可回收项，如字符串、数组、集合等。).(接收器用于接收扩展值。)为了便于理解，下面是一个简单的数组示例:

常数numbers = [1，2，3]；console.log(…数字)；//结果:1 2 3const pokemon = [‘杰尼龟’，’布尔巴苏尔’，’小火龙’]；console.log(…口袋妖怪)；//杰尼龟·布尔巴苏尔·查尔曼德·康斯特·波凯德克斯= [ {姓名:’杰尼龟’，类型:’水’ }，{姓名:’布尔巴苏尔’，类型:’植物’ }，{姓名:’小火龙’，类型:’火’ }]；console.log(…poke dex)；//{名称:’杰尼龟’，类型:’水’ } {名称:’布尔巴苏尔’，类型:’植物’ } {名称:’小火龙’，类型:’火’ }导入熊猫作为pd

在数组中使用扩展运算符的三个示例

如上所示，当在数组上使用扩展操作符时，可以获得数组中包含的每个单独的项。在上述所有示例中，接收方是一个函数，即console.log函数。够简单吗？

克隆/对象

现在您已经知道了扩展操作符是如何工作的，您可以用它来复制数组和对象，而不用改变它们的值。怎么做？扩展内容，然后使用array []或object literal {}生成数组/对象实例。

以杰尼龟为例，我们可以克隆mySquirtle变量来解决上述问题:

const mySquirtle = { name:’杰尼龟’，type:’水’，HP:100 }；const anotherSquirtle = {…mySquirtle }；anothersquirtle . HP = 0；console . log(anotherSquirtle)；//结果:{ name:’杰尼龟’，type:’水’，HP:0 } console . log(mySquirtle)；//结果:{name:’ squirtle ‘，type:’ water ‘，HP: 100}使用扩展运算符复制一个对象。

通过解构mySquirtle变量的内容并使用扩展运算符使用对象的文字量，创建了杰尼龟对象的新实例。这样，就防止了变量的突然变化。

使用相同的语法复制数组:

const pokemon = [‘杰尼龟’，’布尔巴苏尔’，’小火龙’]；const pokedex = […口袋妖怪]；pokedex . push(‘ Cyndaquil ‘)；console.log(口袋妖怪)；//[‘杰尼龟’，’布尔巴苏尔’，’小火龙’]console . log(pokedex)；//[‘杰尼龟’，’布尔巴苏尔’，’小火龙’，’ Cyndaquil’ ]

使用扩展运算符复制数组。

注意:extend操作符只执行浅层复制。这意味着，如果引用数据类型存储在数组/对象中，当使用扩展操作符复制时，嵌套的数组/对象将包含对原始对象的引用，因此其值将是可变的。

将类数组对象转换成数组。

类对象非常类似于数组。它们通常有一个数字元素和一个长度属性。然而，这两者之间有一个关键的区别:类数组对象没有任何数组函数。

类对象包含主要由DOM方法返回的HTML节点列表，以及由每个JS函数和少数其他函数自动生成的参数变量。

使用与克隆数组相同的语法，您可以使用扩展运算符将类数组结构转换为数组，这可以取代使用array的方法。

const nodeList = document . getelementsbyclassname(” pokemon “)；常量数组= […nodeList]；console.log(节点列表)；//结果:HTMLCollection [ div.pokemon，div . pokemon]console . log(array)；//Result: Array [ div.pokemon，div.pokemon ]

将节点列表转换为数组

使用这种技术，任何类型的数组结构都可以转换成数组，并且可以访问所有的数组函数。

扩展运算符用作参数。

一些函数接受可变数量的参数。典型的例子之一就是数学集中的函数。以Math.max()函数为例。它接受n个数值参数，并返回最大的参数。假设您需要向Math.max()函数传递一个数字数组。我该怎么办？

您可以这样做:

常数numbers = [1，4，5]；const max = Math.max(numbers[0]，numbers[1]，numbers[2])；console.log(最大)；//结果:5

但是，这样做无疑是自取灭亡。如果有20个值呢？1000值呢？您真的想通过索引访问每个值吗？当然不是。我们可以使用extend运算符提取数组中的每个值，如下所示:

常数= [1，4，5，6，9，2，3，4，5，6]；const max = Math.max(…数字)；console.log(最大)；//结果:9

拯救者:分机接线员。

添加新元素

向数组中添加项目

要向数组中添加新元素，首先需要扩展数组的内容，并使用数字文字[]创建一个数组实例。您需要包含原始数组的内容和要添加的值:

const pokemon = [‘杰尼龟’，’ bulba sur ‘]；const charmander = ‘小火龙’；const cyndaquil = ‘ Cyndaquilconst pokedex = […口袋妖怪、charmander、cyndaquil】；console . log(poke dex)；//结果:[‘杰尼龟’，’布尔巴苏尔’，’小火龙’，’ Cyndaquil’ ]

使用extend运算符向数组中添加项目。

如您所见，您可以随意添加新项目。

向对象添加属性。

通过使用与数组相同的语法，您可以在克隆对象时轻松添加新属性。只需稍加转换，就可以使用不同的语法向对象添加属性(也可用于数组):

const basicSquirtle = { name:’杰尼龟’，type:’水’ }；const fullSquirtle = {…basicSquirtle，物种:‘小乌龟口袋妖怪’，进化:‘战兽’}；console . log(fullSquirtle)；//结果:{名字:’杰尼龟’，类型:’水’，种类:’小乌龟口袋妖怪’，进化:’战兽’ }

正如您所看到的，新变量可以直接在对象的文本中声明和初始化，而不是在外部。

合并数组/对象

排列

如上例所示，可以通过扩展数组并使用数组文字来合并两个数组。然而，这一部分不是简单地添加新元素，而是添加另一个(扩展的)数组:

const pokemon = [‘杰尼龟’，’布尔巴苏尔’，’小火龙’]；const morePokemon = [‘小锯鳄’，’ Chikorita ‘，’ Cyndaquil ‘]；const pokedex = […口袋妖怪，…more pokemon]；console . log(poke dex)；//结果:[‘杰尼龟’，’布尔巴苏尔’，’小火龙’，’小锯鳄’，’奇科瑞塔’，’辛达库伊尔’]使用扩展操作进行匹配和数组。

这也适用于数组对象:

const pokemon = [ { name:’杰尼龟’，type:’水’ }，{ name: ‘Bulbasur ‘，type:’植物’ }]；const morePokemon = [{ name:’小火龙’，type:’火’ }]；const pokedex = […口袋妖怪，…more pokemon]；console . log(poke dex)；//结果:[ { name:’杰尼龟’，type: ‘Water’ }，{ name: ‘Bulbasur ‘，type: ‘Plant’ }，{ name:’小火龙’，type:’ Fire ‘ }]用spread运算符合并两个对象数组

目标

您可以使用与之前相同的语法将两个(或更多)对象合并为一个对象(您可能已经注意到扩展运算符以非常相似的方式用于数组和对象):

const baseSquirtle = { name:’杰尼龟’，type:’水’ }；const squirtleDetails = { species:’小乌龟口袋妖怪’，evolution:’ Wartortle ‘ }；const squirtle = {…baseSquirtle，…squirtle details }；console . log(squirtle)；//结果:{名字:’杰尼龟’，类型:’水’，种类:’小乌龟口袋妖怪’，进化:’战争怪’ }

使用扩展操作来匹配和合并对象。

本教程解释了为什么应该使用扩展操作符(重点是不变性！)，它的工作原理和几种基本用法。

留言关注

我们一起分享AI学习和开发的干货。

如需转载，请在后台留言，遵循转载规范。