Автор оригинала: FreeCodeCamp Community Member.
Важная часть любого языка программирования. В большинстве случаев нам нужно сделать несколько операций на массивах, поэтому эта статья.
В этой статье я бы показать вам различные методы манипулирующих массивов в JavaScript [^^]
Что такое массивы в JavaScript?
Прежде чем мы продолжим, вам нужно понять, какие массивы действительно означают.
Объявление массива:
let myBox = []; // Initial Array declaration in JS
Массивы могут содержать несколько типов данных
let myBox = ['hello', 1, 2, 3, true, 'hi'];
Массивы могут быть манипулируются с помощью нескольких действий, известных как методы. Некоторые из этих методов позволяют нам добавлять, удалять, модифицировать и делать много для массивов.
Я бы показать вам несколько в этой статье, давайте катимся:)
нанизывать()
Метод JavaScript TOSTRING ()
Преобразует массив в строку, разделенную запятой.
let colors = ['green', 'yellow', 'blue']; console.log(colors.toString()); // green,yellow,blue
присоединиться()
JavaScript Присоединяйтесь ()
Метод сочетает в себе все элементы массива в строку.
Это похоже на TOSTRING ()
Метод, но здесь вы можете указать сепаратор вместо запятой по умолчанию.
let colors = ['green', 'yellow', 'blue']; console.log(colors.join('-')); // green-yellow-blue
составлять
Этот метод объединяет два массива вместе или добавить больше элементов в массив, а затем вернуть новый массив.
let firstNumbers = [1, 2, 3]; let secondNumbers = [4, 5, 6]; let merged = firstNumbers.concat(secondNumbers); console.log(merged); // [1, 2, 3, 4, 5, 6]
толкать()
Этот метод добавляет элементы до конца массива и изменения Оригинальный массив.
let browsers = ['chrome', 'firefox', 'edge']; browsers.push('safari', 'opera mini'); console.log(browsers); // ["chrome", "firefox", "edge", "safari", "opera mini"]
поп ()
Этот метод удаляет последний элемент массива и Возвращает Это.
let browsers = ['chrome', 'firefox', 'edge']; browsers.pop(); // "edge" console.log(browsers); // ["chrome", "firefox"]
сдвиг()
Этот метод удаляет первый элемент массива и Возвращает Это.
let browsers = ['chrome', 'firefox', 'edge']; browsers.shift(); // "chrome" console.log(browsers); // ["firefox", "edge"]
беззифта ()
Этот метод добавляет элемент до начала массива и изменения Оригинальный массив.
let browsers = ['chrome', 'firefox', 'edge']; browsers.unshift('safari'); console.log(browsers); // ["safari", "chrome", "firefox", "edge"]
Сращивание ()
Это Метод изменения массив, добавляя, удаляя и вставив элементы.
Синтаксис:
array.splice(index[, deleteCount, element1, ..., elementN])
- Индекс Вот отправная точка для удаления элементов в массиве
- Deletecount
количество элементов, которые будут удалены из этого индекса
- Element1, …, Elementn
это элемент (ы), который будет добавлен
Удаление предметов
let colors = ['green', 'yellow', 'blue', 'purple']; colors.splice(0, 3); console.log(colors); // ["purple"] // deletes ["green", "yellow", "blue"]
Если второй параметр не объявлен, каждый элемент, начиная с данного индекса, будет удален из массива:
let colors = ['green', 'yellow', 'blue', 'purple']; colors.splice(3); console.log(colors); // ["green", "yellow", "blue"] // deletes ['purple']
В следующем примере мы удалим 3 элемента из массива и замените их более элементами:
let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow']; // removes 4 first elements and replace them with another schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim'); console.log(schedule); // ["we", "are", "going", "to", "swim", "tommorrow"]
Добавление элементов
Чтобы добавить элементы, нам нужно установить Deletecount
до нуля
let schedule = ['I', 'have', 'a', 'meeting', 'with']; // adds 3 new elements to the array schedule.splice(5, 0, 'some', 'clients', 'tommorrow'); console.log(schedule); // ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]
ломтик()
Этот метод копии Данная часть массива и возвращает, что скопированная часть как новый массив. Это не меняет оригинальный массив.
Синтаксис:
array.slice(start, end)
Вот основной пример:
let numbers = [1, 2, 3, 4] numbers.slice(0, 3) // returns [1, 2, 3] console.log(numbers) // returns the original array
Лучший способ использовать ломтик ()
это назначить его новой переменной.
let message = 'congratulations' const abbrv = message.slice(0, 7) + 's!'; console.log(abbrv) // returns "congrats!"
расколоть()
Этот метод используется для Строки Отказ Он разделяет строку в подстроки и возвращает их в качестве массива.
Вот синтаксис: string.split (сепаратор, предел);
- разделитель Здесь определяет, как разделить строку либо запятой.
- Ограничить Определяет количество расщеплений для проведения
let firstName = 'Bolaji'; // return the string as an array firstName.split() // ["Bolaji"]
другой пример:
let firstName = 'hello, my name is bolaji, I am a dev.'; firstName.split(',', 2); // ["hello", " my name is bolaji"]
let firstName = 'Bolaji'; firstName.split('') // ["B", "o", "l", "a", "j", "i"]
индекс чего-либо()
Этот метод ищет элемент в массиве и возвращает Индекс где он был найден, он возвращается -1.
let fruits = ['apple', 'orange', false, 3] fruits.indexOf('orange'); // returns 1 fruits.indexOf(3); // returns 3 friuts.indexOf(null); // returns -1 (not found)
lastindexof ()
Этот метод работает так же indexof () За исключением того, что он работает справа налево. Это возвращает последний индекс, где был найден товар
let fruits = ['apple', 'orange', false, 3, 'apple'] fruits.lastIndexOf('apple'); // returns 4
фильтр()
Этот метод создает новый массив, если элементы массива проходят определенное условие.
Синтаксис:
let results = array.filter(function(item, index, array) { // returns true if the item passes the filter });
Пример:
Проверяет пользователей из Нигерии
const countryCode = ['+234', '+144', '+233', '+234']; const nigerian = countryCode.filter( code => code === '+234'); console.log(nigerian); // ["+234", "+234"]
карта()
Этот метод создает новый массив, манипулируя значениями в массиве.
Пример:
Отображает имена пользователей на странице. (Базовый отображение списка друзей)
const userNames = ['tina', 'danny', 'mark', 'bolaji']; const display = userNames.map(item => { return '
- ' + display.join('') + '
другой пример:
// adds dollar sign to numbers const numbers = [10, 3, 4, 6]; const dollars = numbers.map( number => '$' + number); console.log(dollars); // ['$10', '$3', '$4', '$6'];
уменьшать()
Этот метод хорош для расчета итогов.
Уменьшить () используется для расчета одного значения на основе массива.
let value = array.reduce(function(previousValue, item, index, array) { // ... }, initial);
пример:
const numbers = [100, 300, 500, 70]; let sum = 0; for (let n of numbers) { sum += n; } console.log(sum);
Вот как сделать то же самое с уменьшать()
const numbers = [100, 300, 500, 70]; const sum = numbers.reduce((accummulator, value) => accummulator + value , 0); console.log(sum); // 970
const numbers = [100, 300, 500, 70]; const sum = numbers.reduce((accummulator, value) => accummulator + value); console.log(sum); // still returns 970
Снеперами ниже показывает, как Уменьшить () Метод работает со всеми четырьмя аргументами.
Источник: Документы MDN
Больше понимания Уменьшить () Метод и различные способы использования его можно найти здесь и здесь Отказ
для каждого()
Этот метод хорош для итерации через массив.
Это применяет функцию на всех предметах в массиве
const colors = ['green', 'yellow', 'blue']; colors.forEach((item, index) => console.log(index, item)); // returns the index and the every item in the array // 0 "green" // 1 "yellow" // 2 "blue"
Итерация может быть сделана без прохождения аргумента индекса
const colors = ['green', 'yellow', 'blue']; colors.forEach((item) => console.log(item)); // returns every item in the array // "green" // "yellow" // "blue"
каждый()
Этот метод проверяет, если все элементы в массиве проходят указанное условие и возврат правда
Если пропущено, еще ложь
Отказ
const numbers = [1, -1, 2, 3]; let allPositive = numbers.every((value) => { return value >= 0; }) console.log(allPositive); // would return false
некоторый()
Этот метод проверяет, если элемент (один или несколько) в массиве проходит указанное условие и возвращает true, если передано, иначе false.
const numbers = [1, -1, 2, 3]; let atLeastOnePositive = numbers.some((value) => { return value >= 0; }) console.log(atLeastOnePositive); // would return true
включает()
Этот метод проверяет, содержит ли массив определенного элемента. Это похоже на .some ()
Но вместо того, чтобы искать конкретное условие, чтобы пройти, он проверяет, содержит ли массив определенного элемента.
let users = ['paddy', 'zaddy', 'faddy', 'baddy']; users.includes('baddy'); // returns true
Если товар не найден, он возвращает ложный
Есть больше методов массива, это всего лишь несколько из них. Кроме того, есть тонны других действий, которые могут быть выполнены на массивах, попробуйте проверить документы MDN здесь для более глубокого понимания.
Резюме
- TOSTRING () Преобразует массив в строку, разделенную запятой.
- Присоединяйтесь () Совмещает все элементы массива в строку.
- Concat Совмещает два массива вместе или добавить больше элементов в массив, а затем вернуть новый массив.
- push () Добавляет элемент (ы) до конца массива и изменения Оригинальный массив.
- POP () Удаляет последний элемент массива и Возвращает Это
- Shift () Удаляет первый элемент массива и Возвращает Это
- беззифта () Добавляет элемент (ы) в начало массива и изменения Оригинальный массив.
- Сращивание () C Висит массив, добавляя, удаляя и вставив элементы.
- ломтик () копии Данная часть массива и возвращает, что скопированная часть как новый массив. Это не меняет оригинальный массив.
- Сплит () Делит строку на подстроки и возвращает их в качестве массива.
- indexof () ищет элемент в массиве и возвращается Индекс где он был найден, он возвращается
-1.
- lastindexof () ищет элемент справа налево и возвращает последний индекс, где был найден элемент.
- Фильтр () Создает новый массив, если предметы массива проходят определенное состояние.
- карта () Создает новый массив, управляя значениями в массиве.
- Уменьшить () рассчитывает одно значение на основе массива.
- foreach () Сквозь массив, он применяет функцию на всех предметах в массиве
- каждый () Проверяет, если все элементы в массиве проходят указанное условие и верните True, если пройдено, иначе ложь.
- некоторые () Проверяет, если элемент (один или несколько) в массиве проходит указанное условие и возвращает True, если пройдено, иначе false.
- включает в себя () проверяет, содержит ли массив определенного элемента.
Давайте завернум это здесь; Массивы мощные и использование методов для манипулирования их создает алгоритмы реального использования приложений.
Давайте сделаем создать небольшую функцию, которая преобразует заголовок поста в URLSLUG.
Когда вы пишете статью на FreeCodeCamp Новости Или любая другая платформа для письма, название вашего сообщения автоматически преобразуется в слизняк с удаленными пробелами, символы повернули строчные и каждое слово в заголовке, разделенном дефисом.
Вот основная функция, которая использует некоторые из методов, которые мы узнали только сейчас.
const url = 'https://bolajiayodeji.com/' const urlSlug = (postTitle) => { let postUrl = postTitle.toLowerCase().split(' '); let postSlug = `${url}` + postUrl.join('-'); return postSlug; } let postTitle = 'Introduction to Chrome Lighthouse' console.log(urlSlug(postTitle)); // https://bolajiayodeji.com/introduction-to-chrome-lighthouse
в Постерл
, мы преобразуем строку в нижний регист, затем мы используем Сплит () Способ преобразования строки в подстроки и возвращает его в массиве
["introduction", "to", "chrome", "lighthouse"]
в Post Slug
Мы присоединяемся к возвращенному массиву с дефисом, а затем объединить его в строку категории и главным URL
Отказ
let postSlug = `${url}` + postUrl.join('-'); postUrl.join('-') // introduction-to-chrome-lighthouse
Вот и все, довольно просто, верно?:)
Если вы просто начинаете с JavaScript, вы должны проверить этот репозиторий здесь Я составляю список основных фрагментов JavaScript от
- Массива
- Контрольный поток
- Функции
- Объекты
- Операторы
Не забудьте звездить и поделиться!:)
PS: Эта статья была впервые опубликована в моем блоге здесь