ES6でスプレッド演算子を使用する方法

青灯夜游
リリース: 2022-10-11 17:55:13
オリジナル
1872 人が閲覧しました

es6 展開演算子の使用法: 1. 配列のコピー、構文 "[...array]"; 2. 配列のマージ、構文 "[...array1,...array2]"; 3. 追加要素を配列に追加する場合、構文は "[...array, 'element value']" です。 4. Math オブジェクトと一緒に使用して、最大値、最小値、または合計を計算します。 5. 無限のパラメーターを関数に渡します。構文は " const myFunc=(...args)=>{};"; 6. 文字列を文字配列に変換します。構文は "[...string]" です。

ES6でスプレッド演算子を使用する方法

このチュートリアルの動作環境: 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 のオブジェクトがあるが、## が欠落しているとします。 #年齢属性。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const user = { firstname: &amp;#39;Chris&amp;#39;, lastname: &amp;#39;Bongers&amp;#39; };</pre><div class="contentsignin">ログイン後にコピー</div></div>この

user

オブジェクトに age を追加するには、スプレッド演算子を再度利用します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const output = {...user, age: 31};</pre><div class="contentsignin">ログイン後にコピー</div></div>

5. Math() 関数を使用します数値の配列があり、これらの最大値を取得したいとします。数値、最小値または合計。

const arr1 = [1, -1, 0, 5, 3];
ログイン後にコピー

最小値を取得するには、スプレッド演算子と

Math.min

メソッドを使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(...arr1); console.log(min); // -1</pre><div class="contentsignin">ログイン後にコピー</div></div>同様に、最大値を取得するには、次のようにします。

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, &#39;a&#39;, new Date());
ログイン後にコピー

Return:

[
  1,
  &#39;a&#39;,
  Date {
    __proto__: Date {}
  }
]
ログイン後にコピー

その後、パラメーターを動的にループできます。

8.nodeList を配列に変換しますスプレッド演算子を使用してページ上のすべての

p## を取得するとします # :

const el = [...document.querySelectorAll(&#39;p&#39;)];
console.log(el);
// (3) [p, p, p]
ログイン後にコピー
ここでは、dom から 3 p

を取得したことがわかります。

これらの要素は配列であるため、簡単に反復処理できます。

const el = [...document.querySelectorAll(&#39;p&#39;)];
el.forEach(item => {
  console.log(item);
});
// <p></p>
// <p></p>
// <p></p>
ログイン後にコピー

9. 変数の構造化

オブジェクトの構造化

オブジェクトがあると仮定しますuser

:

const user = {
  firstname: &#39;Chris&#39;,
  lastname: &#39;Bongers&#39;,
  age: 31
};
ログイン後にコピー
これで、スプレッド演算子を使用してこれを個々の変数に分割できます。
const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// &#39;Chris&#39;
// { lastname: &#39;Bongers&#39;, age: 31 }
ログイン後にコピー

ここでは、

user

オブジェクトと

firstnamefirstname 変数に分解し、オブジェクトの残りの部分を rest# に分解します。 ##変数。

解构数组

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]
ログイン後にコピー

10、展开字符串(字符串转字符数组)

String 也是一个可迭代对象,所以也可以使用扩展运算符 ... 将其转为字符数组,如下:

const title = "china";
const charts = [...title];
console.log(charts); // [ &#39;c&#39;, &#39;h&#39;, &#39;i&#39;, &#39;n&#39;, &#39;a&#39; ]
ログイン後にコピー

进而可以简单进行字符串截取,如下:

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch
ログイン後にコピー

11、数组去重

与 Set 一起使用消除数组的重复项,如下:

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 ]
ログイン後にコピー

ES6でスプレッド演算子を使用する方法

12、打印日志

在打印可迭代对象的时候,需要打印每一项可以使用扩展符,如下:

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021
ログイン後にコピー

【相关推荐:web前端开发

以上がES6でスプレッド演算子を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!