拡張演算子

2777 ワード

まず、ご注文をお願いします
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では、オブジェクト操作に拡張演算子を組み合わせることもできます.でも、ここでは例をあげません.詳しいことを知りたいなら、阮一峰先生の章を参考にしてください.