JavaScript 数组操作 | 编程练习

简介

在本实验中，我们将进行一个 JavaScript 编程练习，该练习涉及根据比较函数替换或追加数组中的值。通过这个练习，你将学习如何使用展开运算符、Array.prototype.findIndex()、Array.prototype.push() 和 Array.prototype.splice() 来操作 JavaScript 中的数组。本实验将帮助你提高使用 JavaScript 数组和函数的技能。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28595{{"替换或追加数组值"}} javascript/data_types -.-> lab-28595{{"替换或追加数组值"}} javascript/arith_ops -.-> lab-28595{{"替换或追加数组值"}} javascript/comp_ops -.-> lab-28595{{"替换或追加数组值"}} javascript/cond_stmts -.-> lab-28595{{"替换或追加数组值"}} javascript/obj_manip -.-> lab-28595{{"替换或追加数组值"}} javascript/destr_assign -.-> lab-28595{{"替换或追加数组值"}} javascript/spread_rest -.-> lab-28595{{"替换或追加数组值"}} end

如何替换或追加数组值

要在数组中替换某个项，如果该项不存在则追加它，请按以下步骤操作：

使用展开运算符（...）创建数组的浅拷贝。
使用 Array.prototype.findIndex() 找到第一个满足提供的比较函数 compFn 的元素的索引。
如果未找到这样的元素，则使用 Array.prototype.push() 将新值追加到数组中。
否则，使用 Array.prototype.splice() 将找到的索引处的值替换为新值。

以下是如何实现此功能的示例：

const replaceOrAppend = (arr, val, compFn) => {
  const res = [...arr];
  const i = arr.findIndex((v) => compFn(v, val));
  if (i === -1) res.push(val);
  else res.splice(i, 1, val);
  return res;
};

你可以像这样将此函数与对象数组一起使用：

const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 }
];
const jane = { name: "Jane", age: 29 };
const jack = { name: "Jack", age: 28 };
replaceOrAppend(people, jane, (a, b) => a.name === b.name);
// [ { name: 'John', age: 30 }, { name: 'Jane', age: 29 } ]
replaceOrAppend(people, jack, (a, b) => a.name === b.name);
// [
//   { name: 'John', age: 30 },
//   { name: 'Jane', age: 28 },
//   { name: 'Jack', age: 28 }
// ]

总结

恭喜你！你已经完成了“替换或追加数组值”实验。你可以在 LabEx 中练习更多实验来提升你的技能。