For против foreach() против for/in и против for/of в javascript

Синтаксис

Синтаксис цикла for довольно простой, и мало чем отличается от такого цикла в других языках програмирования.

for (let counter = 0;counter<10;counter++) {
  console.log('counter=',counter);
}

Цикл for принимает 3 выражения. Первое выражение инициализация счетчика let counter = 0; выполняется до того как цыкл начнется. Второе выражение counter < 10 определяет должно ли выполнится тело цыкла. Третье выражение выполняется после каждой итерации, при обходе массива например, нужно инкрементить индекс.

Например у нас есть массив пользователей:

let users=},
    {id:2,'login':'js-ninja',comments:[]},
    {id:3,'login':'user',comments:[]}
    ];

И мы хотим обойти его и вывести имена пользователей

    for (let i = 0;i<users.length;i++) {
      console.log('login=',users.login);
    }

Если использовать цикл forEach этот код будет выглядет так:

   users.forEach(function(user,index,arr){
        console.log('login=',user.login);
   })

Метод forEach принимает функцию callback и вызывает для каждого элемента массива.Так в чем же разница между for и forEach()?

1. Увеличевается читаемость кода

Два способа позволяют обойти массив, но большинстве случаев я использую forEach. В пример выше используются только один уровень вложенности, и код более-менее читаем, но, если мы добавим еще один цикл for, время на понимание кода увеличится.

for (let i = 0;i<users.length; i++) {
    for (let j = 0;j<users.comments.length; j++) {
      console.log(user.comments);
      }
  }

Теперь появился второй счетчик цикла, за которым нужно следить, в таком коде очень легко сделать ошибку, к счастью forEach решает эту проблему

    users.forEach(user=>{
        user.comments.forEach(comment=>console.log(comment))
    })

2. Меньше ошибок на единицу (off-by-one error)

Ошибка неучтённой единицы — логическая ошибка в цикле или нарушения граничных условий, например, выход за пределы массива. Её можно произвести, изменив одно выражение из предыдущих примеров

    for (let i = 0; i<=users.length; i++) {
      console.log('login=',users.login);
    }

При попытке выполнения произойдет ошибка: TypeError: Cannot read property ‘login’ of undefined. Метод forEach сам следит за индексами, по тому такая ошибка не возможна при его использовании.

3. Преждевременное прерываие работы

Единственным случаем где цикл for удобнее метода forEach есть ситуация если по какой-то причине нужно остановить обход массива, например, если был найден нужен пользователь, и не имеет смысла проверять других.
Остановка выполнения цикла делается выражением break;

    function findUser(users,login){
      let user=null;
      for (let i = 0;i<users.length; i++) {
        if(user.login===login){
            user=user;
            break;
        }
      return user;
      }
    }

Стоить заметить что в ES6 появился новый метод find() которые устраняет этот недостаток forEach()

Большинство методов поддерживают «thisArg»

Почти все методы массива, которые вызывают функции – такие как , , , за исключением метода , принимают необязательный параметр .

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

Вот полный синтаксис этих методов:

Значение параметра становится для .

Например, вот тут мы используем метод объекта как фильтр, и передаёт ему контекст:

Если бы мы в примере выше использовали просто , то вызов был бы в режиме отдельной функции, с . Это тут же привело бы к ошибке.

Вызов можно заменить на , который делает то же самое. Последняя запись используется даже чаще, так как функция-стрелка более наглядна.

Метод Object.keys()

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

1const car ={

2  name'bmw',

3  model'x2',

4  year2020,

5  engine'2.0T',

6  color'red',

7  country'Germany',

8};

9const carData =Object.keys(car);

10console.log(carData);

11

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

1const car ={

2  name'bmw',

3  model'x2',

4  year2020,

5  engine'2.0T',

6  color'red',

7  country'Germany',

8};

9const carData =Object.values(car);

10console.log(carData);

11

Копирование массива в JavaScript

slice()

В JS копирование массива бывает поверхностным либо неглубоким (shallow copy) а также deep copy, то есть глубоким.

В первом случае мы присваиваем переменной значение другой переменной, хранящей массив:

    var users = "Tom", "Bob", "Bill"];
console.log(users);     //  
var people = users;     //  shallow copy

people1 = "John";     //  меняем 2-й элемент
console.log(users);     //  

В нашем случае переменная people после неглубокого копирования станет указывать на тот же массив, что и переменная users. Именно поэтому в случае изменения элементов в people, поменяются элементы и в users, ведь по факту это один и тот же массив.

Вышеописанное поведение не всегда желательно. К примеру, нам надо, чтобы после копирования переменные указывали на отдельные массивы. Тогда подойдёт глубокое копирование посредством метода slice():

    var users = "Tom", "Bob", "Bill"];
console.log(users);             //  
var people = users.slice();     //  deep copy

people1 = "John";             //  меняем 2-й элемент
console.log(users);             //  
console.log(people);            //  

Теперь после копирования переменные станут указывать на разные массивы, поэтому мы сможем менять их отдельно друг от друга.

Кроме того, функция slice() даёт возможность копировать часть массива:

    var users = "Tom", "Bob", "Bill", "Alice", "Kate"];
var people = users.slice(1, 4);
console.log(people);        // 

В функцию slice() мы передаём начальный и конечный индексы, используемые для выборки значений из нашего массива. В таком случае выборка в новый массив начнётся с первого индекса по индекс № 4, не включая его. И, так как индексация массивов в JavaScript начинается с нуля, в новом массиве будут 2-й, 3-й и 4-й элементы.

push()

Функция push() добавит элемент в конец нашего массива:

    var fruit = [];
fruit.push("груши");
fruit.push("яблоки");
fruit.push("сливы");
fruit.push("вишни","абрикосы");

document.write("В массиве fruit " + fruit.length + " элемента: <br/>");
document.write(fruit); // груши,яблоки,сливы,вишни,абрикосы

pop()

Такая функция, как pop(), удалит последний элемент из JavaScript-массива:

    var fruit = "груши", "яблоки", "сливы"];

var lastFruit = fruit.pop(); // из массива извлекается последний элемент
document.write(lastFruit + "<br/>");
document.write("В массиве fruit " + fruit.length + " элемента: <br/>");
for(var i=; i <fruit.length; i++)
    document.write(fruiti + "<br/>");

Итоговый вывод:

сливы
В массиве fruit 2 элемента: 
груши
яблоки

shift()

Теперь рассмотрим функцию shift(). Она может извлекать и удалять 1-й элемент из массива:

    var fruit = "груши", "яблоки", "сливы"];

var firstFruit = fruit.shift();
document.write(firstFruit + "<br/>");
document.write("В массиве fruit " + fruit.length + " элемента: <br/>");
for(var i=; i <fruit.length; i++)
    document.write(fruiti + "<br/>");

Вывод следующий:

груши
В массиве fruit 2 элемента: 
яблоки
сливы

unshift()

Что касается функции unshift(), то она добавит новый элемент в самое начало массива:

    var fruit = "груши", "яблоки", "сливы"];
fruit.unshift("апельсины");
document.write(fruit);

Вывод браузера:

апельсины,груши,яблоки,сливы

Перебор элементов массива

Один из распространенных
способов перебора элементов массива мы только что видели – это цикл for:

Например, для
массива:

let fruits = "Яблоко", "Апельсин", "Груша";

перебрать его
элементы можно так:

for(let i=;i < fruits.length; ++i)
    console.log( fruitsi );

мы увидим все
значения элементов. Но есть и второй новый способ перебора с помощью цикла for of:

for(let value of fruits)
    console.log( value );

Эта
запись короче, но имеет свои особенности: значения массива копируются в
переменную value, то есть,
внутри цикла мы имеем дело не с самими значениями массива fruits, а с их
копиями. Например, из-за этого мы не можем менять значения элементов массива
внутри такого цикла:

for(let value of fruits) {
     value = "none";
}
 
console.log(fruits);

В консоле мы
увидим прежний массив. А вот через первый цикл так делать можно:

for(let i=;i < fruits.length; ++i)
    fruitsi = "none";

Преимуществом
цикла for of является его
оптимизация под массивы. В частности, он работает в 10-100 раз быстрее цикла for in, который мы
рассматривали ранее, для перебора свойств объекта. Формально, мы могли бы
использовать и его:

for(let key in fruits)
    console.log( fruitskey );

Но это будет
медленнее и к тому же там мы будем перебирать все публичные ключи массива, а не
только целочисленные, которые являются индексами элементов массива. В общем,
вывод такой. Нужно перебрать массив, используйте или обычный цикл for или цикл for of.

Видео по теме

JavaScipt #1: что это такое, с чего начать, как внедрять и запускать

JavaScipt #2: способы объявления переменных и констант в стандарте ES6+

JavaScript #3: примитивные типы number, string, Infinity, NaN, boolean, null, undefined, Symbol

JavaScript #4: приведение типов, оператор присваивания, функции alert, prompt, confirm

JavaScript #5: арифметические операции: +, -, *, /, **, %, ++, —

JavaScript #6: условные операторы if и switch, сравнение строк, строгое сравнение

JavaScript #7: операторы циклов for, while, do while, операторы break и continue

JavaScript #8: объявление функций по Function Declaration, аргументы по умолчанию

JavaScript #9: функции по Function Expression, анонимные функции, callback-функции

JavaScript #10: анонимные и стрелочные функции, функциональное выражение

JavaScript #11: объекты, цикл for in

JavaScript #12: методы объектов, ключевое слово this

JavaScript #13: клонирование объектов, функции конструкторы

JavaScript #14: массивы (array), методы push, pop, shift, unshift, многомерные массивы

JavaScript #15: методы массивов: splice, slice, indexOf, find, filter, forEach, sort, split, join

JavaScript #16: числовые методы toString, floor, ceil, round, random, parseInt и другие

JavaScript #17: методы строк — length, toLowerCase, indexOf, includes, startsWith, slice, substring

JavaScript #18: коллекции Map и Set

JavaScript #19: деструктурирующее присваивание

JavaScript #20: рекурсивные функции, остаточные аргументы, оператор расширения

JavaScript #21: замыкания, лексическое окружение, вложенные функции

JavaScript #22: свойства name, length и методы call, apply, bind функций

JavaScript #23: создание функций (new Function), функции setTimeout, setInterval и clearInterval

MAP-массивы

Создание MAP-массива с данными

var mapArray = new Map(,
    ,
    ,
    
]);

Несколько операций, которые можно использовать в MAP-массиве

Добавление нового ключа и значения, либо изменение имеющегося значения ключа в массиве

mapArray.set('availability', true);

Удаление ключа и значения

mapArray.delete('quantity');

Полная очистка массива

mapArray.clear();

Проверка наличия ключа в массиве

mapArray.has('id');

если такой ключ есть, вернёт true

Список ключей в массиве

mapArray.keys();

Список значений в массиве

mapArray.values();

Показать значение ключа

mapArray.get('name');

Показать число элементов в массиве

mapArray.size;

Список ключей и элементов массива

mapArray.entries();

На этом пока всё.

Поиск индекса элемента в JS

Функции indexOf() и lastIndexOf() вернут индекс 1-го и последнего включения элемента в массиве. К примеру:

    var fruit = "яблоки", "груши", "огурцы", "яблоки", "груши"];

var firstIndex = fruit.indexOf("яблоки");
var lastIndex = fruit.lastIndexOf("яблоки");
var otherIndex = fruit.indexOf("черешня");
document.write(firstIndex); // 0
document.write(lastIndex);  // 3
document.write(otherIndex); // -1

У firstIndex значение 0, так как первое включение «яблоки» в нашем массиве приходится на индекс 0, последнее — на индекс № 3. Если же элемент в массиве отсутствует, функции indexOf() и lastIndexOf() вернут значение -1.

every()

С помощью every() мы проверим, все ли наши элементы соответствуют какому-нибудь условию:

    var numbers =  1, -12, 8, -2, 25, 62 ];
function condition(value, index, array) {
    var result = false;
    if (value > ) {
        result = true;
    }
    return result;
};
var passed = numbers.every(condition);
document.write(passed); // false

В метод every() в качестве параметра осуществляется передача функции, представляющей условие. Данная функция принимает 3 параметра:

    function condition(value, index, array) {

}

Здесь параметр value представляет перебираемый текущий элемент массива, параметр index представляет индекс данного элемента, а параметр array осуществляет передачу ссылки на массив.

В такой функции можно проверить переданное значение элемента на его соответствие определённому условию. В нашем примере мы проверяем каждый элемент массива на условие, больше ли он нуля. Когда больше, возвращается значение true, так как элемент соответствует условию. Когда меньше, возвращается значение false, т. к. элемент не соответствует нашему условию.

В результате, когда осуществляется вызов метода numbers.every(condition) он выполняет перебор всех элементов нашего массива numbers, а потом поочерёдно передает их в функцию condition. Когда эта функция возвращает значение true для всех элементов, метод every() тоже возвращает true. Когда хоть один элемент условию не соответствует, возвращается false.

some()

Функция/метод some() похожа на every() с той лишь разницей, что осуществляется проверка на соответствие условию хотя бы одного элемента.

Здесь some() вернёт true. Но если соответствующих условию элементов в массиве не будет, вернётся false:

    var numbers =  1, -12, 8, -2, 25, 62 ];
function condition(value, index, array) {
    var result = false;
    if (value === 8) {
        result = true;
    }
    return result;
};
var passed = numbers.some(condition); // true

filter()

Как some() и every(), метод filter()принимает функцию условия. Но тут возвращается массив элементов, соответствующих условию:

    var numbers =  1, -12, 8, -2, 25, 62 ];
function condition(value, index, array) {
    var result = false;
    if (value > ) {
        result = true;
    }
    return result;
};
var filteredNumbers = numbers.filter(condition);

for(var i=; i < filteredNumbers.length; i++)
    document.write(filteredNumbersi + "<br/>");

Вот результат вывода:

1
8
25
62

forEach() и map()

Функции forEach() и map() выполняют перебор элементов, осуществляя с ними некоторые операции. К примеру, чтобы вычислить квадраты чисел в массиве, делаем так:

    var numbers =  1, 2, 3, 4, 5, 6];
for(var i = ; i<numbers.length; i++){

    var result = numbersi * numbersi];

    document.write("Квадрат нашего числа " + numbersi + " равен " + result + "<br/>");
}

Конструкция может быть упрощена посредством forEach():

    var numbers =  1, 2, 3, 4, 5, 6];

function square(value, index, array) {

    var result = value * value;
    document.write("Квадрат нашего числа " + value + " равен " + result + "<br/>");
};

numbers.forEach(square);

Здесь forEach() в качестве параметра принимает ту же функцию, в которую в процессе перебора элементов передаётся перебираемый текущий элемент, и над ним выполняются операции.

Что касается map(), то этот метод похож на forEach с той лишь разницей, что map() возвращает новый массив, где отображены результаты операций над элементами массива.

Допустим, давайте, применим map к вычислению квадратов чисел нашего массива:

    var numbers =  1, 2, 3, 4, 5, 6];

function square(value, index, array) {

    return result = value * value;
};

var squareArray = numbers.map(square);
document.write(squareArray);

Функция, передаваемая в map(), получает текущий перебираемый элемент, выполняя над ним операции и возвращая некоторое значение. Именно это значение и попадает в результирующий массив squareArray.

Синтаксический обзор

Циклические конструкции for и for/in предоставляют вам доступ к индексу в массиве, а не к фактическому элементу. Например, предположим, что вы хотите распечатать значения следующего массива:

const arr = ;

С помощью for и for/in вам нужно использовать конструкцию arr :

for (let index = 0; index < arr.length; ++index) {
  console.log(arr);
}

for (let index in arr) {
  console.log(arr);
}

С двумя другими конструкциями, forEach() и for/of, вы сразу получаете доступ к самому элементу массива. С forEach() вы можете так же получить индекс массива index, с for/of индекс не доступен.

arr.forEach((v, index) => console.log(v));

for (const v of arr) {
  console.log(v);
}

Коллекция Map

– это коллекция «ключ-значение», которую можно использовать для создания ассоциативных массивов.

в отличие от объекта позволяет использовать в качестве ключей значения любых типов как примитивные, так и ссылочные.

Создание пустой коллекции:

Создании коллекции с инициализацией начальных значений:

В этом примере строки «key1», «key2» и «key3» являются ключами, а «value1», «value2» и «value3» соответственно их значениями.

Узнать количество элементов в массиве можно осуществить с помощью свойства :

arr.size; // 3

Добавление элемента в массив (в экземпляр объекта Map) осуществляется с помощью метода :

// добавить в массив одну пару "ключ-значение"
arr.set('key4','value4');

// добавить в массив несколько пар "ключ-значение"
arr.set('key5','value5');
arr.set('key6','value6');
// или так
arr
  .set('key5','value5')
  .set('key6','value6');

Если в массиве есть уже такой ключ, то произойдёт установка нового значения, которое будет связано с ним:

arr.set('key1','new value');

Получить значение по ключу выполняется с помощью метода :

// получить значение, ассоциированное с ключом 'key4'
arr.get('key4'); // 'value4'

Проверить есть ли ключ в массиве можно посредством метода :

// есть ли в массиве arr ключ key2
arr.has('key2'); // true

Удалить из ассоциативного массива (экземпляра объекта Map) элемент по имени ключа можно с помощью метода :

arr.delete('key1'); // true

Данный метод возвращает , если данный ключ существовал в массиве, в противном случае он возвращает .

if (arr.delete('key1')) {
  console.log('Запись с ключом "key1" удалена из массива!');
} else {
  console.log('Запись с ключом "key1" не найдена в массиве!');
}

Очистить массив (удалить все элементы) можно выполнить с помощью метода .

arr.clear(); // очистим массив arr
arr.size; // 0 (количество элементов)

Перебор ассоциативного массива (объекта Map) обычно осуществляется с помощью цикла . При этом итерацию можно организовать по ключам, значениям и записям ().

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

for (let key of arr.keys()) {
  console.log(key);
}

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

for (let value of arr.values()) {
  console.log(value);
}

Перебор записей ассоциативного массива с использованием метода :

for (let pair of arr.entries()) {
  // pair - это массив 
  console.log(pair); // ключ
  console.log(pair); // значение
  console.log(`Ключ = ${pair}, значение = ${pair}`);
}

Данный метод используется по умолчанию в for…of, поэтому его можно опустить:

for (let pair of arr) {
  console.log(`Ключ = ${pair}, значение = ${pair}`);
}

Кроме этого перебрать ассоциативный массив можно с помощью метода forEach.

arr.forEach(function(value,key) {
  console.log('key = ' + key +', value = ' + value);
});

Преобразовать ассоциативный массив (объект Map) в JSON и обратно можно так:

let arr = new Map(,
  ,
  ,
]);
// в JSON
jsonStr = JSON.stringify();
// из JSON в Map
mapArr = new Map(JSON.parse(jsonStr));

Object.fromEntries: Object из Map

Мы только что видели, как создать из обычного объекта при помощи .

Есть метод , который делает противоположное: получив массив пар вида , он создаёт из них объект:

Мы можем использовать , чтобы получить обычный объект из .

К примеру, у нас данные в , но их нужно передать в сторонний код, который ожидает обычный объект.

Вот как это сделать:

Вызов возвращает массив пар ключ/значение, как раз в нужном формате для .

Мы могли бы написать строку ещё короче:

Это то же самое, так как ожидает перебираемый объект в качестве аргумента, не обязательно массив. А перебор как раз возвращает пары ключ/значение, так же, как и . Так что в итоге у нас будет обычный объект с теми же ключами/значениями, что и в .

5 ответов

Лучший ответ

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

Хорошо, теперь, когда фактические правила были раскрыты (используйте только для удаления значений, а не временных массивов), вот метод, который использует только для удаления значений из массива. Предполагается, что исходный порядок не нужно сохранять (хотя это можно сделать с помощью большего количества кода). Это работает в обратном порядке через массив и каждый раз, когда он находит отрицательное значение, он меняет это значение на последнее значение в массиве, а затем сбрасывает это отрицательное значение:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/wo8fhoor/

И вот версия, которая сохраняет порядок массива, используя только для удаления элементов из массива. Когда он находит отрицательное значение, он копирует все последующие элементы после него в массив (таким образом удаляя его) и затем использует , чтобы сократить массив на единицу:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/uvqx6hq0/

Эти версии кода появились до того, как были раскрыты полные правила.

Вы можете циклически перемещаться по массиву, каждый раз выталкивая последний элемент, а затем создавать новый массив только с теми значениями, которые вам нравятся:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/2atz6ck9/

удаляет только последний элемент в массиве. Для удаления этого конкретного элемента не требуется аргумент, поэтому вы не можете использовать его для удаления n-го элемента в массиве.

В реальном мире вы либо использовали бы для создания нового массива, либо использовали бы для удаления отдельных элементов.

Вот решение:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/gqt5avLb/

И вот решение с использованием :

Или в ES6:

2

jfriend00
11 Дек 2018 в 21:06

Это , несмотря на мои предыдущие комментарии, возможно с , но оно требует создания другого массива, итерируя по существующему массиву:

Это, однако, смешно, так как было бы проще и гораздо разумнее не добавлять отрицательные числа в массив в первую очередь:

David says reinstate Monica
22 Фев 2015 в 00:54

Попробуй это:

Конечно, это не хороший способ удалить негативы.

Oriol
22 Фев 2015 в 00:52

Возможно, вы можете использовать 2D-массив.

Это ни в коем случае не эффективное решение, но если у вас есть небольшое количество элементов, это должно быть хорошо.

EDIT :

Вот функция для создания 2D-массива:

Lee Yi
22 Фев 2015 в 02:20

Вы можете достичь того, чего хотите, используя функцию .

Кроме того, вы не можете одновременно пытаться перебирать элементы массива и удалять элементы из этого массива. Это не имеет смысла. Вы можете фильтровать элементы массива, вы можете удалять определенные элементы, вы можете добавлять элементы в массив, но вы определенно не можете циклически просматривать его элементы и в то же время удалять элементы из него.

Christos
22 Фев 2015 в 00:55

Стек исполнения (Execution Stack)

Мы знаем, что контекст выполнения функции создается каждый раз, когда вызывается функция.

Поскольку даже самые простые программы на JavaScript имеют довольно много вызовов функций, все эти контексты выполнения функций должны как-то управляться.

Посмотрите на следующий пример:

function a() {
  // some code
}

function b() {
  // some code
}

a();
b();

Когда происходит вызов функции a(), создается контекст выполнения функции, как описано выше, и выполняется код внутри функции.

Когда выполнение кода завершено (оператор return или скобка } ), контекст выполнения функции для функции a() уничтожается.

Затем происходит вызов b(), и тот же процесс повторяется для функции b().

Но такое случается редко, даже в очень простых программах JavaScript. В большинстве случаев будут функции, которые вызываются внутри других функций:

function a() {
  // some code
  b();
  // some more code
}

function b() {
  // some code
}

a();

В этом случае создается контекст выполнения функции для a(), и прямо в середине выполнения a() встречается вызов b(). Абсолютно новый контекст выполнения функции создается и для b(), но без разрушения контекста выполнения a(), так как его код еще не полностью выполнился.

Это означает, что одновременно может существовать много контекстов выполнения функций. Тем не менее, только один из них на самом деле работает в текущий момент времени.

Чтобы отслеживать, какой из них в данный момент выполняется, используется стек, где текущий контекст выполнения функции находится на вершине стека.

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

Этот стек называется стеком выполнения (execution stack), представленным на рисунке ниже.

JavaScript execution stack

Когда стек выполнения пуст, выполняется глобальный контекст, который мы обсуждали ранее и который никогда не уничтожается, оставаясь текущим контекстом выполнения.

Перебор объекта Set

Мы можем перебрать содержимое объекта set как с помощью метода , так и используя :

Заметим забавную вещь. Функция в у имеет 3 аргумента: значение , потом снова то же самое значение , и только потом целевой объект. Это действительно так, значение появляется в списке аргументов дважды.

Это сделано для совместимости с объектом , в котором колбэк имеет 3 аргумента. Выглядит немного странно, но в некоторых случаях может помочь легко заменить на и наоборот.

имеет те же встроенные методы, что и :

• – возвращает перебираемый объект для значений,
• – то же самое, что и , присутствует для обратной совместимости с ,
• – возвращает перебираемый объект для пар вида , присутствует для обратной совместимости с .

forEach

Метод позволяет пробежаться по каждому элементу массива и произвести с ним какое-либо действие.
Данный метод, в отличие от предыдущих, ничего не возвращает.

Я использую , когда, например, требуется выделить какие-либо элементы в дереве страницы и повесить на них обработчик событий.

1const buttons =document.querySelectorAll('button');

2buttons.forEach((button)=>{

3  button.addEventListener('click',function(){

4console.log('click!!');

5});

6});

Другой пример – на основании исходного массива создать новый массив из уникальных элементов.

1const fruits =

2'apples',

3'bananas',

4'oranges',

5'oranges',

6'apples',

7'kiwi',

8'kiwi',

9'apples',

10;

11const fruitsUnique ={};

12

13fruits.forEach((fruit)=>{

14  fruitsUniquefruit=true;

15});

16const newFruits =Object.keys(fruitsUnique);

17

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative
arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.  

Example

const person = [];
person = «John»;
person = «Doe»;
person = 46;
person.length;    // Will return 3
person;        // Will return «John»

WARNING !!
If you use named indexes, JavaScript will redefine the array to an object.

After that, some array methods and properties will produce incorrect
results.

 Example:

const person = [];
person = «John»;
person = «Doe»;
person = 46;
person.length;     // Will return 0
person;         // Will return undefined

Ассоциативный массив — что это?

Под ассоциативным массивом подразумевают массив, в котором в качестве ключей применяются строки. То есть речь идёт о совокупности пар «ключ-значение». Таким образом, в ассоциативном массиве любое значение связано с конкретным ключом, а доступ к этому значению производится по имени ключа.

Мы можем представить ассоциативный массив в виде небольшого ящика, где находятся отделения. Каждое отделение имеет имя (это ключ) и содержимое (это значение). Естественно, чтобы найти нужное отделение в ящике, мы должны знать имя отделения (ключ). Зная это имя, мы сможем получить содержимое отделения (значение).

Работа с массивами JS — методы pop и push

Метод pop в JavaScript удаляет элемент массива и возвращает его.

В следующем примере показано, как «Осел» извлекается из массива:

var fruits = 
alert("Я удаляю "+fruits.pop())
// Теперь у нас только 
alert("Теперь размер массива: "+fruits.length) // осел удален

Обратите внимание, что pop изменяет сам массив. Аналог pop — это метод push, который добавляет элемент в массив

Например, мы забыли добавить персик:

Аналог pop — это метод push, который добавляет элемент в массив. Например, мы забыли добавить персик:

var fruits = 
fruits.push("Peach");
// теперь у нас есть 
alert("Последний элемент:"+fruits)

Задание для самостоятельного выполнения

1. Создайте массив styles с элементами “Jazz”, “Blues”;
2. Добавьте значение «Rock’n’Roll«;
3. Замените второе значение с конца значением «Classic«. У вас должен получиться массив: “Jazz”, ”Classic”, ”Rock’n’Roll”. Код должен работать для любой длины массива;
4. Извлеките последнее значение из массива и выведите его через alert.

Решение

// 1
var styles = 

// 2
styles.push("Rock'n'Roll") // или: styles = "Rock'n'Roll"

// 3 
styles = "Classic"

// 4
alert( styles.pop() )

Заключение

Как правило, for/of — это самый надежный способ перебора массива в JavaScript. Он более лаконичен, чем обычный цикл for, и не имеет такого количества граничных случаев, как for/in и forEach(). Основным недостатком for/of является то, что вам нужно проделать дополнительную работу для доступа к индексу массива (см. дополнение), и вы не можете строить цепочки кода, как вы можете это делать с помощью forEach(). Но если вы знаете все особенности forEach(), то во многих случаях его использование делает код более лаконичным.

Дополнение: Чтобы получить доступ к текущему индексу массива в цикле for/of, вы можете использовать функцию  .

for (const  of arr.entries()) {
  console.log(i, v); // Prints "0 a", "1 b", "2 c"
}

Оригинал: For vs forEach() vs for/in vs for/of in JavaScript

Spread the love