Предисловие
Я полагал, что большинство младших разработчиков внешнего интерфейса должны были пройти через трудный момент при работе с массивом в начале. Иногда вы будете ломать голову целый день и так и не сможете понять, в чем проблема. С технической точки зрения, все эти проблемы, которые вызывают у вас головную боль, не будут проблемой, если мы решим их правильно и правильно.
В этой статье мы сосредоточимся в основном на обработке массивов различными методами. Поэтому мы не будем подробно объяснять лежащие в его основе принципы. Для тех, кто хочет больше узнать о принципах каждой функции, упомянутой ниже, я предлагаю вам воспользоваться Google или просмотреть официальные документы для получения дополнительной информации.
Чтобы лучше понять массив, мы можем представить, что массив — это ряд книг на полке. Каждая книга является элементом внутри полки. Между тем, мы можем добавлять, удалять и перемещать каждый элемент в массиве, полагаясь на различные эффективные и лаконичные методы.
Чтобы определить, является ли массив
Вот синтаксис в ES5:
Array.isArray()
Это самый надежный способ определить, является ли объект или тип данных массивом. В большинстве случаев он имеет наименьшую вероятность возникновения ошибок и способен обеспечить точное суждение даже при прохождении через iframe.
Array.isArray([]); // true
Array.isArray([1, 2, 3]); // true
Array.isArray(null); // false
Array.isArray({}); // false
// Usage Example：
const isArray = Array.isArray(['book1', 'book2', 'book3']);
console.log(isArray);
// Return true if it's an array, else it will return false
Чтобы определить пустой массив
Я бы рекомендовал использовать isEmpty() из Lodash для точного определения пустого массива. Будет стабильнее и безопаснее использовать популярную стороннюю библиотеку, управляемую командой профессионалов. Кроме того, будет намного эффективнее позволить пакету обрабатывать побочные эффекты, а также уменьшить количество различных потенциальных ошибок в системе.
const fruits = []; const books = ['book1','book2','book3']; console.log(isEmpty(fruits)); // Return true if it's an empty array console.log(isEmpty(books)); // Return false if it's not an empty array
Чтобы добавить элементы в массив
Одним из наиболее распространенных вариантов использования для добавления элемента в массив является использование push() . push() изменит исходный массив, добавив элементы в конец массива. Вы фактически изменяете исходный массив всякий раз, когда вставляете в него элемент. Мутация может привести к различным неожиданным результатам и побочным эффектам и даже создать более глубокие ошибки в других местах. Поэтому старайтесь избегать использования push()
concat() в JavaScript — гораздо лучший вариант при вставке элемента в массив.
const books = ['book1', 'book2', 'book3'];
const newBooks = books.concat('book4');
console.log(newBooks); // ["book1", "book2", "book3", "book4"]
Чтобы удалить/фильтровать элементы из массива
Что такое «фильтр»? Вообще говоря, фильтр относится к «фильтрации». Представьте, что вы держите в руках фильтрующую сетку, сетка будет фильтровать по условиям, а остальное — то, что вы хотите.
Настоятельно рекомендуется использовать метод JS filter() при удалении элемента из массива.
const books = ['book', 'book', 'book1', 'book2']; const newBooks = books.filter(item => item !== 'book'); const similarBooks = books.filter(item => item === 'book'); console.log(newBooks); // ["book1", "book2"] console.log(similarBooks); // ["book", "book"]
Чтобы найти элемент в массиве
Я предлагаю использовать функцию JS find(). Возвращаемые значения find() и filter() различны. find() вернет только один элемент, а filter() вернет несколько элементов.
const books = ['book1', 'book2', 'book3']; const book = books.find(item => item === 'book2'); console.log(book); // book2
Обход массива
В настоящее время сообщество JS разрабатывает множество методов обхода массива, один из них использует map(). map() имеет самую высокую скорость работы и подходит для использования в большинстве сценариев.
Самая большая разница между map()и forEach() заключается в их способе обработки массива и возвращаемых значений. map() возвращает новый массив того же размера, а forEach() изменяет исходный массив. Допустим, мы хотим пройтись по массиву чисел, map() вернет новый массив чисел, а forEach() вернет значение undefined.
const numbers = [1, 2, 3, 4, 5]; numbers.forEach(num => num * num); // return undefined numbers.map(num => num * num); // [1, 4, 9, 16, 25]
Каким-то образом способ использования любой из вышеперечисленных функций по-прежнему зависит от вашего варианта использования и сценариев.
В приведенном ниже примере показан другой вариант использования map() :
const books = ['book1', 'book2', 'book3'];
// Return each as string
books.map(item => console.log(item));
// Result:
book1
book2
book3
// Return each as component
books.map(item => (
<div>{item}</div>
));
// Result: It will return three components
Представленные выше 6 способов работы с массивом подходят для использования в большинстве сценариев. Они широко используются и в моем собственном проекте. Каждый из них имеет более высокую скорость работы и меньшую вероятность ошибки. В большинстве случаев вам понадобится всего одна строка кода, чтобы решить вашу проблему. Это также поможет вам поддерживать более чистый, поддерживаемый и читаемый код.
Спасибо за чтение и удачного кодирования! Здоровья, приятель!
