拡張演算子
2777 ワード
まず、ご注文をお願いします
ES 6の新特性の拡張演算子は3つの点(…)であり、ES 6の可変パラメータ形式と同じです.
拡張演算子は非常に強力な演算子であり、ES 5で多くの煩雑な動作を簡略化することができます.
この演算子に対しては概念的なものが多くないので、ここでは簡単にその常用シーンを提示します.
1:可変パラメータ.(変数パラメータは、厳密には拡張演算子ではなく、残りの演算子ですが、これも3つの点です.覚えておくために一緒に書いておきました.)
配列の方法を使用するためには、Aray.prototype.slice.calを使用してまず配列に変換しなければなりません.
この問題はレスパラメータには存在しません.本当の配列です.配列特有の方法は全部使えます.
配列は複合データタイプで、直接コピーすると、新しい配列をクローンするのではなく、下のデータ構造を指すポインタをコピーするだけです.
拡張演算子は、行列を生成するために、構文化された値と組み合わせることができます.
実際には、任意のIteratorインターフェースを実装したオブジェクトは、拡張演算子で真の配列に変換することができます.
例えば、argmentsオブジェクトです.
ES 6の新特性の拡張演算子は3つの点(…)であり、ES 6の可変パラメータ形式と同じです.
拡張演算子は非常に強力な演算子であり、ES 5で多くの煩雑な動作を簡略化することができます.
この演算子に対しては概念的なものが多くないので、ここでは簡単にその常用シーンを提示します.
1:可変パラメータ.(変数パラメータは、厳密には拡張演算子ではなく、残りの演算子ですが、これも3つの点です.覚えておくために一緒に書いておきました.)
// :
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
// :
// arguments
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest
const sortNumbers = function(...numbers){
return numbers.sort();
}
アーグメンントオブジェクトは、配列ではなく、類似の配列のオブジェクトです.配列の方法を使用するためには、Aray.prototype.slice.calを使用してまず配列に変換しなければなりません.
この問題はレスパラメータには存在しません.本当の配列です.配列特有の方法は全部使えます.
// , :
// :
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
// ,
2.展開配列:拡張演算子は配列を展開することができますので、appy方法は不要です.配列を関数のパラメータに変えました.// :
// ES5
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
は、拡張演算子がappy方法の代わりになる現実的な例であり、Math.max方法を適用して、1つの配列の最大要素の書き方を簡略化して求める.// :
// ES5
Math.max.apply(null, [14, 3, 77])
// ES6
Math.max(...[14, 3, 77])
//
Math.max(14, 3, 77);
3.コピー配列:配列は複合データタイプで、直接コピーすると、新しい配列をクローンするのではなく、下のデータ構造を指すポインタをコピーするだけです.
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
//ES5
const a1 = [1,2];
const a2 = a1.concat();
//
// 。
const a1 = [1,2];
// :
const a2 = [...a1];
// :
const [...a2] =a1;
4.連結配列:var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
5.構成解除値との結合:拡張演算子は、行列を生成するために、構文化された値と組み合わせることができます.
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
/*
, , 。
*/
6.文字列を本物の配列に変換する:実際には、任意のIteratorインターフェースを実装したオブジェクトは、拡張演算子で真の配列に変換することができます.
例えば、argmentsオブジェクトです.
// :
[...'hello']
// [ "h", "e", "l", "l", "o" ]
備考:ES 2017では、オブジェクト操作に拡張演算子を組み合わせることもできます.でも、ここでは例をあげません.詳しいことを知りたいなら、阮一峰先生の章を参考にしてください.