From 3af2da869eac87c38d5530ba57a6d71f5476e39c Mon Sep 17 00:00:00 2001 From: Alexander Pavelko Date: Thu, 10 Feb 2022 12:25:45 +0200 Subject: Improve .map examples: syntax and consistency (#4071) --- .../reference/global_objects/array/map/index.html | 140 +++------------------ 1 file changed, 20 insertions(+), 120 deletions(-) (limited to 'files/ru') diff --git a/files/ru/web/javascript/reference/global_objects/array/map/index.html b/files/ru/web/javascript/reference/global_objects/array/map/index.html index a509f14d60..03ba5d6f78 100644 --- a/files/ru/web/javascript/reference/global_objects/array/map/index.html +++ b/files/ru/web/javascript/reference/global_objects/array/map/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map

Синтаксис

-
let new_array = arr.map(function callback( currentValue[, index[, array]]) {
+
const new_array = arr.map(function callback( currentValue[, index[, array]]) {
     // Возвращает элемент для new_array
 }[, thisArg])

 
@@ -69,8 +69,9 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
 
 
Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.

 
-
var numbers = [1, 4, 9];
-var roots = numbers.map(Math.sqrt);
+
+const numbers = [1, 4, 9];
+const roots = numbers.map(Math.sqrt);
 // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]
 

 
@@ -78,10 +79,9 @@ var roots = numbers.map(Math.sqrt);
 
 
Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда map проходит по оригинальному массиву.

 
-
var numbers = [1, 4, 9];
-var doubles = numbers.map(function(num) {
-  return num * 2;
-});
+
+const numbers = [1, 4, 9];
+const doubles = numbers.map((num) => num * 2);
 // теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9]
 

 
@@ -89,31 +89,29 @@ var doubles = numbers.map(function(num) {
 
 
Этот пример показывает, как использовать map на объекте строки {{jsxref("Global_Objects/String", "String")}} для получения массива байт в кодировке ASCII, представляющего значения символов:

 
-
var map = Array.prototype.map;
-var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
-// теперь a равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+
+const map = Array.prototype.map;
+const charCodes = map.call('Hello World', (x) => x.charCodeAt(0));
+// теперь charCodes равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
 

 
 
Пример: обобщённое использование map вместе с querySelectorAll

 
 
Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью querySelectorAll. В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:

 
-
var elems = document.querySelectorAll('select option:checked');
-var values = [].map.call(elems, function(obj) {
-  return obj.value;
-});
+
+const elems = document.querySelectorAll('select option:checked');
+const values = Array.prototype.map.call(elems, ({ value }) => value);
 

 
 
Более простым способом будет использование метода {{jsxref("Array.from()")}}.

 
 
Пример: использование map для переворачивания строки

 
-
var str = '12345';
-[].map.call(str, function(x) {
-  return x;
-}).reverse().join('');
-
-// Вывод: '54321'
+
+const string = '12345';
+const reversed = Array.prototype.map.call(string, (x) => x).reverse().join('');
+// reversed равен '54321'
 // Бонус: используйте '===' для проверки того, является ли строка палиндромом
 

 
@@ -137,9 +135,7 @@ var values = [].map.call(elems, function(obj) {
 // Третий аргумент игнорируется parseInt, но не второй, следовательно,
 // возможна путаница. Смотрите запись в блоге для дополнительной информации.
 
-function returnInt(element) {
-  return parseInt(element, 10);
-}
+const returnInt = (element) => parseInt(element, 10);
 
 ['1', '2', '3'].map(returnInt);
 // Результатом является массив чисел (как и ожидалось)
@@ -148,103 +144,6 @@ function returnInt(element) {
 ['1', '2', '3'].map(Number); // [1, 2, 3]
 

 
-
Полифил

-
-
Метод map был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использовать map в реализациях, которые не поддерживают этот метод. Этот алгоритм является точно тем, что описан в ECMA-262 5-го издания; он предполагает, что {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}} и {{jsxref("Global_Objects/Array", "Array")}} имеют свои первоначальные значения и что callback.call вычисляется в оригинальное значение {{jsxref("Function.prototype.call")}}.

-
-
// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.19
-// Ссылка (en): http://es5.github.com/#x15.4.4.19
-// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.19
-if (!Array.prototype.map) {
-
-  Array.prototype.map = function(callback, thisArg) {
-
-    var T, A, k;
-
-    if (this == null) {
-      throw new TypeError(' this is null or not defined');
-    }
-
-    // 1. Положим O равным результату вызова ToObject с передачей ему
-    //    значения |this| в качестве аргумента.
-    var O = Object(this);
-
-    // 2. Положим lenValue равным результату вызова внутреннего метода Get
-    //    объекта O с аргументом "length".
-    // 3. Положим len равным ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. Если вызов IsCallable(callback) равен false, выкидываем исключение TypeError.
-    // Смотрите (en): http://es5.github.com/#x9.11
-    // Смотрите (ru): http://es5.javascript.ru/x9.html#x9.11
-    if (typeof callback !== 'function') {
-      throw new TypeError(callback + ' is not a function');
-    }
-
-    // 5. Если thisArg присутствует, положим T равным thisArg; иначе положим T равным undefined.
-    if (arguments.length > 1) {
-      T = thisArg;
-    }
-
-    // 6. Положим A равным новому массиву, как если бы он был создан выражением new Array(len),
-    //    где Array является стандартным встроенным конструктором с этим именем,
-    //    а len является значением len.
-    A = new Array(len);
-
-    // 7. Положим k равным 0
-    k = 0;
-
-    // 8. Пока k < len, будем повторять
-    while (k < len) {
-
-      var kValue, mappedValue;
-
-      // a. Положим Pk равным ToString(k).
-      //   Это неявное преобразование для левостороннего операнда в операторе in
-      // b. Положим kPresent равным результату вызова внутреннего метода HasProperty
-      //    объекта O с аргументом Pk.
-      //   Этот шаг может быть объединён с шагом c
-      // c. Если kPresent равен true, то
-      if (k in O) {
-
-        // i. Положим kValue равным результату вызова внутреннего метода Get
-        //    объекта O с аргументом Pk.
-        kValue = O[k];
-
-        // ii. Положим mappedValue равным результату вызова внутреннего метода Call
-        //     функции callback со значением T в качестве значения this и списком
-        //     аргументов, содержащим kValue, k и O.
-        mappedValue = callback.call(T, kValue, k, O);
-
-        // iii. Вызовем внутренний метод DefineOwnProperty объекта A с аргументами
-        // Pk, Описатель Свойства
-        // { Value: mappedValue,
-        //   Writable: true,
-        //   Enumerable: true,
-        //   Configurable: true }
-        // и false.
-
-        // В браузерах, поддерживающих Object.defineProperty, используем следующий код:
-        // Object.defineProperty(A, k, {
-        //   value: mappedValue,
-        //   writable: true,
-        //   enumerable: true,
-        //   configurable: true
-        // });
-
-        // Для лучшей поддержки браузерами, используем следующий код:
-        A[k] = mappedValue;
-      }
-      // d. Увеличим k на 1.
-      k++;
-    }
-
-    // 9. Вернём A.
-    return A;
-  };
-}
-

-
 
Спецификации

 
 {{Specifications}}
@@ -258,6 +157,7 @@ if (!Array.prototype.map) {
 
Смотрите также