重学JS:配列

Objectタイプを除いて、Arayタイプはおそらくjsの中で最も一般的なタイプです.そして、jsの発展とともに、配列内で提供される方法もだんだん増えてきました.配列に対する処理にも様々な騒动が出てきました.この文章はあなたを連れて配列の実例的な方法を学び直します.
行列変換

1、join()方法は、1つの文字列をセパレータとして受信し、セパレータで接続された配列文字列

を返す.
パラメータ:区切り文字列

const arr = [1, 2, 3]
console.log(arr.join('|')) // '1|2|3'

、toString()方法は、配列内の各値の文字列をスティッチングしたカンマ区切り文字列

を返す.
パラメータ:なし

const arr = [1, 2, 3]
console.log(arr.toString()) // '1,2,3'

スタック方法

1、push()方法は、任意の数のパラメータを受信し、それらを配列の最後に1つずつ追加し、修正された配列長

を返します.
引数:item...(複数の配列項目)

let arr = ['a', 'b', 'c']
const count = arr.push('d')
console.log(count) // 4
console.log(arr) // [ 'a', 'b', 'c', 'd' ]

、pop()方法は、配列の最後の項目を配列の最後から削除し、配列のlengthを減らし、除去された項

を返します.
パラメータ:なし

let arr = ['a', 'b', 'c']
const item = arr.pop()
console.log(item) // 'c'
console.log(arr) // [ 'a', 'b' ]

キューの使い方

1、shift()方法は、配列の最初の項目を除去し、この項を返します.配列長は1

を減らします.
パラメータ:なし

let arr = ['a', 'b', 'c']
const item = arr.shift()
console.log(item) // 'a'
console.log(arr) // [ 'b', 'c' ]

、unshit()方法は、配列の先端に任意の項目を追加し、新しい配列の長さ

を返します.
引数:item...(複数の配列項目)

let arr = ['a', 'b', 'c']
const count = arr.unshift('d', 'e')
console.log(count) // 5
console.log(arr) // [ 'd', 'e', 'a', 'b', 'c' ]

ソート方法

1、reverse()方法は、配列の各々を反転させ、反転された配列

を返すために使用される.
パラメータ:なし

let arr = ['a', 'b', 'c']
console.log(arr.reverse()) // [ 'c', 'b', 'a' ]

、sort()方法は、配列を並べ替え、並べ替えられた配列

を返す.
パラメータ:compreFunction(オプション)

-    compareFunction，sort()           toString()  ，          
```js
let arr = [2, 3, 10]
arr.sort()
console.log(arr) // [ 10, 2, 3 ]
```
'10'  '2'  
-   compareFunction(a,b)，       0， a  b  ，       0     ，       ， b  a  
```js
let arr = [2, 5, 3, 1]
arr.sort((a, b) => {
  if (a < b) {
    return -1
  } else if (a > b) {
    return 1
  } else {
    return 0
  }
})
console.log(arr) // [ 1, 2, 3, 5 ]
```

操作方法

、concat()方法は、現在の配列のコピーを作成し、受信したパラメータをこのコピーの最後に追加し、最後に新たに構築された配列

を返します.
パラメータ:item...(配列項目でもいいし、配列でもいいです.)

let arr = [1, 2, 3]
let newArr = arr.concat(4, 5, [6, 7])
console.log(newArr) // [ 1, 2, 3, 4, 5, 6, 7 ]

.slice()方法は、現在の配列の1つまたは複数に基づいて新しい配列

を作成する.
パラメータ:start(開始位置)、end(終了位置、オプション)

let arr = [1, 2, 3, 4]
let newArr = arr.slice(1, 3)
console.log(newArr) // [ 2, 3 ]

tip:sliceメソッドのパラメータに負がある場合、配列長にこの数を加えて該当する位置を決定します.

、splice()の使い方は様々ですが、使い方によって伝えられるパラメータも違います.

削除:任意の数の項目を削除して、2つのパラメータを指定できます.削除された最初の位置と削除された数は

です.

挿入:指定された位置に任意の数の項目を挿入できます.最初のパラメータ:挿入された位置、2番目のパラメータ0(削除0)、3番目のパラメータ以降に挿入される項目

代替:指定された位置の項目を置き換えることができます.1番目のパラメータを置換する位置、2番目の置換項目の個数、3番目のパラメータ以降の新しい項目

let arr = [1, 2, 3, 4, 5]
arr.splice(0, 1)
console.log(arr) // [ 2, 3, 4, 5 ]
arr.splice(1, 0, 'hello', 'world')
console.log(arr) // [ 2, 'hello', 'world', 3, 4, 5 ]
arr.splice(3, 1, 'js')
console.log(arr) // [ 2, 'hello', 'world', 'js', 4, 5 ]

位置について

1、indexOf()メソッドは、最初から指定項目を検索し、対応する配列の下に戻ります.リターン-1

が見つかりませんでした.
引数:item(検索する配列項目)、index(検索を開始する位置を指定します.オプション)

let arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(3, 3)) // -1

、lastIndexOf()方法の使い方はindexOfとほぼ一致していますが、配列の最後から

を検索するだけです.
反復方法
1、every()メソッドは、配列内の各動作に与えられた関数を与え、各項目に対してtrueを返すと、trueパラメータ:calback(item,index,arr)を返します.

let arr = [3, 4, 5, 6]
let result = arr.every((item) => item > 2)
console.log(result) // true

、some()メソッドは、行列のいずれかに対して関数を実行します.関数がいずれかの項目に対してtrueを返すと、true

に戻ります.
パラメータ:calback(item、index、arr)

let arr = [1, 2, 3, 4]
let result = arr.some((item) => item > 3)
console.log(result) // true

3、map()方法は、配列内の各項目に対して所定の関数を実行し、各関数呼び出しの結果からなる行列

を返します.
パラメータ:calback(item、index、arr)

let arr = [1, 2, 3]
let result = arr.map(item =>  item * 2)
console.log(result) // [ 2, 4, 6 ]

、filter()方法は、配列内の各動作に所定の関数を与え、この関数呼び出しを返してtrueのエントリからなる行列

を返します.
パラメータ:calback(item、index、arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.filter(item => item > 2)
console.log(result) // [3, 4, 5]

、forEach()方法は、配列の各々に所定の関数を実行し、戻り値

がない.
パラメータ:calback(item、index、arr)

let arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
  console.log(item) // 1 2 3 4 5
})

tip:itemを変更すると、巡回する配列項目に影響しません.
縮小方法

1、reduce()方法は、配列内の各項目に対して一つのreducer関数(昇順実行)を実行し、結果を単一の戻り値

にまとめる.
パラメータ:calback(accumullator)、current Value(配列内で処理されている要素)、current Index(配列中で処理されている要素のインデックスが、initial Valueを提供すると、インデックス番号が0になります.そうでないと、1になります.オプションで呼び出します.)、array(reducerの配列)、invialValue(calback関数を初めて呼び出したときの最初のパラメータの値として.初期値が与えられていない場合は、配列の最初の要素が使用されます.初期値のない空配列にreduceを呼び出したらエラーが発生します.オプションです.)

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
})
console.log(result) // 15 1+2+3+4+5

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
}, 10)
console.log(result) // 25 10+1+2+3+4+5

、reduceRight()方法の使い方はreduce()方法と一致していますが、redeceRight()方法の呼び出しは配列の最後から始まり、前へ

を巡回します.
ES 6新規方法

1、from()方法は、同様の配列のオブジェクトおよびエルゴード可能なオブジェクトを配列

に変換する.
パラメータ:arrayLike(行列に変換したい擬似配列オブジェクトまたは反復可能オブジェクト)、mapFn(パラメータが指定されている場合、新しいグループ数の各要素はこのコールバック関数を実行します.オプション)、thisArg(コールバック関数を実行する場合、thisオブジェクトはオプションです.)

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike)) // [1, 2, 3]

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike, (item) => item * 2)) // [2, 4, 6]

実際の応用では、Dom操作で返したセットと関数内部のargmentsオブジェクトに多く適用されます.

、of()方法は、パラメータの数またはタイプ

を考慮せずに、可変数パラメータを有する新しい配列例を作成する.
パラメータ:item...(任意のパラメータは、配列内の要素に順番に戻ります.)

let result = Array.of(2, 3, 4)
console.log(result) // [ 2, 3, 4 ]

、copyWithin()方法は、現在の配列の内部で、指定された位置のメンバーを他の位置にコピーして、現在の配列

に戻る.
パラメータ:target(この位置からデータの入れ替えを開始します)、start(この位置からデータを読み取り始めます.デフォルトは0です.負の値が逆数を表すなら、オプションです.)、end(この位置までデータの読み取りを停止します.デフォルトは配列長です.負の値であれば、逆数を表します.)

let arr = [1, 2, 3, 4, 5]
arr.copyWithin(0, 3, 5)
console.log(arr) // [ 4, 5, 3, 4, 5 ]

4、find()方法は、条件に合致する最初の配列メンバを見つけるために使用され、条件に適合していない場合はundefined

に戻る.
パラメータ:calback(item、index、arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.find(item => item > 3)
console.log(result) // 4

、findIndex()方法の使い方はfind()方法と似ています.最初の条件に合致するメンバーの位置を返します.条件に該当しない場合は-1

に戻ります.

、fill()方法は、終了インデックス

を含まない、開始インデックスから終了インデックスまでの1つの配列のすべての要素を固定値で満たす.
パラメータ:value(配列要素の値を充填)、start(先頭インデックス、オプション)、end(インデックス終了、オプション)

let arr = [1, 2, 3, 4, 5]
arr.fill(6, 2, 5)
console.log(arr) // [ 1, 2, 6, 6, 6 ]

、entries()、keys()、values()の3つの配列は方法を遍歴して、1つのエルゴードオブジェクトを返して、entries()キーのペアの遍歴、keys()キーの名前のエルゴード、values()キーの値のは

を遍歴します.
パラメータ:なし

let arr = ['a', 'b', 'c']
for (let idx of arr.keys()) {
  console.log(idx) // 0 1 2
}
for (let item of arr.values()) {
  console.log(item) // 'a' 'b' 'c'
}
for (let [idx, item] of arr.entries()) {
  console.log(idx + '---' + item) // '0---a' '1---b' '2---c'
}

8、includes()方法は、1つの配列が指定された値を含むかどうかを判断するために用いられ、もしtrueに戻ることが含まれるならば、false

に戻る.
パラメータ:value(検索する要素)、start(検索開始位置、オプション)

let arr = ['a', 'b', 'c']
console.log(arr.includes('a')) // true
console.log(arr.includes('d')) // false

、flat()方法は、指定された深さに従って配列を巡回し、全ての要素とエルゴードされたサブアレイの要素とを新しい配列に戻して

を返す.
パラメータ:depth(配列のネスト構造の深さを抽出するには、デフォルトは1、オプション)

let arr = ['a', 'b', ['c', 'd']]
let result = arr.flat() // ["a", "b", "c", "d"]
let arr1 = ['a', ['b', ['c']]]
//   Infinity     ，           
let result1 = arr1.flat(Infinity) // ["a", "b", "c"]

締め括りをつける
この文章はJSの配列でよく使われている方法を記録しています.つまり、配列の例の方法はそんなに多くあります.記憶力は悪いペン先に及ばないです.この文章を書いて記憶を深めます.同時に、皆さんにも役立つように願っています.間違いや不備なところがあれば、ご叱正を歓迎します.好きなら、歓迎します.