---
title: Array.prototype.shift()
slug: Web/JavaScript/Reference/Global_Objects/Array/shift
tags:
  - Array.prototype.shift()
  - JavaScript
  - 原型
  - 数组
  - 方法
translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
---
<div>{{JSRef}}</div>

<p><code><strong>shift()</strong></code> 方法从数组中删除<strong>第一个</strong>元素，并返回该元素的值。此方法更改数组的长度。</p>

<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>

<p class="hidden">这份交互测试源码存储在Github仓库中。如果你想为这份交互测试源码做贡献, 请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 同时提交一个pull request.</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre>



<h3 id="返回值">返回值 </h3>

<p>从数组中删除的元素; 如果数组为空则返回{{jsxref("undefined")}} 。 </p>

<h2 id="描述">描述</h2>

<p><code>shift</code> 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 {{jsxref("Array.length", "length")}} 属性的值为 0 (长度为 0)，则返回 {{jsxref("undefined")}}。</p>

<p><code>shift</code> 方法并不局限于数组：这个方法能够通过 {{jsxref("Function.call", "call")}} 或 {{jsxref("Function.apply", "apply")}} 方法作用于类似数组的对象上。但是对于没有 length 属性（从0开始的一系列连续的数字属性的最后一个）的对象，调用该方法可能没有任何意义。</p>

<p>{{jsxref("Array.prototype.pop()")}} 有着和 <code>shift</code>相似的行为, 但是是作用在数组的最后一个元素上的。</p>

<h2 id="示例">示例</h2>

<h3 id="移除数组中的一个元素">移除数组中的一个元素</h3>

<p>以下代码显示了删除其第一个元素之前和之后的myFish数组。它还显示已删除的元素：</p>

<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"

console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"</pre>

<pre><code>var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before:', JSON.stringify(myFish));
// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']

var shifted = myFish.shift();

console.log('myFish after:', myFish);
// myFish after: ['clown', 'mandarin', 'surgeon']

console.log('Removed this element:', shifted);
// Removed this element: angel</code></pre>

<h3 id="在while循环中使用shift">在while循环中使用shift()</h3>

<p>shift() 方法经常用于while loop的环境中.。下例中每个循环将要从一个数组中移除下一项元素，直至它成为空数组。</p>

<pre><code>var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John</code></pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</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.9', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器支持">浏览器支持</h2>

<div>
<div>


<p>{{Compat("javascript.builtins.Array.shift")}}</p>
</div>
</div>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{jsxref("Array.prototype.push()")}}</li>
 <li>{{jsxref("Array.prototype.pop()")}}</li>
 <li>{{jsxref("Array.prototype.unshift()")}}</li>
</ul>