JavaScriptの配列操作関数のまとめと共有

Array Advanced

、配列の基本概念といくつかの単純な配列要素操作関数を紹介しました。実際、配列はさらに多くの関数を提供します。

push 、 pop 、 shift 、およびunshift配列の両端で動作する関数です。これらについては上で説明したため、この記事では繰り返しません。

要素の削除 (オブジェクト メソッド) については

、前の記事で簡単に紹介しました。配列は特別なオブジェクトなので、オブジェクトの属性削除メソッドでdeleteを使用してみることができます。

例:

let arr = [1,2,3,4,5];delete arr[2];console.log(arr);

コードの実行結果は次のとおりです。

図の黄色の位置に注目してください。要素は削除されていますが、配列の長さは5のままで、削除された位置に余分な空があります。インデックス2の要素にアクセスすると、次の結果が得られます。

この現象の理由は、 delete obj.key key介して対応する値を削除すること、つまり、 delete arr[2]配列内の2:3キーと値のペアを削除することにより、添字2にアクセスすると、それがundefinedなるためです。 。

配列では、要素を削除した後、その要素の位置が後続の要素によって埋められ、配列の長さが短くなることがよくあります。

このとき、 splice()メソッドが必要になります。

splice()

splice()は非常に多用途であり、要素を削除するだけではないことに事前に注意する必要があります。構文は次のとおりです:

arr.splice(start[,deleteCount,e1,e2,...,eN])。 )

spliceメソッドstart位置からdeleteCount要素を削除し、その位置にe1,e2,e3などの要素を挿入します。

要素の削除

次の例では、配列から要素を削除できます:

let arr = [1,2,3,4,5]arr.splice(0,1);//最初の要素を削除します 1console.log(arr

)上記のコードは、配列の最初の位置にある1を削除します。実行結果は次のとおりです。

複数の要素を削除することは

let arr = [1,2,3,4,5];arr

のように、2 番目のパラメータを変更するだけです。

;//最初の 3 つの要素を削除 console.log(arr);//[4,5]

コードの実行結果は次のとおりです。

配列を切り詰めます。

startパラメータを 1 つだけ指定すると、配列のstart位置以降の要素がすべて削除されます

。 // Console.log(arr);// [1,2] 添え字 2 と後続のすべての要素からの
コード実行結果
を削除します

要素の置換

3 つ以上のパラメーターを指定した場合は、次のように配列要素を置換できます。

let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]

コードの実行結果は次のとおりです。

上記のコードは実際には 2 段階の操作を実行します。最初に0から始まる2要素を削除し、次に0位置に 3 つの新しい要素を挿入します。

要素の挿入

2 番目のパラメーター (削除数) を0に変更すると、要素を削除せずに要素のみを挿入できます。 たとえば、

let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]

戻り値

splice()関数は、削除された要素配列を返します。例:

let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]

コードの実行結果:

負のインデックス

負の数値を使用して要素の操作を開始する位置を示すことができます。たとえば、

let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']

コードの実行結果は次のとおりです。

slice()は次のとおりです:

arr.slice

([start],[end])

新しい配列はstartから始まり、 endで終わります。 、ただし、 end含まれません。

例:

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

コードの実行結果:

slice()負の添え字も使用できます。

let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr .スライス(-5,-1))//[1,2,3,4]

コードの実行結果は次のとおりです。

slice()メソッドにパラメーターを 1 つだけ指定した場合、そのパラメーターはsplice()と同様に配列の末尾に切り詰められます。

concat()

concat()関数は、複数の配列または他のタイプの値を長い配列に連結できます。構文は次のとおりです。

arr.concat(e1, e2, e3)

上記のコードは新しい配列を返します。新しい配列はarr e1 、 e2 、およびe3によって形成されます。

例:

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

コードの実行結果は次のようになります。

通常のオブジェクトは、オブジェクトと同じように見えても、全体として配列に挿入されます。次に例を示します。

let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj))

コードの実行結果:

ただし、オブジェクトにSymbol.isConcatSpreadableプロパティがある場合は、配列として扱われます。

let arr = [1,2]let obj = {0:'x',
           1:「はい」、
           [Symbol.isConcatSpreadable]:true、
           length:2 }console.log(arr.concat(obj))

コードの実行結果:

forEach() は

配列全体を走査し、各配列要素に演算関数を提供します。 構文:

let arr = [1,2]arr.forEach((itm,idx,array)=>{
    ...})

アプリケーション例:

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

コードの実行結果:

let arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
    console.log(`arr[${idx}] in [${array}] is ${itm}`)})

コードの実行結果:

indexOf 、 lastIndexOf 、および include は

文字列に似ています。 indexOf 、 lastIndexOf 、およびincludes 、クエリ配列内の指定された要素の添字とともに使用できます。

1. arr.indexOf(itm,start) : start位置から開始してitmを検索します。見つかった場合は添字を返し、そうでない場合は-1を返します。
2. arr.lastIndexOf(itm,start) : startまで配列全体を逆順に検索し、最初に見つかった添字 (つまり、配列内で最後に一致した項目) を返します。見つからない場合は、 -1を返します。
3. arr.includes(itm,start) : start位置からitmを検索し、見つかった場合はtrueを返し、それ以外の場合はfalseを返します。

例:

let arr = [1,2,3,4,5, 6,"7","8","9" ,0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10コンソール。 log(arr.includes(10))//falseconsole.log(arr.includes(9))//false

これらのメソッドは配列要素を比較するときに===使用するため、 falseと0は異なります。

NaN の処理

NaNは特別な数値であり、 NaN処理において 3 つの間には微妙な違いがあります。

let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole。 log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1

この結果の理由は、 NaN自体の特性に関連しています。つまり、 NaNどの数値にも等しくありません。 、彼自身も含めて。

これらの内容については、前の章で説明しました。忘れられた子供用の靴については、過去を振り返り、新しいものを学ぶことを忘れないでください。

Find と findIndex は

プログラミング プロセス中にオブジェクト配列に遭遇することがよくありますが、 ===使用してオブジェクトを直接比較することはできません。配列から条件を満たすオブジェクトを見つけるにはどうすればよいでしょうか。

このとき、 findとfindIndexメソッドを使用する必要があります。構文は次のとおりです。

let result = arr.find(function(itm,idx,array){
    //itm 配列要素 //idx 要素の添字 //配列配列自体 //判定関数を渡し、関数が true を返した場合は、現在のオブジェクトを返します。 itm})

たとえば、 name属性がxiaomingに等しいオブジェクトを探します。 :

arr =[にしてください
    {id:1,name:'暁明'},
    {id:2,name:'小紅'},
    {id:3,name:'xiaojunn'},]let xiaoming = arr.find(function(itm,idx,array){
    if(itm.name == 'xiaoming')return true;})console.log(xiaoming)

コードの実行結果:

条件を満たすオブジェクトが存在しない場合はundefinedが返されます。

上記のコードは、

let xiaoming = arr.find((itm)=> itm.name == 'xiaoming') のように簡略化することもできます。

実行結果はまったく同じです。

arr.findIndex(func)の目的はarr.find(func)唯一の違いは、 arr.findIndex 、オブジェクト自体が見つからない場合に、修飾されたオブジェクトの添え字を返すことです。 -1 。

filter

findとfindIndex要件を満たすオブジェクトを 1 つだけ検索できます。配列内に要件を満たすオブジェクトが複数ある場合は、 filterメソッドを使用する必要があります。

let results = arr.filter(function( itm、idx、配列){
    //find と同じ使用法ですが、要件を満たすオブジェクトの配列が返されます。 //見つからない場合は、空の配列が返されます})

例:

let arr =[
    {id:1,name:'暁明'},
    {id:2,name:'小紅'},
    {id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
    if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res)

コードの実行結果:

Map

arr.mapメソッドは、配列の各オブジェクトに対して関数を呼び出して、処理された配列を返すことができます。これは、配列の最も便利で重要なメソッドの 1 つです。

構文:

let arrNew = arr.map(function(itm,idx,array){
    //新しい結果を返す})

たとえば、文字列配列に対応する長さの配列を返します。

let arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//return itm.lengthconsole.log(arrNew)//[1,2,1,7]

コードの実行結果:

sort

arr.sort配列をその場でソートし、ソートされた配列を返します。ただし、元の配列は変更されているため、戻り値は実際には意味がありません。

いわゆるインプレースソートとは、新しい配列を作成するのではなく、元の配列空間内でソートすることを意味します

。 let arr = ['a','c','b']arr.sort()console.log(arr)

コードの実行結果：

デフォルトでは、 sortメソッドはアルファベット順にソートします。これは文字列のソートに適しています。他のタイプの配列をソートしたい場合は、

arr = [1,3,2] の

ように数値配列の

arr.sort(関数(a,b){
    if(a > b) 1 を返します。
    if(a < b)-1 を返します。
    return 0;})

コードの実行結果:

sort関数は内部的にクイック ソート アルゴリズムを使用するか、 timsortアルゴリズムを使用する可能性がありますが、これらについては気にする必要はなく、比較関数にのみ注意する必要があります。

比較関数は任意の数値を返すことができ、正の数値は>を意味し、負の数値は<を意味し、 0等しいことを意味するため、数値比較メソッドを簡略化できます。

let arr = [1,3,2]arr.sort(( a,b)=> a - b)

逆順にソートしたい場合は、 aとbの位置を入れ替えるだけです:

let arr = [1,3,2]arr.sort((a,b)=> b - a)

文字列

の並べ替え 文字列比較にstr.localeCompare(str1)メソッドを使用するのを忘れましたか?

let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))

コード 実行結果：

reverse

arr.reverseは逆配列に使用されます

let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]

これについては何も言うことはありません。

str.split() と arr.join()

文字列分割関数を覚えていますか?

を

文字配列に分割できます:

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']

ご存知のとおり、 split関数には 2 番目のパラメーターがあり、生成される配列の長さを制限できます

let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming','

メソッド

arr.join() 、 splitメソッドの逆で、配列を文字列に結合できます。

例:

let arr = [1,2,3]let str = arr.join(';')console.log(str)

コードの実行結果:

reduce、reduceRight

arr.reduceメソッドはarr.mapメソッドに似ています。どちらもメソッドを渡して、配列要素に対してこのメ​​ソッドを順番に呼び出します。異なる点は、 app.mapメソッドが配列要素を処理するときに、それぞれが処理されることです。要素の呼び出しは独立しており、 arr.reduce前の要素の呼び出し結果を現在の要素の処理メソッドに渡します。

構文:

let res = arr.reduce(function(prev,itm,idx,array){
    //prev は、前の要素の呼び出しによって返された結果です。 //init は、最初の要素が実行されるときに、前の要素の呼び出しの結果として機能します。}, [init])

想像してみてください。次のもので構成される配列要素の合計を実装する方法数字？現時点では、マップを実装する方法はありません。 arr.reduceを使用する必要があります。

let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15

コードの実行プロセスは次のとおりです。

arr.reduceRight目的はarr.reduceと同じですが、要素に対して右から左にメソッドが呼び出される点が異なります。

Array.isArray()

配列はオブジェクトの特殊なケースです。 typeof使用すると、両者の違いを正確に区別できません:

console.log(typeof {})//objectconsole.log(typeof [])//object

どちらもオブジェクトです。さらに判断するにはArray.isArray()メソッドを使用する必要があります:

console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true

some, each

arr.some(func)とarr.every(func)メソッドは数値をチェックするために使用され、実行メカニズムはmapと似ています。

some は、

渡されたメソッドを配列要素ごとに実行します。メソッドがtrueを返す場合、すべての要素がtrue true返さない場合は、 false返します。

Every は、

配列の各要素に対して渡されたメソッドを実行し、すべての要素がtrue返す場合はtrueを返し、それ以外の場合はfalseを返します。

例:

let arr = [1,2,3,4,5]//配列内に 2 より大きい要素があるかどうかを判断します console.log(arr.some((itm)=>{
    if(itm > 2)return true;}))//true//すべての要素が 2 より大きいかどうかを判断しますconsole.log(arr.every((itm)=>{
    if(itm > 2)return true;}))//false

thisArg

sortを除くすべての配列メソッドには、珍しい固定パラメータthisArgがあります。構文は次のとおりです。

arr.find(func,thisArg)arr.filter( func,thisArg)arr.map(func,thisArg)

thisArgを渡すと、 funcではthisになります。

このパラメータは通常の状況ではほとんど役に立ちませんが、 funcがメンバー メソッド (オブジェクトのメソッド) であり、 thisメソッド内で使用される場合、 thisArg非常に意味があります。

例:

let obj = {
    番号: 3、
    関数(itm){
        console.log(これ)
        return itm > this.num;//3 より大きい数値を検索}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr)

コードの実行結果:

ここで、 funcのthis出力が、渡したthisArg値であることがわかります。

thisArgの値を指定せずにオブジェクトのメンバー メソッドを使用すると、 thisはundefinedとなり、プログラム エラーが発生します。