javaScript 数据结构可变性和不可变性

可变vs不可变

在JavaScript中,可变操作指直接修改原始数据结构。例如:
js 复制代码
const arr = [1, 2, 3];
arr.push(4); // 可变操作
console.log(arr); // 输出: [1, 2, 3, 4]

不可变方法返回新的数据结构

js 复制代码
const arr = [1, 2, 3];
const newArr = [...arr, 4]; // 不可变操作
console.log(arr);     // 输出: [1, 2, 3]
console.log(newArr);  // 输出: [1, 2, 3, 4]
虽然可能带来一些性能开销,但能够提高代码的可预测性和可维护性。

slice vs splice

假设我们正在开发一个待办事项列表应用,需要实现移除已完成任务的功能:
js 复制代码
// 使用splice (可变方法)
function removeCompletedTasks(tasks) {
  for (let i = tasks.length - 1; i >= 0; i--) {
    if (tasks[i].completed) {
      tasks.splice(i, 1);
    }
  }
  return tasks;
}

// 使用slice (不可变方法)
function removeCompletedTasksImmutable(tasks) {
  return tasks.filter(task => !task.completed);
}

const tasks = [
  { id: 1, text: "周一", completed: false },
  { id: 2, text: "周二", completed: true },
  { id: 3, text: "周三", completed: false }
];

console.log(removeCompletedTasks([...tasks]));
console.log(removeCompletedTasksImmutable(tasks));
在这个例子中,splice方法直接修改原数组,而filter方法(基于slice的思想)创建一个新数组。不可变方法通常更受欢迎,因为它们有助于优化渲染性能。

现代方法:at(), with(), 和 toSorted()

1. at(): 安全访问数组元素
js 复制代码
const fruits = ['苹果', '香蕉', '橙子'];
console.log(fruits.at(-1)); // 输出: '橙子'
2. with(): 不可变地更新数组元素
js 复制代码
const updatedFruits = fruits.with(1, '葡萄');
console.log(fruits);         // 输出: ['苹果', '香蕉', '橙子']
console.log(updatedFruits);  // 输出: ['苹果', '葡萄', '橙子']
3. toSorted(): 不可变排序
js 复制代码
const numbers = [3, 1, 4, 1, 5, 9];
const sortedNumbers = numbers.toSorted();
console.log(numbers);        // 输出: [3, 1, 4, 1, 5, 9]
console.log(sortedNumbers);  // 输出: [1, 1, 3, 4, 5, 9]
相关推荐
VBA63371 小时前
VBA之Word应用第三章第十一节:Document对象的事件
开发语言
wjs20241 小时前
SOAP Header 元素
开发语言
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
无限远的弧光灯1 小时前
c语言学习_函数递归
c语言·开发语言·学习
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人1 小时前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
胖大和尚2 小时前
C++项目学习计划
开发语言·c++·学习
开开心心_Every2 小时前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript