欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 学习6 数组的扩展

程序员文章站 2022-05-27 22:30:43
本章学习要点: 1、扩展运算符 含义:扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 该运算符主要用于函数调用。 上面代码中add(...numbers)是函数的调用,它使用了扩展运算符。该运算符将一个数组,变为参数序列。 扩展运算 ......

1、扩展运算符

含义:扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.queryselectorall('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

上面代码中add(...numbers)是函数的调用,它使用了扩展运算符。该运算符将一个数组,变为参数序列。

扩展运算符后面还可以放置表达式。

let x = 0;
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
console.log(arr) // ["b"]

如果扩展运算符后面是一个空数组,则不产生任何效果。

[...[], 1]   // [1]

注意,扩展运算符如果放在括号中,javascript 引擎就会认为这是函数调用。如果这时不是函数调用,就会报错。

(...[1, 2])
// uncaught syntaxerror: unexpected number

console.log((...[1, 2]))
// uncaught syntaxerror: unexpected number

console.log(...[1, 2])
// 1 2