renovations
This commit is contained in:
Ilya Kantor
parent
c7d4c7e3ff
commit
e1948130f6
170 changed files with 1496 additions and 1161 deletions
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
Метод ["arr.forEach(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) используется для перебора массива.
|
||||
|
||||
Он позволяет перебрать массив при помощи функции `callback`, что зачастую гораздо элегантнее, нежели цикл `for`.
|
||||
Он позволяет для каждого элемента массива вызывает функцию `callback`.
|
||||
|
||||
Функция `callback` вызывается для каждого элемента с тремя параметрами `callback(item, i, arr)`:
|
||||
Этой функции он передаёт три параметра `callback(item, i, arr)`:
|
||||
|
||||
<ul>
|
||||
<li>`item` -- очередной элемент массива.</li>
|
||||
|
|
@ -24,16 +24,14 @@
|
|||
//+ run
|
||||
var arr = ["Яблоко", "Апельсин", "Груша"];
|
||||
|
||||
function show(item, i, arr) {
|
||||
arr.forEach(function(item, i, arr) {
|
||||
alert(i + ": " + item + " (массив:" + arr + ")");
|
||||
}
|
||||
|
||||
arr.forEach(show);
|
||||
});
|
||||
```
|
||||
|
||||
Второй, необязательный аргумент `forEach` позволяет указать контекст `this` для `callback`. Мы обсудим его в деталях чуть позже, сейчас он нам не важен.
|
||||
|
||||
Метод `forEach` ничего не возвращает, его используют только для перебора.
|
||||
Метод `forEach` ничего не возвращает, его используют только для перебора, как более "элегантный" вариант, чем обычный цикл `for`.
|
||||
|
||||
## filter
|
||||
|
||||
|
|
@ -47,12 +45,10 @@ arr.forEach(show);
|
|||
//+ run
|
||||
var arr = [1, -1, 2, -2, 3];
|
||||
|
||||
function isPositive(number) {
|
||||
return number > 0;
|
||||
}
|
||||
|
||||
*!*
|
||||
var positiveArr = arr.filter(isPositive);
|
||||
var positiveArr = arr.filter(function(number) {
|
||||
return number > 0;
|
||||
});
|
||||
*/!*
|
||||
|
||||
alert(positiveArr); // 1,2,3
|
||||
|
|
@ -68,27 +64,26 @@ alert(positiveArr); // 1,2,3
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var arr = [1, 2, 3, 4];
|
||||
|
||||
function square(number) {
|
||||
return number * number;
|
||||
}
|
||||
var pages = ['a.html', 'b.html', 'c.html'];
|
||||
|
||||
*!*
|
||||
var squaredArr = arr.map(square);
|
||||
var urls = pages.map(function(page) {
|
||||
return 'http://site.com/' + page;
|
||||
});
|
||||
*/!*
|
||||
|
||||
alert(squaredArr); // получили массив квадратов чисел: 1, 4, 9, 16
|
||||
// к каждой строке был прибавлен префикс
|
||||
alert(urls); // http://site.com/a.html, http://site.com/b.html...
|
||||
```
|
||||
|
||||
## every/some
|
||||
|
||||
Эти методы используется для проверки массива.
|
||||
|
||||
Метод ["arr.every(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every) возвращает `true`, если вызов `callback` вернёт `true` для *каждого* элемента `arr`.
|
||||
|
||||
|
||||
Метод ["arr.some(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some) возвращает `true`, если вызов `callback` вернёт `true` для *какого-нибудь* элемента `arr`.
|
||||
<ul>
|
||||
<li>Метод ["arr.every(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/every) возвращает `true`, если вызов `callback` вернёт `true` для *каждого* элемента `arr`.</li>
|
||||
<li>Метод ["arr.some(callback[, thisArg])"](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some) возвращает `true`, если вызов `callback` вернёт `true` для *какого-нибудь* элемента `arr`.</li>
|
||||
</ul>
|
||||
|
||||
```js
|
||||
//+ run
|
||||
|
|
@ -117,15 +112,17 @@ alert( arr.some(isPositive) ); // true, есть хоть одно положи
|
|||
Аргументы функции `callback(previousValue, currentItem, index, arr)`:
|
||||
|
||||
<ul>
|
||||
<li>`previousValue` -- последний результат вызова функции, он же "промежуточный результат". Значение `previousValue` при первом вызове равно `initialValue` (второй аргумент `reduce`) или, если у `reduce` нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.</li>
|
||||
<li>`previousValue` -- последний результат вызова функции, он же "промежуточный результат".</li>
|
||||
<li>`currentItem` -- текущий элемент массива, элементы перебираются по очереди слева-направо. </li>
|
||||
<li>`index` -- номер текущего элемента.</li>
|
||||
<li>`arr` -- обрабатываемый массив.</li>
|
||||
</ul>
|
||||
|
||||
Разберём работу метода `reduce` на примере.
|
||||
Кроме `callback`, методу можно передать "начальное значение" -- аргумент `initialValue`. Если он есть, то на первом вызове значение `previousValue` будет равно `initialValue`, а если у `reduce` нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.
|
||||
|
||||
Пусть мы хотим вычислить сумму всех элементов массива. Можно сделать это при помощи цикла, но это как раз подходящий повод познакомиться с `reduce`.
|
||||
Проще всего понять работу метода `reduce` на примере.
|
||||
|
||||
Например, в качестве "свёртки" мы хотим получить сумму всех элементов массива.
|
||||
|
||||
Вот решение в одну строку:
|
||||
|
||||
|
|
@ -133,23 +130,30 @@ alert( arr.some(isPositive) ); // true, есть хоть одно положи
|
|||
//+ run
|
||||
var arr = [1, 2, 3, 4, 5]
|
||||
|
||||
var result = arr.reduce(function(prev, current) { return prev + current }, 0);
|
||||
// для каждого элемента массива запустить функцию,
|
||||
// промежуточный результат передавать первым аргументом далее
|
||||
var result = arr.reduce(function(sum, current) { return sum + current; }, 0);
|
||||
|
||||
alert(result); // 15
|
||||
```
|
||||
|
||||
Разберём, что в нём происходит.
|
||||
|
||||
Здесь начальное значение, с которого начинаются вычисления, равно нулю (второй аргумент `reduce`).
|
||||
При первом запуске `sum` -- исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент `reduce`).
|
||||
|
||||
Сначала анонимная функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее.
|
||||
|
||||
Таблица вычислений получается такая:
|
||||
Поток вычислений получается такой
|
||||
|
||||
<img src="reduce.svg">
|
||||
|
||||
В виде таблицы где каждая строка -- вызов функции на очередном элементе массива:
|
||||
|
||||
<table class="bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>`prev`</th>
|
||||
<th>`sum`</th>
|
||||
<th>`current`</th>
|
||||
<th>результат</th>
|
||||
</tr>
|
||||
|
|
@ -188,9 +192,9 @@ alert(result); // 15
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
Функция-аргумент `reduce` могла бы также использовать параметры `i` и `array`, но здесь в них нет нужды.
|
||||
Как видно, результат предыдущего вызова передаётся в первый аргумент следующего.
|
||||
|
||||
**Можно сделать ещё короче!**
|
||||
Кстати, полный набор аргументов функции для `reduce` включает в себя `function(sum, current, i, array)`, то есть номер текущего вызова `i` и весь массив `arr`, но здесь в них нет нужды.
|
||||
|
||||
Посмотрим, что будет, если не указать `initialValue` в вызове `arr.reduce`:
|
||||
|
||||
|
|
@ -199,7 +203,7 @@ alert(result); // 15
|
|||
var arr = [1, 2, 3, 4, 5]
|
||||
|
||||
// убрали 0 в конце
|
||||
var result = arr.reduce(function(prev, current) { return prev + current });
|
||||
var result = arr.reduce(function(sum, current) { return sum + current });
|
||||
|
||||
alert(result); // 15
|
||||
```
|
||||
|
|
|
|||
64
1-js/4-data-structures/9-array-iteration/reduce.svg
Normal file
64
1-js/4-data-structures/9-array-iteration/reduce.svg
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="600px" height="105px" viewBox="0 0 600 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="reduce" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<rect id="Rectangle-1" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="65" width="80" height="40"></rect>
|
||||
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="36" y="90">1</tspan>
|
||||
</text>
|
||||
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="7" y="8">sum</tspan>
|
||||
<tspan x="7" y="24">0</tspan>
|
||||
<tspan x="7" y="40">current</tspan>
|
||||
<tspan x="7" y="56">1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-2" stroke="#979797" sketch:type="MSShapeGroup" x="79" y="65" width="80" height="40"></rect>
|
||||
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="115" y="90">2</tspan>
|
||||
</text>
|
||||
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="86" y="8">sum</tspan>
|
||||
<tspan x="86" y="24">0+1</tspan>
|
||||
<tspan x="86" y="40">current</tspan>
|
||||
<tspan x="86" y="56">2</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-3" stroke="#979797" sketch:type="MSShapeGroup" x="158" y="65" width="80" height="40"></rect>
|
||||
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="194" y="90">3</tspan>
|
||||
</text>
|
||||
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="165" y="8">sum</tspan>
|
||||
<tspan x="165" y="24">0+1+2</tspan>
|
||||
<tspan x="165" y="40">current</tspan>
|
||||
<tspan x="165" y="56">3</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-5" stroke="#979797" sketch:type="MSShapeGroup" x="237" y="65" width="80" height="40"></rect>
|
||||
<text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="273" y="90">4</tspan>
|
||||
</text>
|
||||
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="244" y="8">sum</tspan>
|
||||
<tspan x="244" y="24">0+1+2+3</tspan>
|
||||
<tspan x="244" y="40">current</tspan>
|
||||
<tspan x="244" y="56">4</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-4" stroke="#979797" sketch:type="MSShapeGroup" x="316" y="65" width="80" height="40"></rect>
|
||||
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="352" y="90">5</tspan>
|
||||
</text>
|
||||
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="323" y="8">sum</tspan>
|
||||
<tspan x="323" y="24">0+1+2+3+4</tspan>
|
||||
<tspan x="323" y="40">current</tspan>
|
||||
<tspan x="323" y="56">5</tspan>
|
||||
</text>
|
||||
<path d="M412.5,83 L462.5,83" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" fill="#979797" sketch:type="MSShapeGroup"></path>
|
||||
<path id="Line-decoration-1" d="M462.5,83 C458.72,81.95 455.48,81.05 451.7,80 C451.7,82.1 451.7,83.9 451.7,86 C455.48,84.95 458.72,84.05 462.5,83 C462.5,83 462.5,83 462.5,83 Z" stroke="#979797" stroke-width="2" stroke-linecap="square" fill="#979797"></path>
|
||||
<text id="0+1+2+3+4+5-=-15" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="477" y="87">0+1+2+3+4+5 = 15</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue