es6 の 3 つのドットは何を意味しますか

es6 では、3 つのドット「...」は「展開演算子」を指し、関数呼び出しまたは配列の構築中に構文レベルで配列式または文字列を展開できます。これは、配列の構築時にも使用できます。リテラル オブジェクトの場合は、「キーと値」方式でオブジェクト式を展開します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 の 3 つのドットは何を意味しますか?

3 つのドットの本当の名前 (... ) は展開操作です シンボルは ES6 で新しく追加されたコンテンツです。関数呼び出し/配列構築中に配列式または文字列を構文レベルで展開できます。リテラル オブジェクトを構築するときに key- に従ってオブジェクト式を展開することもできます。値を展開する

リテラルは通常、[1,2,3] または {name:'chuicchui'} を参照します。単純な構築方法、多層のネストされた配列とオブジェクトの 3 つのポイントです。できることは何もありません。 do

端的に言うと、服を脱ぐことです。中括弧 ([]) であろうと中括弧 ({}) であろうと、関係ありません。すべて脱いでください。

#

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

#スプレッド演算子を使用する 8 つの方法

#1. 配列オブジェクトをコピーエキスパンダーを使用して配列をコピーすることは、ES6 で一般的に使用される操作です。

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]

展開演算子は配列をコピーします。

最初のレイヤーのみがディープ コピーです

。は、1 次元配列に使用されます。 拡張演算子のコピーはディープ コピーです。次のコードを見てください。

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

より明確に比較できるように、出力された結果を次のようにまとめます。

変数の説明#Operation#copyArraycopyArray結果から、配列の 2 番目の要素は 1 次元より大きい配列です。内部の要素を変更すると、元の変数の値もそれに応じて変更されます#オブジェクトをコピーします。コードは次のとおりです: 拡張オペレータ コピー オブジェクトは 1 つのレイヤーでのみディープ コピーを実行します。次のコードは上記のコードに基づいています:

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }

出力結果から、スプレッド演算子はオブジェクトの最初のレベルのディープコピーのみを作成します。

#Result
[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	配列のコピーminiCalendar
[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]	1. 配列の 2 番目の要素の最初の要素を 0 に再割り当てします; 2. 配列の 2 番目の要素に要素 8 を追加します; 3. 配列の 3 番目の要素を 2## に再割り当てします	##ミニカレンダー
[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]		const time = { year: 2021, month: 7, day: { value: 1, }, }; const copyTime = { ...time }; console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }

#厳密に言えば、スプレッド演算子はディープ コピーを実行しません

2. マージ演算

まず、次のように配列のマージを見てみましょう:

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

オブジェクトのマージ オブジェクトをマージするとき、キーがすでに存在する場合、同じキーを持つ最後のオブジェクトに置き換えられます。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }

3. パラメータの受け渡し

const sum = (num1, num2) => num1 + num2;

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13

上記のコードから、関数が定義するパラメータの数と、関数によって渡される値がわかります。展開演算子 いくつですか。

は、次のように math 関数と一緒に使用されます:

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10

4. 配列の重複排除

次のように、配列から重複を削除するには

Set とともに使用します:

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

5. 文字列から文字配列へ

String は反復可能なオブジェクトでもあるため、次のようにスプレッド演算子 ... を使用して文字配列に変換することもできます。次に、次のように文字列インターセプトを単純に実行できます:

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

6. NodeList Convert to array

#NodeList オブジェクトはノードのコレクションであり、通常は Node.childNodes などのプロパティや document.querySelectorAll などのメソッドによって返されます。

NodeList は配列に似ていますが、配列ではありません。find# など、Array のすべてのメソッドが含まれているわけではありません。 ##、map

、

filter

などですが、forEach() を使用して反復できます。 次のように、スプレッド演算子を使用して配列に変換できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const title = &quot;china&quot;; const short = [...title]; short.length = 2; console.log(short.join(&quot;&quot;)); // ch</pre><div class="contentsignin">ログイン後にコピー</div></div>7. 変数の構造化

次のように配列を分解します:

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

次のようにオブジェクトを分解します:

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

8. ログを出力します

反復可能なオブジェクトを出力するときは、次のように各項目に拡張文字を使用する必要があります。

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }

概要 ##Extension Operator... コードがより簡潔になり、ES6 ではより一般的な演算子になるはずです。

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド ]

以上がes6 の 3 つのドットは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。