ホームページ > 記事 > ウェブフロントエンド > ES6でスプレッド演算子を使用する方法
ES6でスプレッド演算子を使用する方法
- 青灯夜游オリジナル
- 2022-10-11 17:55:131876ブラウズ
es6 展開演算子の使用法: 1. 配列のコピー、構文 "[...array]"; 2. 配列のマージ、構文 "[...array1,...array2]"; 3. 追加要素を配列に追加する場合、構文は "[...array, 'element value']" です。 4. Math オブジェクトと一緒に使用して、最大値、最小値、または合計を計算します。 5. 無限のパラメーターを関数に渡します。構文は " const myFunc=(...args)=>{};"; 6. 文字列を文字配列に変換します。構文は "[...string]" です。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
es6 のスプレッド演算子の紹介
スプレッド演算子 ... ES6 で導入され、反復可能なオブジェクトを個々の要素に拡張します。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクトです。たとえば、配列 (配列の一般的なメソッド)、文字列、Map (Map についての理解)、Set (Set の使用方法)、DOM ノードなどです。 、など。
これは、配列をカンマで区切られた一連のパラメーターに変換する、残りのパラメーターの逆演算に似ています。スプレッド演算子は通常の関数パラメータと組み合わせて使用でき、その後ろに式を置くこともできますが、その後に空の配列が続く場合は効果がありません。
let arr = []; arr.push(...[1,2,3,4,5]); console.log(arr); //[1,2,3,4,5] console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5 console.log(...(1 > 0 ? ['a'] : [])); //a console.log([...[], 1]); //[1]
意味
代替関数の apply メソッド
スプレッド演算子は配列を拡張できるため、apply メソッドは不要になり、配列は関数パラメータに変換されます。
スプレッド演算子を使用する 10 の方法 (....)
1.配列のコピー
スプレッド演算子を使用して配列をコピーできますが、これは 浅いコピーであることに注意してください。
const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ]
この方法で基本的な配列をコピーできますが、マルチレベル配列や日付や関数を含む配列では機能しないことに注意してください。
2. 配列のマージ
2 つの配列を 1 つにマージしたいとします。初期段階では # を使用できます。 ##concat メソッドですが、スプレッド演算子を使用できるようになりました:
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]さまざまな配置を使用して、どれを最初に配置するかを示すこともできます。
const arr3 = [...arr2, ...arr1]; console.log(arr3); [4, 5, 6, 1, 2, 3];さらに、展開演算子は複数の配列を結合するのにも適しています:
const output = [...arr1, ...arr2, ...arr3, ...arr4];
3. 要素を配列に追加します
let arr1 = ['this', 'is', 'an']; arr1 = [...arr1, 'array']; console.log(arr1); // [ 'this', 'is', 'an', 'array' ]
4. オブジェクトに属性を追加します
user のオブジェクトがあるが、## が欠落しているとします。 #年齢属性。 <pre class="brush:php;toolbar:false">const user = {
firstname: 'Chris',
lastname: 'Bongers'
};</pre>この
オブジェクトに age を追加するには、スプレッド演算子を再度利用します。 <pre class="brush:php;toolbar:false">const output = {...user, age: 31};</pre>
5. Math() 関数を使用します数値の配列があり、これらの最大値を取得したいとします。数値、最小値または合計。
const arr1 = [1, -1, 0, 5, 3];
最小値を取得するには、スプレッド演算子と
Math.min メソッドを使用できます。 <pre class="brush:php;toolbar:false">const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1</pre>同様に、最大値を取得するには、次のようにします。
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(...arr1); console.log(max); // 5
ご覧のとおり、
を削除すると、最大値は5 になります。 5 の場合、3 が返されます。 スプレッド演算子を使用しないとどうなるのかと疑問に思われるかもしれません。
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(arr1); console.log(max); // NaN
JavaScript は配列の最大値がわからないため、
NaNが返されます。
6. 残りのパラメーター3 つのパラメーターを持つ関数があるとします。
const myFunc(x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
}
この関数は次のように呼び出すことができます:
myFunc(1, 2, 3);
しかし、配列を渡したい場合はどうなるでしょうか。
const arr1 = [1, 2, 3];
スプレッド演算子を使用して、この配列を関数に展開できます。
myFunc(...arr1); // 1 // 2 // 3
ここでは、配列を 3 つの個別のパラメーターに分割し、関数に渡します。
const myFunc = (x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3
7. 関数に無制限のパラメータを渡す次のように、無制限のパラメータを受け入れる関数があるとします。
const myFunc = (...args) => {
console.log(args);
};
複数のパラメーターを指定してこの関数を呼び出すと、次の状況が表示されます:
myFunc(1, 'a', new Date());
Return:
[
1,
'a',
Date {
__proto__: Date {}
}
]
その後、パラメーターを動的にループできます。
8.nodeList を配列に変換しますスプレッド演算子を使用してページ上のすべての
p## を取得するとします # :const el = [...document.querySelectorAll('p')];
console.log(el);
// (3) [p, p, p]
ここでは、dom から 3 p を取得したことがわかります。 これらの要素は配列であるため、簡単に反復処理できます。
const el = [...document.querySelectorAll('p')];
el.forEach(item => {
console.log(item);
});
// <p></p>
// <p></p>
// <p></p>
9. 変数の構造化オブジェクトの構造化
オブジェクトがあると仮定しますuser
:const user = {
firstname: 'Chris',
lastname: 'Bongers',
age: 31
};
これで、スプレッド演算子を使用してこれを個々の変数に分割できます。 const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }ここでは、user
オブジェクトとfirstname を firstname 変数に分解し、オブジェクトの残りの部分を rest# に分解します。 ##変数。 <p><strong>解构数组</strong></p><pre class="brush:php;toolbar:false">const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]</pre><p><span style="font-size: 18px;"><strong>10、展开字符串（字符串转字符数组）</strong></span></p>
<p>String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下：</p>
<pre class="brush:php;toolbar:false">const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]</pre>
<p>进而可以简单进行字符串截取，如下：</p>
<pre class="brush:php;toolbar:false">const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch</pre>
<p><span style="font-size: 18px;"><strong>11、数组去重</strong></span></p>
<p>与 Set 一起使用消除数组的重复项，如下：</p><pre class="brush:php;toolbar:false">const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1, 5, 9, 3, 7, 10, 4, 2 ]</pre><p><img src="https://img.php.cn/upload/image/299/731/678/1665481190710066.png" title="1665481190710066.png" alt="ES6でスプレッド演算子を使用する方法"></p>
<p><strong><span style="font-size: 18px;">12、打印日志</span></strong></p>
<p>在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下：</p><pre class="brush:php;toolbar:false">const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021</pre><p>【相关推荐：<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端开发">web前端开发</a>】</p>
以上がES6でスプレッド演算子を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。