В этой статье мы рассмотрим множество различных способов циклического перемещения массивов в JavaScript, от родного подхода, с которым многие знакомы, до более свежих (и читаемых) методов, представленных в ES6 и более поздних версиях.
Родной For-Loop
JavaScript
xxxxxxxxxx
1
let myArray = ["Hello,", "world!", "It's", "nice", "to", "meet", "you!"];
2
for(let i = 0; i < myArray.length; i++) {
4
const currElem = myArray[i];
5
6
console.log(`At index ${i}, our element is: ${currElem}`);
7
}
Если вы новичок в программировании, это может быть совершенно новая концепция. (Если так, добро пожаловать! Мы рады, что вы. Для тех из вас, кто видел это несколько раз, не стесняйтесь переходить к следующему разделу.) В приведенном выше блоке кода мы сначала создаем массив, содержащий "Hello, World!" сообщение.
Далее мы начинаем наш цикл for. Циклы for определяются двумя разделами: заголовком, где мы указываем, как будет выполняться цикл, и телом, в котором мы определяем, что будет происходить на каждой итерации нашего цикла. Глава цикла for состоит из трех разделов. Первый определяет значение, часто одну букву, например i, с которого мы хотим начать индексирование нашего массива. Второе определяет условие, которое завершит наш цикл for. Третий выполняет операцию, iчтобы переместить его к следующему элементу в массиве.
В этом случае iэто 0, наше условие завершения i < 7(длина нашего массива), и мы добавляем 1 к, iчтобы переместить его к следующему индексу в нашем массиве. Это говорит нашей программе, что мы хотим посмотреть на каждый элемент в нашем массиве, начиная с 0 (наш первый индекс) и заканчивая 6 (наш последний индекс).
Вам также может понравиться:
Перебор коллекций Java с высокой производительностью .
В теле нашего цикла for мы берем элемент i, присваиваем его переменной currElem, а затем печатаем индекс и значение currElemдля консоли. Наш вывод для этого будет:
Простой текст
x
1
At index 0, our element is: Hello,
2
At index 1, our element is: world!
3
At index 2, our element is: It's
4
At index 3, our element is: nice
5
At index 4, our element is: to
6
At index 5, our element is: meet
7
At index 6, our element is: you!
для каждого цикла
Среди многих полезных методов массива, представленных в ES6, есть forEach. forEach принимает функцию обратного вызова в качестве параметра. Затем обратный вызов принимает в качестве параметра переменную, представляющую отдельный элемент в массиве. Внутри тела обратного вызова мы можем создать собственную логику для выполнения операции с каждым отдельным элементом массива или над ним.
Примечание : forEach не возвращает новый массив элементов. Если вы изменяете элемент в функции обратного вызова, каждый элемент в массиве будет видоизменяться. (Посмотрите, map хотите ли вы сохранить состояние).
Давайте рассмотрим простую реализацию метода с анонимной функцией обратного вызова в качестве нашего аргумента:
JavaScript
x
1
let myArray = ["Hello,", "world!", "It's", "nice", "to", "meet", "you!"];
2
// the callback doesn't have to be an arrow function. You could
4
// achieve the same result with the 'function' keyword
5
myArray.forEach(elem => {
6
console.log(`Current element: ${elem}`);
7
}
Вы также можете использовать предопределенную функцию в качестве обратного вызова, например:
JavaScript
xxxxxxxxxx
1
let myArray = ["Hello,", "world!", "It's", "nice", "to", "meet", "you!"];
2
const printSomething = varToPrint => {
4
console.log(`Current element: ${varToPrint}`
5
}
6
7
myArray.forEach(printSomething)
Обе эти реализации приведут к выводу, аналогичному тому, который был у нас с нашим собственным циклом for:
Простой текст
xxxxxxxxxx
1
Current element: Hello,
2
Current element: world!
3
Current element: It's
4
Current element: nice
5
Current element: to
6
Current element: meet
7
Current element: you!
Если вам нужен индекс текущего элемента в массиве, вы можете просто добавить второй параметр в функцию обратного вызова, например:
JavaScript
xxxxxxxxxx
1
arr.forEach((elem, i) => {
2
// some logic cooler than printing things out
3
}
Здесь i текущий индекс массива, а elemтекущее значение этого индекса.
For-Loop
Для тех, кто приходит из Java-фона, JavaScript for-of loop будет синтаксически очень похож на расширенный for-loop (хотя он не настолько «улучшен», если посмотреть на его реальную производительность). Для меня for-of - самый читаемый вариант, который предлагает язык:
JavaScript
x
1
let myArray = ["Hello,", "world!", "It's", "nice", "to", "meet", "you!"];
2
for(const elem of myArray) {
4
console.log(`Current element: ${elem}`);
5
}
Синтаксис здесь довольно прост. В первой половине заголовка мы объявляем переменную, которая представляет отдельный элемент в нашем массиве. Затем мы используем ofключевое слово, за которым следует массив, который мы хотим перебрать: «Для каждого элемента этого массива сделайте что-нибудь». (Единственная реализация, которая была бы более читабельной, была бы, если inбы могла заменить of(* cough * Python), но объектам принадлежит это ключевое слово для циклов в JavaScript, и если предлог - единственное, на что я могу пожаловаться здесь, моя жизнь не так уж сложна .)