「JavaScript」…运算符的四种用法

发布于 2023-06-08  57 次阅读


在 JavaScript 中,三个连续的点 ... 可以用于不同的情况和用途。下面是一些常见的用法:

扩展运算符(Spread Operator)

... 可以用作扩展运算符,用于展开可迭代对象(如数组、字符串等)。

在函数调用中,可以使用扩展运算符将数组展开为独立的参数。

在数组字面量中,可以使用扩展运算符将一个数组的元素添加到另一个数组中。

示例:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2]; // 合并数组
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]
function foo(x, y, z) {
    console.log(x, y, z);
}
const args = [1, 2, 3];
foo(...args); // 传递数组元素作为参数

剩余参数(Rest Parameters)

... 可以用作剩余参数语法,用于将函数的多个参数收集到一个数组中。

在函数声明中,使用剩余参数语法可以接收不定数量的参数,并将它们存储在一个数组中。

示例:

function sum(...numbers) {
    let total = 0;
    numbers.forEach((num) => {
        total += num;
    });
    return total;
}
console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(4, 5, 6, 7, 8)); // 输出: 30

拓展:函数的arguments参数列表

arguments是一个特殊的对象,在函数内部可以直接使用,无需加上this

在 JavaScript 的函数中,arguments对象包含了所有传递给函数的参数。它是一个类似数组的对象,可以通过索引访问每个参数的值,并且具有length属性表示参数个数。

注意:arguments对象不是一个真正的数组,它只是一个类似数组的对象,所以它没有数组的方法,如forEachmap等。

示例:

let arguments = '123';

function foo(){
    console.log(arguments);
}

foo(1, 2, 3); // 输出 [Arguments] { '0': 1, '1': 2, '2': 3 }

展开对象(Object Spread)

在 ECMAScript 2018(ES2018)及之后的版本中,... 可以用于展开对象的属性。

使用对象展开语法可以创建新的对象,并将现有对象的属性复制到新对象中。

示例:

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // 输出: { x: 1, y: 2, z: 3 }
console.log(...obj1); // 报错: TypeError: Found non-callable @@iterator

解构赋值中的剩余项(Rest in Destructuring)

在解构赋值中,... 可以用于提取剩余的数组元素或对象属性。

在数组解构赋值中,剩余项可以收集剩余的数组元素。

在对象解构赋值中,剩余项可以收集剩余的对象属性。

示例:

const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]

const { x, y, ...rest } = { x: 1, y: 2, z: 3, w: 4 };
console.log(x); // 输出: 1
console.log(y); // 输出: 2
console.log(rest); // 输出: { z: 3, w: 4 }

这些是 ... 在 JavaScript 中的一些常见用法和功能。具体使用哪种功能取决于上下文和需求。


A Student on the way to full stack of Web3.