Замена или добавление значения в массив

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы будем работать над задачей на программирование на 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

Как заменить или добавить значение в массив

Для замены элемента в массиве или добавления его, если он отсутствует, следуйте шагам:

  1. Используйте оператор расширения (...), чтобы создать поверхностную копию массива.
  2. Используйте Array.prototype.findIndex(), чтобы найти индекс первого элемента, который удовлетворяет заданной функции сравнения compFn.
  3. Если такого элемента не найдено, используйте Array.prototype.push(), чтобы добавить новое значение в массив.
  4. В противном случае используйте 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, чтобы улучшить свои навыки.