（JavaScript）扩展运算符的作用及使用场景

killerQueen2023-10-23 18:05

JavaScript中的扩展运算符（Spread Operator）是一种语法，通常用于展开（或拆解）数组和对象，以将它们的元素或属性插入到另一个数组或对象中。扩展运算符以三个连续的句点（...）表示。

扩展运算符的作用：

展开数组：可以将一个数组的元素展开并插入到另一个数组中。

js 复制代码 
const arr1 = [1, 2, 3];
const arr2 = [4, 5, ...arr1, 6, 7];
console.log(arr2); // [4, 5, 1, 2, 3, 6, 7]

展开对象：可以将一个对象的属性展开并插入到另一个对象中。

js 复制代码 
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

合并数组：用于合并多个数组成一个新数组。

js 复制代码 
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5]

复制数组和对象：可以用扩展运算符复制一个数组或对象，而不是引用相同的原始数据。

js 复制代码 
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
copyArray[0] = 99;
console.log(originalArray); // [1, 2, 3]
console.log(copyArray); // [99, 2, 3]

扩展运算符与解构赋值结合起来，用于生成数组

js 复制代码 
const [first,...rest] = [1,2,3,4,5];

需要注意的是，如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

使用 Math 函数获取数组中特定的值

js 复制代码 
const numbers = [9,4,1,7];
Math.min(...numbers); //1
Math.max(...numbers); //9

其他

在 Redux 中的 reducer 函数规定必须是一个纯函数，reducer 中的 state 对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍， 然后产生一个新的对象返回

在Redux中，reducer是一个用于处理应用状态（state）变化的纯函数。它接收当前的状态（state）和一个描述状态变化的动作（action），然后返回一个新的状态。以下是为什么reducer函数要满足这些规定的解释：

  1. 纯函数性质： 纯函数是指函数的输出仅取决于其输入，而不依赖于任何外部状态或副作用。Redux的reducer必须是纯函数，因为这样可以确保相同的输入产生相同的输出，这对于状态管理和调试非常重要。

  2. 不直接修改状态： Redux的状态是不可变的。这意味着你不能在reducer中直接修改原始的state对象，而是必须创建一个新的状态对象来反映状态的变化。这样做有以下几个原因：

    a. 可追溯性： 不修改原始状态可以更容易跟踪状态的历史变化，从而实现时间旅行调试功能。

    b. 性能优化： 通过比较新旧状态对象，Redux可以确定是否需要重新渲染组件，以提高性能。

    c. 并发处理： 在多线程或并发情况下，不可变状态对象避免了竞态条件和不一致性。

  3. 使用扩展运算符创建新对象： 扩展运算符是一种方便的方式，它可以在不修改原始对象的情况下，创建一个新的对象，其中包含了对原始对象的部分或完全复制，以实现状态的变更。这确保了状态的不可变性，例如：

js 复制代码 
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }; // 使用扩展运算符创建新对象
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state; // 没有状态变化，返回原始状态
  }
}

通过使用扩展运算符和不直接修改状态，Redux能够更可靠地追踪状态的变化，实现时间旅行调试，提高性能，并保持状态的不变性。这有助于构建可维护、可预测且稳定的应用程序。

扩展运算符的使用场景：

  1. 合并数组：将两个或多个数组合并成一个新数组。
  2. 复制数组或对象：创建一个独立的数组或对象，而不是引用原始数据。
  3. 函数参数：在函数调用时，将一个数组展开为单独的参数。
js 复制代码 
function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const sum = add(...numbers); // 等同于 add(1, 2, 3)
console.log(sum); // 6
  1. 用于对象字面量：创建新对象时，可以将现有对象的属性展开到新对象中，以便进行修改或扩展。
js 复制代码 
const person = { name: 'Alice', age: 30 };
const updatedPerson = { ...person, age: 31 };
console.log(updatedPerson); // { name: 'Alice', age: 31 }

扩展运算符的使用能够使代码更简洁、可读性更高，并提供了强大的功能来处理数组和对象。

其他需要注意的点：

  • 扩展运算符对对象实例的拷贝属于浅拷贝，对数组的拷贝也属于浅拷贝。它会创建一个新数组，并将原数组的元素复制到新数组中，但不会递归地复制数组元素内部的对象或子数组。因此，新数组和原数组之间仍然共享对相同对象或子数组的引用。

浅拷贝与深拷贝的区别

浅拷贝（Shallow Copy） ：

  • 浅拷贝只复制对象的第一层属性，不会递归复制对象内部的嵌套对象。
  • 浅拷贝的新对象和原始对象共享相同的嵌套对象引用，因此对嵌套对象的更改会在新对象和原始对象之间共享。
  • 浅拷贝通常使用JavaScript中的扩展运算符（...）、Object.assign()等方法来执行。
js 复制代码 
const originalObject = { a: 1, nested: { b: 2 } };
const shallowCopy = { ...originalObject };
shallowCopy.nested.b = 3;
console.log(originalObject.nested.b); // 输出 3，因为嵌套对象被共享

深拷贝（Deep Copy） ：

  • 深拷贝会递归复制对象及其嵌套对象的所有属性和属性值，创建一个完全独立的新对象，与原始对象没有共享引用。
  • 深拷贝通常需要使用递归函数或专门设计的深拷贝库，因为JavaScript的原生方法通常无法轻松实现深拷贝。
js 复制代码 
const originalObject = { a: 1, nested: { b: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.nested.b = 3;
console.log(originalObject.nested.b); // 输出 2，因为嵌套对象是完全独立的

需要特别注意的是，深拷贝可能会导致性能问题，因为它需要递归遍历整个对象树。此外，深拷贝可能无法处理包含循环引用的对象，因为递归过程可能陷入无限循环。在处理复杂对象时，需要慎重选择浅拷贝和深拷贝，以满足特定需求

  • 任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组，比较常见的应用是可以将某些数据结构转为数组

为了解释这段内容，首先我们要先来介绍一下什么是Iterator接口的对象：

在JavaScript中，Iterator 接口的对象指的是实现了可迭代协议（Iterable Protocol）的对象。可迭代协议是一种规定，它定义了对象必须具备的属性，以便通过迭代器（Iterator）进行遍历。

一个实现了可迭代协议的对象必须具有以下属性：

  1. Symbol.iterator 属性 ：对象必须包含一个名为 Symbol.iterator 的属性，它是一个函数，当调用它时，返回一个迭代器对象。迭代器对象是用于遍历集合的对象，通常具有 next() 方法。
  2. next() 方法 ：迭代器对象必须包含一个 next() 方法，该方法返回一个包含 value 和 done 属性的对象。value 表示当前迭代的值，done 是一个布尔值，表示迭代是否结束。

实现可迭代协议的对象可以被用于 for...of 循环以及其他支持迭代的JavaScript语言特性。

以下是一个示例，演示如何创建一个实现可迭代协议的对象：

js 复制代码 
const myIterable = {
  [Symbol.iterator]: function () {
    let values = [1, 2, 3];
    let index = 0;

    return {
      next: function () {
        if (index < values.length) {
          return { value: values[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const value of myIterable) {
  console.log(value);
}

在上述示例中，myIterable 对象实现了可迭代协议，包含了 Symbol.iterator 属性和 next() 方法。这使得我们可以使用 for...of 循环来遍历 myIterable 中的值。

可迭代协议的实现为 JavaScript 提供了一种通用的遍历数据集合的方式，可以用于数组、集合、Map、Set 等不同类型的数据结构。

而在JavaScript中，可以使用扩展运算符 将具有Iterator接口的对象转换为真正的数组。这是因为扩展运算符允许你在数组字面量 、函数参数列表 、或者其他需要多个参数的地方 展开一个可迭代对象，并将其元素转化为一个新的数组。这是一种方便的方式来将各种数据结构（具有Iterator接口的对象）转换为数组。

具有Iterator接口的对象可以包括数组、集合、Map、Set，以及自定义实现了可迭代协议的对象，如之前的示例所示。

下面是一个示例，演示如何使用扩展运算符将可迭代对象转换为数组：

js 复制代码 
const iterableSet = new Set([1, 2, 3]);
const arrayFromSet = [...iterableSet];
console.log(arrayFromSet); // 输出 [1, 2, 3]

在上述示例中，iterableSet 是一个Set对象，它具有Iterator接口，我们使用扩展运算符将其元素转换为一个数组。

这种转换的常见应用包括将不同数据结构的内容转换为数组，以便进行数组特定的操作，例如过滤、映射、排序等。它还可以用于将可迭代对象的内容提取出来，以便更容易进行迭代和处理。

相关推荐
小远yyds19 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解