mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-15 07:06:53 +08:00
语法高亮,滚动条美化,设置页面调整
This commit is contained in:
@@ -2,28 +2,28 @@
|
||||
<div></div>
|
||||
<p><code>@@iterator</code> 属性和 <a href="Reference/Global_Objects/Array/values" title="values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值"><code>Array.prototype.values()</code></a> 属性的初始值均为同一个函数对象。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="brush: js"><var>arr</var>[Symbol.iterator]()</pre>
|
||||
<pre><code class="language-javascript"><var>arr</var>[Symbol.iterator]()</code></pre>
|
||||
<h3 id="返回值">返回值</h3>
|
||||
<p>数组的 <strong>iterator </strong>方法,默认情况下与 <a href="Reference/Global_Objects/Array/values" title="values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值"><code>values()</code></a> 返回值相同</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="使用_for...of_循环进行迭代"><font face="Open Sans, Arial, sans-serif">使用 </font><code>for...of</code> 循环进行迭代</h3>
|
||||
<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
<pre><code class="language-javascript">var arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
var eArr = arr[Symbol.iterator]();
|
||||
// 您的浏览器必须支持for...of循环
|
||||
// 以及let —— 将变量作用域限定在 for 循环中
|
||||
for (let letter of eArr) {
|
||||
console.log(letter);
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="另一种迭代方式">另一种迭代方式</h3>
|
||||
<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
<pre><code class="language-javascript">var arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
var eArr = arr[Symbol.iterator]();
|
||||
console.log(eArr.next().value); // w
|
||||
console.log(eArr.next().value); // y
|
||||
console.log(eArr.next().value); // k
|
||||
console.log(eArr.next().value); // o
|
||||
console.log(eArr.next().value); // p
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div></div>
|
||||
<p><code><strong>Array[@@species]</strong></code>访问器属性返回 <code>Array</code> 的构造函数。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">Array[Symbol.species]
|
||||
</pre>
|
||||
<pre><code class="language-javascript">Array[Symbol.species]
|
||||
</code></pre>
|
||||
<h3 id="返回值">返回值</h3>
|
||||
<p><a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 的构造函数。</p>
|
||||
<h2 id="描述">描述</h2>
|
||||
@@ -11,12 +11,12 @@
|
||||
<p>子类的构造函数会覆盖和改变构造函数的指向。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<p><code>species</code> 属性返回默认构造函数, 它用于 <code>Array</code> 对象的构造函数 <code>Array</code>:</p>
|
||||
<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
|
||||
<pre><code class="language-javascript">Array[Symbol.species]; // function Array()</code></pre>
|
||||
<p>在继承类的对象中 (例如你自定义的数组 <code>MyArray</code>), <code>MyArray</code> 的 species 属性返回的是 <code>MyArray</code> 这个构造函数. 然而你可能想要覆盖它,以便在你继承的对象 <code>MyArray</code> 中返回父类的构造函数 <code>Array</code> :</p>
|
||||
<pre class="brush: js">class MyArray extends Array {
|
||||
<pre><code class="language-javascript">class MyArray extends Array {
|
||||
// 重写 MyArray 的 species 属性到父类 Array 的构造函数
|
||||
static get [Symbol.species]() { return Array; }
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div></div>
|
||||
<p>Symbol属性 @@unscopable 包含了所有 ES2015 (ES6) 中新定义的且并未被更早的 ECMAScript 标准收纳的属性名。这些属性并不包含在 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 语句绑定的环境中</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="brush: js"><var>arr</var>[Symbol.unscopables]</pre>
|
||||
<pre><code class="language-javascript"><var>arr</var>[Symbol.unscopables]</code></pre>
|
||||
<h2 id="描述">描述</h2>
|
||||
<p><code>with</code> 绑定中未包含的数组默认属性有:copyWithin, entries, fill, find, findIndex, includes, keys 和 values。</p>
|
||||
<p>查看 <a href="Reference/Global_Objects/Symbol/unscopables" title="Symbol.unscopables 指用于指定对象值,其对象自身和继承的从关联对象的 with 环境绑定中排除的属性名称。"><code>Symbol.unscopables</code></a> 以了解如何给你定义的对象设置 unscopables。</p>
|
||||
@@ -29,7 +29,7 @@
|
||||
</table><p></p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<p>以下的代码在 ES5 或更早的版本中能正常工作。然而 ECMAScript 2015 (ES6) 或之后的版本中新添加了 <a href="Reference/Global_Objects/Array/keys" title="keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。"><code>Array.prototype.keys()</code></a> 这个方法。这意味着在 <code>with</code> 语句的作用域,"keys"只能作为方法而不能作为某个变量。这正是内置的 <code>@@unscopables</code> 即 <code>Array.prototype[@@unscopables]</code> symbol属性所要解决的问题:防止某些数组方法被添加到 with 语句的作用域内。</p>
|
||||
<pre class="brush: js">var keys = [];
|
||||
<pre><code class="language-javascript">var keys = [];
|
||||
|
||||
with(Array.prototype) {
|
||||
keys.push("something");
|
||||
@@ -37,7 +37,7 @@ with(Array.prototype) {
|
||||
|
||||
Object.keys(Array.prototype[Symbol.unscopables]);
|
||||
// ["copyWithin", "entries", "fill", "find", "findIndex",
|
||||
// "includes", "keys", "values"]</pre>
|
||||
// "includes", "keys", "values"]</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -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 ) => Math.max( acc.x, cur.x );
|
||||
<pre><code class="language-javascript">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
|
||||
var maxCallback2 = ( max, cur ) => Math.max( max, cur );
|
||||
|
||||
// reduce() 没有初始值
|
||||
@@ -67,13 +67,13 @@ var maxCallback2 = ( max, cur ) => Math.max( max, cur );
|
||||
// map/reduce; 这是更好的方案,即使传入空数组或更大数组也可正常执行
|
||||
[ { x: 22 }, { x: 42 } ].map( el => 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 ) => 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) => prev + curr );</pre>
|
||||
<pre><code class="language-javascript">[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr );</code></pre>
|
||||
<p>如果你打算提供一个初始值作为<code>reduce()</code>方法的第二个参数,以下是运行过程及结果:</p>
|
||||
<pre>[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) => { return <code>accumulator</code> + currentValue; }, 10 );</pre>
|
||||
<pre>[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) => { return <code>accumulator</code> + currentValue; }, 10 );</code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -190,50 +190,50 @@ var maxCallback2 = ( max, cur ) => 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 ) => 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) => 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 ) => 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)=>{
|
||||
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 => x + x;
|
||||
const triple = x => 3 * x;
|
||||
const quadruple = x => 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">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<p>对于从左至右遍历的相似方法请参阅 <a href="Reference/Global_Objects/Array/reduce" title="reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。"><code>Array.prototype.reduce()</code></a>.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.reduceRight(<em>callback</em>[, <em>initialValue</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.reduceRight(<em>callback</em>[, <em>initialValue</em>])</code></code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -34,17 +34,17 @@
|
||||
<h2 id="描述">描述</h2>
|
||||
<p><code>reduceRight</code> 为数组中每个元素调用一次 <code>callback</code> 回调函数,但是数组中被删除的索引或从未被赋值的索引会跳过。回调函数接受四个参数:初始值(或上次调用回调的返回值)、当前元素值、当前索引,以及调用 <code>reduce</code> 的数组。</p>
|
||||
<p>可以像下面这样调用 <code>reduceRight</code> 的回调函数 <code>callback</code>:</p>
|
||||
<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) {
|
||||
<pre><code class="language-javascript">array.reduceRight(function(previousValue, currentValue, index, array) {
|
||||
// ...
|
||||
});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>首次调用回调函数时,<code>previousValue</code> 和 <code>currentValue</code> 可以是两个值之一。如果调用 <code>reduceRight</code> 时提供了 <code>initialValue</code> 参数,则 <code>previousValue</code> 等于 <code>initialValue</code>,<code>currentValue</code> 等于数组中的最后一个值。如果没有提供 <code>initialValue</code> 参数,则 <code>previousValue</code> 等于数组最后一个值, <code>currentValue</code> 等于数组中倒数第二个值。</p>
|
||||
<p>如果数组为空,且没有提供 <code>initialValue</code> 参数,将会抛出一个 <code>TypeError 错误。如果数组只有一个元素且没有提供</code> <code>initialValue </code>参数,或者提供了 <code>initialValue</code> 参数,但是数组为空将会直接返回数组中的那一个元素或 <code>initialValue</code> 参数,而不会调用 <code>callback</code>。</p>
|
||||
<p>该函数的完整执行过程见下例:</p>
|
||||
<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
|
||||
<pre><code class="language-javascript">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
|
||||
return previousValue + currentValue;
|
||||
});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>回调将会被调用四次,每次调用的参数及返回值如下:</p>
|
||||
<table style="width: 100%;">
|
||||
<thead>
|
||||
@@ -94,10 +94,10 @@
|
||||
</table>
|
||||
<p><code>reduceRight</code> 返回值是最后一次调用回调的返回值(<code>10)。</code></p>
|
||||
<p>如果提供了一个 <code>initialValue</code> 参数,则结果如下:</p>
|
||||
<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
|
||||
<pre><code class="language-javascript">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
|
||||
return previousValue + currentValue;
|
||||
}, 10);
|
||||
</pre>
|
||||
</code></pre>
|
||||
<table style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -155,27 +155,27 @@
|
||||
<p><code>reduceRight</code> 返回值为 20。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="例子:求一个数组中所有值的和">例子:求一个数组中所有值的和</h3>
|
||||
<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) {
|
||||
<pre><code class="language-javascript">var total = [0, 1, 2, 3].reduceRight(function(a, b) {
|
||||
return a + b;
|
||||
});
|
||||
// total == 6
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="例子:扁平化(flatten)一个元素为数组的数组">例子:扁平化(flatten)一个元素为数组的数组</h3>
|
||||
<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
|
||||
<pre><code class="language-javascript">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
|
||||
return a.concat(b);
|
||||
}, []);
|
||||
// flattened is [4, 5, 2, 3, 0, 1]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="例子:reduce_与_reduceRight_之间的区别">例子:reduce 与 reduceRight 之间的区别</h3>
|
||||
<pre class="brush: js">var a = ['1', '2', '3', '4', '5'];
|
||||
<pre><code class="language-javascript">var a = ['1', '2', '3', '4', '5'];
|
||||
var left = a.reduce(function(prev, cur) { return prev + cur; });
|
||||
var right = a.reduceRight(function(prev, cur) { return prev + cur; });
|
||||
|
||||
console.log(left); // "12345"
|
||||
console.log(right); // "54321"</pre>
|
||||
console.log(right); // "54321"</code></pre>
|
||||
<h2 id="兼容性旧环境(Polyfill)">兼容性旧环境(Polyfill)</h2>
|
||||
<p><code>reduceRight</code> 被添加到 ECMA-262 标准第 5 版,因此它在某些实现环境中可能不被支持。把下面的代码添加到脚本开头可以解决此问题,从而允许在那些没有原生支持 <code>reduceRight</code> 的实现环境中使用它。</p>
|
||||
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.22
|
||||
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 5, 15.4.4.22
|
||||
// Reference: http://es5.github.io/#x15.4.4.22
|
||||
if ('function' !== typeof Array.prototype.reduceRight) {
|
||||
Array.prototype.reduceRight = function(callback /*, initialValue*/) {
|
||||
@@ -206,7 +206,7 @@ if ('function' !== typeof Array.prototype.reduceRight) {
|
||||
return value;
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<p> <code><strong>concat()</strong></code> 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-concat.html" width="100%"></iframe></p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
|
||||
<pre><code class="language-javascript">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>value<em>N</em></code><span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||||
@@ -26,32 +26,32 @@
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">连接两个数组</h3>
|
||||
<p>以下代码将两个数组合并为一个新数组:</p>
|
||||
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
|
||||
<pre><code class="language-javascript">var alpha = ['a', 'b', 'c'];
|
||||
var numeric = [1, 2, 3];
|
||||
|
||||
alpha.concat(numeric);
|
||||
// result in ['a', 'b', 'c', 1, 2, 3]</pre>
|
||||
// result in ['a', 'b', 'c', 1, 2, 3]</code></pre>
|
||||
<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">连接三个数组</h3>
|
||||
<p>以下代码将三个数组合并为一个新数组:</p>
|
||||
<pre class="brush: js">var num1 = [1, 2, 3],
|
||||
<pre><code class="language-javascript">var num1 = [1, 2, 3],
|
||||
num2 = [4, 5, 6],
|
||||
num3 = [7, 8, 9];
|
||||
|
||||
var nums = num1.concat(num2, num3);
|
||||
|
||||
console.log(nums);
|
||||
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>
|
||||
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]</code></pre>
|
||||
<h3 id="Example:_Concatenating_values_to_an_array" name="Example:_Concatenating_values_to_an_array">将值连接到数组</h3>
|
||||
<p>以下代码将三个值连接到数组:</p>
|
||||
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
|
||||
<pre><code class="language-javascript">var alpha = ['a', 'b', 'c'];
|
||||
|
||||
var alphaNumeric = alpha.concat(1, [2, 3]);
|
||||
|
||||
console.log(alphaNumeric);
|
||||
// results in ['a', 'b', 'c', 1, 2, 3]</pre>
|
||||
// results in ['a', 'b', 'c', 1, 2, 3]</code></pre>
|
||||
<h3 id="合并嵌套数组">合并嵌套数组</h3>
|
||||
<p>以下代码合并数组并保留引用:</p>
|
||||
<pre class="brush: js">var num1 = [[1]];
|
||||
<pre><code class="language-javascript">var num1 = [[1]];
|
||||
var num2 = [2, [3]];
|
||||
|
||||
var nums = num1.concat(num2);
|
||||
@@ -63,7 +63,7 @@ console.log(nums);
|
||||
num1[0].push(4);
|
||||
|
||||
console.log(nums);
|
||||
// results in [[1, 4], 2, [3]]</pre>
|
||||
// results in [[1, 4], 2, [3]]</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-copywithin.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[</var>, <var>start[</var>, <var>end]]</var>)
|
||||
</pre>
|
||||
<pre><code class="language-javascript"><var>arr</var>.copyWithin(<var>target[</var>, <var>start[</var>, <var>end]]</var>)
|
||||
</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>target</code></dt>
|
||||
@@ -28,7 +28,7 @@
|
||||
<p><code>copyWithin</code><strong> </strong>函数被设计为通用式的,其不要求其 <code>this</code> 值必须是一个<a href="Reference/Array" title="REDIRECT Array"><code>数组</code></a>对象。</p>
|
||||
<p><code>copyWithin</code> 是一个可变方法,它不会改变 this 的长度 length,但是会改变 this 本身的内容,且需要时会创建新的属性。</p>
|
||||
<h2 id="例子">例子</h2>
|
||||
<pre class="brush: js">let numbers = [1, 2, 3, 4, 5];
|
||||
<pre><code class="language-javascript">let numbers = [1, 2, 3, 4, 5];
|
||||
|
||||
numbers.copyWithin(-2);
|
||||
// [1, 2, 3, 1, 2]
|
||||
@@ -54,9 +54,9 @@ i32a.copyWithin(0, 2);
|
||||
// On platforms that are not yet ES2015 compliant:
|
||||
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
|
||||
// Int32Array [4, 2, 3, 4, 5]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<pre class="brush: js">if (!Array.prototype.copyWithin) {
|
||||
<pre><code class="language-javascript">if (!Array.prototype.copyWithin) {
|
||||
Array.prototype.copyWithin = function(target, start/*, end*/) {
|
||||
// Steps 1-2.
|
||||
if (this == null) {
|
||||
@@ -119,7 +119,7 @@ i32a.copyWithin(0, 2);
|
||||
return O;
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
<p><code><strong>entries()</strong></code> 方法返回一个新的<strong>Array Iterator</strong>对象,该对象包含数组中每个索引的键/值对。</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-entries.html" width="100%"></iframe></p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.entries()</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.entries()</code></code></pre>
|
||||
<h3 id="返回值">返回值</h3>
|
||||
<p>一个新的 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 迭代器对象。<a class="external" href="http://www.ecma-international.org/ecma-262/6.0/#sec-createarrayiterator" rel="noopener">Array Iterator</a>是对象,它的原型(__proto__:Array Iterator)上有一个<a class="external" href="http://www.ecma-international.org/ecma-262/6.0/#sec-%arrayiteratorprototype%.next" rel="noopener">next</a>方法,可用用于遍历迭代器取得原数组的[key,value]。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="1、_Array_Iterator">1、 Array Iterator</h3>
|
||||
<pre class="brush: js">var arr = ["a", "b", "c"];
|
||||
<pre><code class="language-javascript">var arr = ["a", "b", "c"];
|
||||
var iterator = arr.entries();
|
||||
console.log(iterator);
|
||||
|
||||
@@ -17,9 +17,9 @@ console.log(iterator);
|
||||
next:<em>ƒ next()</em>
|
||||
Symbol(Symbol.toStringTag):"Array Iterator"
|
||||
__proto__:<em>Object</em>
|
||||
*/</pre>
|
||||
*/</code></pre>
|
||||
<h3 id="2、iterator.next()">2、iterator.next()</h3>
|
||||
<pre class="brush: js">var arr = ["a", "b", "c"];
|
||||
<pre><code class="language-javascript">var arr = ["a", "b", "c"];
|
||||
var iterator = arr.entries();
|
||||
console.log(iterator.next());
|
||||
|
||||
@@ -33,9 +33,9 @@ console.log(iterator.next());
|
||||
// next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是false,
|
||||
// 直到迭代器结束done才是true。
|
||||
// next.value是一个["key":"value"]的数组,是返回的迭代器中的元素值。
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="3、iterator.next方法运行">3、iterator.next方法运行</h3>
|
||||
<pre class="brush: js">var arr = ["a", "b", "c"];
|
||||
<pre><code class="language-javascript">var arr = ["a", "b", "c"];
|
||||
var iter = arr.entries();
|
||||
var a = [];
|
||||
|
||||
@@ -49,9 +49,9 @@ for(var i=0; i< arr.length+1; i++){ // 注意,是length+1,比数组的
|
||||
}
|
||||
}
|
||||
|
||||
console.log(a); // 遍历完毕,输出next.value的数组</pre>
|
||||
console.log(a); // 遍历完毕,输出next.value的数组</code></pre>
|
||||
<h3 id="4、二维数组按行排序">4、二维数组按行排序</h3>
|
||||
<pre class="brush: js">function sortArr(arr) {
|
||||
<pre><code class="language-javascript">function sortArr(arr) {
|
||||
var goNext = true;
|
||||
var entries = arr.entries();
|
||||
while (goNext) {
|
||||
@@ -77,9 +77,9 @@ sortArr(arr);
|
||||
length:4
|
||||
__proto__:Array(0)
|
||||
*/
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="5、使用for…of_循环">5、使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> 循环</h3>
|
||||
<pre class="brush:js">var arr = ["a", "b", "c"];
|
||||
<pre><code class="language-js">var arr = ["a", "b", "c"];
|
||||
var iterator = arr.entries();
|
||||
// undefined
|
||||
|
||||
@@ -90,7 +90,7 @@ for (let e of iterator) {
|
||||
// [0, "a"]
|
||||
// [1, "b"]
|
||||
// [2, "c"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p><code><strong>every()</strong></code> 方法测试数组的所有元素是否都通过了指定函数的测试。</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-every.html" width="100%"></iframe></p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.every(<em>callback</em>[, <em>thisArg</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.every(<em>callback</em>[, <em>thisArg</em>])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -22,17 +22,17 @@
|
||||
<h2 id="Examples" name="Examples">实例</h2>
|
||||
<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">例子:检测所有数组元素的大小</h3>
|
||||
<p>下例检测数组中的所有元素是否都大于 10。</p>
|
||||
<pre class="brush: js">function isBigEnough(element, index, array) {
|
||||
<pre><code class="language-javascript">function isBigEnough(element, index, array) {
|
||||
return (element >= 10);
|
||||
}
|
||||
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
|
||||
// passed is false
|
||||
passed = [12, 54, 18, 130, 44].every(isBigEnough);
|
||||
// passed is true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Compatibility" name="Compatibility">兼容旧环境(Polyfill)</h2>
|
||||
<p>在第 5 版时,<code>every</code> 被添加进 ECMA-262 标准;因此在某些实现环境中不被支持。你可以把下面的代码放到脚本的开头来解决此问题,该代码允许在那些没有原生支持 <code>every</code> 的实现环境中使用它。该算法是 ECMA-262 第5版中指定的算法,假定 <code>Object</code> 和 <code>TypeError</code> 拥有它们的初始值,且 <code>fun.call</code> 等价于 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call</code></a>。</p>
|
||||
<pre class="brush: js">if (!Array.prototype.every)
|
||||
<pre><code class="language-javascript">if (!Array.prototype.every)
|
||||
{
|
||||
Array.prototype.every = function(fun /*, thisArg */)
|
||||
{
|
||||
@@ -56,7 +56,7 @@ passed = [12, 54, 18, 130, 44].every(isBigEnough);
|
||||
return true;
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<p><code><strong>fill()</strong></code> 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-fill.html" width="100%"></iframe></p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var></pre>
|
||||
<pre><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>value</code></dt>
|
||||
@@ -22,7 +22,7 @@
|
||||
<p><code><strong style="line-height: 1.5;">fill</strong></code><span style="line-height: 1.5;"> 方法是个可变方法, 它会改变调用它的 <code>this</code> 对象本身, 然后返回它, 而并不是返回一个副本。</span></p>
|
||||
<p>当一个对象被传递给 <strong><code>fill</code></strong>方法的时候, 填充数组的是这个对象的引用。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4]
|
||||
<pre><code class="language-javascript">[1, 2, 3].fill(4); // [4, 4, 4]
|
||||
[1, 2, 3].fill(4, 1); // [1, 4, 4]
|
||||
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
|
||||
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
|
||||
@@ -35,9 +35,9 @@ Array(3).fill(4); // [4, 4, 4]
|
||||
|
||||
// Objects by reference.
|
||||
var arr = Array(3).fill({}) // [{}, {}, {}];
|
||||
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</pre>
|
||||
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<pre class="brush: js">if (!Array.prototype.fill) {
|
||||
<pre><code class="language-javascript">if (!Array.prototype.fill) {
|
||||
Object.defineProperty(Array.prototype, 'fill', {
|
||||
value: function(value) {
|
||||
|
||||
@@ -81,7 +81,7 @@ arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</pre>
|
||||
}
|
||||
});
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>如果你确实需要维护已过时的不支持 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的 JavaScript 引擎,那么最好完全不向 <code>Array.prototype</code> 添加方法,因为你不能使它不可枚举。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-filter.html" width="100%"></iframe></p>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
|
||||
<pre><code class="language-javascript"><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -38,15 +38,15 @@
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="筛选排除所有较小的值">筛选排除所有较小的值</h3>
|
||||
<p>下例使用 <code>filter</code> 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。</p>
|
||||
<pre class="brush: js">function isBigEnough(element) {
|
||||
<pre><code class="language-javascript">function isBigEnough(element) {
|
||||
return element >= 10;
|
||||
}
|
||||
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
|
||||
// filtered is [12, 130, 44]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="过滤_JSON_中的无效条目">过滤 JSON 中的无效条目</h3>
|
||||
<p>以下示例使用 <code>filter()</code> 创建具有非零 <code>id</code> 的元素的 json。</p>
|
||||
<pre class="brush: js">var arr = [
|
||||
<pre><code class="language-javascript">var arr = [
|
||||
{ id: 15 },
|
||||
{ id: -1 },
|
||||
{ id: 0 },
|
||||
@@ -80,10 +80,10 @@ console.log('Filtered Array\n', arrByID);
|
||||
|
||||
console.log('Number of Invalid Entries = ', invalidEntries);
|
||||
// Number of Invalid Entries = 5
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="在数组中搜索">在数组中搜索</h3>
|
||||
<p>下例使用 <code>filter()</code> 根据搜索条件来过滤数组内容。</p>
|
||||
<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
|
||||
<pre><code class="language-javascript">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
|
||||
|
||||
/**
|
||||
* Array filters items based on search criteria (query)
|
||||
@@ -95,9 +95,9 @@ function filterItems(query) {
|
||||
}
|
||||
|
||||
console.log(filterItems('ap')); // ['apple', 'grapes']
|
||||
console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
|
||||
console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre>
|
||||
<h4 id="ES2015_实现">ES2015 实现</h4>
|
||||
<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
|
||||
<pre><code class="language-javascript">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
|
||||
|
||||
/**
|
||||
* Array filters items based on search criteria (query)
|
||||
@@ -111,10 +111,10 @@ const filterItems = (query) => {
|
||||
console.log(filterItems('ap')); // ['apple', 'grapes']
|
||||
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<p><code>filter</code> 被添加到 ECMA-262 标准第 5 版中,因此在某些实现环境中不被支持。可以把下面的代码插入到脚本的开头来解决此问题,该代码允许在那些没有原生支持 <code>filter</code> 的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法,假定 <code>fn.call</code> 等价于 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call</code></a> 的初始值,且 <a href="Reference/Global_Objects/Array/push" title="push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。"><code>Array.prototype.push</code></a> 拥有它的初始值。</p>
|
||||
<pre class="brush: js">if (!Array.prototype.filter){
|
||||
<pre><code class="language-javascript">if (!Array.prototype.filter){
|
||||
Array.prototype.filter = function(func, thisArg) {
|
||||
'use strict';
|
||||
if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
|
||||
@@ -147,7 +147,7 @@ console.log(filterItems('an')); // ['banana', 'mango', 'orange']
|
||||
res.length = c; // shrink down array to proper size
|
||||
return res;
|
||||
};
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<p>另请参见 <a href="Reference/Global_Objects/Array/findIndex" title="findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。"><code>findIndex()</code></a> 方法,它返回数组中找到的元素的索引,而不是其值。</p>
|
||||
<p>如果你需要找到一个元素的位置或者一个元素是否存在于数组中,使用<a href="Reference/Global_Objects/Array/indexOf" title="indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。"><code>Array.prototype.indexOf()</code></a> 或 <a href="Reference/Global_Objects/Array/includes" title="includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。"><code>Array.prototype.includes()</code></a>。</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.find(<em>callback</em>[, <em>thisArg</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.find(<em>callback</em>[, <em>thisArg</em>])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -32,7 +32,7 @@
|
||||
<p>在第一次调用 <code>callback</code>函数时会确定元素的索引范围,因此在 <code>find</code>方法开始执行之后添加到数组的新元素将不会被 <code>callback</code>函数访问到。如果数组中一个尚未被<code>callback</code>函数访问到的元素的值被<code>callback</code>函数所改变,那么当<code>callback</code>函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="用对象的属性查找数组里的对象">用对象的属性查找数组里的对象</h3>
|
||||
<pre class="brush: js">var inventory = [
|
||||
<pre><code class="language-javascript">var inventory = [
|
||||
{name: 'apples', quantity: 2},
|
||||
{name: 'bananas', quantity: 0},
|
||||
{name: 'cherries', quantity: 5}
|
||||
@@ -42,10 +42,10 @@ function findCherries(fruit) {
|
||||
return fruit.name === 'cherries';
|
||||
}
|
||||
|
||||
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }</pre>
|
||||
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }</code></pre>
|
||||
<h3 id="寻找数组中的质数">寻找数组中的质数</h3>
|
||||
<p>下面的例子展示了如何从一个数组中寻找质数(如果找不到质数则返回<a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a>)</p>
|
||||
<pre class="brush: js">function isPrime(element, index, array) {
|
||||
<pre><code class="language-javascript">function isPrime(element, index, array) {
|
||||
var start = 2;
|
||||
while (start <= Math.sqrt(element)) {
|
||||
if (element % start++ < 1) {
|
||||
@@ -58,9 +58,9 @@ console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }<
|
||||
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
|
||||
console.log([4, 5, 8, 12].find(isPrime)); // 5
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>当在回调中删除数组中的一个值时,当访问到这个位置时,其传入的值时 undefined:</p>
|
||||
<pre class="brush: js">// Declare array with no element at index 2, 3 and 4
|
||||
<pre><code class="language-javascript">// Declare array with no element at index 2, 3 and 4
|
||||
var a = [0,1,,,,5,6];
|
||||
|
||||
// Shows all indexes, not just those that have been assigned values
|
||||
@@ -78,10 +78,10 @@ a.find(function(value, index) {
|
||||
}
|
||||
// Element 5 is still visited even though deleted
|
||||
console.log('Visited index ' + index + ' with value ' + value);
|
||||
});</pre>
|
||||
});</code></pre>
|
||||
<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
|
||||
<p>本方法在ECMAScript 6规范中被加入,可能不存在于某些实现中。你可以通过以下代码来补充 <code>Array.prototype.find()</code>。</p>
|
||||
<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
|
||||
<pre><code class="language-javascript">// https://tc39.github.io/ecma262/#sec-array.prototype.find
|
||||
if (!Array.prototype.find) {
|
||||
Object.defineProperty(Array.prototype, 'find', {
|
||||
value: function(predicate) {
|
||||
@@ -124,7 +124,7 @@ if (!Array.prototype.find) {
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<p>另请参见 <a href="Reference/Global_Objects/Array/find" title="find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。"><code>find()</code></a> 方法,它返回数组中找到的元素的<strong>值</strong>,而不是其索引。</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.findIndex(<em>callback</em>[, <em>thisArg</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.findIndex(<em>callback</em>[, <em>thisArg</em>])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -31,7 +31,7 @@
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">查找数组中首个质数元素的索引</h3>
|
||||
<p><span style="line-height: inherit;">以下示例查找数组中素数的元素的索引(如果不存在素数,则返回-1)。</span></p>
|
||||
<pre class="brush: js">function isPrime(element, index, array) {
|
||||
<pre><code class="language-javascript">function isPrime(element, index, array) {
|
||||
var start = 2;
|
||||
while (start <= Math.sqrt(element)) {
|
||||
if (element % start++ < 1) {
|
||||
@@ -42,9 +42,9 @@
|
||||
}
|
||||
|
||||
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
|
||||
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2</pre>
|
||||
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
|
||||
<pre><code class="language-javascript">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
|
||||
if (!Array.prototype.findIndex) {
|
||||
Object.defineProperty(Array.prototype, 'findIndex', {
|
||||
value: function(predicate) {
|
||||
@@ -88,7 +88,7 @@ if (!Array.prototype.findIndex) {
|
||||
}
|
||||
});
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>如果您需要兼容不支持<code><a href="Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>的JavaScript引擎,那么最好不要对<code>Array.prototype</code>方法进行 polyfill ,因为您无法使其成为不可枚举的。</p>
|
||||
<p>使用此方法需要注意你是否在uc浏览器环境,如果你的页面在支付宝上使用尤其注意,因为支付宝使用的就是uc浏览器环境.</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>depth</var>)</pre>
|
||||
<pre><code class="language-javascript"><var>var newArray = arr</var>.flat(<var>depth</var>)</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>depth</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||||
@@ -14,7 +14,7 @@
|
||||
<p>一个包含将数组与子数组中所有元素的新数组。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="扁平化嵌套数组">扁平化嵌套数组</h3>
|
||||
<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
|
||||
<pre><code class="language-javascript">var arr1 = [1, 2, [3, 4]];
|
||||
arr1.flat();
|
||||
// [1, 2, 3, 4]
|
||||
|
||||
@@ -29,16 +29,16 @@ arr3.flat(2);
|
||||
//使用 Infinity 作为深度,展开任意深度的嵌套数组
|
||||
arr3.flat(Infinity);
|
||||
// [1, 2, 3, 4, 5, 6]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="扁平化与空项">扁平化与空项</h3>
|
||||
<p><code>flat()</code> 方法会移除数组中的空项:</p>
|
||||
<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
|
||||
<pre><code class="language-javascript">var arr4 = [1, 2, , 4, 5];
|
||||
arr4.flat();
|
||||
// [1, 2, 4, 5]</pre>
|
||||
// [1, 2, 4, 5]</code></pre>
|
||||
<h2 id="替代方案">替代方案</h2>
|
||||
<p> </p>
|
||||
<h3 id="使用_reduce_与_concat">使用 <code>reduce</code> 与 <code>concat</code></h3>
|
||||
<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
|
||||
<pre><code class="language-javascript">var arr1 = [1, 2, [3, 4]];
|
||||
arr1.flat();
|
||||
|
||||
// 反嵌套一层数组
|
||||
@@ -46,8 +46,8 @@ arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]
|
||||
|
||||
// 或使用 ...
|
||||
const flatSingle = arr => [].concat(...arr);
|
||||
</pre>
|
||||
<pre class="brush: js">// 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
|
||||
</code></pre>
|
||||
<pre><code class="language-javascript">// 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
|
||||
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
|
||||
|
||||
function flattenDeep(arr1) {
|
||||
@@ -55,8 +55,8 @@ function flattenDeep(arr1) {
|
||||
}
|
||||
flattenDeep(arr1);
|
||||
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
|
||||
</pre>
|
||||
<pre class="brush: js">// 不使用递归,使用 stack 无限反嵌套多层嵌套数组
|
||||
</code></pre>
|
||||
<pre><code class="language-javascript">// 不使用递归,使用 stack 无限反嵌套多层嵌套数组
|
||||
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
|
||||
function flatten(input) {
|
||||
const stack = [...input];
|
||||
@@ -75,7 +75,7 @@ function flatten(input) {
|
||||
return res.reverse();
|
||||
}
|
||||
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
|
||||
<p class="hidden">此交互式示例的源代码存储在GitHub存储库中。如果您想要为交互式示例项目做出贡献,请复制https://github.com/mdn/interactive-examples,并向我们发送 pull request。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
|
||||
<pre><code class="language-javascript"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
|
||||
// 返回新数组的元素
|
||||
}</var>[, <var>thisArg</var>])</pre>
|
||||
}</var>[, <var>thisArg</var>])</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -30,7 +30,7 @@
|
||||
<p>有关回调函数的详细描述,请参见 <a href="Reference/Global_Objects/Array/map" title="map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。"><code>Array.prototype.map()</code></a> 。 <code>flatMap</code> 方法与 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> 方法和深度depth为1的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> 几乎相同.</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="Map_与_flatMap"><code>Map</code> 与 <code>flatMap</code></h3>
|
||||
<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
|
||||
<pre><code class="language-javascript">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
|
||||
|
||||
arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
|
||||
// [[2], [4], [6], [8]]
|
||||
@@ -40,24 +40,24 @@ arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call j
|
||||
|
||||
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
|
||||
arr1.flatMap(x => [[x * 2]]);
|
||||
// [[2], [4], [6], [8]]</pre>
|
||||
// [[2], [4], [6], [8]]</code></pre>
|
||||
<p>虽然上面的代码使用 map 和 flatMap 好像都可以,但这只能展示如何使用 flatMap。</p>
|
||||
<p>所以,为了更好的展示 flatMap 的作用,下面我们将包含几句话的数组拆分成单个汉字组成的新数组。</p>
|
||||
<pre class="brush: js">let arr = ["今天天气不错", "", "早上好"]
|
||||
<pre><code class="language-javascript">let arr = ["今天天气不错", "", "早上好"]
|
||||
|
||||
arr.map(s => s.split(""))
|
||||
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]
|
||||
|
||||
arr.flatMap(s => s.split(''));
|
||||
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]</pre>
|
||||
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]</code></pre>
|
||||
<h2 id="等价操作">等价操作</h2>
|
||||
<h3 id="归纳(reduce)_与_合并(concat)">归纳(<code>reduce</code>) 与 合并(<code>concat</code>)</h3>
|
||||
<pre class="brush: js"><code>var arr1 = [1, 2, 3, 4];
|
||||
<pre><code class="language-javascript"><code>var arr1 = [1, 2, 3, 4];
|
||||
|
||||
arr1.flatMap(x => [x * 2]);
|
||||
// 等价于
|
||||
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
|
||||
// [2, 4, 6, 8]</code></pre>
|
||||
// [2, 4, 6, 8]</code></code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-foreach.html" width="100%"></iframe></p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>[, <var>thisArg</var>]);</pre>
|
||||
<pre><code class="language-javascript"><var>arr</var>.forEach(<var>callback</var>[, <var>thisArg</var>]);</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="for_循环转换为_forEach">for 循环转换为 forEach</h3>
|
||||
<pre class="brush:js">const items = ['item1', 'item2', 'item3'];
|
||||
<pre><code class="language-js">const items = ['item1', 'item2', 'item3'];
|
||||
const copy = [];
|
||||
|
||||
// before
|
||||
@@ -63,13 +63,13 @@ for (let i=0; i<items.length; i++) {
|
||||
items.forEach(function(item){
|
||||
copy.push(item);
|
||||
});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="打印出数组的内容">打印出数组的内容</h3>
|
||||
<div class="blockIndicator note">
|
||||
<p><strong>注意:</strong>为了在控制台中显示数组的内容,你可以使用 <code><a href="/zh-CN/docs/Web/API/Console/table">console.table()</a></code> 来展示经过格式化的数组。下面的例子则是另一种使用 <code>forEach()</code> 的格式化的方法。</p>
|
||||
</div>
|
||||
<p>下面的代码会为每一个数组元素输出一行记录:</p>
|
||||
<pre class="brush:js">function logArrayElements(element, index, array) {
|
||||
<pre><code class="language-js">function logArrayElements(element, index, array) {
|
||||
console.log('a[' + index + '] = ' + element);
|
||||
}
|
||||
|
||||
@@ -79,10 +79,10 @@ items.forEach(function(item){
|
||||
// a[0] = 2
|
||||
// a[1] = 5
|
||||
// a[3] = 9
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="使用_thisArg">使用 <code>thisArg</code></h3>
|
||||
<p>举个勉强的例子,从每个数组中的元素值中更新一个对象的属性:</p>
|
||||
<pre class="brush:js">function Counter() {
|
||||
<pre><code class="language-js">function Counter() {
|
||||
this.sum = 0;
|
||||
this.count = 0;
|
||||
}
|
||||
@@ -102,14 +102,14 @@ obj.count;
|
||||
// 4 === (1+1+1+1)
|
||||
obj.sum;
|
||||
// 16 === (1+3+5+7)
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>因为 <code>thisArg</code> 参数(<code>this</code>)传给了 <code>forEach()</code>,每次调用时,它都被传给 <code>callback</code> 函数,作为它的 <code>this</code> 值。</p>
|
||||
<div>
|
||||
<div class="note"><strong>注意:</strong>如果使用<a href="Reference/Functions/Arrow_functions">箭头函数表达式</a>来传入函数参数,<code>thisArg</code> 参数会被忽略,因为箭头函数在词法上绑定了 <a href="Reference/Operators/this" title="与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。"><code>this</code></a> 值。</div>
|
||||
</div>
|
||||
<h3 id="对象复制函数">对象复制函数</h3>
|
||||
<p>下面的代码会创建一个给定对象的副本。 创建对象的副本有不同的方法,以下是只是一种方法,并解释了 <code>Array.prototype.forEach()</code> 是如何使用 ECMAScript 5 <code>Object.*</code> 元属性(meta property )函数工作的。</p>
|
||||
<pre class="brush: js">function copy(obj) {
|
||||
<pre><code class="language-javascript">function copy(obj) {
|
||||
var copy = Object.create(Object.getPrototypeOf(obj));
|
||||
var propNames = Object.getOwnPropertyNames(obj);
|
||||
|
||||
@@ -123,10 +123,10 @@ obj.sum;
|
||||
|
||||
var obj1 = { a: 1, b: 2 };
|
||||
var obj2 = copy(obj1); // obj2 looks like obj1 now
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="如果数组在迭代时被修改了,则其他元素会被跳过。">如果数组在迭代时被修改了,则其他元素会被跳过。</h3>
|
||||
<p>下面的例子会输出"one", "two", "four"。当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置,"three"会被跳过。 <code>forEach()</code>不会在迭代之前创建数组的副本。</p>
|
||||
<pre class="brush:js">var words = ['one', 'two', 'three', 'four'];
|
||||
<pre><code class="language-js">var words = ['one', 'two', 'three', 'four'];
|
||||
words.forEach(function(word) {
|
||||
console.log(word);
|
||||
if (word === 'two') {
|
||||
@@ -136,10 +136,10 @@ words.forEach(function(word) {
|
||||
// one
|
||||
// two
|
||||
// four
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<p><code>forEach</code> 是在第五版本里被添加到 ECMA-262 标准的;这样它可能在标准的其他实现中不存在,你可以在你调用 <code>forEach</code> 之前 插入下面的代码,在本地不支持的情况下使用 <code>forEach()</code>。该算法是 ECMA-262 第5版中指定的算法。算法假定 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a> 和 <a href="Reference/Global_Objects/TypeError" title="TypeError(类型错误) 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a> 拥有它们的初始值。<code>callback.call</code> 等价于 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call()</code></a>。</p>
|
||||
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18
|
||||
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 5, 15.4.4.18
|
||||
// Reference: http://es5.github.io/#x15.4.4.18
|
||||
if (!Array.prototype.forEach) {
|
||||
|
||||
@@ -202,7 +202,7 @@ if (!Array.prototype.forEach) {
|
||||
// 8. return undefined
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-from.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]])
|
||||
</code></pre>
|
||||
<pre><code class="language-javascript"><code>Array.from(arrayLike[, mapFn[, thisArg]])
|
||||
</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>arrayLike</code></dt>
|
||||
@@ -28,28 +28,28 @@
|
||||
<p>在 ES2015 中, <code>Class</code> 语法允许我们为内置类型(比如 <code>Array</code>)和自定义类新建子类(比如叫 <code>SubArray</code>)。这些子类也会继承父类的静态方法,比如 <code>SubArray.from()</code>,调用该方法后会返回子类 <code>SubArray</code> 的一个实例,而不是 <code>Array</code> 的实例。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="Array_from_a_String">Array from a <code>String</code></h3>
|
||||
<pre class="brush: js">Array.from('foo');
|
||||
// ["f", "o", "o"]</pre>
|
||||
<pre><code class="language-javascript">Array.from('foo');
|
||||
// ["f", "o", "o"]</code></pre>
|
||||
<h3 id="Array_from_a_Set">Array from a <code>Set</code></h3>
|
||||
<pre class="brush: js">let s = new Set(['foo', window]);
|
||||
<pre><code class="language-javascript">let s = new Set(['foo', window]);
|
||||
Array.from(s);
|
||||
// ["foo", window]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Array_from_a_Map">Array from a <code>Map</code></h3>
|
||||
<pre class="brush: js">let m = new Map([[1, 2], [2, 4], [4, 8]]);
|
||||
<pre><code class="language-javascript">let m = new Map([[1, 2], [2, 4], [4, 8]]);
|
||||
Array.from(m);
|
||||
// [[1, 2], [2, 4], [4, 8]]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Array_from_an_Array-like_object_(arguments)">Array from an Array-like object (arguments)</h3>
|
||||
<pre class="brush: js">function f() {
|
||||
<pre><code class="language-javascript">function f() {
|
||||
return Array.from(arguments);
|
||||
}
|
||||
|
||||
f(1, 2, 3);
|
||||
|
||||
// [1, 2, 3]</pre>
|
||||
// [1, 2, 3]</code></pre>
|
||||
<h3 id="在Array.from中使用箭头函数">在<code>Array.from</code>中使用箭头函数</h3>
|
||||
<pre class="brush: js">// Using an arrow function as the map function to
|
||||
<pre><code class="language-javascript">// Using an arrow function as the map function to
|
||||
// manipulate the elements
|
||||
Array.from([1, 2, 3], x => x + x);
|
||||
// x => x + x代表这是一个函数,只是省略了其他的定义,这是一种Lambda表达式的写法
|
||||
@@ -62,18 +62,18 @@ Array.from([1, 2, 3], x => x + x);
|
||||
// the value of `v` below will be `undefined`
|
||||
Array.from({length: 5}, (v, i) => i);
|
||||
// [0, 1, 2, 3, 4]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="数组去重合并">数组去重合并</h3>
|
||||
<pre class="brush: js">function combine(){
|
||||
<pre><code class="language-javascript">function combine(){
|
||||
let arr = [].concat.apply([], arguments); //没有去重复的新数组
|
||||
return Array.from(new Set(arr));
|
||||
}
|
||||
|
||||
var m = [1, 2, 2], n = [2,3,3];
|
||||
console.log(combine(m,n)); // [1, 2, 3]</pre>
|
||||
console.log(combine(m,n)); // [1, 2, 3]</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<p>ECMA-262 第六版标准添加了<code> Array.from </code>。有些实现中可能尚未包括在其中。你可以通过在脚本前添加如下内容作为替代方法,以使用未原生支持的 <code>Array.from</code> 方法。该算法按照 ECMA-262 第六版中的规范实现,并假定 <code>Object</code> 和 <code>TypeError</code> 有其本身的值, <code>callback.call</code> 对应 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call</code></a> 。此外,鉴于无法使用 Polyfill 实现真正的的迭代器,该实现不支持规范中定义的泛型可迭代元素。</p>
|
||||
<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1
|
||||
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 6, 22.1.2.1
|
||||
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
|
||||
if (!Array.from) {
|
||||
Array.from = (function () {
|
||||
@@ -165,7 +165,7 @@ if (!Array.from) {
|
||||
};
|
||||
}());
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-includes.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre><var>arr</var>.includes(<var>valueToFind[</var>, <var>fromIndex]</var>)</pre>
|
||||
<pre><var>arr</var>.includes(<var>valueToFind[</var>, <var>fromIndex]</var>)</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>valueToFind</code></dt>
|
||||
@@ -24,21 +24,21 @@
|
||||
<p><strong>Note:</strong> Technically speaking, <code>includes()</code> uses the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> algorithm to determine whether the given element is found.</p>
|
||||
</div>
|
||||
<h2 id="示例">示例</h2>
|
||||
<pre class="brush: js">[1, 2, 3].includes(2); // true
|
||||
<pre><code class="language-javascript">[1, 2, 3].includes(2); // true
|
||||
[1, 2, 3].includes(4); // false
|
||||
[1, 2, 3].includes(3, 3); // false
|
||||
[1, 2, 3].includes(3, -1); // true
|
||||
[1, 2, NaN].includes(NaN); // true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="fromIndex_大于等于数组长度">fromIndex 大于等于数组长度</h3>
|
||||
<p>如果 <code>fromIndex</code> 大于等于数组的长度,则会返回 <code>false</code>,且该数组不会被搜索。</p>
|
||||
<pre class="brush: js">var arr = ['a', 'b', 'c'];
|
||||
<pre><code class="language-javascript">var arr = ['a', 'b', 'c'];
|
||||
|
||||
arr.includes('c', 3); // false
|
||||
arr.includes('c', 100); // false</pre>
|
||||
arr.includes('c', 100); // false</code></pre>
|
||||
<h3 id="计算出的索引小于_0">计算出的索引小于 0</h3>
|
||||
<p>如果 <code>fromIndex </code>为负值,计算出的索引将作为开始搜索<code>searchElement</code>的位置。如果计算出的索引小于 0,则整个数组都会被搜索。</p>
|
||||
<pre class="brush: js">// array length is 3
|
||||
<pre><code class="language-javascript">// array length is 3
|
||||
// fromIndex is -100
|
||||
// computed index is 3 + (-100) = -97
|
||||
|
||||
@@ -47,15 +47,15 @@ var arr = ['a', 'b', 'c'];
|
||||
arr.includes('a', -100); // true
|
||||
arr.includes('b', -100); // true
|
||||
arr.includes('c', -100); // true
|
||||
arr.includes('a', -2); // false</pre>
|
||||
arr.includes('a', -2); // false</code></pre>
|
||||
<h3 id="作为通用方法的_includes()">作为通用方法的 includes()</h3>
|
||||
<p><code>includes()</code> 方法有意设计为通用方法。它不要求<code>this</code>值是数组对象,所以它可以被用于其他类型的对象 (比如类数组对象)。下面的例子展示了 在函数的 <a href="Reference/Functions/arguments">arguments</a> 对象上调用的 <code>includes()</code> 方法。</p>
|
||||
<pre class="brush: js">(function() {
|
||||
<pre><code class="language-javascript">(function() {
|
||||
console.log([].includes.call(arguments, 'a')); // true
|
||||
console.log([].includes.call(arguments, 'd')); // false
|
||||
})('a','b','c');</pre>
|
||||
})('a','b','c');</code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
|
||||
<pre><code class="language-javascript">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
|
||||
if (!Array.prototype.includes) {
|
||||
Object.defineProperty(Array.prototype, 'includes', {
|
||||
value: function(valueToFind, fromIndex) {
|
||||
@@ -106,7 +106,7 @@ if (!Array.prototype.includes) {
|
||||
}
|
||||
});
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>译者注:polyfill 没有实现 对于 <code>NaN</code> 的检测。</p>
|
||||
<p>如果你需要支持那些不支持<code><a href="https://developer.mozilla.orgReference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>的废弃JavaScript 引擎,你最好不要 polyfill <code>Array.prototype</code> 方法,因为你不能使它们不可枚举。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<p>注意:对于String方法,请参阅 <a href="Reference/Global_Objects/String/indexOf" title="indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引,开始在 fromIndex进行搜索。"><code>String.prototype.indexOf()</code></a>。</p>
|
||||
</div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.indexOf(<em>searchElement</em>)
|
||||
<em>arr</em>.indexOf(<em>searchElement</em>[, <em>fromIndex = 0</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.indexOf(<em>searchElement</em>)
|
||||
<em>arr</em>.indexOf(<em>searchElement</em>[, <em>fromIndex = 0</em>])</code></code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>searchElement</code></dt>
|
||||
@@ -22,15 +22,15 @@
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="使用indexOf">使用indexOf</h3>
|
||||
<p>以下例子使用<code>indexOf方法确定多个值在数组中的位置。</code></p>
|
||||
<pre class="brush: js">var array = [2, 5, 9];
|
||||
<pre><code class="language-javascript">var array = [2, 5, 9];
|
||||
array.indexOf(2); // 0
|
||||
array.indexOf(7); // -1
|
||||
array.indexOf(9, 2); // 2
|
||||
array.indexOf(2, -1); // -1
|
||||
array.indexOf(2, -3); // 0
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="找出指定元素出现的所有位置">找出指定元素出现的所有位置</h3>
|
||||
<pre class="brush: js">var indices = [];
|
||||
<pre><code class="language-javascript">var indices = [];
|
||||
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
|
||||
var element = 'a';
|
||||
var idx = array.indexOf(element);
|
||||
@@ -40,9 +40,9 @@ while (idx != -1) {
|
||||
}
|
||||
console.log(indices);
|
||||
// [0, 2, 4]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="判断一个元素是否在数组里,不在则更新数组">判断一个元素是否在数组里,不在则更新数组</h3>
|
||||
<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
|
||||
<pre><code class="language-javascript">function updateVegetablesCollection (veggies, veggie) {
|
||||
if (veggies.indexOf(veggie) === -1) {
|
||||
veggies.push(veggie);
|
||||
console.log('New veggies collection is : ' + veggies);
|
||||
@@ -56,10 +56,10 @@ var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
|
||||
// New veggies collection is : potato,tomato,chillies,green-papper,spinach
|
||||
updateVegetablesCollection(veggies, 'spinach');
|
||||
// spinach already exists in the veggies collection.
|
||||
updateVegetablesCollection(veggies, 'spinach'); </pre>
|
||||
updateVegetablesCollection(veggies, 'spinach'); </code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<p><code>indexOf</code> 在ECMA-262 标准 的第5版中被加入,但并非所有的浏览器都支持该方法。你可以在编写scripts时,在其开头使用以下代码,它能够允许你在没有本地支持的情况下使用indexOf方法。该算法符合ECMA-262第5版其中一项规定, 即假定 <a href="Reference/Global_Objects/TypeError" title="TypeError(类型错误) 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a>和 <a href="Reference/Global_Objects/Math/abs" title="Math.abs(x) 函数返回指定数字 “x“ 的绝对值。如下:"><code>Math.abs</code></a> 呈现它们原有的值。</p>
|
||||
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
|
||||
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 5, 15.4.4.14
|
||||
// Reference: http://es5.github.io/#x15.4.4.14
|
||||
if (!Array.prototype.indexOf) {
|
||||
Array.prototype.indexOf = function(searchElement, fromIndex) {
|
||||
@@ -124,7 +124,7 @@ if (!Array.prototype.indexOf) {
|
||||
return -1;
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<article id="wikiArticle">
|
||||
<div></div>
|
||||
<p><strong>Array.isArray() </strong>用于确定传递的值是否是一个 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a>。</p>
|
||||
<pre class="brush: js">Array.isArray([1, 2, 3]);
|
||||
<pre><code class="language-javascript">Array.isArray([1, 2, 3]);
|
||||
// true
|
||||
Array.isArray({foo: 123});
|
||||
// false
|
||||
@@ -9,9 +9,9 @@ Array.isArray("foobar");
|
||||
// false
|
||||
Array.isArray(undefined);
|
||||
// false
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre>Array.isArray(<var>obj</var>)</pre>
|
||||
<pre>Array.isArray(<var>obj</var>)</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>obj</code></dt>
|
||||
@@ -23,7 +23,7 @@ Array.isArray(undefined);
|
||||
<p>如果对象是 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> ,则返回true,否则为false。</p>
|
||||
<p>有关更多详细信息,请参阅文章<a class="external" href="http://web.mit.edu/jwalden/www/isArray.html" rel="noopener">严格判定JavaScript对象是否为数组</a>。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<pre class="brush: js">// 下面的函数调用都返回 true
|
||||
<pre><code class="language-javascript">// 下面的函数调用都返回 true
|
||||
Array.isArray([]);
|
||||
Array.isArray([1]);
|
||||
Array.isArray(new Array());
|
||||
@@ -40,7 +40,7 @@ Array.isArray('Array');
|
||||
Array.isArray(true);
|
||||
Array.isArray(false);
|
||||
Array.isArray({ __proto__: Array.prototype });
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="instanceof_和_isArray"><code>instanceof</code> 和 <code>isArray</code></h3>
|
||||
<p>当检测Array实例时, <code>Array.isArray</code> 优于 <code>instanceof,因为Array.isArray能检测iframes</code>.</p>
|
||||
<pre><code>var iframe = document.createElement('iframe');
|
||||
@@ -51,15 +51,15 @@ var arr = new xArray(1,2,3); // [1,2,3]
|
||||
// Correctly checking for Array
|
||||
Array.isArray(arr); // true
|
||||
// Considered harmful, because doesn't work though iframes
|
||||
arr instanceof Array; // false</code></pre>
|
||||
arr instanceof Array; // false</code></code></pre>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<p>假如不存在 Array.isArray(),则在其他代码之前运行下面的代码将创建该方法。</p>
|
||||
<pre class="brush: js">if (!Array.isArray) {
|
||||
<pre><code class="language-javascript">if (!Array.isArray) {
|
||||
Array.isArray = function(arg) {
|
||||
return Object.prototype.toString.call(arg) === '[object Array]';
|
||||
};
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<p><code><strong>join()</strong></code> 方法将一个数组(或一个<a class="new" href="/zh-CN//docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects" rel="nofollow">类数组对象</a>)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-join.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre><var>arr</var>.join([<var>separator</var>])</pre>
|
||||
<pre><var>arr</var>.join([<var>separator</var>])</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>separator</code></dt>
|
||||
@@ -21,19 +21,19 @@
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Joining_an_array_three_different_ways" name="Example:_Joining_an_array_three_different_ways">使用四种不同的分隔符连接数组元素</h3>
|
||||
<p>下例首先创建了一个数组 <code>a</code>,包含有三个元素,然后用四种不同的分隔符连接所有数组元素。首先是默认的分隔符逗号,然后是一个逗号加空格,接下来是一个加号前后加空格,最后是一个空字符串。</p>
|
||||
<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire'];
|
||||
<pre><code class="language-javascript">var a = ['Wind', 'Rain', 'Fire'];
|
||||
var myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
|
||||
var myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
|
||||
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
|
||||
var myVar4 = a.join(''); // myVar4的值变为"WindRainFire"
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="连接类数组对象">连接类数组对象</h3>
|
||||
<p>下面的示例将连接类数组对象(arguments),通过在<code>Array.prototype.join</code>上调用<a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call</code></a>。</p>
|
||||
<pre class="brush: js"><code>function f(a, b, c) {
|
||||
<pre><code class="language-javascript"><code>function f(a, b, c) {
|
||||
var s = Array.prototype.join.call(arguments);
|
||||
console.log(s); // '1,a,true'
|
||||
}
|
||||
f(1, 'a', true);</code></pre>
|
||||
f(1, 'a', true);</code></code></pre>
|
||||
<h2 id="Specifications" name="Specifications">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
<p> <code><strong>keys() </strong></code>方法返回一个包含数组中每个索引键的<code><strong>Array Iterator</strong></code>对象。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-keys.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><var>arr</var>.keys()</code>
|
||||
</pre>
|
||||
<pre><code class="language-javascript"><code><var>arr</var>.keys()</code>
|
||||
</code></pre>
|
||||
<h3 id="返回值">返回值 </h3>
|
||||
<p>一个新的 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 迭代器对象。</p>
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="索引迭代器会包含那些没有对应元素的索引">索引迭代器会包含那些没有对应元素的索引</h3>
|
||||
<pre class="brush: js">var arr = ["a", , "c"];
|
||||
<pre><code class="language-javascript">var arr = ["a", , "c"];
|
||||
var sparseKeys = Object.keys(arr);
|
||||
var denseKeys = [...arr.keys()];
|
||||
console.log(sparseKeys); // ['0', '2']
|
||||
console.log(denseKeys); // [0, 1, 2]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Specifications" name="Specifications">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p><code><strong>lastIndexOf()</strong></code> 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 <code>fromIndex</code> 处开始。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-lastindexof.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.lastIndexOf(<em>searchElement</em>[, <em>fromIndex = arr.length - 1</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.lastIndexOf(<em>searchElement</em>[, <em>fromIndex = arr.length - 1</em>])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>searchElement</code></dt>
|
||||
@@ -21,7 +21,7 @@
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Using_lastIndexOf" name="Example:_Using_lastIndexOf">例子:使用 lastIndexOf</h3>
|
||||
<p>下例使用 <code>lastIndexOf</code> 定位数组中的值。</p>
|
||||
<pre class="brush: js">var array = [2, 5, 9, 2];
|
||||
<pre><code class="language-javascript">var array = [2, 5, 9, 2];
|
||||
var index = array.lastIndexOf(2);
|
||||
// index is 3
|
||||
index = array.lastIndexOf(7);
|
||||
@@ -34,10 +34,10 @@ index = array.lastIndexOf(2, -2);
|
||||
// index is 0
|
||||
index = array.lastIndexOf(2, -1);
|
||||
// index is 3
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Finding_all_the_occurrences_of_an_element" name="Example:_Finding_all_the_occurrences_of_an_element">例子:查找所有元素</h3>
|
||||
<p>下例使用 <code>lastIndexOf</code> 查找到一个元素在数组中所有的索引(下标),并使用 <a href="Reference/Global_Objects/Array/push" title="push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。"><code>push</code></a> 将所有添加到另一个数组中。</p>
|
||||
<pre class="brush: js">var indices = [];
|
||||
<pre><code class="language-javascript">var indices = [];
|
||||
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
|
||||
var element = 'a';
|
||||
var idx = array.lastIndexOf(element);
|
||||
@@ -50,7 +50,7 @@ while (idx != -1) {
|
||||
console.log(indices);
|
||||
// [4, 2, 0];
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>注意,我们要单独处理<code>idx==0</code>时的情况,因为如果是第一个元素,忽略了<code>fromIndex</code>参数则第一个元素总会被查找。这不同于<a href="Reference/Global_Objects/Array/indexOf" title="indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。"><code>indexOf</code></a>方法</p>
|
||||
<p>注:原英文是针对使用三元操作符语句的作用进行说明的:<br/>
|
||||
<code>idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);</code><br/>
|
||||
@@ -58,7 +58,7 @@ console.log(indices);
|
||||
</p>
|
||||
<h2 id="Compatibility" name="Compatibility">兼容旧环境(Polyfill)</h2>
|
||||
<p><code>lastIndexOf</code> 在 ECMA-262 标准第 5 版被添加。因此它在不兼容该标准的浏览器中可能不被支持。你可以把下面代码添加到脚本中来使那些没有实现该方法的实现环境支持该方法。该算法是被 ECMA-262 第 5 版指定的。假定 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a>、<a href="Reference/Global_Objects/TypeError" title="TypeError(类型错误) 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a>、<a href="Reference/Global_Objects/Number" title="JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。Number 对象由 Number() 构造器创建。"><code>Number</code></a>、<a href="Reference/Global_Objects/Math/floor" title="Math.floor() 返回小于或等于一个给定数字的最大整数。"><code>Math.floor</code></a>、<a href="Reference/Global_Objects/Math/abs" title="Math.abs(x) 函数返回指定数字 “x“ 的绝对值。如下:"><code>Math.abs</code></a>,以及 <a href="Reference/Global_Objects/Math/min" title="Math.min() 返回零个或更多个数值的最小值。"><code>Math.min</code></a> 拥有其初始值。</p>
|
||||
<pre class="brush: js">if (!Array.prototype.lastIndexOf) {
|
||||
<pre><code class="language-javascript">if (!Array.prototype.lastIndexOf) {
|
||||
Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
|
||||
'use strict';
|
||||
|
||||
@@ -95,7 +95,7 @@ console.log(indices);
|
||||
};
|
||||
}
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>另外,该实现是为了绝对兼容 Firefox 和 the SpiderMonkey JavaScript 引擎中的 <code>lastIndexOf</code>,包括了几种临界情况。如果你要在实际应用中使用该实现,可以忽略这些临界情况,从而简化 <code>fromIndex</code> 的计算。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-length.html" width="100%"></iframe></div>
|
||||
<h2 id="Description" name="Description">描述</h2>
|
||||
<p><code>length</code> 属性的值是一个 0 到 2<sup>32</sup>-1 的整数。</p>
|
||||
<pre class="brush: js">var namelistA = new Array(4294967296); // 2的32次方 = 4294967296
|
||||
<pre><code class="language-javascript">var namelistA = new Array(4294967296); // 2的32次方 = 4294967296
|
||||
var namelistC = new Array(-100) // 负号
|
||||
|
||||
console.log(namelistA.length); // RangeError: 无效数组长度
|
||||
@@ -17,7 +17,7 @@ namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd
|
||||
console.log(namelistB.length);
|
||||
|
||||
// 4294967295
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>你可以设置 <code>length</code> 属性的值来截断任何数组。当通过改变<code>length</code>属性值来扩展数组时,实际元素的数目将会增加。例如:将一个拥有 2 个元素的数组的 <code>length</code> 属性值设为 3 时,那么这个数组将会包含3个元素,并且,第三个元素的值将会是 <code>undefined</code> 。</p>
|
||||
<pre><code>var arr = [1, 2, 3];
|
||||
printEntries(arr);
|
||||
@@ -48,7 +48,7 @@ function printEntries(arr) {
|
||||
// 3
|
||||
// undefined
|
||||
// undefined
|
||||
// === printed ===</code></pre>
|
||||
// === printed ===</code></code></pre>
|
||||
<p>但是, <code>length</code> 属性不一定表示数组中定义值的个数。了解更多:<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties">长度与数值下标属性之间的关系</a>。</p>
|
||||
<p></p><table class="standard-table">
|
||||
<thead>
|
||||
@@ -79,22 +79,22 @@ function printEntries(arr) {
|
||||
<h2 id="Examples" name="Examples">示例 </h2>
|
||||
<h3 id="Example:_Iterating_over_an_array" name="Example:_Iterating_over_an_array">遍历数组</h3>
|
||||
<p>下面的例子中,通过数组下标遍历数组元素,并把每个元素的值修改为原值的2倍。</p>
|
||||
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
|
||||
<pre><code class="language-javascript"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
|
||||
<span class="keyword token">var</span> length <span class="operator token">=</span> numbers<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
|
||||
<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
|
||||
numbers<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">*</span><span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
|
||||
<span class="punctuation token">}</span>
|
||||
<span class="comment token">// 遍历后的结果 [2, 4, 6, 8, 10]</span></code></pre>
|
||||
<span class="comment token">// 遍历后的结果 [2, 4, 6, 8, 10]</span></code></code></pre>
|
||||
<h3 id="Example:_Shortening_an_array" name="Example:_Shortening_an_array">截断数组</h3>
|
||||
<p>下面的例子中,如果数组长度大于 3,则把该数组的长度截断为 3 。</p>
|
||||
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
|
||||
<pre><code class="language-javascript"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
|
||||
|
||||
<span class="keyword token">if</span> <span class="punctuation token">(</span>numbers<span class="punctuation token">.</span>length <span class="operator token">></span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
|
||||
numbers<span class="punctuation token">.</span>length <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>
|
||||
<span class="punctuation token">}</span>
|
||||
|
||||
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numbers<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// [1, 2, 3]</span>
|
||||
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numbers<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 3</span></code></pre>
|
||||
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>numbers<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 3</span></code></code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) {
|
||||
// Return element for new_array </var>
|
||||
<var>}</var>[, <var>thisArg</var>])</pre>
|
||||
<var>}</var>[, <var>thisArg</var>])</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -34,12 +34,12 @@
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">求数组中每个元素的平方根</h3>
|
||||
<p>下面的代码创建了一个新数组,值为原数组中对应数字的平方根。</p>
|
||||
<pre class="brush: js">var numbers = [1, 4, 9];
|
||||
<pre><code class="language-javascript">var numbers = [1, 4, 9];
|
||||
var roots = numbers.map(Math.sqrt);
|
||||
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]</pre>
|
||||
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]</code></pre>
|
||||
<h3 id="使用_map_重新格式化数组中的对象">使用 map 重新格式化数组中的对象</h3>
|
||||
<p>以下代码使用一个包含对象的数组来重新创建一个格式化后的数组。</p>
|
||||
<pre class="brush: js">var kvArray = [{key: 1, value: 10},
|
||||
<pre><code class="language-javascript">var kvArray = [{key: 1, value: 10},
|
||||
{key: 2, value: 20},
|
||||
{key: 3, value: 30}];
|
||||
|
||||
@@ -55,35 +55,35 @@ var reformattedArray = kvArray.map(function(obj) {
|
||||
// [{key: 1, value: 10},
|
||||
// {key: 2, value: 20},
|
||||
// {key: 3, value: 30}]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Pluralizing_the_words_.28strings.29_in_an_array" name="Example:_Pluralizing_the_words_.28strings.29_in_an_array">使用一个包含一个参数的函数来mapping(构建)一个数字数组</h3>
|
||||
<p>下面的代码表示了当函数需要一个参数时map的工作方式。当map循环遍历原始数组时,这个参数会自动被分配成数组中对应的每个元素。</p>
|
||||
<pre class="brush: js">var numbers = [1, 4, 9];
|
||||
<pre><code class="language-javascript">var numbers = [1, 4, 9];
|
||||
var doubles = numbers.map(function(num) {
|
||||
return num * 2;
|
||||
});
|
||||
|
||||
// doubles数组的值为: [2, 8, 18]
|
||||
// numbers数组未被修改: [1, 4, 9]</pre>
|
||||
// numbers数组未被修改: [1, 4, 9]</code></pre>
|
||||
<h3 id="Example:_using_map_generically" name="Example:_using_map_generically">一般的<code>map</code> 方法</h3>
|
||||
<p>下面的例子演示如何在一个 <a href="Reference/String" title="此页面仍未被本地化, 期待您的翻译!"><code>String</code></a> 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:</p>
|
||||
<pre class="brush: js">var map = Array.prototype.map
|
||||
<pre><code class="language-javascript">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]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="querySelectorAll_应用"><code>querySelectorAll 应用</code></h3>
|
||||
<p>下面代码展示了如何去遍历用 <code>querySelectorAll </code>得到的动态对象集合。在这里,我们获得了文档里所有选中的选项,并将其打印:</p>
|
||||
<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
|
||||
<pre><code class="language-javascript">var elems = document.querySelectorAll('select option:checked');
|
||||
var values = Array.prototype.map.call(elems, function(obj) {
|
||||
return obj.value;
|
||||
});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="使用技巧案例">使用技巧案例</h3>
|
||||
<p><a class="external" href="http://www.wirfs-brock.com/allzh-cn/posts/166" rel="noopener">(原文地址)</a></p>
|
||||
<p>通常情况下,<code>map</code> 方法中的 <code>callback</code> 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 <code>map</code> 只给 <code>callback</code> 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。</p>
|
||||
<pre class="brush: js">// 下面的语句返回什么呢:
|
||||
<pre><code class="language-javascript">// 下面的语句返回什么呢:
|
||||
["1", "2", "3"].map(parseInt);
|
||||
// 你可能觉的会是[1, 2, 3]
|
||||
// 但实际的结果是 [1, NaN, NaN]
|
||||
@@ -110,10 +110,10 @@ function returnInt(element) {
|
||||
['1', '2', '3'].map(Number); // [1, 2, 3]
|
||||
// 与`parseInt` 不同,下面的结果会返回浮点数或指数:
|
||||
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Compatibility" name="Compatibility" style="line-height: 30px;">Polyfill</h2>
|
||||
<p><code>map</code> 是在最近的 ECMA-262 标准中新添加的方法;所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 <code>map</code> 方法的浏览器中,你可以使用下面的 Javascript 代码来<code>实现它。</code>所使用的算法正是 ECMA-262,第 5 版规定的。假定<code style="color: inherit;">Object</code>, <code style="color: inherit;">TypeError</code>, 和 <code>Array</code> 有他们的原始值。而且 <code style="color: inherit;">callback.call</code> 的原始值也是 <code style="color: inherit;"><a href="/zh-cn/JavaScript/Reference/Global_Objects/Function/call" rel="internal" style="color: rgb(4, 121, 167);">Function.prototype.call</a></code></p>
|
||||
<pre class="brush: js" style="font-size: 14px;">// 实现 ECMA-262, Edition 5, 15.4.4.19
|
||||
<pre><code class="language-js" style="font-size: 14px;">// 实现 ECMA-262, Edition 5, 15.4.4.19
|
||||
// 参考: <a class="external" href="http://es5.github.com/#x15.4.4.19" rel="freelink noopener">http://es5.github.com/#x15.4.4.19</a>
|
||||
if (!Array.prototype.map) {
|
||||
Array.prototype.map = function(callback, thisArg) {
|
||||
@@ -170,7 +170,7 @@ if (!Array.prototype.map) {
|
||||
// 8. 返回新数组A
|
||||
return A;
|
||||
};
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div><div class="blockIndicator obsolete obsoleteHeader"><p><strong><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> 已废弃</strong><br/>This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.</p></div></div>
|
||||
<p><strong>Array.observe()</strong> 方法用于异步监视数组发生的变化,类似于针对对象的 <a href="Reference/Global_Objects/Object/observe" title="Object.observe() 方法用于异步地监视一个对象的修改。当对象属性被修改时,方法的回调函数会提供一个有序的修改流。然而,这个接口已经被废弃并从各浏览器中移除。你可以使用更通用的 Proxy 对象替代。"><code>Object.observe()</code></a> 。当数组的值发生变化时,它按发生顺序提供了一个变化流。与 <code>Object.observe()</code> 类似,它由如下可接受的变化类型列表<code>["add"、"update"、"delete"、"splice"]</code>触发。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre>
|
||||
<pre><code class="language-javascript"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>arr</code></dt>
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="Example_Logging_different_change_types">Example: Logging different change types</h3>
|
||||
<pre class="brush: js">var arr = ['a', 'b', 'c'];
|
||||
<pre><code class="language-javascript">var arr = ['a', 'b', 'c'];
|
||||
|
||||
Array.observe(arr, function(changes) {
|
||||
console.log(changes);
|
||||
@@ -46,7 +46,7 @@ arr[3] = 'd';
|
||||
|
||||
arr.splice(1, 2, 'beta', 'gamma', 'delta');
|
||||
// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c'], addedCount: 3}]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Specifications" name="Specifications">标准规范</h2>
|
||||
<p><a class="external" href="https://github.com/arv/ecmascript-object-observe" rel="noopener">Strawman proposal specification</a>.</p>
|
||||
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器支持</h2>
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div></div>
|
||||
<p><code><strong>Array.of()</strong></code> 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。</p>
|
||||
<p> <code><strong>Array.of()</strong></code> 和 <code><strong>Array</strong></code> 构造函数之间的区别在于处理整数参数:<code><strong>Array.of(7)</strong></code><strong> </strong>创建一个具有单个元素 <strong>7</strong> 的数组,而 <strong><code>Array(7)</code> </strong>创建一个长度为7的空数组(<strong>注意:</strong>这是指一个有7个空位(empty)的数组,而不是由7个<code>undefined</code>组成的数组)。</p>
|
||||
<pre class="brush: js">Array.of(7); // [7]
|
||||
<pre><code class="language-javascript">Array.of(7); // [7]
|
||||
Array.of(1, 2, 3); // [1, 2, 3]
|
||||
|
||||
Array(7); // [ , , , , , , ]
|
||||
Array(1, 2, 3); // [1, 2, 3]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre>
|
||||
<pre><code class="language-javascript"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt>element<em>N</em></dt>
|
||||
@@ -20,17 +20,17 @@ Array(1, 2, 3); // [1, 2, 3]
|
||||
<h2 id="描述">描述</h2>
|
||||
<p>此函数是ECMAScript 2015标准的一部分。详见 <a class="external" href="https://gist.github.com/rwaldron/1074126" rel="noopener"><code>Array.of 和</code> <code>Array.from</code> proposal</a> 和 <a class="external" href="https://gist.github.com/rwaldron/3186576" rel="noopener"><code>Array.of</code> polyfill</a>。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<pre class="brush: js" style="font-size: 14px;"><span style="line-height: 22px;">Array.of(1); // [1]
|
||||
<pre><code class="language-js" style="font-size: 14px;"><span style="line-height: 22px;">Array.of(1); // [1]
|
||||
</span><span style="line-height: 22px;">Array.of(1, 2, 3); // [1, 2, 3]</span>
|
||||
Array.of(undefined); // [undefined]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Compatibility" name="Compatibility">兼容旧环境</h2>
|
||||
<p>如果原生不支持的话,在其他代码之前执行以下代码会创建 <code>Array.of()</code> 。</p>
|
||||
<pre class="brush: js" style="font-size: 14px;">if (!Array.of) {
|
||||
<pre><code class="language-js" style="font-size: 14px;">if (!Array.of) {
|
||||
Array.of = function() {
|
||||
return Array.prototype.slice.call(arguments);
|
||||
};
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-pop.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.pop()</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.pop()</code></code></pre>
|
||||
<h3 id="返回值">返回值</h3>
|
||||
<p>从数组中删除的元素(当数组为空时返回<a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a>)。</p>
|
||||
<h2 id="Description" name="Description">描述</h2>
|
||||
@@ -14,7 +14,7 @@
|
||||
<h2 id="Example" name="Example">示例</h2>
|
||||
<h3 id="Example:_Removing_the_last_element_of_an_array" name="Example:_Removing_the_last_element_of_an_array">例子: 删除掉数组的最后一个元素</h3>
|
||||
<p>下面的代码首先创建了一个拥有四个元素的数组 myFish,然后删除掉它的最后一个元素。</p>
|
||||
<pre class="brush:js">let myFish = ["angel", "clown", "mandarin", "surgeon"];
|
||||
<pre><code class="language-js">let myFish = ["angel", "clown", "mandarin", "surgeon"];
|
||||
|
||||
let popped = myFish.pop();
|
||||
|
||||
@@ -23,7 +23,7 @@ console.log(myFish);
|
||||
|
||||
console.log(popped);
|
||||
// surgeon
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<article id="wikiArticle">
|
||||
<div></div>
|
||||
<p><strong><code>Array.prototype</code></strong> 属性表示 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 构造函数的原型,并允许您向所有Array对象添加新的属性和方法。</p>
|
||||
<pre class="brush: js">/*
|
||||
<pre><code class="language-javascript">/*
|
||||
如果JavaScript本身不提供 first() 方法,
|
||||
添加一个返回数组的第一个元素的新方法。
|
||||
*/
|
||||
@@ -13,13 +13,13 @@ if(!Array.prototype.first) {
|
||||
return this[0];
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Description" name="Description">描述</h2>
|
||||
<p><a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a>实例继承自 <strong>Array.prototype </strong>。与所有构造函数一样,您可以更改构造函数的原型对象,以对所有 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 实例进行更改。例如,可以添加新方法和属性以扩展所有Array对象。这用于 <a class="glossaryLink" href="/en-US/docs/Glossary/Polyfill" title="polyfilling: A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.">polyfilling</a>, 例如。</p>
|
||||
<p>鲜为人知的事实:<code>Array.prototype</code> 本身也是一个 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a>。</p>
|
||||
<pre class="brush: js">Array.isArray(Array.prototype);
|
||||
<pre><code class="language-javascript">Array.isArray(Array.prototype);
|
||||
// true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p></p><table class="standard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-push.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">arr.push(element1, ..., elementN)
|
||||
</pre>
|
||||
<pre><code class="language-javascript">arr.push(element1, ..., elementN)
|
||||
</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>element<em>N</em></code></dt>
|
||||
@@ -20,18 +20,18 @@
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="添加元素到数组">添加元素到数组</h3>
|
||||
<p>下面的代码创建了 <code>sports</code> 数组,包含两个元素,然后又把两个元素添加给它。<code>total</code> 变量为数组的新长度值。</p>
|
||||
<pre class="brush: js">var sports = ["soccer", "baseball"];
|
||||
<pre><code class="language-javascript">var sports = ["soccer", "baseball"];
|
||||
var total = sports.push("football", "swimming");
|
||||
|
||||
console.log(sports);
|
||||
// ["soccer", "baseball", "football", "swimming"]
|
||||
|
||||
console.log(total);
|
||||
// 4</pre>
|
||||
// 4</code></pre>
|
||||
<h3 id="合并两个数组">合并两个数组</h3>
|
||||
<p>该示例使用 <a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。"><code>apply()</code></a> 添加第二个数组的所有元素。</p>
|
||||
<p>注意当第二个数组(如示例中的moreVegs)太大时不要使用这个方法来合并数组,因为事实上一个函数能够接受的参数个数是有限制的。具体可以参考 <a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。"><code>apply()</code></a> 。</p>
|
||||
<pre class="brush: js">var vegetables = ['parsnip', 'potato'];
|
||||
<pre><code class="language-javascript">var vegetables = ['parsnip', 'potato'];
|
||||
var moreVegs = ['celery', 'beetroot'];
|
||||
|
||||
// 将第二个数组融合进第一个数组
|
||||
@@ -39,10 +39,10 @@ var moreVegs = ['celery', 'beetroot'];
|
||||
Array.prototype.push.apply(vegetables, moreVegs);
|
||||
|
||||
console.log(vegetables);
|
||||
// ['parsnip', 'potato', 'celery', 'beetroot']</pre>
|
||||
// ['parsnip', 'potato', 'celery', 'beetroot']</code></pre>
|
||||
<h3 id="像数组一样使用对象">像数组一样使用对象</h3>
|
||||
<p>如上所述,push 是特意设计为通用的,我们可以使用它来获得便利。正如下面的例子所示,Array.prototype.push 可以在一个对象上工作。 注意,我们没有创建一个数组来存储对象的集合。 相反,我们将该集合存储在对象本身上,并使用在 Array.prototype.push 上使用的 <code>call</code> 来调用该方法,使其认为我们正在处理数组,而它只是像平常一样运作,这要感谢 JavaScript 允许我们建立任意的执行上下文。</p>
|
||||
<pre class="brush: js">var obj = {
|
||||
<pre><code class="language-javascript">var obj = {
|
||||
length: 0,
|
||||
|
||||
addElem: function addElem (elem) {
|
||||
@@ -56,7 +56,7 @@ console.log(vegetables);
|
||||
obj.addElem({});
|
||||
obj.addElem({});
|
||||
console.log(obj.length);
|
||||
// → 2</pre>
|
||||
// → 2</code></pre>
|
||||
<p>注意,尽管 obj 不是数组,但是 push 方法成功地使 obj 的 length 属性增长了,就像我们处理一个实际的数组一样。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<p><code><strong>reverse()</strong></code> 方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-reverse.html" width="100%"></iframe></div>
|
||||
<h2 id="语法" style="margin-bottom: 20px; line-height: 30px;">语法</h2>
|
||||
<pre class="syntaxbox"><code><var> arr</var>.reverse()</code></pre>
|
||||
<pre><code class="language-javascript"><code><var> arr</var>.reverse()</code></code></pre>
|
||||
<h3 id="参数" style="line-height: 24px;">参数</h3>
|
||||
<p>无</p>
|
||||
<h2 id="描述" style="margin-bottom: 20px; line-height: 30px;">描述</h2>
|
||||
@@ -11,12 +11,12 @@
|
||||
<h2 id="示例" style="margin-bottom: 20px; line-height: 30px;">示例</h2>
|
||||
<h3 id="例子:颠倒数组中的元素" style="line-height: 24px;">例子:颠倒数组中的元素</h3>
|
||||
<p>下例将会创建一个数组 sourceArray,其包含三个元素,然后颠倒该数组。</p>
|
||||
<pre class="brush: js">var sourceArray = ['one', 'two', 'three'];
|
||||
<pre><code class="language-javascript">var sourceArray = ['one', 'two', 'three'];
|
||||
var reverseArray = sourceArray.reverse();
|
||||
|
||||
console.log(sourceArray ) // ['three', 'two', 'one']
|
||||
console.log(sourceArray === reverseArray); // true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<h3 id="返回值">返回值 </h3>
|
||||
<p>从数组中删除的元素; 如果数组为空则返回<a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a> 。 </p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre>
|
||||
<pre><code class="language-javascript"><code><var>arr</var>.shift()</code></code></pre>
|
||||
<h2 id="描述">描述</h2>
|
||||
<p><code>shift</code> 方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果 <a href="Reference/Global_Objects/Array/length" title="length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标。"><code>length</code></a> 属性的值为 0 (长度为 0),则返回 <a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a>。</p>
|
||||
<p><code>shift</code> 方法并不局限于数组:这个方法能够通过 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>call</code></a> 或 <a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。"><code>apply</code></a> 方法作用于类似数组的对象上。但是对于没有 length 属性(从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="移除数组中的一个元素">移除数组中的一个元素</h3>
|
||||
<p>以下代码显示了删除其第一个元素之前和之后的myFish数组。它还显示已删除的元素:</p>
|
||||
<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
|
||||
<pre><code class="language-javascript">let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
|
||||
|
||||
console.log('调用 shift 之前: ' + myFish);
|
||||
// "调用 shift 之前: angel,clown,mandarin,surgeon"
|
||||
@@ -24,7 +24,7 @@ console.log('调用 shift 之后: ' + myFish);
|
||||
// "调用 shift 之后: clown,mandarin,surgeon"
|
||||
|
||||
console.log('被删除的元素: ' + shifted);
|
||||
// "被删除的元素: angel"</pre>
|
||||
// "被删除的元素: angel"</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-slice.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="brush: js">arr.slice();
|
||||
<pre><code class="language-javascript">arr.slice();
|
||||
// [0, end]
|
||||
|
||||
arr.slice(begin);
|
||||
@@ -14,7 +14,7 @@ arr.slice(begin, end);
|
||||
// [begin, end)
|
||||
|
||||
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Parameters" name="Parameters">参数</h2>
|
||||
<dl>
|
||||
<dt><code>begin</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||||
@@ -43,15 +43,15 @@ arr.slice(begin, end);
|
||||
<p>如果向两个数组任一中添加了新元素,则另一个不会受到影响。</p>
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Return_a_portion_of_an_existing_array" name="Example:_Return_a_portion_of_an_existing_array" style="line-height: 24px;">返回现有数组的一部分</h3>
|
||||
<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
|
||||
<pre><code class="language-javascript">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
|
||||
var citrus = fruits.slice(1, 3);
|
||||
|
||||
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
|
||||
// citrus contains ['Orange','Lemon']
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Using_slice" name="Example:_Using_slice">使用 <code>slice</code></h3>
|
||||
<p>在下例中, <code>slice从</code><code>myCar中创建了一个新数组</code><code>newCar</code>.两个数组都包含了一个<code>myHonda</code>对象的引用. 当<code>myHonda</code>的color属性改变为purple, 则两个数组中的对应元素都会随之改变.</p>
|
||||
<pre class="brush: js">// 使用slice方法从myCar中创建一个newCar.
|
||||
<pre><code class="language-javascript">// 使用slice方法从myCar中创建一个newCar.
|
||||
var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
|
||||
var myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
|
||||
var newCar = myCar.slice(0, 2);
|
||||
@@ -69,9 +69,9 @@ console.log('The new color of my Honda is ' + myHonda.color);
|
||||
//输出myCar, newCar中各自的myHonda对象引用的color属性.
|
||||
console.log('myCar[0].color = ' + myCar[0].color);
|
||||
console.log('newCar[0].color = ' + newCar[0].color);
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>上述代码输出:</p>
|
||||
<pre class="brush: js">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
|
||||
<pre><code class="language-javascript">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
|
||||
'cherry condition', 'purchased 1997']
|
||||
newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
|
||||
myCar[0].color = red
|
||||
@@ -79,17 +79,17 @@ newCar[0].color = red
|
||||
The new color of my Honda is purple
|
||||
myCar[0].color = purple
|
||||
newCar[0].color = purple
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Array-like" name="Array-like">类数组(Array-like)对象</h2>
|
||||
<p><code>slice</code> 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 <code>arguments</code> 就是一个类数组对象的例子。</p>
|
||||
<pre class="brush: js">function list() {
|
||||
<pre><code class="language-javascript">function list() {
|
||||
return Array.prototype.slice.call(arguments);
|
||||
}
|
||||
|
||||
var list1 = list(1, 2, 3); // [1, 2, 3]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>除了使用 <code>Array.prototype.slice.call(</code><code>arguments</code><code>)</code>,你也可以简单的使用 <code>[].slice.call(arguments)</code> 来代替。另外,你可以使用 <code>bind</code> 来简化该过程。</p>
|
||||
<pre class="brush: js">var unboundSlice = Array.prototype.slice;
|
||||
<pre><code class="language-javascript">var unboundSlice = Array.prototype.slice;
|
||||
var slice = Function.prototype.call.bind(unboundSlice);
|
||||
|
||||
function list() {
|
||||
@@ -97,10 +97,10 @@ function list() {
|
||||
}
|
||||
|
||||
var list1 = list(1, 2, 3); // [1, 2, 3]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="精简跨浏览器行为" style="margin-bottom: 20px; line-height: 30px;">精简跨浏览器行为</h2>
|
||||
<p>根据规范,使用 <font face="Courier, Andale Mono, monospace">Array.prototype.slice</font> 转换宿主对象(如 DOM 对象)时不必遵循 Mozilla 的默认行为,即可以转化任何符合条件的伪数组宿主对象为数组,IE < 9 没有遵循,而 IE9 + 遵循这个行为,但是稍加改造可以使其在跨浏览器使用时更可靠。只要其他现代浏览器继续支持该行为,目前 IE 9+、FireFox、Chrome、Safari 以及 Opera 都支持,开发者在使用下面代码时遍历 DOM 时就不会被该方法的字面意义误导,即 IE < 9 不能转化 DOM Collections。开发者可以安全地根据语义知道该方法的实际上的标准行为。(下面的代码还修正了 IE 中 <code>slice()</code> 方法第二个参数不允许为显式的 <a href="Reference/Global_Objects/null" title="值 null 特指对象的值未设置。它是 JavaScript 基本类型 之一。"><code>null</code></a>/<a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a> 值的问题,其他现代浏览器,包括IE9+都允许)。</p>
|
||||
<pre class="brush: js">/**
|
||||
<pre><code class="language-javascript">/**
|
||||
* Shim for "fixing" IE's lack of support (IE < 9) for applying slice
|
||||
* on host objects like NamedNodeMap, NodeList, and HTMLCollection
|
||||
* (technically, since host objects have been implementation-dependent,
|
||||
@@ -164,7 +164,7 @@ var list1 = list(1, 2, 3); // [1, 2, 3]
|
||||
};
|
||||
}
|
||||
}());
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-some.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>arr</em>.some(<em>callback(element[, index[, array]])[, thisArg]</em>)</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>arr</em>.some(<em>callback(element[, index[, array]])[, thisArg]</em>)</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>callback</code></dt>
|
||||
@@ -35,19 +35,19 @@
|
||||
<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">测试数组元素的值</h3>
|
||||
<p>下面的例子检测在数组中是否有元素大于 10。</p>
|
||||
<p> </p>
|
||||
<pre class="brush: js">function isBiggerThan10(element, index, array) {
|
||||
<pre><code class="language-javascript">function isBiggerThan10(element, index, array) {
|
||||
return element > 10;
|
||||
}
|
||||
|
||||
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
|
||||
[12, 5, 8, 1, 4].some(isBiggerThan10); // true</pre>
|
||||
[12, 5, 8, 1, 4].some(isBiggerThan10); // true</code></pre>
|
||||
<h3 id="使用箭头函数测试数组元素的值">使用箭头函数测试数组元素的值</h3>
|
||||
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a> 可以通过更简洁的语法实现相同的用例.</p>
|
||||
<pre class="brush: js"><code>[2, 5, 8, 1, 4].some(x => x > 10); // false
|
||||
[12, 5, 8, 1, 4].some(x => x > 10); // true</code></pre>
|
||||
<pre><code class="language-javascript"><code>[2, 5, 8, 1, 4].some(x => x > 10); // false
|
||||
[12, 5, 8, 1, 4].some(x => x > 10); // true</code></code></pre>
|
||||
<h3 id="判断数组元素中是否存在某个值">判断数组元素中是否存在某个值</h3>
|
||||
<p>此例中为模仿 <code>includes()</code> 方法, 若元素在数组中存在, 则回调函数返回值为 <code>true</code> :</p>
|
||||
<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
|
||||
<pre><code class="language-javascript">var fruits = ['apple', 'banana', 'mango', 'guava'];
|
||||
|
||||
function checkAvailability(arr, val) {
|
||||
return arr.some(function(arrVal) {
|
||||
@@ -56,18 +56,18 @@ function checkAvailability(arr, val) {
|
||||
}
|
||||
|
||||
checkAvailability(fruits, 'kela'); // false
|
||||
checkAvailability(fruits, 'banana'); // true</pre>
|
||||
checkAvailability(fruits, 'banana'); // true</code></pre>
|
||||
<h3 id="使用箭头函数判断数组元素中是否存在某个值">使用箭头函数判断数组元素中是否存在某个值</h3>
|
||||
<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
|
||||
<pre><code class="language-javascript">var fruits = ['apple', 'banana', 'mango', 'guava'];
|
||||
|
||||
function checkAvailability(arr, val) {
|
||||
return arr.some(arrVal => val === arrVal);
|
||||
}
|
||||
|
||||
checkAvailability(fruits, 'kela'); // false
|
||||
checkAvailability(fruits, 'banana'); // true</pre>
|
||||
checkAvailability(fruits, 'banana'); // true</code></pre>
|
||||
<h3 id="将任意值转换为布尔类型">将任意值转换为布尔类型</h3>
|
||||
<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
|
||||
<pre><code class="language-javascript">var TRUTHY_VALUES = [true, 'true', 1];
|
||||
|
||||
function getBoolean(value) {
|
||||
'use strict';
|
||||
@@ -85,10 +85,10 @@ getBoolean(false); // false
|
||||
getBoolean('false'); // false
|
||||
getBoolean(1); // true
|
||||
getBoolean('true'); // true
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Compatibility" name="Compatibility">Polyfill</h2>
|
||||
<p>在第 5 版时,<code>some()</code> 被添加进 ECMA-262 标准;这样导致某些实现环境可能不支持它。你可以把下面的代码插入到脚本的开头来解决此问题,从而允许在那些没有原生支持它的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法,假定 <code>Object </code>和 <code>TypeError</code> 拥有他们的初始值,且 <code>fun.call</code> 等价于 <code><a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call</code></a></code>。</p>
|
||||
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17
|
||||
<pre><code class="language-javascript">// Production steps of ECMA-262, Edition 5, 15.4.4.17
|
||||
// Reference: http://es5.github.io/#x15.4.4.17
|
||||
if (!Array.prototype.some) {
|
||||
Array.prototype.some = function(fun/*, thisArg*/) {
|
||||
@@ -114,7 +114,7 @@ if (!Array.prototype.some) {
|
||||
|
||||
return false;
|
||||
};
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-sort.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>arr</var>.sort(<var>[compareFunction]</var>)
|
||||
</pre>
|
||||
<pre><code class="language-javascript"><var>arr</var>.sort(<var>[compareFunction]</var>)
|
||||
</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>compareFunction</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||||
@@ -35,7 +35,7 @@
|
||||
<li><code>compareFunction(a, b)</code> 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。</li>
|
||||
</ul>
|
||||
<p>所以,比较函数格式如下:</p>
|
||||
<pre class="brush: js">function compare(a, b) {
|
||||
<pre><code class="language-javascript">function compare(a, b) {
|
||||
if (a < b ) { // 按某种排序标准进行比较, a 小于 b
|
||||
return -1;
|
||||
}
|
||||
@@ -45,14 +45,14 @@
|
||||
// a must be equal to b
|
||||
return 0;
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列</p>
|
||||
<pre class="brush: js">function compareNumbers(a, b) {
|
||||
<pre><code class="language-javascript">function compareNumbers(a, b) {
|
||||
return a - b;
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p><code>sort</code> 方法可以使用 <a href="Reference/Operators/function" title="function 关键字可以用来在一个表达式中定义一个函数。">函数表达式</a> 方便地书写:</p>
|
||||
<pre class="brush: js">var numbers = [4, 2, 5, 1, 3];
|
||||
<pre><code class="language-javascript">var numbers = [4, 2, 5, 1, 3];
|
||||
numbers.sort(function(a, b) {
|
||||
return a - b;
|
||||
});
|
||||
@@ -64,9 +64,9 @@ numbers.sort((a, b) => a - b);
|
||||
console.log(numbers);
|
||||
|
||||
// [1, 2, 3, 4, 5]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>对象可以按照某个属性排序:</p>
|
||||
<pre class="brush: js line-numbers language-js">var items = [
|
||||
<pre><code class="language-javascript">var items = [
|
||||
{ name: 'Edward', value: 21 },
|
||||
{ name: 'Sharpe', value: 37 },
|
||||
{ name: 'And', value: 45 },
|
||||
@@ -93,11 +93,11 @@ items<span class="punctuation token">.</span><span class="function token">sort</
|
||||
|
||||
<span class="comment token">// names must be equal</span>
|
||||
<span class="keyword token">return</span> <span class="number token">0</span><span class="punctuation token">;</span>
|
||||
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
|
||||
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
|
||||
<h2 id="Examples" name="Examples">示例</h2>
|
||||
<h3 id="Example:_Creating.2C_displaying.2C_and_sorting_an_array" name="Example:_Creating.2C_displaying.2C_and_sorting_an_array">创建、显示及排序数组</h3>
|
||||
<p>下述示例创建了四个数组,并展示原数组。之后对数组进行排序。对比了数字数组分别指定与不指定比较函数的结果。</p>
|
||||
<pre class="brush: js">var stringArray = ["Blue", "Humpback", "Beluga"];
|
||||
<pre><code class="language-javascript">var stringArray = ["Blue", "Humpback", "Beluga"];
|
||||
var numericStringArray = ["80", "9", "700"];
|
||||
var numberArray = [40, 1, 5, 200];
|
||||
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
|
||||
@@ -121,9 +121,9 @@ console.log('Sorted with compareNumbers:'+ numericStringArray.sort(compareNumber
|
||||
console.log('mixedNumericArray:'+ mixedNumericArray.join());
|
||||
console.log('Sorted without a compare function:'+ mixedNumericArray.sort());
|
||||
console.log('Sorted with compareNumbers:'+ mixedNumericArray.sort(compareNumbers));
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>该示例的返回结果如下。输出显示,当使用比较函数后,数字数组会按照数字大小排序。</p>
|
||||
<pre class="brush: js">stringArray: Blue,Humpback,Beluga
|
||||
<pre><code class="language-javascript">stringArray: Blue,Humpback,Beluga
|
||||
Sorted: Beluga,Blue,Humpback
|
||||
|
||||
numberArray: 40,1,5,200
|
||||
@@ -137,19 +137,19 @@ Sorted with compareNumbers: 9,80,700
|
||||
mixedNumericArray: 80,9,700,40,1,5,200
|
||||
Sorted without a compare function: 1,200,40,5,700,80,9
|
||||
Sorted with compareNumbers: 1,5,9,40,80,200,700
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Sorting_non-ASCII_characters" name="Example:_Sorting_non-ASCII_characters">对非 ASCII 字符排序</h3>
|
||||
<p>当排序非 ASCII 字符的字符串(如包含类似 e, é, è, a, ä 等字符的字符串)。一些非英语语言的字符串需要使用 <a href="Reference/Global_Objects/String/localeCompare" title="localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。"><code>String.localeCompare</code></a>。这个函数可以将函数排序到正确的顺序。</p>
|
||||
<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
|
||||
<pre><code class="language-javascript">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
|
||||
items.sort(function (a, b) {
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Sorting_maps" name="Example:_Sorting_maps">使用映射改善排序</h3>
|
||||
<p><code>compareFunction</code> 可能需要对元素做多次映射以实现排序,尤其当 <code>compareFunction</code> 较为复杂,且元素较多的时候,某些 <code>compareFunction</code> 可能会导致很高的负载。使用 map 辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来,排序后再将数组恢复。</p>
|
||||
<pre class="brush: js">// 需要被排序的数组
|
||||
<pre><code class="language-javascript">// 需要被排序的数组
|
||||
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
|
||||
|
||||
// 对需要排序的数字和位置的临时存储
|
||||
@@ -166,7 +166,7 @@ mapped.sort(function(a, b) {
|
||||
var result = mapped.map(function(el){
|
||||
return list[el.index];
|
||||
});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="Specifications" name="Specifications">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-splice.html" width="100%"></iframe></div>
|
||||
<p class="hidden">交互范例的源码储存于 GitHub 仓库。想要参与此项目,可 clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> 并发送 pull request 给我们。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
|
||||
</pre>
|
||||
<pre><code class="language-javascript"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
|
||||
</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>start</code></dt>
|
||||
@@ -24,60 +24,60 @@
|
||||
<p>如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。</p>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="从第_2_位开始删除_0_个元素,插入“drum”">从第 2 位开始删除 0 个元素,插入“drum”</h3>
|
||||
<pre class="brush: js">var myFish = ["angel", "clown", "mandarin", "surgeon"];
|
||||
<pre><code class="language-javascript">var myFish = ["angel", "clown", "mandarin", "surgeon"];
|
||||
var removed = myFish.splice(2, 0, "drum");
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "surgeon"]
|
||||
// 被删除的元素: [], 没有元素被删除
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从第_2_位开始删除_0_个元素,插入“drum”_和_guitar">从第 2 位开始删除 0 个元素,插入“drum” 和 "guitar"</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
var removed = myFish.splice(2, 0, 'drum', 'guitar');
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
|
||||
// 被删除的元素: [], 没有元素被删除
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从第_3_位开始删除_1_个元素">从第 3 位开始删除 1 个元素</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
|
||||
var removed = myFish.splice(3, 1);
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
|
||||
// 被删除的元素: ["mandarin"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从第_2_位开始删除_1_个元素,插入“trumpet”">从第 2 位开始删除 1 个元素,插入“trumpet”</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
|
||||
var removed = myFish.splice(2, 1, "trumpet");
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown", "trumpet", "surgeon"]
|
||||
// 被删除的元素: ["drum"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从第_0_位开始删除_2_个元素,插入parrot、anemone和blue">从第 0 位开始删除 2 个元素,插入"parrot"、"anemone"和"blue"</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
|
||||
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
|
||||
|
||||
// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
|
||||
// 被删除的元素: ["angel", "clown"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从第_2_位开始删除_2_个元素">从第 2 位开始删除 2 个元素</h3>
|
||||
<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
|
||||
var removed = myFish.splice(myFish.length - 3, 2);
|
||||
|
||||
// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]
|
||||
// 被删除的元素: ["blue", "trumpet"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="从倒数第_2_位开始删除_1_个元素">从倒数第 2 位开始删除 1 个元素</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
var removed = myFish.splice(-2, 1);
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown", "sturgeon"]
|
||||
// 被删除的元素: ["mandarin"]</pre>
|
||||
// 被删除的元素: ["mandarin"]</code></pre>
|
||||
<h3 id="从第_2_位开始删除所有元素">从第 2 位开始删除所有元素</h3>
|
||||
<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
<pre><code class="language-javascript">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
|
||||
var removed = myFish.splice(2);
|
||||
|
||||
// 运算后的 myFish: ["angel", "clown"]
|
||||
// 被删除的元素: ["mandarin", "sturgeon"]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<p><code><strong>toLocaleString()</strong></code> 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 <code>toLocaleString</code> 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-tolocalestring.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><font face="consolas, Liberation Mono, courier, monospace">arr.toLocaleString([locales[,options]]);</font></pre>
|
||||
<pre><code class="language-javascript"><font face="consolas, Liberation Mono, courier, monospace">arr.toLocaleString([locales[,options]]);</font></code></pre>
|
||||
<h3 id="参数"><font face="consolas, Liberation Mono, courier, monospace">参数</font></h3>
|
||||
<dl>
|
||||
<dt><code>locales</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||||
@@ -22,13 +22,13 @@
|
||||
<li><code>Date</code>: <a href="Reference/Global_Objects/Date/toLocaleString" title="toLocaleString() 方法返回该日期对象的字符串,该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则,允许定制该方法的表现(behavior)。在旧版本浏览器中, locales 和 options 参数被忽略,使用的语言环境和返回的字符串格式是各自独立实现的。"><code>Date.prototype.toLocaleString()</code></a></li>
|
||||
</ul>
|
||||
<p>总是在<code>prices</code>数组中显示字符串和数字的货币符号:</p>
|
||||
<pre class="brush: js">var prices = ['¥7', 500, 8123, 12];
|
||||
<pre><code class="language-javascript">var prices = ['¥7', 500, 8123, 12];
|
||||
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
|
||||
|
||||
// "¥7,¥500,¥8,123,¥12"</pre>
|
||||
// "¥7,¥500,¥8,123,¥12"</code></pre>
|
||||
<p>更多实例请看 <a href="Reference/Global_Objects/Intl" title="Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化。Collator,NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性,以及国际化使用的构造器和其他语言的方法等常见的功能。"><code>Intl</code></a>,<a href="Reference/Global_Objects/NumberFormat" title="Intl.NumberFormat是对语言敏感的格式化数字类的构造器类"><code>NumberFormat</code></a>和<a href="Reference/Global_Objects/DateTimeFormat" title="交互示例的源代码存储在 GitHub 资源库。如果你愿意分布交互示例,请复制https://github.com/mdn/interactive-examples,并向我们发送一个pull请求。"><code>DateTimeFormat</code></a>页面。</p>
|
||||
<h2 id="Polyfill">Polyfill</h2>
|
||||
<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
|
||||
<pre><code class="language-javascript">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
|
||||
if (!Array.prototype.toLocaleString) {
|
||||
Object.defineProperty(Array.prototype, 'toLocaleString', {
|
||||
value: function(locales, options) {
|
||||
@@ -109,7 +109,7 @@ if (!Array.prototype.toLocaleString) {
|
||||
}
|
||||
});
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>如果你需要支持真正不支持<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>的JavaScript引擎,最好不要对<code>Array.prototype</code>方法进行填充,因为你不能使它们不可枚举。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
@@ -6,16 +6,16 @@
|
||||
<h2 id="Summary" name="Summary">概述</h2>
|
||||
<p>返回一个字符串,代表该数组的源代码.</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>array</em>.toSource()</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>array</em>.toSource()</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<p>无</p>
|
||||
<h2 id="Description" name="Description">描述</h2>
|
||||
<p>在调试时,你可以使用<code>toSource方法</code>来查看一个数组的内容.</p>
|
||||
<h2 id="Examples" name="Examples">例子</h2>
|
||||
<h3 id="Example:_Examining_the_source_code_of_an_array" name="Example:_Examining_the_source_code_of_an_array">例子: 查看数组的源码</h3>
|
||||
<pre class="brush:js">var alpha = new Array("a", "b", "c");
|
||||
<pre><code class="language-js">var alpha = new Array("a", "b", "c");
|
||||
|
||||
alpha.toSource(); //返回["a", "b", "c"]</pre>
|
||||
alpha.toSource(); //返回["a", "b", "c"]</code></pre>
|
||||
<h2 id="浏览器兼容性">浏览器兼容性</h2>
|
||||
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>toSource</code> <div class="bc-icons"><abbr class="only-icon" title="Non-standard. Expect poor cross-browser support."><span>Non-standard</span><i class="ic-non-standard"></i></abbr></div></th><td class="bc-supports-no bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-no only-icon" title="No support">
|
||||
<span>No support</span>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<p><code><strong>toString()</strong></code> 返回一个字符串,表示指定的数组及其元素。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-tostring.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="brush: js">arr.toString()
|
||||
</pre>
|
||||
<pre><code class="language-javascript">arr.toString()
|
||||
</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">返回值</h3>
|
||||
<p>一个表示指定的数组及其元素的字符串。</p>
|
||||
<h2 id="描述">描述</h2>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div></div>
|
||||
<p>Array<strong>.unobserve()方法用来移除</strong><a href="Reference/Global_Objects/Array/observe" title='Array.observe() 方法用于异步监视数组发生的变化,类似于针对对象的 Object.observe() 。当数组的值发生变化时,它按发生顺序提供了一个变化流。与 Object.observe() 类似,它由如下可接受的变化类型列表["add"、"update"、"delete"、"splice"]触发。'><code>Array.observe()</code></a>设置的所有观察者。</p>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></pre>
|
||||
<pre><code class="language-javascript"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>arr</code></dt>
|
||||
@@ -19,7 +19,7 @@
|
||||
<p>回调函数应该是一个函数的引用并且不能是匿名函数, 因为这个函数需要用来移除前面的观察者, 如果用匿名函数是没有用的,将不能移除任何观察者。</p>
|
||||
<h2 id="例子">例子</h2>
|
||||
<h3 id="停止观察一个数组">停止观察一个数组</h3>
|
||||
<pre class="brush: js">var arr = [1, 2, 3];
|
||||
<pre><code class="language-javascript">var arr = [1, 2, 3];
|
||||
|
||||
var observer = function(changes) {
|
||||
console.log(changes);
|
||||
@@ -33,9 +33,9 @@ arr.push(4);
|
||||
Array.unobserve(arr, observer);
|
||||
|
||||
arr.pop();
|
||||
// The callback wasn't called</pre>
|
||||
// The callback wasn't called</code></pre>
|
||||
<h3 id="使用匿名函数">使用匿名函数</h3>
|
||||
<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed'];
|
||||
<pre><code class="language-javascript">var persons = ['Khalid', 'Ahmed', 'Mohammed'];
|
||||
|
||||
Array.observe(persons, function (changes) {
|
||||
console.log(changes);
|
||||
@@ -51,7 +51,7 @@ Array.unobserve(persons, function (changes) {
|
||||
persons.push('Abdullah');
|
||||
// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }]
|
||||
// The callback will always be called
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="浏览器兼容性">浏览器兼容性</h2>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<p><strong><code>unshift()</code></strong> 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-unshift.html" width="100%"></iframe></div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox">arr.unshift(element1, ..., elementN)
|
||||
</pre>
|
||||
<pre><code class="language-javascript">arr.unshift(element1, ..., elementN)
|
||||
</code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数列表</h3>
|
||||
<dl>
|
||||
<dt><code>elementN</code></dt>
|
||||
@@ -18,7 +18,7 @@
|
||||
<p><code>unshift</code> 方法会在调用它的类数组对象的开始位置插入给定的参数。</p>
|
||||
<p><code>unshift</code> 特意被设计成具有通用性;这个方法能够通过 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>call</code></a> 或 <a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。"><code>apply</code></a> 方法作用于类数组对象上。<span style="line-height: inherit;">不过对于没有 length 属性(代表从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。</span></p>
|
||||
<p>Please note that, if multiple elements are passed as parameters, they're inserted in chunk at the beginning of the object, in the exact same order they were passed as parameters. Hence, calling unshift with <strong>n</strong> arguments <strong>once</strong>, or calling it <strong>n</strong> times with <strong>1</strong> argument (with a loop, for example), don't yield the same results. See example:</p>
|
||||
<pre class="syntaxbox">let arr = [4,5,6];
|
||||
<pre><code class="language-javascript">let arr = [4,5,6];
|
||||
arr.unshift(1,2,3);
|
||||
console.log(arr); // [<strong>1, 2, 3</strong>, 4, 5, 6]
|
||||
|
||||
@@ -27,9 +27,9 @@ arr.unshift(1);
|
||||
arr.unshift(2);
|
||||
arr.unshift(3);
|
||||
console.log(arr); // [<strong>3, 2, 1</strong>, 4, 5, 6]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="示例">示例</h2>
|
||||
<pre class="brush: js">let arr = [1, 2];
|
||||
<pre><code class="language-javascript">let arr = [1, 2];
|
||||
|
||||
arr.unshift(0); // result of the call is 3, which is the new array length
|
||||
// arr is [0, 1, 2]
|
||||
@@ -42,7 +42,7 @@ arr.unshift([-4, -3]); // the new array length is 6
|
||||
|
||||
arr.unshift([-7, -6], [-5]); // the new array length is 8
|
||||
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
@@ -3,26 +3,26 @@
|
||||
<p><strong><code>values()</code></strong> 方法返回一个新的 <strong><code>Array Iterator</code></strong> 对象,该对象包含数组每个索引的值</p>
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-values.html" width="100%"></iframe></div>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox"><code><var>arr</var>.values()</code></pre>
|
||||
<pre><code class="language-javascript"><code><var>arr</var>.values()</code></code></pre>
|
||||
<h2 id="示例">示例</h2>
|
||||
<h3 id="使用_for...of_循环进行迭代"><code>使用 for...of</code> 循环进行迭代</h3>
|
||||
<pre class="brush: js">let arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
<pre><code class="language-javascript">let arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
let eArr = arr.values();
|
||||
// 您的浏览器必须支持 for..of 循环
|
||||
// 以及 let —— 将变量作用域限定在 for 循环中
|
||||
for (let letter of eArr) {
|
||||
console.log(letter);
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="另一种迭代方式">另一种迭代方式</h3>
|
||||
<pre class="brush: js">let arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
<pre><code class="language-javascript">let arr = ['w', 'y', 'k', 'o', 'p'];
|
||||
let eArr = arr.values();
|
||||
console.log(eArr.next().value); // w
|
||||
console.log(eArr.next().value); // y
|
||||
console.log(eArr.next().value); // k
|
||||
console.log(eArr.next().value); // o
|
||||
console.log(eArr.next().value); // p
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user