ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6 の新しい配列メソッドとは何ですか?

es6 の新しい配列メソッドとは何ですか?

青灯夜游
リリース: 2023-01-29 17:44:06
オリジナル
6980 人が閲覧しました

es6 配列メソッドには次のものが含まれます: 1. Array.from()、配列のようなオブジェクトまたはトラバース可能なオブジェクトを実際の配列に変換するために使用されます; 2. Array.of()、一連の値、Convert を変換するために使用されます。配列へのコピー; 3. copyWithin()、現在の配列内の指定された位置にあるメンバーを他の位置にコピーするために使用されます; 4. fill(); 5. find(); 6. findIndex(); 7. include() ; 8. エントリ(); 9. キー(); 10. 値()。

es6 の新しい配列メソッドとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

従来の配列オブジェクト メソッド

  • toSource() オブジェクトのソース コードを返します。
  • toString() 配列を文字列に変換し、結果を返します。
  • toLocaleString() 配列をローカル配列に変換し、結果を返します。
  • valueOf() は配列オブジェクトの元の値を返します
##reverseindexOf(), lastIndexOf()spliceforEachcopyWithinmapfillフィルターES6 配列method
元の配列を変更します 元の配列は変更しないでくださいarray
push、pop concat
unshift、shift join
sort slice
##一部
すべて
reduce,reduceRight
含む
finde、findIndex
entries()、keys()、values()


Array メソッド

Array.from()

は次の目的で使用されます。 2 種類のオブジェクトを組み合わせて、実際の配列に変換します。配列のようなオブジェクトと反復可能なオブジェクト (ES6 の新しいデータ構造 Set と Map を含む)。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
ログイン後にコピー

Array.from は、配列のマップ メソッドに似た 2 番目のパラメーターも受け入れることができ、各要素を処理し、処理された値を返された配列に入れるために使用されます。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
ログイン後にコピー

Array.of()

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

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
ログイン後にコピー

インスタンス メソッド

元の配列が変更されます

    copyWithin ()
  • 現在の配列内で、指定された位置にあるメンバーを他の位置にコピーし (元のメンバーは上書きされます)、現在の配列を返します。
array. copyWithin(target, start = 0, end = this.length);
ログイン後にコピー

target (必須): データの置換を開始する位置。負の値の場合は逆数を表します。
  • start (オプション): この位置からデータの読み取りを開始します。デフォルトは 0 です。負の値の場合は逆数を表します。
  • end (オプション): この位置に到達する前にデータの読み取りを停止します。デフォルトは配列の長さと同じです。負の値の場合は逆数を表します。
  • // 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]
    
    // -2相当于3号位,-1相当于4号位
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
    // [4, 2, 3, 4, 5]
    ログイン後にコピー
    fill()
  • 配列を指定された値で埋めます。
['a', 'b', 'c'].fill(7);   // [7, 7, 7]

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]
ログイン後にコピー

元の配列は変更されません

    find()
  • は検索に使用されます修飾された配列メンバーを出力します。そのパラメータはコールバック関数であり、戻り値が true である最初のメンバーが見つかるまで、すべての配列メンバーがコールバック関数を順番に実行し、その後そのメンバーを返します。一致するメンバーが存在しない場合は、未定義が返されます。
find メソッドのコールバック関数は、現在値、現在位置、元の配列の 3 つのパラメーターを受け入れることができます。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
ログイン後にコピー

    findIndex()
  • findIndex メソッドの使用法は find メソッドとよく似ており、最初の配列メンバーの位置を返します。条件を満たすメンバーがいない場合は、-1 が返されます。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
ログイン後にコピー

    includes()
  • 配列に指定された値が含まれているかどうかを示すブール値を返します。
[1, 2, 3].includes(2) // true
ログイン後にコピー

    entries()、keys()、および value()
  • ES6 には、entries()、keys()、および 3 つの新しいメソッドが用意されています。 value()、配列を走査するために使用されます。どちらも、for...of ループを使用して走査できるトラバーサー オブジェクトを返します。唯一の違いは、keys() は配列のキー名を走査し、values() は配列のキー値を走査することです。 、およびentries()メソッド。これは、値のキーと値のペアの走査です。
for (let index of [&#39;a&#39;, &#39;b&#39;].keys()) {
  console.log(index);
}
// 0
// 1

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

for (let [index, elem] of [&#39;a&#39;, &#39;b&#39;].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
ログイン後にコピー

for...of ループを使用しない場合は、トラバースするトラバーサー オブジェクトの次のメソッドを手動で呼び出すことができます。

let letter = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
let entries = letter.entries();
console.log(entries.next().value); // [0, &#39;a&#39;]
console.log(entries.next().value); // [1, &#39;b&#39;]
console.log(entries.next().value); // [2, &#39;c&#39;]
ログイン後にコピー

[推奨学習:

JavaScript 上級チュートリアル

]

以上がes6 の新しい配列メソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート