study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-12-15 15:20:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

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

70
docs/javascript/Reference/Functions/arguments.html
View File

@@ -6,32 +6,32 @@
</div>
<p><strong><code>arguments</code></strong> 是一个对应于传递给函数的参数的类数组对象。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">arguments</pre>
<pre><code class="language-javascript">arguments</code></pre>
<h2 id="Description" name="Description">描述</h2>
<p><code>arguments</code>对象是所有（非箭头）函数中都可用的<strong>局部变量</strong>。你可以使用<code>arguments</code>对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：</p>
<pre class="brush: js">arguments[0]
<pre><code class="language-javascript">arguments[0]
arguments[1]
arguments[2]
</pre>
</code></pre>
<p>参数也可以被设置：</p>
<pre class="brush: js">arguments[1] = 'new value';</pre>
<pre><code class="language-javascript">arguments[1] = 'new value';</code></pre>
<p><code>arguments</code>对象不是一个 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 。它类似于<code>Array</code>，但除了length属性和索引元素之外没有任何<code>Array</code>属性。例如，它没有 <a href="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);
<pre><code class="language-javascript">var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES2015
const args = Array.from(arguments);
const args = [...arguments];
</pre>
</code></pre>
<div class="warning">
<p>对参数使用slice会阻止某些JavaScript引擎中的优化 (比如 V8 - <a class="external" href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments" rel="noopener">更多信息</a>)。如果你关心性能，尝试通过遍历arguments对象来构造一个新的数组。另一种方法是使用被忽视的<code>Array</code>构造函数作为一个函数：</p>
<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
</pre>
<pre><code class="language-javascript">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
</code></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); // 'undefined'
<pre><code class="language-javascript">console.log(typeof arguments); // 'undefined'
// arguments 对象只能在函数内使用
function test(a){
console.log(a,Object.prototype.toString.call(arguments));
@@ -43,13 +43,13 @@ test(1);
1 "[object Arguments]"
1 undefined
number
*/</pre>
*/</code></pre>
<p>可以使用索引确定单个参数的类型。</p>
<pre class="brush: js">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre>
<pre><code class="language-javascript">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</code></pre>
<h3 id="对参数使用扩展语法">对参数使用扩展语法</h3>
<p>您还可以使用<a href="Reference/Global_Objects/Array/from" title="Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。"><code>Array.from()</code></a>方法或<a href="Reference/Operators/Spread_operator">扩展运算符</a>将参数转换为真实数组：</p>
<pre class="brush: js">var args = Array.from(arguments);
var args = [...arguments];</pre>
<pre><code class="language-javascript">var args = Array.from(arguments);
var args = [...arguments];</code></pre>
<h2 id="Properties" name="Properties">属性</h2>
<dl>
<dt><code><a href="Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt>
@@ -64,7 +64,7 @@ var args = [...arguments];</pre>
</dl>
<h2 id="Examples" name="Examples">例子</h2>
<h3 id="遍历参数求和">遍历参数求和</h3>
<pre class="brush: js">function add() {
<pre><code class="language-javascript">function add() {
var sum =0,
len = arguments.length;
for(var i=0; i&lt;len; i++){
@@ -74,81 +74,81 @@ var args = [...arguments];</pre>
}
add() // 0
add(1) // 1
add(1,2,3,4); // 10</pre>
add(1,2,3,4); // 10</code></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) {
<pre><code class="language-js">function myConcat(separator) {
var args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}</pre>
}</code></pre>
<p>你可以传递任意数量的参数到该函数，并使用每个参数作为列表中的项创建列表。</p>
<pre class="brush:js">// returns "red, orange, blue"
<pre><code class="language-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>
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</code></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" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">list<span class="punctuation token" style="color: #999999;">(</span></span>type<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">list<span class="punctuation token" style="color: #999999;">(</span></span>type<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
<span class="keyword token" style="color: #0077aa;">var</span> result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"&lt;"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> type <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"l&gt;&lt;li&gt;"</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="keyword token" style="color: #0077aa;">var</span> args <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> Array<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">.</span>slice<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">call<span class="punctuation token" style="color: #999999;">(</span></span>arguments<span class="punctuation token" style="color: #999999;">,</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> args<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">join<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"&lt;/li&gt;&lt;li&gt;"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"&lt;/li&gt;&lt;/"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> type <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"l&gt;"</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // end list
</span>
<span class="keyword token" style="color: #0077aa;">return</span> result<span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span></code></pre>
<span class="punctuation token" style="color: #999999;">}</span></code></code></pre>
<p>你可以传递任意数量的参数到该函数，并将每个参数作为一个项添加到指定类型的列表中。例如：</p>
<pre class="brush:js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> listHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="function token" style="color: #dd4a68;">list<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"u"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"One"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Two"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Three"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> listHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="function token" style="color: #dd4a68;">list<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"u"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"One"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Two"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Three"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="comment token" style="color: #708090;">/* 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;"
*/</span></code>
</pre>
</code></pre>
<h3 id="剩余参数、默认参数和解构赋值参数">剩余参数、默认参数和解构赋值参数</h3>
<p><code>arguments</code>对象可以与<a href="Reference/Functions/Rest_parameters">剩余参数</a>、<a href="Reference/Functions/Default_parameters">默认参数</a>和<a href="Reference/Operators/Destructuring_assignment">解构赋值</a>参数结合使用。</p>
<pre class="brush: js">function foo(...args) {
<pre><code class="language-javascript">function foo(...args) {
return args;
}
foo(1, 2, 3); // [1,2,3]
</pre>
</code></pre>
<p>在严格模式下，<a href="Reference/Functions/Rest_parameters">剩余参数</a>、<a href="Reference/Functions/Default_parameters">默认参数</a>和<a href="Reference/Operators/Destructuring_assignment">解构赋值</a>参数的存在不会改变 <code>arguments</code>对象的行为，但是在非严格模式下就有所不同了。</p>
<p>当非严格模式中的函数<strong>没有</strong>包含<a href="Reference/Functions/Rest_parameters">剩余参数</a>、<a href="Reference/Functions/Default_parameters">默认参数</a>和<a href="Reference/Operators/Destructuring_assignment">解构赋值</a>，那么<code>arguments</code>对象中的值<strong>会</strong>跟踪参数的值（反之亦然）。看下面的代码：</p>
<pre class="brush: js">function func(a) {
<pre><code class="language-javascript">function func(a) {
arguments[0] = 99; // 更新了arguments[0] 同样更新了a
console.log(a);
}
func(10); // 99
</pre>
</code></pre>
<p>并且</p>
<pre class="brush: js">function func(a) {
<pre><code class="language-javascript">function func(a) {
a = 99; // 更新了a 同样更新了arguments[0]
console.log(arguments[0]);
}
func(10); // 99
</pre>
</code></pre>
<p>当非严格模式中的函数<strong>有</strong>包含<a href="Reference/Functions/Rest_parameters">剩余参数</a>、<a href="Reference/Functions/Default_parameters">默认参数</a>和<a href="Reference/Operators/Destructuring_assignment">解构赋值</a>，那么<code>arguments</code>对象中的值<strong>不会</strong>跟踪参数的值（反之亦然）。相反, <code>arguments</code>反映了调用时提供的参数：</p>
<pre class="brush: js">function func(a = 55) {
<pre><code class="language-javascript">function func(a = 55) {
arguments[0] = 99; // updating arguments[0] does not also update a
console.log(a);
}
func(10); // 10</pre>
func(10); // 10</code></pre>
<p>并且</p>
<pre class="brush: js">function func(a = 55) {
<pre><code class="language-javascript">function func(a = 55) {
a = 99; // updating a does not also update arguments[0]
console.log(arguments[0]);
}
func(10); // 10</pre>
func(10); // 10</code></pre>
<p>并且</p>
<pre class="brush: js">function func(a = 55) {
<pre><code class="language-javascript">function func(a = 55) {
console.log(arguments[0]);
}
func(); // undefined
</pre>
</code></pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>