Verification: a143cc29221c9be0

Object from php to javascript

Особенности ES5

  • "use strict"
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • Получатели и сеттеры собственности
  • Новые методы свойств объекта

Синтаксические изменения ES5

  • Доступ к свойству [] в строках
  • Завершающие запятые в литералах массивов и объектов
  • Многострочные строковые литералы
  • Зарезервированные слова как названия свойств

Директива "строгое использование"

"use strict" определяет, что код JavaScript должен выполняться в "строгом режиме".

В строгом режиме вы можете, например, не использовать необъявленные переменные.

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

"use strict" это просто строковое выражение. Старые браузеры не выдадут ошибку, если не поймут ее.

Подробнее читайте Строгий режим JS.


String.trim()

String.trim() удаляет пробелы с обеих сторон строки.

Подробнее читайте Строковые методы JS.


Array.isArray()

В isArray() методе проверяет, является ли объект массива.

Пример

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Попробуйте сами »

Подробнее читайте Массив JS.


Array.forEach()

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

Пример

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
 txt = txt + value + "
";
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.map()

В этом примере каждое значение массива умножается на 2:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.



Array.filter()

В этом примере создается новый массив из элементов со значением больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.reduce()

Этот пример находит сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.reduceRight()

Этот пример также находит сумму всех чисел в массиве:

Пример

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.every()

В этом примере проверяется, все ли значения больше 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.some()

В этом примере проверяется, не превышают ли некоторые значения 18:

Пример

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.indexOf()

Ищет в массиве значение элемента и возвращает его позицию.

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


Array.lastIndexOf()

Array.lastIndexOf() то же самое Array.indexOf(), но поиск с конца массива.

Пример

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Попробуйте сами »

Подробнее читайте Методы итерации массива JS.


JSON.parse()

Обычно JSON используется для получения данных с веб-сервера.

Представьте, что вы получили эту текстовую строку с веб-сервера:

'{"name":"John", "age":30, "city":"New York"}'

Функция JavaScript JSON.parse() используется для преобразования текста в объект JavaScript:

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Попробуйте сами »

Подробнее читайте JSON Учебник.


JSON.stringify()

Обычно JSON используется для отправки данных на веб-сервер.

При отправке данных на веб-сервер данные должны быть строкой.

Представьте, что у нас есть этот объект в JavaScript:

var obj = {name:"John", age:30, city:"New York"};

Используйте функцию JavaScript JSON.stringify(), чтобы преобразовать его в строку.

var myJSON = JSON.stringify(obj);

Результатом будет строка, следующая за нотацией JSON.

myJSON теперь является строкой и готов к отправке на сервер:

Пример

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Попробуйте сами »

Подробнее читайте JSON Учебник.


Date.now()

Date.now() возвращает количество миллисекунд с нулевой даты (1 января 1970 00:00:00 UTC).

Date.now() возвращает то же самое, что и getTime(), выполняемое для Date объекта.

Подробнее читайте Даты JS.


Свойства геттеров и сеттеров

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

В этом примере создается геттер для свойства с именем fullName:

Пример

// Создаем объект::
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Отображение данных из объекта с помощью геттера:
document.getElementById("demo").innerHTML = person.fullName;

Попробуйте сами »

В этом примере создаются сеттер и геттер для свойства языка:

Пример

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Устанавливаем свойство объекта с помощью сеттера:
person.lang = "en";

// Отображение данных из объекта с помощью геттера:
document.getElementById("demo").innerHTML = person.lang;

Попробуйте сами »

В этом примере используется сеттер для защиты обновлений языка в верхнем регистре:

Пример

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Устанавливаем свойство объекта с помощью сеттера:
person.lang = "en";

// Отображение данных из объекта:
document.getElementById("demo").innerHTML = person.language;

Попробуйте сами »

Узнайте больше о геттерах и сеттерах Методы доступа к объектам JS


Новые методы свойств объекта

Object.defineProperty() это новый метод объекта в ES5.

Он позволяет вам определять свойство объекта и / или изменять значение свойства и / или метаданные.

Пример

// Создание объекта::
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Изменение свойства:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Перечислить свойства
var txt = "";
for (var x in person) {
  txt += person[x] + "
";
}
document.getElementById("demo").innerHTML = txt;

Попробуйте сами »

В Следующем примере - тот же код, за исключением того, что он скрывает свойство языка из перечисления:

Пример

// Создание объекта:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Изменение свойства:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Перечислить свойства
var txt = "";
for (var x in person) {
  txt += person[x] + "
";
}
document.getElementById("demo").innerHTML = txt;

Попробуйте сами »

В этом примере создаются сеттер и получатель для защиты обновлений языка в верхнем регистре:

Пример

// Создаем объект:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Изменение свойства:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Сменить язык
person.language = "en";

// Язык отображения
document.getElementById("demo").innerHTML = person.language;

Попробуйте сами »

ES5 добавил много новых объектных методов в JavaScript:

Новые методы объекта ES5

// Добавление или изменение свойства объекта
Object.defineProperty(object, property, descriptor)

// Добавление или изменение многих свойств объекта
Object.defineProperties(object, descriptors)

// Доступ к свойствам
Object.getOwnPropertyDescriptor(object, property)

// Возвращает все свойства как массив
Object.getOwnPropertyNames(object)

// Возвращает перечисляемые свойства в виде массива
Object.keys(object)

// Доступ к прототипу
Object.getPrototypeOf(object)

// Предотвращает добавление свойств к объекту
Object.preventExtensions(object)
// Возвращает true, если к объекту можно добавить свойства
Object.isExtensible(object)

// Предотвращает изменение свойств объекта (не значений)
Object.seal(object)
// Возвращает true, если объект запечатан
Object.isSealed(object)

// Предотвращает любые изменения объекта
Object.freeze(object)
// Возвращает true, если объект заморожен
Object.isFrozen(object)

Подробнее читайте Объекты ECMAScript5.


Доступ к свойствам для строк

Метод charAt() возвращает символ по указанному индексу (позиции) в строке:

Пример

var str = "HELLO WORLD";
str.charAt(0);            // возвращает H

Попробуйте сами »

ES5 разрешает доступ к свойствам строк:

Пример

var str = "HELLO WORLD";
str[0];                   // возвращает H

Попробуйте сами »

Доступ к свойству в строке может быть немного непредсказуемым.

Подробнее читайте Строковые методы JS.


Завершающие запятые

ES5 позволяет использовать завершающие запятые в определениях объектов и массивов:

Пример объекта

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

Пример массива

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

ВНИМАНИЕ !!!

Internet Explorer 8 выйдет из строя.

JSON не допускает конечных запятых.

Объекты JSON:

// Разрешено:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Запрещено :
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

Массивы JSON:

// Разрешено:
points = [40, 100, 1, 5, 25, 10]

// Запрещено :
points = [40, 100, 1, 5, 25, 10,]


Строки на нескольких строках

ES5 позволяет использовать строковые литералы на нескольких строках, если они экранированы обратной косой чертой:

Метод \ может не иметь универсальной поддержки.
В старых версиях браузеров пробелы вокруг обратной косой черты могут обрабатываться иначе.
Некоторые старые браузеры не допускают пробелов после символа \.

Более безопасный способ разбить строковый литерал - использовать сложение строк:


Зарезервированные слова как названия свойств

ES5 позволяет использовать зарезервированные слова в качестве имен свойств:


Что такое JSON

JSON расшифровывается как аббревиатура от J ava S cript O bject N otation. JSON — это стандартный текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}.

В JSON, ключи всегда строки, в то время как значение может быть string, number, true или false, null, object или array. Строки должны быть заключены в двойные кавычки "и могут содержать управляющие символы, такие как \n, \tи \. JSON более компактный, чем xml, поэтому он более предпочтителен для обмена данными между веб-браузером и сервером.

Синтаксис JSON на примерах

Объект JSON может выглядеть так:

Пример

{
  "ФИО" : "Иванов Иван",
  "Адрес" : {
    "Город" : "Киров",
    "Улица" : "Вербицкого",
    "Дом" : "7"
  }
}

В то время как пример массива JSON будет выглядеть примерно так:

Пример

{
    "smarts": [
        "Apple",
        "ASUS",
        "Huawei",
        "Lenovo"
    ]
}

PHP и JSON

Структуры данных JSON очень похожи на массивы PHP. В языке PHP существуют специальные функции для кодирования и декодирования данных JSON. Это функции json_encode() и json_decode() соответственно. Они уже встроены в ядро PHP, поэтому никаких библиотек подключать не нужно. Обе функции работают только со строковыми данными в кодировке UTF-8.

Кодирование данных JSON в PHP

В PHP функция json_encode() используется для кодирования значения в формат JSON. Кодируемое значение может быть любым типом данных PHP, кроме ресурса, такого как база данных или дескриптор файла.

Синтаксис

string json_encode ($value [, int $options = 0 [, int $depth = 512 ]] )

Параметры

value
- значение, которое будет закодировано. Может быть любого типа за исключением resource. Все строковые данные должны быть в кодировке UTF-8.
options
Битовая маска составляемая из значений JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP, JSON_HEX_APOS, JSON_NUMERIC_CHECK, JSON_PRETTY_PRINT, JSON_UNESCAPED_SLASHES, JSON_FORCE_OBJECT, JSON_UNESCAPED_UNICODE.
depth
Задает максимальную глубину. Должен быть больше нуля.

В приведенном ниже примере показано, как кодировать ассоциативный массив PHP в объект JSON:

65, "Harry"=>80, "John"=>78, "Clark"=>90);
 
echo json_encode($marks);
?>

Результат приведенного выше примера будет выглядеть так:

{"Peter": 65, "Harry": 80, "John": 78, "Clark": 90}

В следующем примере посмотрим, как будут кодироваться кириллические символы:

65, "Игорь"=>80, "Денис"=>78, "Николай"=>90);
 
echo json_encode($marks);
?>

Результат приведенного выше примера будет выглядеть так:

{"\u041f\u0451\u0442\u0440":65,"\u0418\u0433\u043e\u0440\u044c":80,"\u0414\u0435\u043d\u0438\u0441":78,"\u041d\u0438\u043a\u043e\u043b\u0430\u0439":90}

Как видно кириллица кодируется, исправляется это добавлением опции: JSON_UNESCAPED_UNICODE.

65, "Игорь"=>80, "Денис"=>78, "Николай"=>90);
 
echo json_encode($marks, JSON_UNESCAPED_UNICODE);
?>

Результат выполнения кода:

{"Пётр": 65, "Игорь": 80, "Денис": 78, "Николай": 90}

Точно так же вы можете закодировать индексированный массив PHP в массив JSON, например:

В следующем примере посмотрим, как будут кодироваться кириллические символы:

Результат выполнения кода:

["Красный","Зелёный","Синий","Оранжевый","Жёлтый"]

Если применить параметр JSON_FORCE_OBJECT, то функция json_encode() будет возвращать индексированный массив PHP как объект JSON:

Результат выполнения кода:

{"0":"Apple","1":"ASUS","2":"Huawei","3":"Lenovo","4":"Samsung"}

Примечание: Неассоциативный массив может быть закодирован как массив или объект. Однако ассоциативный массив всегда кодируется как объект.

Декодирование данных JSON в PHP

Функция PHP json_decode() используется для декодирования JSON в PHP. Эта функция возвращает значение, декодированное из json в соответствующий тип данных PHP.

Синтаксис

mixed json_decode ( string $json [, bool $assoc = false [, int $depth = 512 [, int $options = 0 ]]] )

Параметры

json
- json строка (string) для декодирования. Эта функция работает только со строками в UTF-8 кодировке.
assoc
Если TRUE, возвращаемые объекты будут преобразованы в ассоциативные массивы.
depth
Указывает глубину рекурсии.
options
Битовая маска опций декодирования JSON. В настоящий момент поддерживается только JSON_BIGINT_AS_STRING (по умолчанию большие целые числа приводятся к числам с плавающей запятой (float))

В следующем примере показано, как декодировать или преобразовать объект JSON в объект PHP:

Результат выполнения кода:

object(stdClass)#1 (4) { ["Peter"]=> int(65) ["Harry"]=> int(80) ["John"]=> int(78) ["Clark"]=> int(90) }

Функция json_decode() по умолчанию возвращает объект. Если нужно JSON декодировать в ассоциативный массив, то укажите значение второго параметра $assoc в качестве true. По умолчанию его значение — false:

Результат выполнения кода:

array(4) { ["Peter"]=> int(65) ["Harry"]=> int(80) ["John"]=> int(78) ["Clark"]=> int(90) }

Доступ к декодированным значениям JSON в PHP

Теперь рассмотрим пример, который показывает, как декодировать данные JSON и получить доступ к отдельным элементам объекта JSON в PHP:

Peter; // вывод 35
echo $obj->Ben;   // вывод 37
echo $obj->Joe;   // вывод 43
?>

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

Вы также можете перебирать декодированные данные с помощью цикла foreach(), например:

$value){
    echo $key . "=>" . $value . "
"; } echo "
"; // Декодируем данные JSON в объект PHP $obj = json_decode($json); // Перебираем в цикле значения объекта foreach($obj as $key=>$value){ echo $key . "=>" . $value . "
"; } ?>

Пример JSON

{
  "name": "Super hero",
  "town": "Metro City",
  "formed": "2016",
  "location": "Super tower"
}

Чтение файла средствами PHP

Для того чтобы прочитать данные в файле JSON существует функция file_get_content. В самом простом варианте достаточно передать в нее расположение файла JSON и сохранить данные в нужную нам переменную.
Давайте сделаем это и посмотрим что у нас получилось через var_dump:

$ourData = file_get_content("data.json");
var_dump($ourData);

В результате работы вышеописанного кода PHP прочитает данные из файла в переменную $ourData и затем выведет ее содержание:

// Код отформатирован для удобства отображения
string(99) "{ 
"name": "Super hero", 
"town": "Metro City", 
"formed": "2016", 
"location": "Super tower" 
}"

Как видим, данные из файла JSON сохранились в переменную и по сути представляют из себя строку - string

Работать с чистой строкой не особо удобно, поэтому к нам на помощь приходит функция json_decode применить которую можно в нескольких вариантах.

Преобразуем JSON в объект PHP

Вызов функции json_decode в простейшем варианте преобразит строку из файла JSON  в PHP объект (Object)

// получаем данные из JSON файла 
$ourData = file_get_contents("data.json");
// Преобразуем в объект
$object = json_decode($ourData);
var_dump($object); // выводим объект      

В результате мы получим объект PHP:

object(stdClass)#1 (4) {
  ["name"]=>
  string(10) "Super hero"
  ["town"]=>
  string(10) "Metro City"
  ["formed"]=>
  string(4) "2016"
  ["location"]=>
  string(11) "Super tower"
}

И теперь мы можем обратиться к отдельным элементам объекта:

echo $object->name; // Выведет Super hero
echo $object->location; // Выведет Super tower

Преобразуем JSON в массив PHP

Для преобразования в ассоциативный массив воспользуемся функцией json_decode с булевым параметром:

// получаем данные из JSON файла 
$ourData = file_get_contents("data.json");
// Преобразуем в массив
$array = json_decode($ourData, true);
var_dump($array); // выводим массив    

PHP выведет на странице ассоциативный массив:

array(4) { 
["name"]=> string(10) "Super hero" 
["town"]=> string(10) "Metro City" 
["formed"]=> string(4) "2016" 
["location"]=> string(11) "Super tower" 
}

Это позволяет нам теперь обращаться к отдельным данным массива:

echo $array["town"]; // выведет Metro City

Структура данных

Во-первых, в коде должна быть отражена сама структура данных. Лучше всего это делать с использованием классов (аннотации JSDoc помогают ориентироваться в типах данных):

class ConfigEmailAuth {
    /** @type {string} */
    pass;
    /** @type {string} */
    user;
}

Это пример простой структуры данных, где каждый атрибут является примитивом. Если некоторые атрибуты сами являются структурами, то класс выглядит примерно так:

class ConfigEmail {
    /** @type {ConfigEmailAuth} */
    auth;
    /** @type {string} */
    from;
    /** @type {string} */
    host;
    /** @type {number} */
    port;
    /** @type {boolean} */
    secure;
}

Создание объектов

Как правило, создание экземпляра DTO в половине случаев связано разбором имеющейся структуры данных, полученной "по проводам" с "другой стороны". Поэтому конструктор DTO получает на вход некоторый JS-объект, из которого пытается извлечь знакомые ему данные:

/**
 * @param {ConfigEmailAuth|null} data
 */
constructor(data = null) {
    this.pass = data?.pass;
    this.user = data?.user;
}

В конструкторе структуры со сложными атрибутами используются конструкторы для соответствующих атрибутов:

/**
 * @param {ConfigEmail} data
 */
constructor(data = null) {
    this.auth = (data?.auth instanceof ConfigEmailAuth)
        ? data.auth : new ConfigEmailAuth(data?.auth);
    this.from = data?.from || 'default@from.com';
    this.host = data?.host || 'localhost';
    this.port = data?.port || 465;
    this.secure = data?.secure || true;
}

Если какой-то атрибут представляет из себя массив, то в конструкторе его разбор выглядит примерно так:

class ConfigItems {
    /** @type {Item[]} */
    items;

    /**
     * @param {ConfigItems} data
     */
    constructor(data = null) {
        this.items = Array.isArray(data?.items)
            ? data.items.map((one) => (one instanceof Item) ? one : new Item(one))
            : [];
    }
}

Если какие-то данные должны быть сохранены в атрибуте без разбора, то это тоже возможно (хотя к DTO имеет такое себе отношение):

class SomeDto {
    /** @type {Object} */
    unknownStruct;

    /**
     * @param {SomeDto} data
     */
    constructor(data = null) {
        this.unknownStruct = data?.unknownStruct;
    }

}

Метаданные

Метаданные - это информация о коде. Метаданные позволяют отследить, где используются соответствующие атрибуты объекта:

class SaleOrder {
    /** @type {number} */
    amount;
    /** @type {number} */
    id;
}

SaleOrder.AMOUNT = 'amount';
SaleOrder.ID = 'id';

Например, при выборке данных из БД:

const query = trx.from('sale');
query.select([
    {[SaleOrder.ID]: 'saleId'},
    {[SaleOrder.AMOUNT]: 'totalAmount'},
    // ...
]);

Результирующую выборку можно напрямую передавать в конструктор SaleOrder, а затем получившийся DTO выкидывать на web в качестве ответа.

Резюме

Если сводить воедино все три составляющих DTO (структура, конструктор, метаданные), то получается примерно такой es-модуль:

import ConfigEmailAuth from './ConfigEmailAuth.mjs';

export default class ConfigEmail {
    /** @type {ConfigEmailAuth} */
    auth;
    /** @type {string} */
    from;
    // ...

    /**
     * @param {ConfigEmail} data
     */
    constructor(data = null) {
        this.auth = (data?.auth instanceof ConfigEmailAuth)
            ? data.auth : new ConfigEmailAuth(data?.auth);
        this.from = data?.from || 'default@from.com';
        // ...
    }

}

ConfigEmail.AUTH = 'auth';
ConfigEmail.FROM = 'from';
// ...

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

"Вот и всё, что я могу сказать об этом." (с)

Цикл each (jQuery.each). Примеры использования

Синтаксис функции each:

// array или object - массив или объект, элементы или свойства которого необходимо перебрать
// callback - функция, которая будет выполнена для каждого элемента массива или свойства объекта
$.each(array или object,callback);

Работу с функцией each разберём на примерах.

Пример №1. В нём выполним переберор всех элементов массива (array).

// массив, состоящий из 3 строк
var arr = ['Автомобиль','Грузовик','Автобус'];

// переберём массив arr
$.each(arr,function(index,value){

  // действия, которые будут выполняться для каждого элемента массива
  // index - это текущий индекс элемента массива (число)
  // value - это значение текущего элемента массива
  
  //выведем индекс и значение массива в консоль
  console.log('Индекс: ' + index + '; Значение: ' + value);

});

/*
Результат (в консоли):
Индекс: 0; Значение: Автомобиль
Индекс: 1; Значение: Грузовик
Индекс: 2; Значение: Автобус
*/

В вышеприведённом коде функция each используется для перебора массива. Функция имеет 2 обязательных параметра. Первый параметр - это сущность (массив или объект), элементы (свойства) которой необходимо перебрать. В данном случае - это массив arr. Второй параметр - это функция обратного вызова, которая будет выполнена для каждого элемента (в данном случае) массива. Она имеет 2 параметра, которые доступны внутри неё посредством соответствующих переменных. Первый параметр - это порядковый номер элемента (отсчёт выполняется с 0). Второй параметр - это значение текущего элемента массива.

Пример №2. В этом примере осуществим перебор всех свойств объекта.

// объект smartphone, имеющий 5 свойств
var smartphone = {
  "name": "LG G5 se",
  "year": "2016",
  "screen-size": "5.3",
  "screen-resolution": "2560 x 1440",
  "os" : "Android 6.0 (Marshmallow)"
};

// переберём объект smartphone
$.each(smartphone, function( key, value ) {

  // действия, которые будут выполняться для каждого свойства объекта
  // key - текущее имя свойства массива
  // value - значение текущего свойства объекта
 
  // выведем имя свойства и его значение в консоль
  console.log( 'Свойство: ' +key + '; Значение: ' + value );

});

/*
Результат (в консоли):
Свойство: name; Значение: LG G5 se
Свойство: year; Значение: 2016
Свойство: screen-size; Значение: 5.3
Свойство: screen-resolution; Значение: 2560 x 1440
Свойство: os; Значение: Android 6.0 (Marshmallow)
*/

Функция each может использоваться для перебора JavaScript объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.

Пример №3. В нём осуществим перебор более сложной структуры (рассмотрим, как использовать вложенные each).

// объект, состоящий из 2 свойств. Каждое свойство этого объект имеет в качестве значения массив, элементами которого являются тоже объекты
var articles = {
  "Bootstrap": [
    {"id":"1", "title":"Введение"},
    {"id":"2", "title":"Как установить"},
    {"id":"3", "title":"Сетка"}
  ],
  "JavaScript": [
    {"id":"4", "title":"Основы"},
    {"id":"5", "title":"Выборка элементов"}
  ]  
};

$.each(articles,function(key,data) {
  console.log('Раздел: ' + key);
  $.each(data, function(index,value) {
    console.log('Статья: id = ' + value['id'] + '; Название = '+ value['title']);
  });
});

/*
Результат:
Раздел: Bootstrap
Статья: id = 1; Название = Введение
Статья: id = 2; Название = Как установить
Статья: id = 3; Название = Сетка
Раздел: JavaScript
Статья: id = 4; Название = Основы
Статья: id = 5; Название = Выборка элементов
*/

Как прервать each (выйти из цикла)

Прерывание (break) цикла each осуществляется с помощью оператора return, который должен возвращать значение false.

Например, прервём выполнение цикла each после того как найдём в массиве arr число 7:

// массив, состоящий из 5 чисел
var arr = [5, 4, 7, 17, 19];

// число, которое необходимо найти
var find = 7;

// переберём массив arr
$.each(arr, function (index, value) {
  // если необходимое число найдено, то..
  if (value === find) {
    // вывести его в консоль
    console.log('Ура! Число ' + find + ' найдено! Данное число имеет индекс: ' + index);
    // прервать выполнение цикла
    return false;
  } else {
  // иначе вывести в консоль текущее число
  console.log('Текущее число: ' + value);
  }
});

/* Результат (в консоли):
Текущее число: 5
Текущее число: 4
Ура! Число 7 найдено! Данное число имеет индекс: 2
*/

Как перейти к следующей итерации (each continue)

В each прерывание выполнения текущей итерации и переход к следующей осуществляется с помощью оператора return, который должен иметь значение отличное от false.

// массив, состоящий из чисел
var arr = [3, 5, 4, 9, 17, 19, 30, 35, 40];

// массив, который должен содержать все элементы массива arr, кроме чётных чисел
var newarr = [];

// переберём массив arr
$.each(arr, function (index, value) {

  // если элемент чётный, то пропустим его
  if (value % 2 === 0) {
    // прервём выполнение текущей итерации и перейдём к следующей
    return;
  }
  // добавить в массив newarr значение value
  newarr.push(value);

});

console.log('Исходный массив (arr): ' + arr.join());
console.log('Результирующий массив (newarr): ' + newarr.join());

/* Результат (в консоли):
Исходный массив (arr): 3,5,4,9,17,19,30,35,40
Результирующий массив (newarr): 3,5,9,17,19,35
*/