mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-17 08:26:32 +08:00
语法高亮,滚动条美化,设置页面调整
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user