diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/global_objects/array/push')
-rw-r--r-- | files/zh-cn/web/javascript/reference/global_objects/array/push/index.html | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/push/index.html b/files/zh-cn/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..3be7c12520 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,149 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Array + - Array.prototype.push() + - JavaScript + - Method + - Prototype + - 参考 + - 数组 + - 方法 +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p><code><strong>push()</strong></code> 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + + + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">arr.push(element1, ..., elementN) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>被添加到数组末尾的元素。</dd> +</dl> + +<h3 id="返回值" style="line-height: 24px;">返回值</h3> + +<p>当调用该方法时,新的 {{jsxref("Array.length", "length")}} 属性值将被返回。</p> + +<h2 id="Description" name="Description" style="margin-bottom: 20px; line-height: 30px;">描述</h2> + +<p>push方法将值追加到数组中。</p> + +<p><code>push</code> 方法具有通用性。该方法和 {{jsxref("Function.call", "call()")}} 或 {{jsxref("Function.apply", "apply()")}} 一起使用时,可应用在类似数组的对象上。<code>push</code> 方法根据 <code>length</code> 属性来决定从哪里开始插入给定的值。如果 <code>length</code> 不能被转成一个数值,则插入的元素索引为 0,包括 <code>length</code> 不存在时。当 <code>length</code> 不存在时,将会创建它。</p> + +<p>唯一的原生类数组(array-like)对象是 {{jsxref("Global_Objects/String", "Strings")}},尽管如此,它们并不适用该方法,因为字符串是不可改变的。</p> + +<h2 id="示例">示例</h2> + +<h3 id="添加元素到数组">添加元素到数组</h3> + +<p>下面的代码创建了 <code>sports</code> 数组,包含两个元素,然后又把两个元素添加给它。<code>total</code> 变量为数组的新长度值。</p> + +<pre class="brush: js">var sports = ["soccer", "baseball"]; +var total = sports.push("football", "swimming"); + +console.log(sports); +// ["soccer", "baseball", "football", "swimming"] + +console.log(total); +// 4</pre> + +<h3 id="合并两个数组">合并两个数组</h3> + +<p>该示例使用 {{jsxref("Function.apply", "apply()")}} 添加第二个数组的所有元素。</p> + +<p>注意当第二个数组(如示例中的moreVegs)太大时不要使用这个方法来合并数组,因为事实上一个函数能够接受的参数个数是有限制的。具体可以参考 {{jsxref("Function.apply", "apply()")}} 。</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// 将第二个数组融合进第一个数组 +// 相当于 vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); +// ['parsnip', 'potato', 'celery', 'beetroot']</pre> + +<h3 id="像数组一样使用对象">像数组一样使用对象</h3> + +<p>如上所述,push 是特意设计为通用的,我们可以使用它来获得便利。正如下面的例子所示,Array.prototype.push 可以在一个对象上工作。 注意,我们没有创建一个数组来存储对象的集合。 相反,我们将该集合存储在对象本身上,并使用在 Array.prototype.push 上使用的 <code>call</code> 来调用该方法,使其认为我们正在处理数组,而它只是像平常一样运作,这要感谢 JavaScript 允许我们建立任意的执行上下文。</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem (elem) { + // obj.length is automatically incremented + // every time an element is added. + [].push.call(this, elem); + } +}; + +// Let's add some empty objects just to illustrate. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2</pre> + +<p>注意,尽管 obj 不是数组,但是 push 方法成功地使 obj 的 length 属性增长了,就像我们处理一个实际的数组一样。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> |