JavaScriptは、オペレータ(スプレッド演算子)導入拡大します

この記事では、展開のJavaScript演算子(演算子スプレッド)について説明します...この記事ではES6初心者のためです。

あなたは、オペレータ(スプレッド演算子)を展開することができ...、拡張文字列やオブジェクトの配列を。展開オペレータ(スプレッド)が3つのドット(...)であり、オブジェクトは、カンマで区切られた反復パラメータ系列に変換することができます。逆残りのパラメータとして。

配列

アレイは、例えば、第1、配列を作成します

const a = [1, 2, 3],
          b = [4,5,6];

あなたは簡単に配列を割り当てることができます。

const c = [...a]  // [1,2,3]

また、簡単に二つの配列をスプライシングされたことができます。

const d = [...a,...b] //  [1,2,3,4,5,6]

以下のようにスプライスすることができます

const d = [...a,4, 5, 6] //  [1,2,3,4,5,6]

B私たちは、配列の配列要素が完全に(新しい配列を生成せずに)後ろに挿入されている場合は、あなたがこれを行うことができます:

const a = [1,2,3];
a.push(...b);

B私たちは(新しい配列を生成しない)、配列の配列要素が完全に前面に挿入されている場合は、あなたがこれを行うことができます:

const a = [1,2,3];
a. unshift(...b);

オブジェクトのクラス配列は配列になります

オペレータは、実数配列、配列にオブジェクトを展開することができます:

var list=document.getElementsByTagName('a');
var arr=[..list];

オブジェクトの場合

オペレータはまた、オブジェクトを拡張するために使用することができます。次の方法でオブジェクトを複製することができます:

const newObj = { ...oldObj }

注意:プロパティの値がオブジェクトである場合は、それだけで深いコピーをオブジェクトへの参照を生成しませんが。それは、オペレータがすべての属性を再帰的に深いコピーを展開しません、です。そして、唯一の列挙属性は、プロトタイプチェーンをコピーしていない、コピーすることができます。

また、2つのオブジェクトをマージするために使用することができます。

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

もちろん、それはまた、以下の条件に適用することができます。

const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

複数のオブジェクトが同じ属性が合併している場合、前方物体の背後にあるオブジェクトは、次のような性質を、上書きします

const obj1 = { a: 111, b: 222 };
const obj2 = { b: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111,  b: 333, d: 444 }

const obj1 = {a:111,b:222}
const merged = {a:222,...obj1}; 
console.log(merged); // -> { a: 111,  b: 333 }

const obj1 = {a:111,b:222}
const merged = {...obj1,a:222}; 
console.log(merged); // -> { a: 222,  b: 333 }

オペレータを拡大することで対応する、文字の配列に文字列を置くことができます

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

上記のコードは、と等価です。

const hey = 'hey'
const arrayized = hey.split('') // ['h', 'e', 'y']

関数パラメータの受け渡し

関数に渡すパラメータの配列を介して、オペレータを展開して:

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

有するオブジェクトのイテレータインターフェース

インターフェース構造マップとセット、発電機能を有するイテレータオブジェクトは、次のような演算子を展開するために使用することができます。

var s = new Set();
s.add(1);
s.add(2);
var arr = [...s]// [1,2]

function  * gen() {
    yield 1;
    yield 2;
    yield 3;
}

var arr = [...gen()]  // 1,2,3

マップした場合、各キーと値を配列になります。

var m = new Map();
m.set(1,1)
m.set(2,2)
var arr = [...m] // [[1,1],[2,2]]

objがIteratorオブジェクトではないので、次のコードは、文句を言うことに注意してください:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

国民の関心番号へようこそ「ITman tert-ブチル彪。」tert-ブチル彪、開発経験、現職のシステムアーキテクト、テクニカルディレクター、技術的なトレーナー、プロのプランナーの10年を持っています。Javaのは、JavaScriptに精通。コンピュータグラフィックス、WebGLの、フロントエンドの可視化の深い研究があります。技能訓練や研修を考えプログラマにとって、キャリアプランニングのプログラマやプログラマは、金融投資に強い関心を持っています。

番号tert-ブチル彪ITman公共

おすすめ

転載: blog.51cto.com/13842424/2411533