JavaScript 配列メソッドの詳細な例

参加する（）
push() と pop()
shift() と unshift()
選別（）
逆行する（）
連結()
スライス（）
スプライス（）
indexOf() と lastIndexOf()
各()
地図（）
フィルター（）
fill() (ES6 の新機能)
毎（）
いくつかの（）
（ES7）を含む
削減() と削減右()
toLocaleString() と toString()
find() と findIndex()
コピーウィズイン() (ES6)
flat() と flatMap() (ES6)
エントリ（）、キー（）、値（）（ES6）

導入

例示する

この記事では、JavaScript 配列メソッドを例とともに紹介します。

方法の紹介

join(): 指定された区切り文字を使用して配列内の各項目を文字列に連結します。

push(): 配列の末尾に新しい要素を追加します

pop(): 配列の最後の項目を削除する

shift(): 配列の最初の項目を削除します

unshift(): 配列の最初の位置に新しい要素を追加します

slice(): 条件に従っていくつかの要素を見つける

splice(): 配列の追加、削除、変更

fill(): このメソッドは、配列内の 1 つ以上の要素を特定の値で埋めることができます。

filter(): 「フィルター」関数

concat(): 2つ以上の配列を連結するために使用される

indexOf(): 配列内の現在の値の最初の出現のインデックスを検出します

lastIndexOf(): 配列内の現在の値の最後の出現のインデックスを検出します

every(): 配列内の各項目が条件を満たすかどうかを判定します

some(): 配列内に条件を満たす項目があるかどうかを確認します

include(): 配列に指定された値が含まれているかどうかを判定します

sort(): 配列の要素をソートする

逆順(): 配列の順序を逆にする

forEach(): 配列内の各項目をループします (ES5 以下)

map(): 配列内の各項目をループする (ES6)

copyWithin(): 配列内の指定された位置から配列内の別の指定された位置に要素をコピーするために使用されます。

find(): 一致する値を返す

findIndex(): 一致する位置のインデックスを返します

toLocaleString(), toString(): 配列を文字列に変換する

flat(), flatMap(): 配列をフラット化する

エントリ（）、キー（）、値（）：配列を走査する

配列の作成

作成方法

JavaScript には配列を作成するためのメソッドが合計 11 個あります。

[1、3、5];
新しい配列(3);
配列(3);
 
配列.apply(null、新しい配列(3))
配列.apply(null, 配列(3));
配列.apply(null, {長さ: 3});
 
//ES6 の書き込み Array.of(1, 2);
配列.from({長さ: 3});
配列(3).fill(2);
配列(...配列(3));
[...配列(3)]

例

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
<スクリプト>
    arr1 = [1, 3, 5]とします。
    arr2 = new Array(3);とします。
    arr3 = 配列(3)とします。
 
    arr4 = Array.apply(null, 新しいArray(3)) とします。
    arr5 = Array.apply(null, Array(3)) とします。
    arr6 = Array.apply(null, {長さ: 3}) とします。
 
    //ES6表記 let arr7 = Array.of(1, 2);
    arr8 = Array.from({length: 3}) とします。
    arr9 = Array(3).fill(2);とします。
    arr10 = Array(...Array(3))とします。
    arr11 = [...配列(3)]とする
 
    コンソールログ(arr1);
    コンソールログ(arr2);
    コンソールログ(arr3);
    コンソールログ(arr4);
    コンソールログ(arr5);
    コンソールログ(arr6);
    コンソールログ(arr7);
    コンソールログ(arr8);
    コンソールログ(arr9);
    コンソールログ(arr10);
    コンソールログ(arr11);
</スクリプト>
</本文>
</html>

簡単な結果:

詳細な結果:

見える：

次の2つの方法では要素とインデックスを作成できず、長さ属性のみを作成できます。

新しい配列(3);
配列(3);

他のメソッドでは、要素、インデックス、長さ属性を作成できます。

トラバースへの影響

forEach、for ... in、for ... of に対する効果は同じです。要素のない配列はスキップされ、要素 (undefined を含む) を持つ値のみが走査されます。

詳しい説明

Array.apply(null, {length: 2}) の原理

この記事では、Array.apply(null, {length: 2}) の原理を紹介します。

var arrayLike = {長さ: 2}

↓↓

配列.apply(null, arrayLike)

↓↓

Array(arrayLike[0], arrayLike[1]) // 空の配列の各要素の値をArray()メソッドに1つずつ渡します

↓↓

Array(undefined, undefined) // 空の配列の各要素の値は未定義です

//最終出力 [未定義、未定義]

マッピング変換

配列をさらに変換したい場合は、Array.from() メソッドの 2 番目の引数としてマッピング関数を渡すことができます。この関数は、配列オブジェクトの各値をターゲット形式に変換し、ターゲット配列の対応する位置に格納します。

関数 arga(...args) {  
     Array.from(args, value => value + 1) を返します。
}
 
arr = arga('arr', 26, 'pop'); とします。
console.log(arr);//['arr1',27,'pop1']

マッピング関数をオブジェクトで動作させる必要がある場合は、Array.from() メソッドに 3 番目の引数を手動で渡して、マッピング関数内で this 値を指定できます。

const ヘルパー = {
  差分: 1,
  追加(値) {
    戻り値 + this.diff;
  }
}
 
関数 translate() {
 //arguments は関数に渡される引数に対応する配列のようなオブジェクトです。 return Array.from(arguments, helper.add, helper); 
}
 
arr = translate('liu', 26, 'man'); とします。
console.log(arr); // ["liu1", 27, "man1"]

方法

参加する（）

join() メソッドは、配列内のすべての要素を文字列に変換するために使用されます。

要素は指定された区切り文字で区切られます。デフォルトでは、区切り文字としてカンマが使用されます。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3] (元の配列は変更されません)

join() メソッドを使用すると、文字列を繰り返すことができます。文字列と繰り返し回数を渡すだけで、繰り返される文字列が返されます。関数は次のとおりです。

関数 repeatString(str, n) {
    //長さ n+1 の空の配列が string を使用して文字列に連結され、n 個の文字列の繰り返しになります。 return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

push() と pop()

push() メソッドは、配列の末尾から配列に要素を追加します。 1 つ以上の要素を追加できます。

pop() メソッドは、配列の最後の要素を削除し、削除された要素を返すために使用されます。

var arr = ["リリー","ルーシー","トム"];
var count = arr.push("ジャック","ショーン");
console.log(カウント); // 5
console.log(arr); // ["リリー", "ルーシー", "トム", "ジャック", "ショーン"]
var item = arr.pop();
console.log(item); // ショーン
console.log(arr); // ["リリー", "ルーシー", "トム", "ジャック"]

shift() と unshift()

shift() メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます。

unshift() メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。

var arr = ["リリー","ルーシー","トム"];
var count = arr.unshift("ジャック","ショーン");
console.log(カウント); // 5
console.log(arr); //["ジャック", "ショーン", "リリー", "ルーシー", "トム"]
var item = arr.shift();
console.log(item); // ジャック
console.log(arr); // ["ショーン", "リリー", "ルーシー", "トム"]

選別（）

sort() メソッドは、配列の要素を並べ替えるために使用されます。

並べ替え順序はアルファベット順または数字順、昇順または降順で指定できます。

デフォルトの並べ替え順序はアルファベットの昇順です。

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51] (要素配列が変更されました)

上記の問題を解決するために、sort() メソッドは比較関数をパラメーターとして受け取り、どの値がどの値の前に来るかを指定できます。

比較関数は 2 つの引数を取り、最初の引数が 2 番目の引数より前になる場合は負の数を返し、2 つの引数が等しい場合は 0 を返し、最初の引数が 2 番目の引数より後になる場合は正の数を返します。以下に簡単な比較関数を示します。

関数比較(値1, 値2) {
    （値1 < 値2）の場合{
        -1 を返します。
    } それ以外の場合 (値1 > 値2) {
           1 を返します。
    } それ以外 {
        0を返します。
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(比較)); // [3, 13, 24, 51]

比較関数を使用して降順のソート結果を生成する必要がある場合は、比較関数によって返される値を交換するだけです。

関数比較(値1, 値2) {
    （値1 < 値2）の場合{
        1 を返します。
    } それ以外の場合 (値1 > 値2) {
        -1 を返します。
    } それ以外 {
        0を返します。
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(比較)); // [51, 24, 13, 3]

逆行する（）

Reverse() メソッドは、配列内の要素の順序を逆にするために使用されます。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13] (元の配列が変更されます)

連結()

concat() メソッドは、2 つ以上の配列を連結するために使用されます。

このメソッドは既存の配列を変更せず、連結された配列のコピーを返すだけです。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7] (元の配列は変更されません)

上記のテスト結果から、入力が配列でない場合、パラメータは配列の末尾に直接追加されることがわかります。入力が配列の場合、配列内の各項目が配列に追加されます。しかし、2 次元配列が渡された場合はどうなるでしょうか?

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, 配列[2]]
コンソール.log(arrCopy2[5]); //[11, 13]

スライス（）

slice(): 元の配列の指定された開始インデックスから終了インデックスまでの項目で構成される新しい配列を返します。

slice() メソッドは、返される項目の開始位置と終了位置の 1 つまたは 2 つのパラメーターを受け入れることができます。

引数が 1 つだけの場合、slice() メソッドは引数で指定された位置から現在の配列の末尾までのすべての項目を返します。

引数が 2 つある場合、このメソッドは開始位置と終了位置の間にある項目を返しますが、終了位置は含まれません。

負の数が現れた場合、その位置の数字は負の数に配列の長さを加えた値に置き換えられます（6）。

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2); //arr.slice(1,4) と同等
var arrCopy4 = arr.slice(-4,-1); // arr.slice(2,5) と同等
console.log(arr); //[1, 3, 5, 7, 9, 11] (元の配列は変更されません)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

スプライス（）

splice(): 非常に強力な配列メソッドで、さまざまな用途があり、削除、挿入、置換に使用できます。

1. 要素を削除し、削除された要素を返す

削除する最初の項目の位置と削除する項目の数という 2 つのパラメータを指定するだけで、任意の数の項目を削除できます。たとえば、splice(0,2) は配列の最初の 2 つの項目を削除します。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]

2. 指定されたインデックスに要素を追加する

開始位置、0 (削除する項目の数)、挿入する項目の 3 つのパラメータを指定することで、指定した位置に任意の数の項目を挿入できます。たとえば、splice(2,0,4,6) は、現在の配列の位置 2 から 4 と 6 を挿入します。

var 配列1 = [22, 3, 31, 12];
配列1.スプライス(1, 0, 12, 35); //[]
 
console.log(配列1); // [22, 12, 35, 3, 31, 12]

3. 指定されたインデックス位置の要素を置き換える

開始位置、削除する項目数、挿入する任意の項目数の 3 つのパラメータのみを指定することで、指定した位置に任意の数の項目を挿入したり、同時に任意の数の項目を削除したりできます。挿入されたアイテムの数は、削除されたアイテムの数と同じである必要はありません。たとえば、splice (2,1,4,6) は、現在の配列の位置 2 にある項目を削除し、位置 2 から 4 と 6 を挿入します。

定数配列1 = [22, 3, 31, 12];
配列1.スプライス(1, 1, 8); //[3]
 
console.log(配列1); // [22, 8, 31, 12]

indexOf() と lastIndexOf()

検索する項目と (オプションで) 検索を開始する場所を示すインデックスの 2 つの引数を取ります。

indexOf(): 配列の先頭 (位置 0) から逆方向に検索します。

lastIndexOf: 配列の末尾から前方に検索します。

どちらのメソッドも、配列内で検索されている項目の位置を返します。見つからない場合は -1 を返します。最初の引数を配列内の各項目と比較するときに、厳密な等価演算子が使用されます。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
コンソールログ(arr.lastIndexOf(5)); //5
コンソールログ(arr.indexOf(5,2)); //2
コンソールログ(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

各()

forEach(): 配列をループし、配列内の各項目に対して指定された関数を実行します。このメソッドには戻り値はありません。パラメータはすべて関数型であり、デフォルトで渡されます。

パラメータは、走査する配列の内容、対応する配列のインデックス、配列自体である。

var arr = [11, 22, 33, 44, 55];
arr.forEach(関数(x, インデックス, a){
    console.log(x + '|' + インデックス + '|' + (a === arr));
});

出力は次のようになります。

11|0|本当
22|1|本当
33|2|本当
44|3|本当
55|4|本当

地図（）

map() メソッドは、元の配列の要素に対して関数を呼び出すことによって処理された値を要素とする新しい配列を返します。

map() メソッドは、元の配列内の要素を配置された順序で処理します。

このメソッドは元の配列を変更しません。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(関数(item){
    アイテム*アイテムを返します。
});
console.log(arr2); //[1, 4, 9, 16, 25]

フィルター（）

filter(): 「フィルター」関数。配列内の各項目は指定された関数を実行し、フィルタリング条件を満たす配列を返します。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(関数(x, インデックス) {
    インデックス % 3 === 0 || x >= 8 を返します。
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]

fill() (ES6 の新機能)

fill() メソッドは、配列内の 1 つ以上の要素を特定の値で埋めます。単一の引数が渡されると、メソッドは配列全体をその引数の値で埋めます。

arr = [1, 2, 3, 'cc', 5]とします。
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

配列内のすべての要素を変更するのではなく、その一部のみを変更する場合は、オプションの開始位置と終了位置のパラメータを使用できます (終了位置の要素は除きます)。

3 つのパラメータ: 塗りつぶし値、開始位置パラメータ、終了位置パラメータ (終了位置の要素を除く)

arr = [1, 2, 3, 'arr', 5]とします。
 
arr.fill(1, 2);
console.log(arr); //[1,2,1,1,1]
 
arr.fill(0, 1, 3);
console.log(arr); //[1,0,0,1,1];

毎（）

every(): 配列内の各項目が条件を満たしているかどうかを判断します。すべての項目が条件を満たしている場合にのみ true が返されます。

var arr = [1, 2, 3, 4, 5];
 
var arr2 = arr.every(関数(x) {
    x < 10 を返します。
});
console.log(arr2); //true
 
var arr3 = arr.every(関数(x) {
    x < 3 を返します。
});
console.log(arr3); // 偽

いくつかの（）

some(): 配列内に条件を満たす項目があるかどうかを判断します。条件を満たす項目が 1 つでもある限り、true を返します。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(関数(x) {
    x < 3 を返します。
});
console.log(arr2); //true
var arr3 = arr.some(関数(x) {
    x < 1 を返します。
});
console.log(arr3); // 偽

（ES7）を含む

include() メソッドは、配列に指定された値が含まれているかどうかを判断するために使用され、含まれている場合は true を返し、含まれていない場合は false を返します。

パラメータは 2 つあり、最初のパラメータは検索する要素値 (必須) で、2 番目のパラメータは要素の検索を開始する位置 (オプション) です。

定数配列1 = [22, 3, 31, 12, 'arr'];
const include = 配列1.includes(31);
console.log(includes); // true
 
const include1 = array1.includes(31, 3); // インデックス 3 から開始し、31 が存在するかどうかを検索します console.log(includes1); // false

include では値を比較するために === 演算子が使用されることに注意してください。ただし、例外が 1 つあります。NaN はそれ自身と等しいと見なされます。

値を[1, NaN, 2]とします。
console.log(values.indexOf(NaN)); //-1
console.log(values.includes(NaN)); //true

削減() と削減右()

どちらのメソッドも、配列のすべての項目 (つまり、アキュムレータ) を反復処理し、最終的な戻り値を構築することを実装します。

Reduce() メソッドは、配列の最初の項目から開始し、最後まで 1 つずつ走査します。

ReduceRight() は配列の最後の項目から開始し、最初の項目まで順方向に移動していきます。

4 つのパラメーター: 前の値、現在の値、項目のインデックス、配列オブジェクト。

var値 = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    prev + cur を返します。
},10); //配列は初期値10で最初に追加され、デフォルト値0はオプションです
コンソール.log(合計); //25

toLocaleString() と toString()

配列を文字列に変換する

定数配列1 = [22, 3, 31, 12];
配列1にLocaleStringを代入します。
str1 を配列1.toString() に格納します。
 
console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

find() と findIndex()

find() メソッドと findIndex() メソッドはどちらも、コールバック関数と、コールバック関数内でこれを指定するために使用されるオプションの値という 2 つのパラメーターを受け入れます。

コールバック関数は、配列の要素、要素に対応するインデックス位置、および配列自体の 3 つのパラメータを受け入れることができます。

コールバック関数は、指定された要素が定義した条件を満たす場合に true を返す必要があり、コールバック関数が初めて true を返すと、find() メソッドと findIndex() メソッドの両方が検索を停止します。

2 つの違いは、find() メソッドは一致する値を返すのに対し、findIndex() メソッドは一致する位置のインデックスを返すことです。

arr = [1, 2, 3, 'arr', 5, 1, 9]とします。
 
console.log(arr.find((値、キー、arr) => {
    戻り値 > 2;
})); // 3 は一致する値を返します console.log(arr.findIndex((value, keys, arr) => {
    戻り値 > 2;
})); // 2 一致する位置のインデックスを返します

コピーウィズイン() (ES6)

copyWithin() メソッドは、配列内の指定された位置から配列内の別の指定された位置に要素をコピーするために使用されます。

このメソッドは既存の配列を変更します

//配列の最初の 2 つの要素を配列の最後の 2 つの位置にコピーします。let arr = [1, 2, 3, 'arr', 5];
 
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

デフォルトでは、copyWithin() メソッドは常に配列の末尾にコピーしますが、オプションのパラメータを指定して上書きする要素の数を制限することができます。この 3 番目のパラメータは、コピーが停止する位置を指定します (位置自体は含まれません)。

arr = [1, 2, 3, 'arr', 5, 9, 17]とします。
 
//インデックス 3 から貼り付け //インデックス 0 からコピー //インデックス 3 でコピーを停止 arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

flat() と flatMap() (ES6)

flat() メソッドは、配列を指定された深さまで再帰的に走査し、走査されたサブ配列内のすべての要素を新しい配列にマージして返します。

このメソッドは新しい配列を返しますが、元のデータには影響しません。

パラメータ: 抽出するネストされた配列の構造の深さを指定します。デフォルト値は 1 です。

定数arr1 = [0, 1, 2, [3, 4]];
 
コンソールにログ出力します。
// 期待される出力: [0, 1, 2, 3, 4]
 
定数 arr2 = [0, 1, 2, [[[3, 4]]]];
 
コンソールログ(arr2.flat(2));
// 期待される出力: [0, 1, 2, [3, 4]]
 
//Infinity を使用すると、任意の深さのネストされた配列を拡張できます var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(無限大);
// [1、2、3、4、5、6、7、8、9、10]
 
// 配列内の空の項目をフラット化します。元の配列に空きがある場合、flat() メソッドは空き部分をスキップします var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 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]

エントリ（）、キー（）、値（）（ES6）

entry()、keys()、values() – 配列を反復処理するために使用されます。これらはすべて、for...of ループを使用して反復処理できる反復子オブジェクトを返します。

違いは、keys() はキー名のトラバース、values() はキー値のトラバース、entries() はキーと値のペアのトラバースであることです。

for (let ['a', 'b'].keys() のインデックス) {  
    コンソールログ(インデックス);  
}  
// 0  
// 1  
 
for (let elem of ['a', 'b'].values()) {  
    console.log(要素);  
}  
// 'あ'  
// 'b'  
 
for (let [index, elem] of ['a', 'b'].entries()) {  
    console.log(インデックス、要素);  
}  
// 0 "a"  
// 1 "b"

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

文字を['a', 'b', 'c']とします。  
エントリを letter.entries() とします。  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c']

上記は、JavaScript 配列メソッドの例の詳細な説明です。JavaScript 配列メソッドの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: