この記事では、展開の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の、フロントエンドの可視化の深い研究があります。技能訓練や研修を考えプログラマにとって、キャリアプランニングのプログラマやプログラマは、金融投資に強い関心を持っています。