よく使用される 18 個の配列メソッドの JavaScript の概要

ご存知のとおり、バックエンドからのデータの要求とデータの処理は、フロントエンド エンジニアにとって必須のスキルです。バックエンドから要求されたデータは配列の形式でフロントエンドに返されることが多いため、配列処理メソッドの重要性が高まります。想像; 配列の処理方法 MDN のドキュメントはたくさんありますが、学習時に重要な点を理解できず、結果が 2 倍になることがよくありますが、よく使われる 18 個の配列の処理方法をまとめましたのでご安心ください。

。forEach

(

は関数であり、内部的に渡される関数の最初の仮パラメータは項目配列内の各項目の値です。 2 番目はインデックス番号インデックスです。戻り値は未定義です。
実行例は次のとおりです。

コンソール出力

filter() メソッド

filter() メソッドは、渡されるパラメータは forEach メソッドと同じですが、戻り値は配列です。実際のアプリケーションは、条件を満たす配列をフィルタリングします。取得したデータ。
実行例は次のとおりです。

コンソール出力は次のとおりです。

map() メソッド

map() メソッドによって渡されるパラメータも上記と同じで、その戻り値も新しい配列です。map() メソッドは実行中の配列の各項目に対して同じ処理を実行できます。例は次のとおりです。

コンソール出力:

findIndex() メソッド

findIndex() メソッドは、その名前が示すように、条件を満たす配列内の最初の項目のインデックス番号を返します。見つからない場合は、-1 を返します。渡されるパラメータは上記と同じで、実行例は次のとおりです:

let arr = [1, 3, 3, 4, 5, 6, 7]
//findIndex メソッドは、条件を満たす最初の項目のインデックス番号を返します。見つからない場合は、-1 を返します。
const res = arr.findIndex((item) => item > 5)
console.log(res)

コンソール出力結果:

find() メソッド

find() メソッドは、条件を満たす最初に見つかった項目を返します。渡されるパラメータは上記と同じです。実行例は次のとおりです。

let arr = [1, 3, 3, 4, 5, 6, 7]
//find() は item を検索し、条件を満たす最初の item を返します。見つかった場合は、未定義を返します。
const res2 = arr.find((項目) => {
  返品アイテム > 5
})
console.log(res2)

コンソール操作の結果は次のとおりです。

some() メソッド

some() メソッドで渡されるパラメータは上記と同じで、条件を満たす項目が見つかった場合は true を返します。例は次のとおりです。 :

arr = [1, 3, 3, 4, 5, 6, 7] とします

// 一部のメソッドはブール値を返します const bl = arr.some((item) => {
  返品アイテム > 5
})
コンソールログ(bl)

Every() メソッド

Every() メソッドで渡されるパラメータは上記と同じで、戻り値はブール値ですが、各項目は true を返す条件を満たしている必要があります。例は次のとおりです

。 、3、3、4、5、6、7]
//every() はブール値を返しますが、true を返す前にフィルタリング条件を通過する必要があります
const bl2 = arr.every((currentValue) => {
  現在の値を返します < 10
})
コンソールログ(bl2)

reduce() 誘導関数

reduce() 関数の最初のパラメータは関数、2 番目のパラメータは一時変数 sum の型、最初のパラメータ関数には 4 つのパラメータがありますが、一般的に使用される最初のパラメータは一時変数の累積 (return)はこの値です)、2 番目のパラメーター項目です。 3 番目はインデックス、4 番目は配列自体です。コード例は次のとおりです。

let arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() 誘導関数 constPreviousValue = 0
const arrSum = arr.reduce((前の値, 現在の値) => {
  前の値 + 現在の値を返す
}、0)
console.log(arrSum)

コンソールの出力結果は次のとおりです。

concat() 配列の結合

concat() は 2 つの配列を結合し、結合された新しい配列を返します。 多次元配列 (配列内の配列) は結合できません。
コード例は次のとおりです。

let arr = [1, 3, 3, 4, 5, 6, 7]
 //concat は 2 つの配列を連結し、新しい配列を返します
const newArr3 = [2, 5, 5, 6, 6, 8]
 const concatArr = arr.concat(newArr3)
 console.log(concatArr)

元の配列を変更するメソッド

Push()/unshift()

Push()/unshift() メソッドは、それぞれ配列の最後と先頭に要素を追加し、戻り値は新しい配列の長さになります

。配列の処理方法が変わります 元の配列 const Arr = [1, 3, 5, 6, 7, 8, 9]
配列プッシュ(1)
コンソールログ(Arr)
コンソールログ(Arr)
const a = Arr.unshift(1)
console.log(a)

控制台输出结果如下：

Pop()/shift()

これら 2 つのメソッド Pop() は配列の最後の値を削除し、shift() は配列の最初の項目の値を削除します。戻り値は削除された項目です

。
コンソール.ログ(arr)
配列シフト(1)
console.log(arr)

コンソールの出力結果は次のとおりです。

sort()/reverse()

sort() メソッドは、関数 function(a, b){ return a - b } を使用して、降順でのソート順序を制御できます。関数が昇順である場合、パラメータの内部戻り値 a - b が降順の場合、戻り値 a + b は昇順になります。
reverse() は配列の反転、つまり配列の要素を逆の順序で配置するコード例です。

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort( (a, b) => {
  return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

splice() メソッドは、元の配列を変更し、削除された要素を含む新しい配列を返します。渡される最初のパラメータは、削除された開始要素のインデックス番号です。 2 番目のパラメータは削除された要素の数です。

arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr) とします。

その他の

flat()

flat() は、多次元配列を平坦化するために使用されます。渡されるパラメーターは配列の深さです。これは、配列の深さが無限であることを意味します。コード例は次のとおりです。 :

const Arr2 = [
  [1、2]、
  [23]、
  [4、5]、
  [5, 6],]console.log(Arr2.flat(Infinity))

控制台输出结果：

fill() は

配列を埋めることができます。 書き方: Array.fill(1, 2, 4) は、インデックス値 2 の要素から始まり、要素のインデックス番号 4 から始まる 1 で配列を埋めます。インデックス値は 4 要素です。塗りつぶされた要素はインデックス番号に対応する元の要素を上書きします。
コード例は次のとおりです。

const Arr2 = [
  [1、2]、
  [23]、
  [4、5]、
  [5, 6],]console.log(Arr2.fill(1, 0, 4))

コンソール出力結果: