首页技术文章正文

怎样利用扩展运算符合并数组?

更新时间:2023-08-23 来源:黑马程序员 浏览量:

扩展运算符和剩余参数的作用是相反的,扩展运算符可以将数组或对象转换为用逗号分隔的参数序列。扩展运算符服3个点“…”表示。下面介绍扩展运算符的使用方法进行详细讲解。

扩展运算符的语法

下面通过代码演示扩展运算符在数组中的使用,示例代码如下:

<script>
   let ary = [1, 2, 3];
   //...ary相当于1,2,3
   //输出结果:123
   console.log(..ary);
   // 等价于
   console.log(1, 2, 3); //输出结果:1 2 3
</script>

上述代码中,第2行代码使用let关键字声明了一个ary数组,数组中有3个值,分别为1、2、3。第4行代码在数组变量名ary的前面添加3个点“…”,表示将数组元素拆分成以逗号分隔的参数序列。console.log0方法可以接收多个参数,多个参数以逗号分隔,表示一次输出多个内容。

使用扩展运算符将ary数组拆分成以逗号分隔的参数序列后,又将参数序列放在了console.log()方法中,此时参数序列中的号会被当成console.log0方法的参数分隔符,所以输出结果中没有逗号。

利用扩展运算符合并数组

扩展运算符可以用于合并数组,通常有以下两种方法,下面分别进行讲解。首先演示合并数组的第l种方法,示例代码如下:

<script>
  let aryl = [1, 2, 3];
  let ary2 = [4, 5, 6];
  // …aryl               // 表示将ary1数组拆分成1,2,3
  // …ary2               // 表示将ary2数组拆分成4,5,6
  let ary3 - (… hmyl, …ary2);
  console.log(ary3);      // 输出结果:(6)[1,2,3,4,5,6]
</script>

上述代码中,第2行代码使用let关键字声明了一个aryl数组,数组中有3个值,分别为1、2、3。第3行代码声明了一个arny2数组,其中有3个值,分别为4、5、6。第6行代码声明了一个ary3数组,其中存储了aryl和ary2的参数序列,这样ary3数组中就包括aryl数组和ary2数组中的值。第7行代码使用console.log()方法在控制台中查看输出结果。

下面通过代码演示合并数组的第2种方法,示例代码如下。

<script>
  let aryl = [1, 2, 3];
  let ary2 = [4, 5, 6];
  aryl.push(...ary2);
  console log (ary1); //输出结果:(6)[1,2,3,4,5,6]
</script>

上述代码中,第4行代码的push0方法用于将元素追加到数组中,这个方法可以接收多个参数,并且可以一次将多个参数追加到数组中,参数之间用逗号进行分隔。因为不能将ary2数组本身传递给push0方法,所以可以使用扩展运算符将ary2数组中的元素拆分成以逗号分隔的参数序列,然后将参数序列直接放到push0方法中,也就是使用aryL.push(.ary2)方法将ary2数组中的元素追加到aryl数组中,实现数组的合并。


分享到:
在线咨询 我要报名
和我们在线交谈!