您的位置:

JS 扩展运算符详解

一、基本概念

JavaScript 的扩展运算符是指三个点(...)。它可以将一个数组转为用逗号分隔的参数序列,或将一个对象转为由 (key,value) 组成的序列。

扩展运算符出现的初衷是为了取代 ES5 中的 apply 方法。

下面是一个简单的示例:

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

扩展运算符将数组 [1, 2, 3] 转换成了参数 1,2,3。这个特性使得函数的调用非常方便。

二、数组操作

1. 数组合并

扩展运算符可以将两个或多个数组合并成一个数组。示例如下:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

2. 数组拷贝

扩展运算符还可以拷贝数组,而不是引用。下面的示例可以看出,在拷贝过程中,修改新数组并不会影响原数组。

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2[0] = 0;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [0, 2, 3]

三、函数调用

扩展运算符可以将数组转换为一个函数的参数序列。这一特性对于需要多个参数的函数非常有用。

下面的示例演示了如何使用扩展运算符调用一个函数:

function myFunction(x, y, z) {
  console.log(x, y, z);
}
const arr = [1, 2, 3];
myFunction(...arr); // 1 2 3

四、对象操作

1. 对象合并

扩展运算符可以将多个对象合并成一个对象。如果有重复的键名,后面的属性会覆盖前面的属性。

const obj1 = { foo: 1, bar: 2 };
const obj2 = { baz: 3, bar: 4 };
const newObj = {...obj1, ...obj2};
console.log(newObj); // { foo: 1, bar: 4, baz: 3 }

2. 对象新增属性

扩展运算符还可以为一个对象添加新的属性,同时不会影响原对象。

const obj1 = { foo: 1, bar: 2 };
const newObj = { ...obj1, baz: 3 };
console.log(obj1); // { foo: 1, bar: 2}
console.log(newObj); // { foo: 1, bar: 2, baz: 3 }

五、其他用法

1. 字符串转数组

扩展运算符可以将一个字符串转换成字符数组。

const str = 'hello';
const arr = [...str];
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

2. 数组转对象

扩展运算符可以将一个数组转换成对象。但是需要注意的是,数组中的每一项必须是由键名和键值构成的数组。

const arr = [['foo', 1], ['bar', 2]];
const obj = {...arr};
console.log(obj); // {foo: 1, bar: 2};

六、总结

扩展运算符是 JavaScript 中非常强大的功能之一,可以大大简化代码的编写,提高程序的效率。不仅可以用于数组和对象操作,还可以将字符串转换为字符数组,将数组转换为对象等。

JS 扩展运算符详解

2023-05-22
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
发篇java复习笔记(java课程笔记)

2022-11-09
深入了解JavaScript扩展运算符

2023-05-19
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
java学习笔记(java初学笔记)

2022-11-14
重学java笔记,java笔记总结

2022-11-23
java基础知识学习笔记一,Java基础笔记

2022-11-21
Python学习笔记Day02:基本数据类型和运算符

Day02的内容主要介绍了Python中的基本数据类型和运算符。通过本次学习,我们将会详细了解到Python中常用的数据类型以及如何使用运算符进行操作。 一、变量与数据类型 1、变量 age = 18

2023-12-08
java方法整理笔记(java总结)

2022-11-08
javascript一句话笔记,javascript基本语句

2022-11-16
印象笔记记录java学习(Java成长笔记)

2022-11-12
数据库的笔记mysql,数据库管理系统笔记

2022-11-24
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
python基础学习整理笔记,Python课堂笔记

2022-11-21
达内web前端js笔记(达内jsd)

本文目录一览: 1、web前端里的js技术 2、《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结 3、达内web前端开发讲的什么内容 4、2020年自学Web前端要掌握的知识点有哪些

2023-12-08
我的python笔记06(Python)

2022-11-14
mysql数据库完整笔记(mysql数据库数据)

2022-11-13
java客户端学习笔记(java开发笔记)

2022-11-14