脚本宝典收集整理的这篇文章主要介绍了了解JavaScript中的Spread运算符，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

较新版本的JavaScript在表现力和易于开发方面为语言带来了巨大的改进，但快速的变化使许多开发人员感觉他们正在努力跟上。 随着WordPress现在在新的Gutenberg编辑器中采用React和现代JavaScript，WordPRess开发人员的大量受众正在被带入这个世界，无论喜欢与否，并迅速争先恐后地追赶。 在这篇文章中，我们将分解JavaScript语言最受欢迎的新功能之一 - Spread运算符（也称为...运算符）。 一位朋友最近请求帮助了解Gutenberg区块库中的一些示例代码，特别是图库。在撰写本文时，可以在此处看到代码，但它已经移动了几次，所以我在下面复制了它：

setImageAttributes( index, attributes ) {
  const { attributes: { images }, setattributes } = this.props;
  if ( ! images[ index ] ) {
    return;
  }
  setAttributes( {
    images: [
      ...images.slice( 0, index ),
      {
        ...images[ index ],
        ...attributes,
      },
      ...images.slice( index + 1 ),
    ],
  } );
}

特别令人困惑的部分是：

images: [
    ...images.slice( 0, index ),
    {
        ...images[ index ],
        ...attributes,
    },
    ...images.slice( index + 1 ),
],

这当然看起来有点吓人，特别是如果你没有花费你所有的时间最近编写现代JavaScript。让我们分解正在发生的事情。

用于数组的传播运算符

要知道的核心部分是...语法。这是扩展运算符，它基本上采用数组或对象，并将其扩展为其项集。这可以让你做一些奇特的事情，例如，如果你有代码：

const array = [1, 2];
const array2 = [...array, 3, 4];

array2的值最终会成为[1, 2, 3, 4]。 扩展运算符允许您基本上删除数组并获取其值。 回到我们原来的代码示例，在外层我们拥有的是什么

images = [...images.slice(0, index), {some stuff}, ...images.slice(index+1)]

这就是说：将images数组设置为从0到索引的旧图像数组，接着是我们将很快介绍的新事物，接着是从index + 1到结尾的旧图像数组。 换句话说，我们将替换该项目index。

传播对象的运算符

接下来，对于传播语法的对象，您可以执行Object.assign的等效操作，将对象的值复制到新对象中。看一个简单的代码示例：

const obj1 = {a: 'a', b: 'b'};
const obj2 = {c: 'c', ...obj1};

这导致obj2存在{a: 'a', b: 'b', c: 'c'}。

回顾Gutenberg代码示例，内部级别（{some stuff}在我们对数组的评估中标记），我们有：

{
  ...images[ index ],
  ...attributes,
}

要翻译：创建一个对象，首先使用值填充它images[index]，然后使用值填充它attributes。任何重复的值都会被后一个值覆盖。 所以这就是说：从我的旧图像中取出index，并将我所拥有的任何值应用attributes到它中，并attributes优先使用值。 如果我们回到我们的整个代码示例：

images: [
    ...images.slice( 0, index ),
    {
        ...images[ index ],
        ...attributes,
    },
    ...images.slice( index + 1 ),
],

整个大的想法是说：我有一个图像数组，一个索引和一组我想要应用的属性。返回一个更新项目的新图像数组，index以获得我的新属性。

Spread语法启用紧凑和富有表现力的代码

让我们来看看我们已经完成了什么。在一个简短的，希望现在可读的语句中，我们设法创建了一个数组的新副本，该数组在特定索引处具有更新的复杂对象。我们还没有修改原始数组，这意味着我们代码的其他部分可以调用它而不用担心副作用。美丽。 觉得可用，就经常来吧！JavaScript教程 Javascript技巧 脚本宝典 欢迎评论哦！巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的了解JavaScript中的Spread运算符全部内容，希望文章能够帮你解决了解JavaScript中的Spread运算符所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。