Как нарезать и сращивать массивы в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

.slice () и .splice () являются аналогичными методами в JavaScript. Они выглядят похожими, они звучат подобные, и они делают подобные вещи. По этим причинам важно знать различия между ними. Кроме того, они используются очень часто, поэтому понимание их использования – это хорошо, чтобы учиться в начале любого разработчика программного обеспечения.

В этой статье мы посмотрим, как использовать их с помощью конкретного скрипта алгоритма. Мы будем вставлять элементы из одного массива в другое и возвращение комбинированного массива, не мутируя исходные массивы.

Алгоритм Инструкции

function frankenSplice(arr1, arr2, n) {
  return arr2;
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Предоставил тестовые случаи

Франкенсплис ([1, 2, 3], [4, 5], 1) должен вернуться [4, 1, 2, 3, 5] Отказ
Франкенсплис ([1, 2], [«А», «B»], 1) должен вернуться [«А», 1, 2, «B»] Отказ
FrankensPlice ([«Claw», «щупальца»], [«голова», «плечи», «колени», «пальцы»], 2) должен вернуться [«Голова», «плечи», «коготь», «щупальца», «колени», «пальцы»] Отказ
Все элементы из первого массива должны быть добавлены ко второму массиву в своем первоначальном порядке.
Первый массив должен оставаться прежним после выполнения функций.
Второй массив должен оставаться прежним после выполнения функций.

Решение № 1: .SLICE (), .SPLICE () и оператор распространения

Педак

Понимание проблемы : У нас есть один вход, строка. Наш выход также является строкой. В конечном итоге, мы хотим вернуть входную строку с первой буквой – и только первая буква – каждое слово капитализированное.

Примеры/тестовые случаи : Наши предоставленные испытательные случаи показывают, что у нас должно быть заглавное письмо только в начале каждого слова. Нам нужно снизить корпус остальных. Предоставленные тестовые случаи также показывают, что мы не бросаем никаких кривых шариков в терминах странных слов, разделенных символами вместо пробела. Это хорошая новость для нас!

Структура данных : Нам придется преобразовать нашу входную строку в массив, чтобы манипулировать каждое слово отдельно.

Давайте немного поговорим о .slice () и .splice () :

Сначала давайте обратимся .slice () :

.slice () Извлекает раздел строки и возвращает ее в качестве новой строки. Если вы звоните .slice () На строке, не передавая ее дополнительной информации, она вернет всю строку.

"Bastian".slice()
// returns "Bastian"

Это будет полезно для нас в этом проблеме сценариев алгоритма, потому что инструкции говорят нам, что мы не должны напрямую модифицировать входные массивы. Поэтому нам нужно будет сделать копию одного из них.

Теперь давайте посмотрим на .splice () :

.splice () Изменяет содержимое массива, удалив или заменив существующие элементы и/или добавления новых элементов.

Подожди секунду! Что, если вы не хотите ничего удалять? Что, если вы просто хотите вставить элементы? Это хорошо. Просто настроил Deletecount до нуля. Теперь мы можем начать добавлять элементы. Просто отделите каждый элемент запятой, как и так item1, item2, item3, item4 Отказ

.splice(start, deleteCount, item1, item2, item3, etc.)

Еще одна концепция, чтобы иметь в виду этот алгоритм сценариев, это Распространение оператора Отказ ES6 одаренные нам с помощью оператора распространения, который выглядит как эллипсы – всего три точки подряд.

Оператор распространения наиболее часто используется, когда вы хотите использовать элементы массива в качестве аргументов к функции. Это именно то, что мы собираемся сделать с этим в этой задаче. Мы не хотим вставлять весь массив Arr1 в Arr2 Отказ Мы хотим вставить каждый элемент Arr1 в Arr2 Отказ

Алгоритм :

Создать копию Arr2 Отказ
Вставьте все элементы Arr1 в Arr2 начиная с указателя в Arr2 Указано N Отказ
Вернуть комбинированные массивы.

Код : См. ниже!

function frankenSplice(arr1, arr2, n) {
  // Create a copy of arr2.
  let combinedArrays = arr2.slice()
  //                   [4, 5, 6]

  // Insert all the elements of arr1 into arr2 beginning
  // at the index specified by n. We're using the spread
  // operator "..." to insert each individual element of 
  // arr1 instead of the whole array.
  combinedArrays.splice(n, 0, ...arr1)
  //                   (1, 0, ...[1, 2, 3])
  //                   [4, 1, 2, 3, 5, 6]

  // Return the combined arrays.
  return combinedArrays
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Без комментариев:

function frankenSplice(arr1, arr2, n) {
  let combinedArrays = arr2.slice()
  combinedArrays.splice(n, 0, ...arr1)
  return combinedArrays
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Решение № 2: .SLICE (), .splice () и для цикла

Педак

Давайте немного поговорим о .slice () и .splice () :

Сначала давайте обратимся .slice () :

"Bastian".slice()
// returns "Bastian"

Теперь давайте посмотрим на .splice () :

Мы можем пройти .splice () Несколько аргументов, которые определяют, где начинается удаление, насколько удалена, а что вставлено. Начать Является ли номер, который говорит .splice () При котором индекс для начала удаления элементов. Deletecount рассказывает .splice () Сколько элементов удалить. Подожди секунду! Что, если вы не хотите ничего удалять? Что, если вы просто хотите вставить элементы? Это хорошо. Просто настроил Deletecount до нуля. Теперь мы можем начать добавлять элементы. Просто отделите каждый элемент запятой, как и так item1, item2, item3, item4 Отказ

.splice(start, deleteCount, item1, item2, item3, etc.)

В отличие от предыдущего решения, мы не будем использовать оператор по распространению здесь. Вместо этого мы будем использовать для петли для сброса каждого элемента по одному из Arr1 и вставить их в Arr2 Отказ

Хитрость здесь для увеличения N к 1 каждый раз, когда цикл работает или иначе элементы Arr1 не будет в конечном итоге в правильном порядке при вступлении в Arr2 Отказ

Алгоритм :

Создать копию Arr2 Отказ
Использование A для Loop, вставьте каждый элемент Arr1 в Arr2 начиная с индекса N Отказ
Увеличение N К 1 каждый раз, когда цикл работает.
Вернуть комбинированные массивы.

Код : См. ниже!

function frankenSplice(arr1, arr2, n) {
  // Create a copy of arr2.
  let combinedArrays = arr2.slice()
  // Using a for loop, insert each element of arr1
  // into combinedArrays starting at index n.
  for (let i = 0; i < arr1.length; i++) {
      combinedArrays.splice(n, 0, arr1[i])
  //       [4, 5, 6].splice(1, 0, 1)
  //    [4, 1, 5, 6].splice(2, 0, 2)
  // [4, 1, 2, 5, 6].splice(3, 0, 3)
  // [4, 1, 2, 3, 5, 6]

  //  increment n by 1 each time the loop runs
      n++
  }
  // Return the combined arrays.
  return combinedArrays
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Без комментариев:

function frankenSplice(arr1, arr2, n) {
  let combinedArrays = arr2.slice()
  for (let i = 0; i < arr1.length; i++) {
    combinedArrays.splice(n, 0, arr1[i])
    n++
  }
  return combinedArrays
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Если у вас есть другие решения и/или предложения, пожалуйста, поделитесь в комментариях!

Эта статья является частью сценариев алгоритма серии FreeCodecamp.

Эта статья Ссылки на FreeCodeCamp Основные алгоритмы сценариев: ломтик и сращивание

Вы можете следовать за мной на Средний , LinkedIn и Github !

Алгоритм Инструкции

Предоставил тестовые случаи

Решение № 1: .SLICE (), .SPLICE () и оператор распространения

Педак

Решение № 2: .SLICE (), .splice () и для цикла

Педак

Эта статья является частью сценариев алгоритма серии FreeCodecamp.

Эта статья Ссылки на FreeCodeCamp Основные алгоритмы сценариев: ломтик и сращивание

Читайте ещё по теме: