Javascript--配列prototypeメソッドの探究

一、配列prototype方法の探究
1、元の配列を変更しない
1. concat()
これは配列接合方法で、2つの配列または複数の配列を接合し、2つの配列または複数の配列の内容を含む新しい配列を返すことができ、元の配列は変更されません.
メソッドには理論的にn個のパラメータを書き込むことができます.

const arr = [1,2];
var str = 'Hello';
var newArr = [3,4,5];
const ComArr = arr.concat(str, newArr)
console.log(ComArr)

//     
[1, 2, "Hello", 3, 4, 5]

2.find()
このメソッドは、配列内の最初の条件を満たす値を検索し、この値を返します.このメソッドには2つのパラメータがあります.
1つ目は配列の各項目で実行されるコールバック関数です.この関数には3つのパラメータがあります.1つ目は配列の各項目で、2つ目は配列の各項目の下表インデックスで、3つ目は遍歴した元の配列です.
2つ目はコールバック時thisの指向オブジェクト

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

//     
5

これを変更

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

//     
5

Tipsこの方法は条件を満たす値が見つかればすぐに戻り,後続の操作を停止し,見つからなければundefinedを返す.
3.findIndex()
この方法は上記の方法と同じと言えるが,唯一異なるのは,この方法が最初に条件を満たす値ではなく,この値が位置するインデックスの下付きインデックスを返し,見つからなければ−1を返すことである.

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

//     ，        
3

4.flat()
この方法は自分で再帰の深さのコピーを省くことができて、配列の中のすべての項目を遍歴して第1層の配列の中で1つの新しい配列を返すことができて、この方法は1つのパラメータだけあって、このパラメータは数値で、デフォルトは1で、数値はいくらで、再帰の何回を表すことができて、1つの固定的な語(Infinity)で、任意の深い再帰を表すことができます

const arr = [1, 2, 3, 5, 4, [3, 2, 1]]
const newArr = arr.flat()
console.log(newArr)

//     
[1, 2, 3, 5, 4, 3, 2, 1]

Tipsこの方法では配列内の空の値を除去することもできます
5.flatMap()
言わないで、興味があれば自分でflatMapを知ることができます
6.includes()
この方法は役に立つと言って、役に立たないと言っても役に立たない.多くの配列があるので、他の方法も目的を達成することができる.
この方法は配列の中にあるデータが存在するかどうかを検出するために使用され、存在しない場合はtrueを返し、この方法には2つのパラメータがあり、1つ目は私たちが検索するデータであり、2つ目はクエリーの開始位置(index)であり、存在しない場合はfalseの方法で継続し、デフォルトは0である.
Tipsオブジェクト配列ではこの方法は使用できません
Tipsこの方法は一般的な方法です
Tipsデータ検索大文字と小文字の区別

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['   ', '   ', '   '];
const arr3 = [{name: '   '}, {gender: ' '}, {age: 23}];
console.log(arr1.includes(5))
console.log(arr2.includes('   '))
console.log(arr3.includes({age: 23}))

//     
true
true
false

7.indexOf()
このメソッドはlength+indexと同じですが、このメソッドは指定された検索要素のインデックスを返し、なければ-1を返します.このメソッドには2つのパラメータがあります.1つ目はクエリーするデータで、2つ目は検索の開始位置インデックスです.

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['   ', '   ', '   '];
const arr3 = [{name: '   '}, {gender: ' '}, {age: 23}];
console.log(arr1.indexOf(5))
console.log(arr2.indexOf('   '))
console.log(arr3.indexOf({age: 23}))

//     
3
1
-1

8.lastIndexOf()
この方法は、includesメソッドの検索方向が逆の同じ方法と見なすことができ、indexOfは配列の最初のアイテムから最後のアイテムまで検索され、indexOfメソッドは配列の最後のアイテムから配列の最初のアイテムまで検索される.
このメソッドには2つのパラメータがあります.1つ目はクエリーするデータで、2つ目は検索の開始位置インデックスです.

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['   ', '   ', '   '];
const arr3 = [{name: '   '}, {gender: ' '}, {age: 23}];
console.log(arr1.lastIndexOf(5))
console.log(arr2.lastIndexOf('   '))
console.log(arr3.lastIndexOf({age: 23}))

//     
3
1
-1

Tipsこの検索は最後の項目であり、後から始まるが、インデックス値は最後から計算するのではなく、最初の項目から計算される.
9.join()
指定した分割記号によって配列内の各項目を分割して文字列に結合して返す方法で、記号が書き込まれていない場合は、デフォルトはカンマlastIndexOfです.

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['   ', '   ', '   '];
const arr3 = [{name: '   '}, {gender: ' '}, {age: 23}];
console.log(arr1.join())
console.log(arr2.join(''))
console.log(arr3.join('+'))

//     
1,2,3,5,4,3,2,1
         
[object Object]+[object Object]+[object Object]

10.keys()
この方法はどんな卵用があるか分からない.返されるのは,オブジェクトで、このオブジェクトには何も見えませんが、Array Iteratorまたはfor...inメソッドとそのfor...of値を印刷することができ、配列のインデックス値であることがわかります.

const arr2 = ['   ', '   ', '   '];
for(var key of arr2.keys()) {
  console.log(key)
}

//     
0
1
2

11.slice()
配列は浅いコピーで、指定した範囲内の配列要素をコピーして新しい配列を返しますが、元の配列は変わりません.
この方法には2つのパラメータがあり、最初のコピー開始インデックス値(含む)、デフォルトは0、2番目のコピー終了インデックス値(含まない)、デフォルト配列長
パラメータが負の場合は、配列の後ろから前へコピーします.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.slice(1, 2)
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   "]
["   "]

12.toString()
指定した配列のすべての要素を抽出し、カンマで区切られた文字列に戻します.keyメソッドと同じです.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.toString()
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   "]
   ,   ,   

13.values()
このメソッドは、配列の各要素を含むjoinオブジェクトを返します.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.values()
console.log(arr2)
console.log(arr4.next().value)
console.log(arr4.next().value)
console.log(arr4.next().value)

//     
["   ", "   ", "   "]
   
   
   

2、元の配列を変える
1.copyWithin()
この配列方法は複製置換であり、少し類似しているArray Iterator方法であり、この方法は3つのパラメータを受信し、第1のパラメータは置換の開始位置であり、第2のパラメータは複製を開始するデータインデックスであり、この項目を含み、第3のパラメータは複製を終了するデータインデックスであり、この項目を含まない場合、最後の項目まで続く.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.copyWithin(0, 3, 5);
console.log(newArr)

//     
[4, 5, 3, 4, 5]

このコードは、配列内のインデックス3からインデックス5までの間のすべてのデータをコピーし、配列インデックスが0の位置から値を割り当てます.
Tips
1、この方法は配列自体の内容しか変えられず、他の配列は変えられない
2、元の配列は変わりますが、長さは変わりません
3、3つのパラメータは整数でなければなりません.負数の場合は、配列の最後の項目から計算します.
4、開始パラメータと終了パラメータがない場合、配列全体をコピーし、最後に余分なものをクリアする
2.fill()
この方法は上のsplice()と似ていて、置き換えでもありますが、配列自体のデータで置き換えるのではなく、ユーザー自身が1つのデータを入力し、指定範囲のデータを置き換えます.
この方法は3つのパラメータを受信し、1つ目のパラメータはユーザーが入力したデータであり、2つ目のパラメータは置換を開始するデータインデックスであり、この項目を含み、デフォルトは0であり、3つ目のパラメータは置換を終了するデータインデックスであり、この項目は含まれず、最後の項目まで、デフォルトは配列長である.

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const newArr = arr.fill('?', 5, arr.length)
console.log(newArr)

//     
[1, 2, 3, 5, 4, "?", "?", "?"]

Tips
1.元の配列は変わりますが、長さは変わりません
2.この方法は汎用的な方法であるため、copyWithinが配列オブジェクトであることを要求しない(理解しない)
3.開始パラメータと終了パラメータが負の場合、後からではなく、:length+start,length+endのように置換範囲を計算します.
3.pop()
この方法は、配列の最後の要素を削除し、その要素値を返すと同時に、元の配列がその要素を減らすため、元の配列が変更されます.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.pop()
console.log(arr2)
console.log(arr4)

//     
["   ", "   "]
   

4.push()
この方法はthis方法とは逆に、配列の最後の要素の後ろに1つ以上の要素を追加し、元の配列に新しい要素を追加しますが、この方法は配列の長さではなく、追加後の配列の長さを返します.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.push('   ')
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   ", "   "]
4

5.shift()
この方法は、配列の最初の要素を削除し、元の配列がその要素を減らすと同時に、その要素値を返します.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.shift()
console.log(arr2)
console.log(arr4)

//     
["   ", "   "]
   

6.unshift()
このメソッドはpopメソッドとは逆に、配列の最初の要素の前に1つ以上の要素を追加し、元の配列に新しい要素を追加しますが、このメソッドは配列の長さではなく、追加後の配列の長さを返します.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.unshift('   ')
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   ", "   "]
4

7.reverse()
この方法は配列の値を順番に逆さまにすることであり,すなわち元の最後の要素が最初の要素になり,このようにして新しい配列を返し,元の配列を変えた.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.reverse()
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   "]
["   ", "   ", "   "]

8.sort()
配列ソート、その場アルゴリズムを通じて、文字のunicodeコードに基づいてソートします.この方法には比較関数パラメータがあります.ユーザーが自分のソート関数を入力した場合、この関数でソートします.関数には2つのパラメータがあります.1つ目は要素1で、2つ目は要素2で、両者を比較すると、元の配列が変わります.

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr4 = arr1.sort()
console.log(arr1)
console.log(arr4)

//     
[1, 2, 3, Array(3), 4, 5]
[1, 2, 3, Array(3), 4, 5]

ツールバーの

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
function Compare(a, b) {
  return a-b
}
const arr4 = arr1.sort(Compare)
console.log(arr1)
console.log(arr4)

//     
[1, 2, 3, 4, 5, Array(3)]
[1, 2, 3, 4, 5, Array(3)]

9.splice()
この方法では,配列コンテンツを削除したり,配列コンテンツを置換したりして,いずれも1つの配列を返す.
削除
削除に使用します.この方法は2つのパラメータしかありません.1つ目のパラメータは開始位置(含む)を削除し、2つ目のパラメータはデータの個数を削除し、削除されたデータからなる配列を返します.元の配列は削除されたデータを減少させます.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.splice(1,1)
console.log(arr2)
console.log(arr4)

//     
["   ", "   "]
["   "]

Tips
削除された個数が0の場合、空の配列が返されます.
置換
実際には、置換だけでなく、データの増加にも使用できます.また、元の方法、例えばshift、unshiftよりも柔軟な任意の場所を追加する必要があります.
置換には、少なくとも3つのパラメータがあり、1つ目のパラメータは削除を開始する位置、2つ目のパラメータは削除する数、3つ目からnつ目は置換するデータ、削除を開始する位置から置換し、置換されたデータからなる新しい配列を返します.

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.splice(1, 1, '   ')
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   "]
["   "]

Tips
1.削除された個数にかかわらず、置換されたデータが何個であるかにかかわらず、何個が置換されるか
2.削除個数が0の場合は新規で、元の削除先のデータが置き換えられ、元のデータが勢いよく後ろに移動すると同時に空の配列に戻ります.何も削除されていないため、データがありません

const arr2 = ['   ', '   ', '   '];
const arr4 = arr2.splice(1, 0, '   ', '   ', '   ')
console.log(arr2)
console.log(arr4)

//     
["   ", "   ", "   ", "   ", "   ", "   "]
[]

転載先:https://www.cnblogs.com/zjh-study/p/10959531.html