Рубрики
Без рубрики

Как я работаю с массивами

Есть много способов работать с массивами в JavaScript. В этой статье я объясняю, как я работаю с ними.

Автор оригинала: Zell Liew.

В JavaScript есть много ароматов для массивов. Возможные методы, которые вы создаете или изменить массивы: Неприносимость , Сдвиг , толчок , поп , сращивание , Concat , ломтик , Разрушение , Операторы отдыха и Распространение операторов Отказ

Есть также такие методы, как для , foreach , карта , Фильтр , Уменьшить , Найти , Findindex Отказ

17 разных ароматов! 😱.

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

На мутации

Никогда не мутируйте массивы Отказ Это может сломать ваш код, когда вы не знаете Отказ И эти виды ошибок трудно найти.

Если вам нужно мутировать массивы, всегда используйте ломтик сделать копию до того, как вы их мутируете.

const array = [1, 2, 3]
const copy = array.slice()

// Use these methods only after you slice
copy.push(4)
copy.pop()
copy.unshift(0)
copy.shift()
copy.splice(0, 0, 0)

Добавление элементов в массивы

Мы можем добавить элементы тремя способами:

  1. Начало массива
  2. Конец массива
  3. Середина массива

Добавление элементов для начала

Когда я добавляю элементы в начало массива, я предпочитаю создать новый массив с Распространение операторов Отказ Это самый чистый метод.

const array = [3, 4, 5]
const after = [1, 2, ...array]

console.log(after) // [1, 2, 3, 4, 5]

Добавление элементов к концу

При добавлении элементов до конца массива я также предпочитаю создавать новый массив с Распространение операторов Отказ

const array = [3, 4, 5]
const after = [...array, 6, 7]

console.log(after) // [3, 4, 5, 6, 7]

Добавление к середине

Я предпочитаю сращивание при добавлении элементов в середину массива. Я делаю это, потому что использую ломтик одни чувствуют более увлеченные.

Например, скажем, у меня есть массив из 25 видов фруктов. Я хочу добавить Оранжевый после Груша Отказ Но я не знаю, где Груша является. Я должен найти Груша Сначала с Индекс Отказ

const index = fruits.indexOf('Pear')

Теперь я могу добавить Оранжевый после Груша Отказ Сравните разницу между ломтик и сращивание Отказ

// Using Slice
const result = [
  ...fruits.slice(0, index)
  'Orange',
  ...fruits.slice(index + 1)
]

// Using Splice
const result = fruits.slice()
result.splice(index + 1, 0, 'Orange')

сращивание гораздо проще читать по сравнению с ломтик -Не альтернатива. Требуется некоторое время, чтобы привыкнуть к сращивание хоть. (Видимо, нравится Splice странно ).

Удаление предметов из массивов

Мы можем удалить элементы из массивов тремя способами:

  1. С начала массива
  2. С конца массива
  3. С середины массива

Удаление предметов с самого начала

Когда я удаляю элементы из начала массива, я предпочитаю разрушать массив. Это очиститель, чем Неприносимость или сращивание Отказ

const array = [1, 2, 3]
const [throwaway, ...result] = array

console.log(result) // [2, 3]

Удаление предметов с конца

Когда я удаляю предметы с конца массива, я предпочитаю использовать ломтик Отказ Здесь я могу использовать негативные индексы вместо array.length Отказ Это делает вещи намного проще.

const array = [1, 2, 3]
const result = array.slice(0, -2)

console.log(result) // [1]

Если мне нужно удалить только 1 или 2 предмета, то я считаю поп Отказ Это дружелюбнее для начинающих читать.

const array = [1, 2, 3]
const result = array.slice()
array.pop()

console.log(result) // [1, 2]

Удаление предметов с середины

Я предпочитаю сращивание над другими способами, как я описал в добавлении предметов к середине.

// Using Slice
const result = [
  ...fruits.slice(0, index)
  ...fruits.slice(index + 1)
]

// Using Splice
const result = fruits.slice()
result.splice(index, 1)

Зацикливаться через массивы

Когда я петлю через массивы, я предпочитаю использовать карта и Фильтр как можно больше. Если они могут сделать работу, отлично!

// Map
const array = [1, 2, 3]
const doubled = array.map(x => x * 2)

console.log(doubled) // [2, 4, 6]

// Filter
const array = [1, 5, 10]
const below6 = array.filter(x => x < 6)

console.log(below6) // [1, 5]

Я никогда не Уменьшить Если я могу карта + Фильтр потому что карта + Фильтр легче читать. Я использую только Уменьшить Когда я должен преобразовать массив в примитивное значение (обычно только с номерами).

// Reducing an array of numbers
const array = [1, 2, 3]
const sum = array.reduce((sum, current) => sum + current, 0)

console.log(sum) // 6

Если мне нужно повернуть массивы на объекты, я предпочитаю использовать foreach петля.

const fruits = ['apple', 'apple', 'pear']

// With forEach
const tally = {}
fruits.forEach(fruit => {
  if (tally[fruit]) {
    tally[fruit] += 1
    return
  }
  tally[fruit] = 1
})

console.log(tally)
// {
// apple: 2,
// pear : 1
// }

// with Reduce
const tally = fruits.reduce((tally, fruit) => {
  if (tally[fruit]) {
    tally[fruit] += 1
  } else {
    tally[fruit] = 1
  }
  return tally
}, {})

console.log(tally)
// {
// apple: 2,
// pear : 1
// }

Если мне нужно что-то выполнить (например, классы изменений), я предпочитаю foreach Отказ Я также могу использовать для ... из , но мне нравится foreach более.

const nodes = document.querySelectorAll('.hey')

// With forEach
[...nodes].forEach(node => {
  node.classList.remove('hey')
})

// With for...of
for (const node of nodes) {
  node.classList.remove('hey')
}

Когда я читаю foreach Мой разум идет так:

  1. Узлы массив.
  2. Петля через массив узлов.
  3. Сделайте что-нибудь с каждым узлом.

Когда я вижу для ... из Мой разум идет так:

  1. Для петли. Хорошо.
  2. Создал переменную под названием Узел Отказ
  3. Зацикливаться через узлы
  4. Сделать что-нибудь с узел

для ... из просто не течет так же гладко, как foreach Отказ

Асинхронные петли

Если я могу пакетную асинхронную взять вместе, я буду использовать карта Тогда Обещание. Все Отказ

const array = ['url1', 'url2']
const promises = array.map(url => fetch(url).then(/*...*/))
const results = Promise.all(promises)

console.log(results)
// [
// [results from url1], [results from url2]
// ]

Если я использую ждать Ключевое слово, я предпочитаю для ... из Отказ Я объяснил, почему в этой статье Отказ

async function execute () {
  for (const link of links) {
    await fetch(link).then()
    // Do something...
  }
}

Это оно! Я надеюсь, что это проясняет вещи!

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.

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