Цикл for in в javascript имеет синтаксис. Циклы в JavaScript
Очень часто нужно, чтобы определённая часть программы выполнялась много раз. Разумеется, можно просто сделать так: скопировать-вставить и так нужное число раз. Однако, это абсурдно, особенно, если действие надо выполнять, например, 1000 раз. Поэтому существуют так называемые циклы , которую присутствуют в большинстве языков программирования. И о них я Вам и расскажу.
Содержит определённый код, который прокручивается многократно. Существует несколько видов циклов: for , while и do-while .
Начнём с самого первого цикла (и самого популярного) - цикла for . Общий вид этого цикла таков:
For (переменная_итерации = начальное_значение; условие; действие_после_каждой_итерации) {
//код программы
}
Давайте прокомментирую то, что здесь написано. Вначале идёт - переменная итерации . Это обычное имя переменной для итерации. Дальше идёт начальное_значение . Собственно, название говорит само за себя. Дальше идёт условие, при выполнении которого (то есть возвращается true ) цикл запускается ещё один раз, и, наконец, действие, которое выполняется после каждой итерации. Как правило, это изменение переменной для итерации.
Давайте с Вами напишем простой скрипт, который будет выводить количество итераций цикла:
For (i = 0; i < 100; i++)
document.write(i + " ");
Здесь мы задали переменную для итерации (называется i ), которой присвоили значение 0 . Дальше проверяется условие: i < 100 . Если оно выполняется, то выполняется одна итерация цикла. После выполнения каждой итерации происходит i++ (то есть увеличение переменной i на 1 ). Снова проверяется условие, и если оно истинно, то выполняется ещё одна итерация. И так до тех пор, пока условие i < 100 не станет ложным. Очевидно, что оно будет ложно лишь через 100 итераций. Таким образом, данный цикл будет выполняться 100 раз, что мы можем увидеть, если запустим этот скрипт. И ещё кое-что. Так как у нас здесь выполняется всего один оператор (document.write() ), то наличие фигурных скобок необязательно. Если у Вас 2 и более операторов крутятся в цикле, то тогда необходимо их поставить.
Теперь поговорим о второй разновидности циклов в JavaScript - while . В принципе, цикл очень похож на for (хотя все циклы похожи). Но здесь общий вид другой:
While (условие) {
//код программы
}
Как видите, здесь нет ни переменной для итерации, ни каких-либо действий после итерации. Отсюда следует вывод: чтобы выйти из цикла необходимо в самом цикле сделать так, чтобы "условие " стало ложным. Если это не сделать, то произойдёт зацикливание, а, следовательно, Ваш скрипт повиснет.
Давайте реализуем такую же задачу, как и раньше, но используя цикл while .
Var i = 0;
while (i < 100) {
i++;
document.write(i + " ");
}
Перед началом цикла мы создали переменную i , которой присвоили начальное значение. Затем перед запуском цикла проверяется условие, и если оно истинно, то запускается итерация цикла, в которой мы увеличиваем переменную для итерации (иначе произойдёт зацикливание). И выводим эту переменную.
И, наконец, последний вид циклов в JavaScript - цикл do-while . Синтаксис такой:
Do {
//код программы
} while (условие)
Очень похож на цикл while , однако, здесь есть всего одно, но очень принципиальное отличие. Если цикл while сначала проверяет условие, а потом уже выполняет или нет итерацию. То цикл do-while сначала именно выполняет итерацию, и только потом проверяет условие. И если оно ложно, то выходит из цикла. Другими словами, независимо от условия данный цикл гарантированно выполнится хотя бы 1 раз. Думаю, что данный код будет излишним, но всё же.
Var i = 0;
do {
i++;
document.write(i + " ");
} while (i < 100)
Пояснять код не буду, уверен, Вы из без меня с ним разберётесь. Поэтому я лучше перейду к двум интересным операторам: break и continue .
Начнём с break . Данный оператор позволяет досрочно выскочить из цикла. Давайте с Вами напишем такой код:
For (i = 0; i < 100; i++) {
if (i == 50) break;
document.write(i + " ");
}
Вы можете запустить этот скрипт и обнаружите, что вывелись только числа до 49 , так как при i = 50 цикл прервался, благодаря оператору break .
Теперь рассказываю об операторе continue . Данный оператор позволяет перейти к следующей итерации цикла. Чтобы не расписывать здесь много, лучше сразу покажу пример:
For (i = 0; i < 100; i++) {
if (i == 50) continue;
document.write(i + " ");
}
Если Вы запустите этот скрипт, то увидите, что не хватает числа 50 . Это произошло потому, что при i = 50 , мы переходим к следующей итерации цикла, перед которой i увеличивается на 1 и становится равным 51-му .
Вот, вроде бы, и всё, что хотелось написать о циклах JavaScript . Надеюсь, Вам всё стало ясно. Можете также придумать себе какую-нибудь задачу и решить её. Это будет великолепной тренировкой.
Циклы используются для того, чтобы некоторый участок кода выполнился несколько раз подряд.
Зачем это нужно - представьте, что вам нужно возвести в квадрат 100 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 100 строчек кода, и для того, чтобы написать этого код, нужно будет потратить довольно много времени.
Но это не нужно - у нас есть возможность сделать так, чтобы JavaScript за нас выполнил некоторую операцию нужное количество раз . Например, возвел все элементы массива в квадрат.
Делается это с помощью циклов .
Цикл whileЦикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис:
While (пока выражение истинно) { выполняем этот код циклически; в начале каждого цикла проверяем выражение в круглых скобках } /* Цикл закончится, когда выражение перестанет быть истинным. Если оно было ложным изначально - то он не выполнится ни разу! */
В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным . Например, так:
Давайте последовательно выведем с помощью цикла while числа от одного до пяти:
Var i = 0; //счетчик цикла while (i < 5) { /* С помощью оператора ++ увеличиваем i на единицу при каждом проходе цикла. */ i++; alert(i); }
Обратите внимание на переменную i – она является так называемым счетчиком цикла . Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5.
Для счетчиков принято использовать буквы i , j и k .
Цикл forЦикл for является альтернативой while . Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек.
For (начальные команды; условие окончания цикла; команды после прохода цикла) { тело цикла }
Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0 .
Условие окончания цикла - пока оно истинное , цикл будет работать, пример: i .
Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i++ .
Давайте с помощью цикла for выведем последовательно числа от 0 до 9:
/* В начале цикла i будет равно нулю, цикл будет выполнятся пока i < 10, после каждого прохода к i прибавляется единица: */ for (var i = 0; i < 10; i++) { alert(i); //выведет 0, 1, 2... 9 }
Цикл без телаФигурные скобки в циклах можно не указывать - в этом случае цикл выполнит только одну строку под ним (не рекомендую так делать, часто приводит к ошибкам):
For (var i = 0; i < 10; i++) // 10; i++) {
document.write("Это предложение будет выводиться бесконечно...
");
}
Цикл внутри другого цикла называется вложенным . При каждой итерации цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью цикла for и цикла while .
For (var count = 1; count < 3; count++) {
document.write(count + ". Строка цикла
");
for (var nestcount = 1; nestcount< 3; nestcount++) {
document.write("Строка вложенного цикла
");
}
}
Рис. 7. Результат выполнения вложенного цикла for
Циклом можно управлять с помощью операторов break; и continue; .
7.1. Оператор break;Оператор break; завершает выполнение текущего цикла. Он используется в исключительных случаях, когда цикл не может выполняться по какой-то причине, например, если приложение обнаруживает ошибку. Чаще всего оператор break; является частью конструкции if .
Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.
For (var i = 1; i < 100; i++) {
if (i == 15) {
break;
}
document.write(i);
document.write("
");
}
Рис. 8. Результат работы оператора break в цикле for
Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.
Outerloop:
for(var i = 0; i < 10; i++) {
innerloop:
for(var j = 0; j < 10; j++) {
if (j > 3) break; // Выход из самого внутреннего цикла
if (i == 2) break innerloop; // То же самое
if (i == 4) break outerloop; // Выход из внешнего цикла
document.write("i = " + i + " j = " + j + "
");
}
}
document.write("FINAL i = " + i + " j = " + j + "
");
Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.
В этом примере на экран будут выведены все чётные числа:
Var i;
for(i = 1; i String
function oodlify(s) {
return s.replace(//g, "oodle");
}
const input = [
"John",
"Paul",
"George",
"Ringo",
];
Итак, имеется массив, каждый элемент которого мы собираемся обработать с помощью функции oodlify . Если использовать для решения этой задачи цикл while , получится следующее:
Let i = 0;
const len = input.length;
let output = ;
while (i < len) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
i = i + 1;
}
Обратите внимание на то, что мы, для того, чтобы отслеживать текущий обрабатываемый элемент массива, используем счётчик i . Необходимо инициализировать его нулём и увеличивать на единицу в каждой итерации цикла. Кроме того, нужно сравнивать его с длиной массива, с len , для того, чтобы знать, когда надо прекратить работу.
Этот шаблон настолько распространён, что в JavaScript имеется более простой способ организовать подобную конструкцию – цикл for . Такой цикл позволит решить ту же задачу следующим образом:
Const len = input.length;
let output = ;
for (let i = 0; i < len; i = i + 1) {
let item = input[i];
let newItem = oodlify(item);
output.push(newItem);
}
Цикл for – полезная конструкция, так как благодаря ей все стандартные вспомогательные операции со счётчиком выносятся в верхнюю часть блока. Используя while , легко забыть о необходимости инкрементировать счётчик i , что приведёт к запуску бесконечного цикла. Определённо, цикл for гораздо удобнее цикла while . Но давайте притормозим и взглянем на то, чего пытается достичь наш код. Мы хотим обработать, с помощью функции oodlify() , каждый элемент массива и поместить то, что получилось, в новый массив. Сам по себе счётчик, используемый для доступа к элементам массива, нас не интересует.
Подобный шаблон работы с массивами, предусматривающий выполнение неких действий с каждым элементом, весьма распространён. В результате, в ES2015 появилась новая конструкция цикла, которая позволяет забыть о счётчике. Это – цикл for…of . В каждой итерации такого цикла предоставляется следующий элемент массива. Выглядит это так:
Let output = ;
for (let item of input) {
let newItem = oodlify(item);
output.push(newItem);
}
Код выглядит гораздо чище. Обратите внимание на то, что тут нет ни счётчика, ни операции сравнения. При таком подходе даже не нужно обращаться к конкретному элементу массива по индексу. Цикл for…of берёт на себя все вспомогательные операции.
Если завершить на этом исследование способов работы с массивами и применять циклы for…of везде вместо циклов for , это уже будет неплохим шагом вперёд за счёт упрощения кода. Но… мы можем пойти дальше.
Трансформация массивов Цикл for…of выглядит гораздо чище, чем цикл for , но и с ним в коде имеется немало вспомогательных элементов. Так, надо инициализировать массив output и в каждой итерации цикла вызывать метод push() . Код можно сделать ещё более компактным и выразительным, но прежде чем этим заняться, давайте немного расширим демонстрационную задачу. Как быть, если с помощью функции oodlify() надо обработать два массива?Const fellowship = [
"frodo",
"sam",
"gandalf",
"aragorn",
"boromir",
"legolas",
"gimli",
];
const band = [
"John",
"Paul",
"George",
"Ringo",
];
Вполне очевидное решение – использовать два цикла и обработать массивы в них:
Let bandoodle = ;
for (let item of band) {
let newItem = oodlify(item);
bandoodle.push(newItem);
}
let floodleship = ;
for (let item of fellowship) {
let newItem = oodlify(item);
floodleship.push(newItem);
}
Вполне рабочий вариант. А код, который работает – это гораздо лучше, чем код, который не решает поставленную перед ним задачу. Но два очень похожих фрагмента кода не особенно хорошо согласуются с принципом разработки ПО DRY . Код можно подвергнуть рефакторингу для того, чтобы снизить число повторений.
Следуя этой идее, создаём такую функцию:
Function oodlifyArray(input) {
let output = ;
for (let item of input) {
let newItem = oodlify(item);
output.push(newItem);
}
return output;
}
let bandoodle = oodlifyArray(band);
let floodleship = oodlifyArray(fellowship);
Выглядит это гораздо лучше, но что, если имеется ещё одна функция, с помощью которой мы тоже хотим обрабатывать элементы массивов?
Function izzlify(s) {
return s.replace(/+/g, "izzle");
}
Теперь функция oodlifyArray() не поможет. Однако, если создать ещё одну подобную функцию, на этот раз – izzlufyArray() , мы опять повторимся. Всё же, создадим такую функцию и сравним её с oodlifyArray() :
Function oodlifyArray(input) {
let output = ;
for (let item of input) {
let newItem = oodlify(item);
output.push(newItem);
}
return output;
}
function izzlifyArray(input) {
let output = ;
for (let item of input) {
let newItem = izzlify(item);
output.push(newItem);
}
return output;
}
Эти две функции невероятно похожи. Может быть, обобщим шаблон, которому они следуют? Наша цель заключается следующем: «Имеются массив и функция. Нужно получить новый массив, в который будут записаны результаты обработки каждого из элементов исходного массива с помощью функции». Подобный способ обработки массивов называют «отображением» или «трансформацией» (mapping в англоязычной терминологии). Функции, которые выполняют подобные операции, обычно называют «map». Вот как выглядит наш вариант такой функции:
Function map(f, a) {
let output = ;
for (let item of a) {
output.push(f(item));
}
return output;
}
Хотя цикл теперь и вынесен в отдельную функцию, совсем избавиться от него не получилось. Если пойти до конца и попытаться обойтись совсем без циклических конструкций, можно написать рекурсивный вариант того же самого:
Function map(f, a) {
if (a.length === 0) { return ; }
return .concat(map(f, a.slice(1)));
}
Рекурсивное решение выглядит весьма элегантно. Всего пара строчек кода и минимум отступов. Но рекурсивные реализации алгоритмов обычно используют с большой осторожностью, кроме того, они отличаются плохой производительностью в старых браузерах. И, на самом деле, нам совершено не нужно самим писать функцию реализации операции отображения, если только на то нет веской причины. То, что делает наша функция map – задача настолько распространённая, что в JavaScript имеется встроенный метод map() . Если воспользоваться этим методом, код окажется вот таким:
Let bandoodle = band.map(oodlify);
let floodleship = fellowship.map(oodlify);
let bandizzle = band.map(izzlify);
let fellowshizzle = fellowship.map(izzlify);
Обратите внимание на то, что здесь вообще нет ни отступов, ни циклов. Конечно, при обработке данных, где-то в недрах JavaScript, могут использоваться циклы, но это уже – не наша забота. Теперь код получился и сжатым, и выразительным. Кроме того, он проще.
Почему этот код проще? Может показаться, что вопрос это глупый, но подумайте об этом. Он проще потому что он короче? Нет. Компактность кода – это не признак простоты. Он проще потому что при таком подходе мы разбили задачу на части. А именно, есть две функции, которые работают со строками: oodlify и izzlify . Эти функции не должны ничего знать о массивах или о циклах. Имеется ещё одна функция – map , которая работает с массивами. При этом ей совершенно безразлично, какого типа данные в массиве, или то, что именно мы хотим с этими данными делать. Она просто исполняет любую переданную ей функцию, передавая ей элементы массива. Вместо того, чтобы всё смешивать, мы разделили обработку строк и обработку массивов. Именно поэтому итоговый код оказался проще.
Свёртка массивов Итак, функция map весьма полезна, но она не перекрывает все варианты обработки массивов, в которых используются циклы. Она хороша в случаях, когда на основе некоего массива нужно создать новый, имеющий ту же длину. Но что, если нам нужно, например, сложить все элементы числового массива? Или, если надо найти самую короткую строку в списке? Иногда требуется обработать массив и, фактически, сформировать на его основе одно значение.Рассмотрим пример. Предположим, имеется список объектов, каждый из которых представляет супергероя:
Const heroes = [
{name: "Hulk", strength: 90000},
{name: "Spider-Man", strength: 25000},
{name: "Hawk Eye", strength: 136},
{name: "Thor", strength: 100000},
{name: "Black Widow", strength: 136},
{name: "Vision", strength: 5000},
{name: "Scarlet Witch", strength: 60},
{name: "Mystique", strength: 120},
{name: "Namora", strength: 75000},
];
Надо найти самого сильного героя. Для того, чтобы это сделать, можно воспользоваться циклом for…of:
Let strongest = {strength: 0};
for (let hero of heroes) {
if (hero.strength > strongest.strength) {
strongest = hero;
}
}
Учитывая все обстоятельства, этот код не так уж и плох. Мы обходим в цикле массив, храня объект самого сильного из просмотренных героев в переменной strongest . Для того, чтобы яснее увидеть шаблон работы с массивом, представим, что ещё надо выяснить общую силу всех героев.
Let combinedStrength = 0;
for (let hero of heroes) {
combinedStrength += hero.strength;
}
В каждом из этих двух примеров имеется рабочая переменная, которую инициализируют перед запуском цикла. Затем, в каждой итерации, обрабатывают один элемент массива и обновляют переменную. Для того, чтобы выделить схему работы ещё лучше, вынесем операции, выполняемые внутри циклов, в функции, и переименуем переменные для того, чтобы подчеркнуть схожесть производимых действий.
Function greaterStrength(champion, contender) {
return (contender.strength > champion.strength) ? contender: champion;
}
function addStrength(tally, hero) {
return tally + hero.strength;
}
const initialStrongest = {strength: 0};
let working = initialStrongest;
for (hero of heroes) {
working = greaterStrength(working, hero);
}
const strongest = working;
const initialCombinedStrength = 0;
working = initialCombinedStrength;
for (hero of heroes) {
working = addStrength(working, hero);
}
const combinedStrength = working;
Если всё переписано так, как показано выше, два цикла оказываются очень похожими. Единственное, что их отличает – это вызываемые в них функции и начальные значения переменных. В обоих циклах массив сворачивается до одного значения. В англоязычной терминологии такая операция называется «reducing». Поэтому создадим функцию reduce , реализующую обнаруженный шаблон.
Function reduce(f, initialVal, a) {
let working = initialVal;
for (let item of a) {
working = f(working, item);
}
return working;
}
Надо отметить, что, как и в случае с шаблоном функции map , шаблон функции reduce распространён так широко, что JavaScript предоставляет его в качестве встроенного метода массивов. Поэтому свой метод, если на это нет особой причины, писать не нужно. С использованием стандартного метода код будет выглядеть так:
Const strongestHero = heroes.reduce(greaterStrength, {strength: 0});
const combinedStrength = heroes.reduce(addStrength, 0);
Если присмотреться к итоговому результату, можно обнаружить, что получившийся код ненамного короче того, что был раньше, экономия совсем невелика. Если бы мы использовали функцию reduce , написанную самостоятельно, то, в целом, код получился бы больше. Однако, наша цель заключается не в том, чтобы писать короткий код, а в том, чтобы уменьшать его сложность. Итак, уменьшили ли мы сложность программы? Могу утверждать, что уменьшили. Мы отделили код циклов от кода, который обрабатывает элементы массива. В результате отдельные участки программы стали более независимыми. Код получился проще.
На первый взгляд функция reduce может показаться довольно примитивной. В большинстве примеров использования этой функции демонстрируются простые вещи, вроде сложения всех элементов числовых массивов. Однако, нигде не сказано, что значение, которое возвращает reduce , должно быть примитивным типом. Это может быть объект или даже другой массив. Когда я впервые это понял, это меня поразило. Можно, например, написать реализацию операции отображения или фильтрации массива с использованием reduce . Предлагаю вам самим это попробовать.
Фильтрация массивов Итак, имеется функция map для выполнения операций над каждым элементом массива. Есть функция reduce , которая позволяет сжать массив до единственного значения. Но что, если нужно извлечь из массива лишь некоторые его элементы? Для того, чтобы эту идею исследовать, расширим список супергероев, добавим туда некоторые дополнительные данные:Const heroes = [
{name: "Hulk", strength: 90000, sex: "m"},
{name: "Spider-Man", strength: 25000, sex: "m"},
{name: "Hawk Eye", strength: 136, sex: "m"},
{name: "Thor", strength: 100000, sex: "m"},
{name: "Black Widow", strength: 136, sex: "f"},
{name: "Vision", strength: 5000, sex: "m"},
{name: "Scarlet Witch", strength: 60, sex: "f"},
{name: "Mystique", strength: 120, sex: "f"},
{name: "Namora", strength: 75000, sex: "f"},
];
Теперь предположим, что имеется две задачи:
Let femaleHeroes = ;
for (let hero of heroes) {
if (hero.sex === "f") {
femaleHeroes.push(hero);
}
}
let superhumans = ;
for (let hero of heroes) {
if (hero.strength >= 500) {
superhumans.push(hero);
}
}
В общем-то, выглядит это вполне пристойно. Но тут невооруженным глазом виден повторяющийся шаблон. На самом деле, циклы совершенно одинаковые, различаются они только блоками if . Что если вынести эти блоки в функции?
Function isFemaleHero(hero) {
return (hero.sex === "f");
}
function isSuperhuman(hero) {
return (hero.strength >= 500);
}
let femaleHeroes = ;
for (let hero of heroes) {
if (isFemaleHero(hero)) {
femaleHeroes.push(hero);
}
}
let superhumans = ;
for (let hero of heroes) {
if (isSuperhuman(hero)) {
superhumans.push(hero);
}
}
Функции, которые возвращают только true или false иногда называют предикатами. Мы используем предикат для принятия решения о том, надо ли сохранить в новом массиве очередное значение из массива heroes .
То, как мы переписали код, сделало его длиннее. Но, после выделения функций-предикатов, стало лучше видно повторяющиеся участки программы. Создадим функцию, которая позволит от этих повторений избавиться:
Function filter(predicate, arr) {
let working = ;
for (let item of arr) {
if (predicate(item)) {
working = working.concat(item);
}
}
return working;
}
const femaleHeroes = filter(isFemaleHero, heroes);
const superhumans = filter(isSuperhuman, heroes);
Здесь, как и в случае со встроенными функциями map и reduce , в JavaScript имеется то же самое, что мы тут написали, в виде стандартного метода filter объекта Array . Поэтому писать собственную функцию, без явной необходимости, не нужно. С использованием стандартных средств код будет выглядеть так:
Const femaleHeroes = heroes.filter(isFemaleHero);
const superhumans = heroes.filter(isSuperhuman);
Почему такой подход гораздо лучше, чем использование цикла for…of ? Подумайте о том, как этим можно воспользоваться на практике. У нас имеется задача вида: «Найти всех героев, которые…». Как только выяснилось, что можно решить задачу с использованием стандартной функции filter , работа упрощается. Всё, что нужно – сообщить этой функции, какие именно элементы нас интересуют. Делается это через написание одной компактной функции. Не нужно заботиться ни об обработке массивов, ни о дополнительных переменных. Вместо этого мы пишем крошечную функцию-предикат и задача решена.
И, как и в случае с другими функциями, которые работают с массивами, использование filter позволяет выразить больше информации в меньшем объёме кода. Не нужно читать весь стандартный код цикла для того, чтобы разобраться в том, что именно мы фильтруем. Вместо этого всё, что нужно понять, описано прямо при вызове метода.
Поиск в массивах Фильтрация – весьма полезная операция. Но что, если надо найти лишь одного супергероя из списка? Скажем, нас интересует Black Widow. Функцию filter вполне можно использовать для решения этой задачи:Function isBlackWidow(hero) {
return (hero.name === "Black Widow");
}
const blackWidow = heroes.filter(isBlackWidow);
Главная проблема тут заключается в том, что подобное решение не отличается эффективностью. Метод filter просматривает каждый элемент массива. Однако, известно, что в массиве лишь одного героя зовут Black Widow, а это значит, что можно остановиться после того, как этот герой найден. В то же время, функциями-предикатами удобно пользоваться. Поэтому напишем функцию find , которая найдёт и вернёт первый подходящий элемент:
Function find(predicate, arr) {
for (let item of arr) {
if (predicate(item)) {
return item;
}
}
}
const blackWidow = find(isBlackWidow, heroes);
Тут, опять же, надо сказать, что в JavaScript есть встроенная функция, которая делает в точности то, что нужно:
Const blackWidow = heroes.find(isBlackWidow);
В итоге, как и прежде, удалось выразить нашу идею более сжато. С использованием встроенной функции find , задача поиска определённого элемента сводится к одному вопросу: «По какому признаку можно определить, что искомый элемент обнаружен?» При этом не надо беспокоиться о деталях.
Function processStrength({strongestHero, combinedStrength}, hero) {
return {
strongestHero: greaterStrength(strongestHero, hero),
combinedStrength: addStrength(combinedStrength, hero),
};
}
const {strongestHero, combinedStrength} = heroes.reduce(processStrength, {strongestHero: {strength: 0}, combinedStrength: 0});
Не могу не заметить, что эта версия будет немного сложнее, чем та, в которой по массиву проходились дважды, но, если массив огромен, сокращение числа проходов по нему может оказаться весьма кстати. В любом случае, порядок сложности алгоритма остаётся O(n).
На самом деле, если обо всём этом задуматься, можно прийти к выводу, который, в первый момент, кажется удивительным. Оказывается, если использовать лишь четыре вышеописанных шаблона обработки массивов, можно убрать из JS-кода практически все циклы. Ведь что делается в практически каждом цикле, написанном на JavaScript? В нём либо обрабатывается, либо конструируется некий массив, либо делается и то и другое. Кроме того, в JS есть и другие стандартные функции для работы с массивами, вы вполне можете изучить их самостоятельно. Избавление от циклов практически всегда позволяет уменьшить сложность программ и писать код, который легче читать и поддерживать.
Уважаемые JavaScript-разработчики, а у вас на примете есть стандартные функции, которые позволяют улучшить код, избавившись от каких-нибудь распространённых «самописных» конструкций?
Теги: Добавить метки
