aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/functions/arguments/index.html
blob: 04d14b0b4f31cdeaece0ebf922cf390d4b584401 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
---
title: Arguments 对象
slug: Web/JavaScript/Reference/Functions/arguments
tags:
  - Functions
  - JavaScript
  - Reference
  - arguments
  - arguments.length
translation_of: Web/JavaScript/Reference/Functions/arguments
---
<div>
<div>
<div>{{jsSidebar("Functions")}}</div>
</div>
</div>

<p><strong><code>arguments</code></strong> 是一个对应于传递给函数的参数的类数组对象。</p>

<p>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</p>

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

<div class="blockIndicator note">
<p><strong>Note:</strong> If you're writing ES6 compatible code, then <a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> should be preferred.</p>
</div>

<div class="blockIndicator note">
<p><strong>Note:</strong> “Array-like” means that <code>arguments</code> has a {{jsxref("Functions/arguments/length", "length")}} property and properties indexed from zero, but it doesn't have {{JSxRef("Array")}}'s built-in methods like {{jsxref("Array.forEach", "forEach()")}} and {{jsxref("Array.map", "map()")}}. See <a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments$edit#Description">§Description</a> for details.</p>
</div>

<p><code>arguments</code>对象是所有(非箭头)函数中都可用的<strong>局部变量</strong>。你可以使用<code>arguments</code>对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处。例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:</p>

<pre class="brush: js">arguments[0]
arguments[1]
arguments[2]
</pre>

<p>参数也可以被设置:</p>

<pre class="brush: js">arguments[1] = 'new value';</pre>

<p><code>arguments</code>对象不是一个 {{jsxref("Array")}} 。它类似于<code>Array</code>,但除了length属性和索引元素之外没有任何<code>Array</code>属性。例如,它没有 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="JavaScript/Reference/Global_Objects/Array/pop">pop</a> 方法。但是它可以被转换为一个真正的<code>Array</code></p>

<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];
</pre>

<div class="warning">
<p>对参数使用slice会阻止某些JavaScript引擎中的优化 (比如 V8 - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">更多信息</a>)。如果你关心性能,尝试通过遍历arguments对象来构造一个新的数组。另一种方法是使用被忽视的<code>Array</code>构造函数作为一个函数:</p>

<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
</pre>
</div>

<p>如果调用的参数多于正式声明接受的参数,则可以使用<code>arguments</code>对象。这种技术对于可以传递可变数量的参数的函数很有用。使用 <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>来确定传递给函数参数的个数,然后使用<code>arguments</code>对象来处理每个参数。要确定函数<a href="/zh-CN/docs/Glossary/Signature/Function">签名</a>中(输入)参数的数量,请使用<code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code>属性。</p>

<h3 id="对参数使用_typeof">对参数使用 <code>typeof</code></h3>

<p>typeof参数返回 'object'。</p>

<pre class="brush: js">console.log(typeof arguments);    // 'object'
// arguments 对象只能在函数内使用
function test(a){
    console.log(a,Object.prototype.toString.call(arguments));
    console.log(arguments[0],arguments[1]);
    console.log(typeof arguments[0]);
}
test(1);
/*
1 "[object Arguments]"
1 undefined
number
*/</pre>

<p>可以使用索引确定单个参数的类型。</p>

<pre class="brush: js">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre>

<h3 id="对参数使用扩展语法">对参数使用扩展语法</h3>

<p>您还可以使用{{jsxref("Array.from()")}}方法或<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator">扩展运算符</a>将参数转换为真实数组:</p>

<pre class="brush: js">var args = Array.from(arguments);
var args = [...arguments];</pre>

<h2 id="Properties" name="Properties">属性</h2>

<dl>
 <dt><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt>
 <dd>指向参数所属的当前执行的函数。</dd>
 <dt>
 </dt>
 <dd>
 <p>指向调用当前函数的函数。</p>
 </dd>
 <dt><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code></dt>
 <dd>传递给函数的参数数量。</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
 <dd>返回一个新的{{jsxref("Array/@@iterator", "Array 迭代器", "", 0)}} 对象,该对象包含参数中每个索引的值。</dd>
 <dt></dt>
</dl>

<div class="blockIndicator note">
<p>注意: 在严格模式下,<code>arguments</code>对象已与过往不同。<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code>不再与函数的实际形参之间共享,同时caller属性也被移除。</p>
</div>

<h2 id="Examples" name="Examples">例子</h2>

<h3 id="遍历参数求和">遍历参数求和</h3>

<pre class="brush: js">function add() {
    var sum =0,
        len = arguments.length;
    for(var i=0; i&lt;len; i++){
        sum += arguments[i];
    }
    return sum;
}
add()                           // 0
add(1)                          // 1
add(1,2,3,4);                   // 10</pre>

<h3 id="Example_Defining_function_that_concatenates_several_strings" name="Example:_Defining_function_that_concatenates_several_strings">定义连接字符串的函数</h3>

<p>这个例子定义了一个函数来连接字符串。这个函数唯一正式声明了的参数是一个字符串,该参数指定一个字符作为衔接点来连接字符串。该函数定义如下:</p>

<pre class="brush:js">function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}</pre>

<p>你可以传递任意数量的参数到该函数,并使用每个参数作为列表中的项创建列表。</p>

<pre class="brush:js">// returns "red, orange, blue"
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre>

<h3 id="Example_Defining_a_function_that_creates_HTML_lists" name="Example:_Defining_a_function_that_creates_HTML_lists">定义创建HTML列表的方法</h3>

<p>这个例子定义了一个函数通过一个字符串来创建HTML列表。这个函数唯一正式声明了的参数是一个字符。当该参数为 "<code>u</code>" 时,创建一个无序列表 (项目列表);当该参数为 "<code>o</code>" 时,则创建一个有序列表 (编号列表)。该函数定义如下:</p>

<pre class="brush:js  language-js"><code class="language-js">function list(type) {
  var result = "&lt;" + type + "l&gt;&lt;li&gt;";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("&lt;/li&gt;&lt;li&gt;");
  result += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list

  return result;
}</code></pre>

<p>你可以传递任意数量的参数到该函数,并将每个参数作为一个项添加到指定类型的列表中。例如:</p>

<pre class="brush:js  language-js"><code class="language-js">var listHTML = list("u", "One", "Two", "Three");

/* listHTML is:

"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"

*/</code>
</pre>

<h3 id="剩余参数、默认参数和解构赋值参数">剩余参数、默认参数和解构赋值参数</h3>

<p><code>arguments</code>对象可以与<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>参数结合使用。</p>

<pre class="brush: js">function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]
</pre>

<p>在严格模式下,<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>参数的存在不会改变 <code>arguments</code>对象的行为,但是在非严格模式下就有所不同了。</p>

<p>当非严格模式中的函数<strong>没有</strong>包含<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>,那么<code>arguments</code>对象中的值<strong></strong>跟踪参数的值(反之亦然)。看下面的代码:</p>

<pre class="brush: js">function func(a) {
  arguments[0] = 99;   // 更新了arguments[0] 同样更新了a
  console.log(a);
}
func(10); // 99
</pre>

<p>并且</p>

<pre class="brush: js">function func(a) {
  a = 99;              // 更新了a 同样更新了arguments[0]
  console.log(arguments[0]);
}
func(10); // 99
</pre>

<p>当非严格模式中的函数<strong></strong>包含<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>,那么<code>arguments</code>对象中的值<strong>不会</strong>跟踪参数的值(反之亦然)。相反, <code>arguments</code>反映了调用时提供的参数:</p>

<pre class="brush: js">function func(a = 55) {
  arguments[0] = 99; // updating arguments[0] does not also update a
  console.log(a);
}
func(10); // 10</pre>

<p>并且</p>

<pre class="brush: js">function func(a = 55) {
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10</pre>

<p>并且</p>

<pre class="brush: js">function func(a = 55) {
  console.log(arguments[0]);
}
func(); // undefined
</pre>

<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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.1</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("javascript.functions.arguments")}}</p>

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

<ul>
 <li>{{jsxref("Function")}}</li>
</ul>