Пересмотрите 15 распространенных операций с массивами в JS с примерами (шпаргалка)

JavaScript ECMAScript 6

Автор: Дмитрий Павлютин

Переводчик: Front-end Xiaozhi

Источник: dmitripavlutin.com

Чем больше вы знаете, тем больше вы не знаете

Ставьте лайк и смотрите снова, формируйте привычку


эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Массивы — широко используемые структуры данных в JS. Объекты массива предоставляют ряд полезных методов, таких какarray. forEach(),array.map()и т. д. для управления массивом.

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

1. Обход массива

1.1 for..ofцикл

for(const item of items)Прокрутите элементы массива следующим образомcolorsСписок:

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

намекать:

мы можем использовать его в любое времяbreakОператор прекращает обход.

1.2 forцикл

for(let i; i < array.length; i++)Цикл перебирает элементы массива, используя увеличивающуюся индексную переменную.

forОбычно нужно увеличивать каждый циклindexПеременная

const colors = ['blue', 'green', 'white'];

for (let index = 0; index < colors.length; index++) {
  const color = colors[index];
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

indexпеременная от0увеличить доcolors.length-1. Эта переменная используется для доступа к элементам по следующим индексам:colors [index].

намекать

мы можем использовать его в любое времяbreakОператор прекращает обход.

1.3 array.forEach()метод

array.forEach(callback)метод, вызывая каждый элемент массиваcallbackфункция для перебора элементов массива.

На каждой итерации вызываются следующие параметрыcallback(item [, index [, array]]): текущий элемент обхода, текущий индекс обхода и сам массив.

const colors = ['blue', 'green', 'white'];

colors.forEach(function callback(value, index) {
  console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2

намекать:

мы не можем остановитьсяarray.forEach()повторять.

2. Отображение массивов

2.1 Array.map()метод

array.map(callback)метод, используя для каждого элемента массиваcallbackВызовите результат, чтобы создать новый массив.

в каждом обходеcallback(item[, index[, array]])Вызывается с аргументами: текущий элемент, индекс и сам массив, и должен возвращать новый элемент.

Мы увеличиваем каждый элемент массива, как показано ниже.1:

const numbers = [0, 2, 4];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [1, 3, 5]

намекать:

array.map()Создает новый сопоставленный массив без изменения исходного массива.

2.2 Array.from()метод

Array.from(arrayLike[, callback])метод, используя для каждого элемента массиваcallbackВызовите результат, чтобы создать новый массив.

в каждом обходеcallback(item[, index[, array]])Вызывается с аргументами: текущий элемент, индекс и сам массив и должен возвращать новый элемент.

Мы увеличиваем каждый элемент массива, как показано ниже.1:

const numbers = [0, 2, 4];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [1, 3, 5]

намекать:

  • Array.from()Создает новый сопоставленный массив без изменения исходного массива.
  • Array.from()Лучше для отображения из массивоподобных объектов.

3. Упрощение данных

3.1 Array.reduce()метод

array.reduce(callback[, initialValue])позвонивcallbackФункция для уменьшения массива до одного значения.

в каждом обходеcallback(accumulator, item[, index[, array]])Используйте вызов с аргументами: аккумулятор, текущий элемент, индекс и сам массив и должны возвращать аккумулятор.

Классический пример — суммирование массива чисел:

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

sum; // => 6

Первый шаг, будетaccumulatorинициализирован как0. Затем для каждого элемента массива, который накапливает сумму чисел, вызовитеsummaryфункция.

намекать:

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

4. Соединение для передачи данных

4.1 array.concat()метод

array.concat(array1[, array2, ...])Объедините один или несколько массивов в исходный массив. Объедините два массива следующим образом:

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const everyone = heroes.concat(villains);

everyone // ["小智", "前端小智", "老王", "小三"]

намекать:

  • concat()Создать новый массив без изменения исходного массива
  • array.concat(array1 [，array2，...])Принимает несколько массивов для объединения.

4.2 Развернуть символы операторов

Мы используем оператор распространения с литералами массива для объединения массивов:[...array1, ...array2].

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const names = [...heroes, ...villains];

names; // ["小智", "前端小智", "老王", "小三"]

намекать:

[...arr1, ...arr2, ...arrN]: мы можем объединить столько массивов, сколько захотим, используя оператор распространения.

получить фрагмент массива

5.1 array.slice()метод

array.slice([fromIndex [，toIndex]])Возвращает фрагмент массива изfromIndexначать сtoIndexконец (не считаяtoIndexсам).fromIndexНеобязательный параметр по умолчанию равен0,toIndexНеобязательный параметр по умолчанию равенarray.length.

const names = ["小智", "前端小智", "老王", "小三"]

const heroes = names.slice(0, 2)
const villains = names.splice(2)

heroes // ["小智", "前端小智"]
villains // ["老王", "小三"]

намекать:

array.slice()Создает новый массив без изменения исходного массива.

6. Копия массива

6.1 Оператор спреда

Простой способ скопировать массив — использовать оператор распространения:const clone = [... array], как показано ниже, скопируйтеcolorsмножество:

const colors = ['white', 'black', 'gray'];

const clone = [...colors];

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

намекать:

[...array]Создайте неглубокую копию.

6.2 array.concat()метод

[].concat(array)это еще один способ скопировать массив.

const colors = ['white', 'black', 'gray'];

const clone = [].concat(colors);

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

намекать:

[].concat(array)Создайте неглубокую копию.

6.3 array.slice()метод

array.slice())это еще один способ скопировать массив.

const colors = ['white', 'black', 'gray'];

const clone = colors.slice();

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

намекать:

colors.slice()Создайте неглубокую копию.

7. Найдите массив

7.1 array.includes()метод

array.includes(itemToSearch [，fromIndex])возвращает логическое значение,arrayСодержит ли онitemToSearch. необязательный параметрfromIndex, По умолчанию0, который представляет индекс, с которого нужно начать поиск. А именно: Суд2а также99существует в наборе чисел:

const numbers = [1, 2, 3, 4, 5];

numbers.includes(2);  // => true
numbers.includes(99); // => false

7.2 array.find()метод

array.find(predicate)Метод возвращает значение первого элемента массива, удовлетворяющего предоставленной тестовой функции. в противном случае вернутьсяundefined.

Найдите первое четное число в массиве следующим образом:

const numbers = [1, 2, 3, 4, 5];

function isEven(number) {
  return number % 2 === 0;
}

const evenNumber = numbers.find(isEven);

evenNumber; // => 2

7.3 array.indexOf()метод

array.indexOf(itemToSearch[, fromIndex])вернутьarrayпервый появившийся вitemToSearchиндекс чего-либо. По умолчанию0的необязательный параметрfromIndexУказывает индекс, с которого следует начать поиск.

Как показано ниже, найдите前端小智индекс чего-либо:

const names = ["小智", "前端小智", "老王", "小三"]

const index = names.indexOf('前端小智')

index // 1

намекать:

  • Если элемент не найден, тоarray.indexOf(itemToSearch)вернуть-1
  • array.findIndex(predicate)это использоватьpredicateАльтернатива индексу поиска функции.

8. Запрос массива

8.1 array.every()метод

если каждый элемент проходитpredicateпроверьте, затемarray.every(predicate)вернутьtrue.

при каждом переходеpredicate(item[, index[, array]])выше вызов с параметрамиpredicateФункция: в настоящее время перебирает элемент, индекс и сам массив.

Определите, содержит ли массив только четные числа, следующим образом:

const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];

function isEven(number) {
  return number % 2 === 0;
}

evens.every(isEven); // => true
numbers.every(isEven); // => false

8.2 array.some()метод

Если только один из каждого элемента проходитpredicateпроверьте, затемarray.every(predicate)вернутьtrue.

при каждом переходеpredicate(item[, index[, array]])выше вызов с параметрамиpredicateФункция: в настоящее время перебирает элемент, индекс и сам массив.

Вот так: Определите, содержит ли массив хотя бы одно четное число:

const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];

function isEven(number) {
  return number % 2 === 0;
}

numbers.some(isEven); // => true
odds.some(isEven);   // => false

9. Фильтрация массива

9.1 array.filter()метод

array.filter(predicate)метод создает новый массив, содержащий все элементы теста, реализованного предоставленной функцией.

при каждом переходеpredicate(item[, index[, array]])выше вызов с параметрамиpredicateФункция: в настоящее время перебирает элемент, индекс и сам массив.

Как это: фильтруйте массив, чтобы содержать только четные номера:

const numbers = [1, 5, 7, 10];

function isEven(number) {
  return number % 2 === 0;
}

const evens = numbers.filter(isEven);

evens; // => [10]

намекать:

array.filter()Создает новый массив без изменения исходного массива.

10. Вставка массива

10.1 array.push()метод

array.push(item1 [...，itemN])Метод добавляет один или несколько элементов в конец массива и возвращает новую длину.

как показано ниже, вnamesдобавить в конец массива'小智'

const names = ['小智']

names.push('前端小智')

names // ["小智", "前端小智"]

намекать:

  • array.push()изменит исходный массив
  • array.push(item1, item2, ..., itemN)Можно добавить несколько элементов.

10.2 array.unshift() метод

array.unshift(item1[..., itemN])метод добавляет один или несколько элементов в начало массива, возвращая новую длину массива

const names = ['小智']

names.unshift('前端小智')

names // ["前端小智", "小智"]

намекать:

  • array.unshift()изменит исходный массив
  • array.unshift(item1, item2, ..., itemN)Можно добавить несколько элементов.

10.3 Оператор спреда

Элементы можно вставлять в массив неизменяемым образом, комбинируя оператор расширения и литерал массива.

Добавить элемент в конец массива:

const names = ['小智', '大治']

const names2 = [...names, '王大冶']

names2 // ["小智", "大治", "王大冶"]

Добавить элемент в начало массива:

const names = ['小智', '大治']

const names2 = [
  '王大冶',
  ...names
]

names2 // ["王大冶", "小智", "大治"]

Вставить элемент по любому индексу:

const names = ['小智', '大治']
const indexToInsert = 1

const names2 = [
  ...names.slice(0, indexToInsert),
  '前端小智',
  ...names.slice(indexToInsert)
]

names2  // ["小智", "前端小智", "大治"]

11. удалить элемент массива

11.1 array.pop()метод

array.pop()Метод удаляет последний элемент из массива и возвращает этот элемент. Как показано ниже, удалитеcolorsПоследний элемент массива:

const colors = ['blue', 'green', 'black'];

const lastColor = colors.pop();

lastColor; // => 'black'
colors; // => ['blue', 'green']

намекать:

array.pop()изменит исходный массив.

11.2 array.shift()метод

array.shift()Метод удаляет первый элемент из массива и возвращает этот элемент.

const colors = ['blue', 'green', 'black'];

const firstColor = colors.shift();

firstColor; // => 'blue'
colors; // => ['green', 'black']

намекать:

  • array.shift()изменит исходный массив.

  • array.shift()Инструмент有O(n)сложность.

11.3 array.splice()метод

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])Удалить элементы из массива и вставить новые элементы.

Например, мы начинаем с индекса1удалять2элементы:

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2)

names // => ["张三", "赵六"]

names.splice(1，2)удалить элемент'张三'а также'赵六'.

names.splice()Вместо вставки удаленных элементов можно вставлять новые элементы. мы можем заменить индекс1началось в2элементы, затем вставьте новый элемент'小智':

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2, '小智')

names //  ["张三", "小智", "赵六"]

намекать:

  • array.splice()изменит исходный массив.

11.4 Развернуть символы оператора

Элементы могут быть удалены из массива неизменяемым образом путем объединения оператора расширения и литерала данных.

const names = ['张三', '李四', '王五', '赵六']
const fromIndex = 1
const removeCount = 2

const newNames = [
   ...names.slice(0, fromIndex),
   ...names.slice(fromIndex + removeCount)
]

newNames // ["张三", "赵六"]

12. Очистить массив

12.1 array.lengthАтрибуты

array.lengthэто свойство, которое содержит длину массива. Помимо,array.lengthдоступен для записи.

Если мы напишем меньше, чем текущая длинаarray.length = newLength, лишние элементы удаляются из массива.

следующим образом: использоватьarray.length = 0Удалить все элементы в массиве:

const colors = ['blue', 'green', 'black'];

colors.length = 0;

colors; // []

12.2 array.splice()метод

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])Удалить элементы из массива и вставить новые элементы.

еслиremoveCountПараметр опущен, тогдаarray.splice()удалю изfromIndexВсе элементы массива для начала. Мы используем его для удаления всех элементов в массиве:

const colors = ['blue', 'green', 'black'];

colors.splice(0);

colors; // []

13. Заполните массив

13.1 array.fill()метод

array.fill(value[, fromIndex[, toIndex]])использовать отfromIndexприбытьtoIndexзаполнить массив значениями (исключаяtoIndexсам).fromIndexНеобязательный параметр по умолчанию равен0,toIndexНеобязательный параметр по умолчанию равенarray.length.

Например, используя заполнение массива нулевыми значениями:

const numbers = [1, 2, 3, 4];

numbers.fill(0);

numbers; // => [0, 0, 0, 0]

Мало того, вы также можете использоватьArray(length).fill(initial)для инициализации массива определенной длины и начального значения.

const length = 3;
const zeros = Array(length).fill(0);

zeros; // [0, 0, 0]

намекать:

  • array.fill()изменит исходный массив.

13.2 Array.from()функция

Array.from()Полезно для инициализации массива определенной длины с объектами:

const length = 4;
const emptyObjects = Array.from(Array(length), function() {
  return {};
});

emptyObjects; // [{}, {}, {}, {}]

14. Сведение массивов

14.1 array.flat()метод

array.flat([depth])Метод создает новый массив путем рекурсивного выравнивания элементов, принадлежащих массиву, до определенной глубины.depthНеобязательный параметр по умолчанию равен1:

const arrays = [0, [1, 3, 5], [2, 4, 6]];

const flatArray = arrays.flat();

flatArray; // [0, 1, 3, 5, 2, 4, 6]

arraysСодержит смесь чисел и массивов чисел.arrays.flat()Сгладьте массив, чтобы он содержал только числа.

намекать:

array.flat()Создайте новый массив, не изменяя исходный массив.

15. Сортировка массива

15.1 array.sort()метод

array.sort([compare])метод сортировки элементов массива.

необязательный параметрcompare(a, b)Функция обратного вызова для пользовательского порядка сортировки. Если вы сравнитеcompare(a, b)Возвращаемый результат:

  • еслиaменьше, чемb, в отсортированном массивеaдолжно появиться вbраньше он возвращает меньше, чем0ценность .
  • еслиaравныйb, просто вернись0.
  • еслиaбольше, чемb, он возвращает значение больше, чем0ценность .

Как показано ниже, для массиваnumbersхронологический порядок

const numbers = [4, 3, 1, 2];

numbers.sort();

numbers; // => [1, 2, 3, 4]

numbers.sort()Упорядочить числа в порядке возрастания.

Используйте функцию сравнения для сортировки четных чисел перед нечетными:

const numbers = [4, 3, 1, 2];

function compare(n1, n2) {
  if (n1 % 2 === 0 && n2 % 2 !== 0) {
    return -1;
  }
  if (n1 % 2 !== 0 && n2 % 2 === 0) {
    return 1;
  }
  return 0;
}

numbers.sort(compare);

numbers; // => [4, 2, 3, 1]

намекать:

  • array.sort()изменит исходный массив.

оригинал:Рисовая поездка avlutin.com/operations-…

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете. ard.png](Боюсь 1-solve.byte IMG.com/to S-talent-i-he 2…)

Категории