ES6 ではどのような新しい拡張機能が配列に追加されますか?

1. スプレッド演算子の適用

...ES6 は、パラメーターの逆演算など、要素シンボルを展開することにより、rest 配列をカンマ区切りのパラメーターシーケンスに変換します。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

主に関数を呼び出すときに使用され、配列をパラメータシーケンスに変換します。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

特定のデータ構造は配列に変換できます

[...document.querySelectorAll('div')]

配列コピーの実装を容易にします。

const a1 = [1, 2];
const [...a2] = a1;
// [1,2]

配列の結合もより簡潔になりました

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

注: 浅いコピーはスプレッド演算子を介して実装され、参照が指す値の変更は新しい配列に同期的に反映されます。

以下の例を見るとより明確になります。

const arr1 = ['a', 'b',[1,2]];
const arr2 = ['c'];
const arr3  = [...arr1,...arr2]
arr[1][0] = 9999 // 修改arr1里面数组成员值
console.log(arr[3]) // 影响到arr3,['a','b',[9999,2],'c']

スプレッド演算子を構造化代入と組み合わせて配列を生成できます。

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   // []

配列の代入にスプレッド演算子を使用する場合、パラメータの最後の位置にのみ配置できます。配置しない場合はエラーが報告されます。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

文字列を実数の配列に変換できます

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Iterator インターフェイスを定義するオブジェクトは、スプレッド演算子を使用して実数の配列に変換できます。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Iterator インターフェイスのないオブジェクトでスプレッド演算子を使用すると、エラーが報告されます。、

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

2. コンストラクターに新しいメソッドが追加されました

コンストラクターに関して、配列に追加された新しいメソッドは次のとおりです。

Array.from()
Array.of()

Array.from()

2 種類のオブジェクトを実際の配列に変換します: 配列のようなオブジェクトとトラバース可能な（iterable）オブジェクト ( ES6 新しいデータ構造 Set とを含むMap)

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

2 番目のパラメーターを受け入れて各要素を処理し、処理された値を返された配列に入れることもできます。

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

値のセットを配列に変換するために使用されます

Array.of(3, 11, 8) // [3,11,8]

パラメータがない場合は空の配列が返されます。

パラメータが 1 つだけの場合、実際には配列の長さを指定します。

パラメータの数が 2 以上の場合、Array()パラメータで構成される新しい配列が返されます。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

3. インスタンスオブジェクトに追加された新しいメソッド

配列インスタンスオブジェクトの新しいメソッドは次のとおりです。

copyWithin()
find()、findIndex()
埋める（）
エントリ()、キー()、値()
含む()
flat()、 flatMap()

copyWithin()

指定された場所にあるメンバーを他の場所にコピーし (元のメンバーは上書きされます)、現在の配列を返します。

パラメータは次のとおりです。

target (必須): データを置き換える位置。負の値の場合は逆数を表します。
start (オプション): この位置からデータの読み取りを開始します。デフォルトは 0 です。負の値の場合は最後から数えることを意味します。
end (オプション): この位置に到達する前にデータの読み取りを停止します。デフォルトは配列の長さと同じです。負の値の場合は最後から数えることを意味します。

[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
// [4, 5, 3, 4, 5]

find()、findIndex()

find()条件を満たす最初の配列メンバーを検索するために使用されます。

このパラメータは、現在値、現在位置、元の配列の 3 つのパラメータを受け入れるコールバック関数です。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex条件を満たす最初の配列メンバーの位置を返します。または、条件を満たしているメンバーがない場合は返します。-1

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

thisどちらのメソッドも、コールバック関数をバインドするために使用されるオブジェクトである2 番目のパラメーターを受け入れることができます。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

埋める（）

配列に指定された値を入力します

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

パディングの開始位置と終了位置を指定する 2 番目と 3 番目のパラメーターも受け入れます

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

塗りつぶされた型がオブジェクトの場合、それは浅いコピーであることに注意してください。

エントリ()、キー()、値()

keys()values()これは、キー名、キー値、およびentries()キー値ペアの走査です。

or (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"

含む()

配列に指定された値が含まれているかどうかを判断するために使用されます

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

メソッドの 2 番目のパラメータは、検索の開始位置を示します。デフォルトは次のとおりです。0

パラメータが負の数値の場合、逆数の位置を示します。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

flat()、 flatMap()

元のデータに影響を与えることなく、配列をフラット化し、新しい配列を返します。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()デフォルトでは、1 つのレイヤーのみが「フラット化」されます。複数のレイヤーのネストされた配列を「フラット化」したい場合は、メソッドのパラメーターを整数として記述し、フラット化するレイヤーの数を示しますflat()。は1です

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

flatMap()このメソッドは、元の配列の各メンバーに対して関数を実行します。これはを実行するのと同じでありArray.prototype.map()、その後、flat()戻り値で構成される配列に対してメソッドを実行します。このメソッドは、元の配列を変更せずに新しい配列を返します。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()このメソッドには、トラバーサル関数をバインドするために使用される 2 番目のパラメーターを持つこともできます。this

4. 配列内のスペース

配列内のギャップは、配列の特定の位置に値が存在しないことを意味します。

ES6 は、ギャップを、スプレッド演算子、、、、、、およびundefinedを含むに明示的に変換します。Array.fromcopyWithin()fill()entries()keys()values()find()findIndex()

毎日の執筆に隙間を作らないようにすることをお勧めします

5. 選別の安定性

sort()デフォルトを安定した並べ替えアルゴリズムに設定する

const arr = [
  'peach',
  'straw',
  'apple',
  'spork'
];

const stableSorting = (s1, s2) => {
  if (s1[0] < s2[0]) return -1;
  return 1;
};

arr.sort(stableSorting)
// ["apple", "peach", "straw", "spork"]

ソート結果では、「前」strawはspork元の順序と一致します。