В нашей повседневной разработке эксплуатационные и преобразование массивов являются очень распространенной операцией. Давайте посмотрим на пример:
Кода -копия выглядит следующим образом:
var incoolors = [],
srccolors = [
{r: 255, g: 255, b: 255}, // белый
{r: 128, g: 128, b: 128}, // серый
{r: 0, g: 0, b: 0} // черный
];
for (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
format = function (color) {
вернуть Math.Round (цвет / 2);
};
Decolorors.push ({
R: формат (Color.r),
G: Format (color.g),
B: Формат (Color.B)
});
}
// выходы:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
Console.log (Docolors);
Из приведенного выше примера мы видим, что все операции имеют относительно высокий уровень повторения. Как его оптимизировать? К счастью, Ecmascript 5 предоставляет нам метод карты, который мы можем использовать для оптимизации приведенного выше примера:
Кода -копия выглядит следующим образом:
var srccolors = [
{r: 255, g: 255, b: 255}, // белый
{r: 128, g: 128, b: 128}, // серый
{r: 0, g: 0, b: 0} // черный
],
Discolors = srccolors.map (function (val) {
var format = function (color) {
вернуть Math.Round (цвет/2);
};
возвращаться {
R: формат (val.r),
G: Format (val.g),
b: формат (val.b)
}
});
// выходы:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
Console.log (Docolors);
Из приведенного выше примера мы видим, что мы использовали карту для замены петли для цикла, так что нам нужно только заботиться о логике реализации каждого элемента. Для получения подробной информации о методе карты, пожалуйста, нажмите здесь.
1. Карта Основное определение:
array.map (обратный вызов [, thisarg]);
Метод карты вызывает функцию обратного вызова один раз, чтобы каждый элемент в исходном массиве. Обратный вызов возвращаемые значения после каждого выполнения объединяются, чтобы сформировать новый массив. Функция обратного вызовов будет вызвана только по индексам со значением; Индексы, которые никогда не были назначены значениями или удалены с помощью удаления, не будут вызваны.
Функция обратного вызова будет автоматически передана в трех параметрах: элемент массива, индекс элементов и сам исходный массив.
Если параметр этого AARG имеет значение, это будет указывать на этот объект на параметре ThisARG каждый раз, когда вызывается функция обратного вызова. Если параметр ThisARG опущен, или значение присваивается нулевым или неопределенным, это указывает на глобальный объект.
Карта не изменяет сам массив, который его вызывает (конечно, она может изменить исходный массив при выполнении обратного вызова).
Когда массив запускает метод карты, длина массива определяется до того, как будет вызван первый метод обратного вызова. В течение всей работы метода карты, независимо от того, добавляют ли операции в функции обратного вызова или удаляют элементы в исходный массив. Метод карты не будет знать. Если элемент массива увеличивается, вновь добавленный элемент не будет пересечен картой. Если элемент массива уменьшается, метод карты также будет думать, что длина исходного массива не изменилась, что привело к доступу массива к исходу. Если элементы в массиве изменяются или удаляются, значение, которое они передают в обратный вызов, является значением метода карты, проходящего в их момент.
2. Пример Map:
Кода -копия выглядит следующим образом:
// Пример 1: Метод карты вызова на строке
var result = array.prototype.map.call ("hello world", function (x, index, arr) {
// String {0: «H», 1: «E», 2: «L», 3: «L», 4: «O», 5: «», 6: «W», 7: «O», 8: «R», 9: «L», 10: «D», длина: 11}
console.log (arr);
вернуть X.CHARCODEAT (0);
});
// Выходы: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (результат);
Приведенный выше пример демонстрирует использование метода карты на строке для получения массива кодов ASCII, соответствующих каждому символу в строке. Пожалуйста, обратите внимание на результаты печати Console.log (ARR).
Кода -копия выглядит следующим образом:
// Пример 2: Каков результат следующей операции?
var result = ["1", "2", "3"]. Map (parseint);
// Выходы: [1, NAN, NAN]
console.log (результат);
Может быть, у вас будет вопрос, почему бы и нет [1,2,3]? Мы знаем, что метод Parseint может получить два параметра. Первый параметр - это значение, которое необходимо преобразовать, а второй параметр - это количество двоичного. Если вы не понимаете, вы можете нажать здесь. Когда мы используем метод карты, функция обратного вызова получает три параметра, в то время как Parseint может получать только два параметра максимум, так что третий параметр непосредственно отбрасывается. В то же время, Parseint использует проходящее значение индекса в качестве двоичного числа, что возвращает NAN. Посмотрите на следующие результаты выходных данных:
Кода -копия выглядит следующим образом:
// Выпуск: 1
console.log (parseint ("1", 0));
// Выпуск: 1
console.log (parseint ("1", не определен));
// Выпуск: НАН
console.log (parseint ("2", 1));
// Выпуск: НАН
console.log (parseint ("3", 2));
Последние два легко понять, но почему первые два возвращаются 1? Чтобы объяснить эту проблему, давайте посмотрим на официальное описание:
Если Radix не определен или 0 (или отсутствует), JavaScript предполагает следующее:
а) Если входная строка начинается с «0x» или «0x», Radix составляет 16 (шестнадцатеричный), а остальная часть строки анализируется.
б) Если входная строка начинается с «0 ″, Radix составляет восемь (октальные) или 10 (десятичные). То, что именно выбран Radix зависит от реализации. Спецификации Ecmascript 5, которые используются 10 (десятичные), но не все браузеры еще не поддерживают это. По этой причине всегда указывают Radix при использовании Parseint.
c) Если входная строка начинается с какого -либо другого значения, Radix составляет 10 (десятичная).
В третьей точке, когда строка является еще одним значением, по умолчанию составляет 10.
Итак, как мы можем изменить его, чтобы сделать вывод, который обычно выводит вывод? См. Следующий пример:
Кода -копия выглядит следующим образом:
var result = ["1", "2", "3"]. Map (function (val) {
вернуть Parseint (val, 10);
});
// Выходы: [1, 2, 3]
console.log (результат);
3. Совместимость с методом карты:
Метод карты не поддерживается в браузерах IE8 и ниже. Если вы хотите быть совместимым с более старыми версиями браузеров, вы можете:
A) Не используйте map .B) Используйте что-то вроде ES5-SHIM, чтобы сделать старую map поддержки IE .C) Используйте метод _.map в подчеркивании или Lodash для эквивалентной функции полезности.
Вышеприведенное понимание метода карты. Я надеюсь, что для начинающих будет полезно. Если в статье есть какие -либо неподходящие моменты, я надеюсь, что вы сможете исправить это!