study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2026-02-27 17:44:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

语法高亮，滚动条美化，设置页面调整

Browse Source
This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/javascript/Reference/Global_Objects/Array/Reduce.html
View File

@@ -16,7 +16,7 @@
<p>您的 <strong>reducer</strong> 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。</p>
</div>
<h2 id="语法">语法</h2>
<pre><var>arr</var>.reduce(<var>callback[, </var><var>initialValue]</var>)</pre>
<pre><var>arr</var>.reduce(<var>callback[, </var><var>initialValue]</var>)</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>callback</code></dt>
@@ -56,7 +56,7 @@
</div>
<p>如果数组为空且没有提供<code>initialValue</code>，会抛出<a href="Reference/Global_Objects/TypeError" title="TypeError（类型错误） 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a> 。如果数组仅有一个元素（无论位置如何）并且没有提供<code>initialValue</code>， 或者有提供<code>initialValue</code>但是数组为空，那么此唯一值将被返回并且<code>callback</code>不会被执行。</p>
<p>提供初始值通常更安全，正如下面的例子，如果没有提供<code>initialValue</code>，则可能有三种输出：</p>
<pre class="brush: js">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
<pre><code class="language-javascript">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
// reduce() 没有初始值
@@ -67,13 +67,13 @@ var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
// map/reduce; 这是更好的方案，即使传入空数组或更大数组也可正常执行
[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
.reduce( maxCallback2, -Infinity );
</pre>
</code></pre>
<h3 id="reduce()_如何运行">reduce() 如何运行</h3>
<p>假如运行下段<code>reduce()</code>代码：</p>
<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
<pre><code class="language-js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
});
</pre>
</code></pre>
<p>callback 被调用四次，每次调用的参数和返回值如下表：</p>
<table>
<thead>
@@ -130,9 +130,9 @@ var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
<p>由<code>reduce</code>返回的值将是上次回调调用的值（10）。</p>
<p>你同样可以使用箭头函数的形式，下面的代码会输出跟前面一样的结果</p>
<p>您还可以提供<a href="Reference/Functions/Arrow_functions" title="箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。">Arrow Function</a> 来代替完整的函数。 下面的代码将产生与上面的代码中相同的输出：</p>
<pre class="brush: js">[0, 1, 2, 3, 4].reduce((prev, curr) =&gt; prev + curr );</pre>
<pre><code class="language-javascript">[0, 1, 2, 3, 4].reduce((prev, curr) =&gt; prev + curr );</code></pre>
<p>如果你打算提供一个初始值作为<code>reduce()</code>方法的第二个参数，以下是运行过程及结果：</p>
<pre>[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) =&gt; { return <code>accumulator</code> + currentValue; }, 10 );</pre>
<pre>[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) =&gt; { return <code>accumulator</code> + currentValue; }, 10 );</code></pre>
<table>
<thead>
<tr>
@@ -190,50 +190,50 @@ var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
<p>这种情况下<code>reduce()</code>返回的值是<code>20</code>。</p>
<h2 id="例子">例子</h2>
<h3 id="数组里所有值的和">数组里所有值的和</h3>
<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
<pre><code class="language-javascript">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// 和为 6</pre>
// 和为 6</code></pre>
<p>你也可以写成箭头函数的形式：</p>
<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce(
<pre><code class="language-javascript">var total = [ 0, 1, 2, 3 ].reduce(
( acc, cur ) =&gt; acc + cur,
0
);</pre>
);</code></pre>
<h3 id="累加对象数组里的值">累加对象数组里的值</h3>
<p>要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。</p>
<pre class="brush: js">var initialValue = 0;
<pre><code class="language-javascript">var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
return accumulator + currentValue.x;
},initialValue)
console.log(sum) // logs 6</pre>
console.log(sum) // logs 6</code></pre>
<p>你也可以写成箭头函数的形式：</p>
<pre class="brush: js">var initialValue = 0;
<pre><code class="language-javascript">var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
(accumulator, currentValue) =&gt; accumulator + currentValue.x
,initialValue
);
console.log(sum) // logs 6
</pre>
</code></pre>
<h3 id="将二维数组转化为一维">将二维数组转化为一维</h3>
<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
<pre><code class="language-javascript">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(a, b) {
return a.concat(b);
},
[]
);
// flattened is [0, 1, 2, 3, 4, 5]
</pre>
</code></pre>
<p>你也可以写成箭头函数的形式：</p>
<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
<pre><code class="language-javascript">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( acc, cur ) =&gt; acc.concat(cur),
[]
);
</pre>
</code></pre>
<h3 id="计算数组中每个元素出现的次数">计算数组中每个元素出现的次数</h3>
<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
<pre><code class="language-javascript">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
@@ -245,9 +245,9 @@ var countedNames = names.reduce(function (allNames, name) {
return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }</pre>
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }</code></pre>
<h3 id="按属性对object分类">按属性对object分类</h3>
<pre class="brush: js">var people = [
<pre><code class="language-javascript">var people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
@@ -273,9 +273,9 @@ var groupedPeople = groupBy(people, 'age');
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
</pre>
</code></pre>
<h3 id="使用扩展运算符和initialValue绑定包含在对象数组中的数组">使用扩展运算符和initialValue绑定包含在对象数组中的数组</h3>
<pre class="brush: js">// friends - 对象数组
<pre><code class="language-javascript">// friends - 对象数组
// where object field "books" - list of favorite books
var friends = [{
name: 'Anna',
@@ -302,19 +302,19 @@ var allbooks = friends.reduce(function(prev, curr) {
// 'Romeo and Juliet', 'The Lord of the Rings',
// 'The Shining'
// ]
</pre>
</code></pre>
<h3 id="数组去重">数组去重</h3>
<pre class="brush: js">let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
<pre><code class="language-javascript">let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=&gt;{
if(init.length===0 || init[init.length-1]!==current){
  init.push(current);
  }
return init;
}, []);
console.log(result); //[1,2,3,4,5]</pre>
console.log(result); //[1,2,3,4,5]</code></pre>
<h3 id="按顺序运行Promise">按顺序运行Promise</h3>
<p> </p>
<pre class="brush: js">/**
<pre><code class="language-javascript">/**
* Runs promises from array of functions that can return promises
* in chained manner
*
@@ -357,9 +357,9 @@ function p4(a) {
const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
.then(console.log); // 1200
</pre>
</code></pre>
<h3 id="功能型函数管道">功能型函数管道</h3>
<pre class="brush: js">// Building-blocks to use for composition
<pre><code class="language-javascript">// Building-blocks to use for composition
const double = x =&gt; x + x;
const triple = x =&gt; 3 * x;
const quadruple = x =&gt; 4 * x;
@@ -381,9 +381,9 @@ multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240
</pre>
</code></pre>
<h2 id="Polyfill">Polyfill</h2>
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
if (!Array.prototype.reduce) {
@@ -446,7 +446,7 @@ if (!Array.prototype.reduce) {
}
});
}
</pre>
</code></pre>
<p>如果您需要兼容不支持<code><a href="Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>的JavaScript引擎，那么最好不要 polyfill <code>Array.prototype</code>方法，因为你无法使其成为<strong>不可枚举</strong>的。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">