锐客网

  1. 首页 > 睿知 > it技术 > >

ES6散布运算符解释和用法

javascriptIT知识运算符

本文概述

  • 散布运算符和数组操作
  • 散布运算符和字符串
ES6引入了一个称为散布运算符的新运算符, 它由三个点(… )组成。它允许迭代器在期望参数超过零的地方扩展。它赋予我们从数组中获取参数的特权。
散布运算符的语法与rest参数相似, 但是完全相反。让我们了解一下散布运算符的语法。
语法
var variablename1 = [...value];

上面语法中的三个点(… )是散布运算符, 其目标是特定变量中的整个值。
让我们尝试了解散布运算符在不同情况下的用法：
散布运算符和数组操作在这里, 我们将看到如何使用散布运算符来操纵数组。
构造数组文字
当我们使用文字形式构造数组时, 散布运算符允许我们在初始化的数组中插入另一个数组。
例子
let colors = ['Red', 'Yellow']; let newColors = [...colors, 'Violet', 'Orange', 'Green']; console.log(newColors);

输出如下
[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

串联数组
Spread运算符还可用于连接两个或多个数组。
例子
let colors = ['Red', 'Yellow']; let newColors = [...colors, 'Violet', 'Orange', 'Green']; console.log(newColors);

输出如下
[ 'Red', 'Yellow', 'Violet', 'Orange', 'Green' ]

复制数组
我们还可以使用散布运算符复制数组的实例。
例子
let colors = ['Red', 'Yellow']; let newColors = [...colors]; console.log(newColors);

输出如下
[ 'Red', 'Yellow' ]

如果我们在不使用spread运算符的情况下复制数组元素, 则在复制的数组中插入新元素将影响原始数组。
但是, 如果我们使用散布运算符复制数组, 则在复制的数组中插入元素不会影响原始数组。
让我们理解相同的插图。
例子
不使用散布算子
let colors = ['Red', 'Yellow']; let newColors = colors; newColors.push('Green'); console.log(newColors); console.log(colors);

输出如下
[ 'Red', 'Yellow', 'Green' ] [ 'Red', 'Yellow', 'Green' ]

使用散布算子
let colors = ['Red', 'Yellow']; let newColors = [...colors]; newColors.push('Green'); console.log(newColors); console.log(colors);

输出如下
[ 'Red', 'Yellow', 'Green' ] [ 'Red', 'Yellow' ]

注意：除了元素, 散布运算符仅将数组本身复制到新数组中。这意味着操作员可以执行浅拷贝而不是深拷贝。散布运算符和字符串让我们看看散布操作符如何散布字符串。相同的图示如下。
例子
在这里, 我们从单个字符串构造了一个数组str。
let str = ['A', ...'EIO', 'U']; console.log(str);

在上面的示例中, 我们将扩展运算符应用于字符串” EIO” 。它将” EIO” 字符串的每个特定字符散布成单个字符。
执行以上代码后, 我们将获得以下输出。
【ES6散布运算符解释和用法】输出如下
[ 'A', 'E', 'I', 'O', 'U' ]

    推荐阅读


    上一篇：ES6 set介绍和用法详解

    下一篇：ES6字符串用法示例