diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/spread_syntax')
-rw-r--r-- | files/zh-cn/web/javascript/reference/operators/spread_syntax/index.html | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.html b/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.html index 0397ee8e96..3f21c5b960 100644 --- a/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/zh-cn/web/javascript/reference/operators/spread_syntax/index.html @@ -20,15 +20,15 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>函数调用:</p> -<pre class="syntaxbox notranslate">myFunction(...iterableObj);</pre> +<pre class="syntaxbox">myFunction(...iterableObj);</pre> <p>字面量数组构造或字符串:</p> -<pre class="notranslate">[...iterableObj, '4', ...'hello', 6];</pre> +<pre>[...iterableObj, '4', ...'hello', 6];</pre> <p>构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):</p> -<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> +<pre class="syntaxbox">let objClone = { ...obj };</pre> <h2 id="示例">示例</h2> @@ -38,19 +38,19 @@ translation_of: Web/JavaScript/Reference/Operators/Spread_syntax <p>如果想将数组元素迭代为函数参数,一般使用{{jsxref( "Function.prototype.apply")}} 的方式进行调用。</p> -<pre class="brush: js notranslate">function myFunction(x, y, z) { } +<pre class="brush: js">function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args);</pre> <p>有了展开语法,可以这样写:</p> -<pre class="brush: js notranslate"><code>function myFunction(x, y, z) { } +<pre class="brush: js"><code>function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args);</code></pre> <p>所有参数都可以通过展开语法来传值,也不限制多次使用展开语法。</p> -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +<pre class="brush: js">function myFunction(v, w, x, y, z) { } var args = [0, 1]; myFunction(-1, ...args, 2, ...[3]);</pre> @@ -58,13 +58,13 @@ myFunction(-1, ...args, 2, ...[3]);</pre> <p>使用 <code>new</code> 关键字来调用构造函数时,不能<strong>直接</strong>使用数组+ <code>apply</code> 的方式(<code>apply</code> 执行的是调用 <code>[[Call]]</code> , 而不是构造 <code>[[Construct]]</code>)。当然, 有了展开语法, 将数组展开为构造函数的参数就很简单了:</p> -<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1970年1月1日 +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1970年1月1日 var d = new Date(...dateFields);</font></font> </pre> <p>如果不使用展开语法, 想将数组元素传给构造函数, 实现方式可能是这样的:</p> -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { +<pre class="brush: js">function applyAndNew(constructor, args) { function partial () { return constructor.apply(this, args); }; @@ -96,7 +96,7 @@ console.log(new myConstructorWithArguments); <p>没有展开语法的时候,只能组合使用 <code>push</code>, <code>splice</code>, <code>concat</code> 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 通过字面量方式, 构造新数组会变得更简单、更优雅:</p> -<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +<pre class="brush: js">var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; </font></font> // ["head", "shoulders", "knees", "and", "toes"] </pre> @@ -105,7 +105,7 @@ var lyrics = ['head', ...parts, 'and', 'toes']; </font></font> <h4 id="数组拷贝copy">数组拷贝(copy)</h4> -<pre class="brush: js notranslate">var arr = [1, 2, 3]; +<pre class="brush: js">var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); @@ -115,7 +115,7 @@ arr2.push(4); <p><strong>提示:</strong> 实际上, 展开语法和 {{jsxref("Object.assign()")}} 行为一致, 执行的都是浅拷贝(只遍历一层)。如果想对多维数组进行深拷贝, 下面的示例就有些问题了。</p> -<pre class="brush: js notranslate">var a = [[1], [2], [3]]; +<pre class="brush: js">var a = [[1], [2], [3]]; var b = [...a]; b.shift().shift(); // 1 // Now array a is affected as well: [[2], [3]] @@ -125,28 +125,28 @@ b.shift().shift(); // 1 <p>{{jsxref("Array.concat")}} 函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法, 代码可能是下面这样的:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // 将 arr2 中所有元素附加到 arr1 后面并返回 var arr3 = arr1.concat(arr2);</pre> <p>使用展开语法:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2]; </pre> <p>{{jsxref("Array.unshift")}} 方法常用于在数组的开头插入新元素/数组. 不使用展开语法, 示例如下:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // 将 arr2 中的元素插入到 arr1 的开头 Array.prototype.unshift.apply(arr1, arr2) // arr1 现在是 [3, 4, 5, 0, 1, 2]</pre> <p>如果使用展开语法, 代码如下: [请注意, 这里使用展开语法创建了一个新的 <code>arr1</code> 数组, {{jsxref("Array.unshift")}} 方法则是修改了原本存在的 <code>arr1</code> 数组]:</p> -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +<pre class="brush: js">var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2] </pre> @@ -157,7 +157,7 @@ arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2] <p>浅拷贝(Shallow-cloning, 不包含 prototype) 和对象合并, 可以使用更简短的展开语法。而不必再使用 {{jsxref("Object.assign()")}} 方式.</p> -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; @@ -173,7 +173,7 @@ var mergedObj = { ...obj1, ...obj2 }; <p><strong>提示</strong>: 不能替换或者模拟 {{jsxref("Object.assign()")}} 函数:</p> -<pre class="notranslate"><code>var obj1 = { foo: 'bar', x: 42 }; +<pre><code>var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; const merge = ( ...objects ) => ( { ...objects } ); @@ -191,7 +191,7 @@ var mergedObj = merge ( {}, obj1, obj2); <p>在数组或函数参数中使用展开语法时, 该语法只能用于 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">可迭代对象</a>:</p> -<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +<pre class="brush: js">var obj = {'key1': 'value1'}; var array = [...obj]; // TypeError: obj is not iterable </pre> |