JavaScript 配列の一般的な操作の概要と共有

この記事では、配列の作成、配列かどうかの判断、配列のような変換と配列の変換、配列の重複排除に関連する問題など、javascript での一般的な配列操作に関する関連知識を提供します。助けなければなりません。

関連する推奨事項: JavaScript 学習チュートリアル

配列の作成

配列の作成は、

const arr = [1,2,3]                   
// 数组字面量const arr = [,,,]                     
// 三元素空位数组（hole array）const arr = new Array(4)              
// [,,,,]const arr = new Array(4,2)            
// [4,2]const arr = Array.of(1,2,3)           
// [1,2,3]

その中でもよく使われるのが配列リテラル方式です。

配列かどうかを判断する

配列であるかどうかを判断する主な方法は次のとおりです。

// 方法一[1,2,3] instanceof Array   
// 方法二[1,2,3].constructor === Array
// 方法三Object.prototype.toString.call([1,2,3]) === '[object Array]'
// 方法四Array.isArray([1,2,3])
// 方法五（兼容写法）function isArray(arr){
    return Array.isArray ? 
        Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'}

一般的に最もよく使用される方法は isArray## です。 ＃。

配列様と配列の間の変換

私たちが時々遭遇するデータ構造は純粋な配列ではありません。それらは一般に「配列様」として分類されます。配列様は純粋な配列に変換できます。

const x = document.querySelectorAll('a');
// 方法一Array.prototype.slice.call(x);
// 方法二Array.from(x);Array.from(x,mapFn,thisArg);
// 方法三[...x]
// 方法四function toArray(x){
    let res = []
    for(item of x){
        res.push(item)
    }
    return res}
    // 方法五Array.apply(null,x)
    // 方法六[].concat.apply([],x)

メソッド 5 と 6 は基本的に apply の特性を利用しており、apply に渡された 2 番目のパラメーター (配列または配列のようなもの) はパラメーター リストに変換されます。 、これらのパラメータは呼び出しメソッド (new Array または concat) に送信されます。

配列の重複排除

配列の重複排除では、基本的に 2 つの要素が等しいかどうかを比較する必要があり、等しい場合は 1 つの要素を破棄します。正確に判断するために、ここでは

Object.is を比較に使用します。

1) 重複を削除するには set を使用します。

set では要素が繰り返されない必要があるため、配列をセットに変換した後に重複を削除し、それを配列に変換し直すことができます。

function unique(arr){
    return Array.from(new Set(arr))
    // return [...new Set(arr)]}

2) ダブル ループ スプライス

外側のループはすべての要素を横断し、内側のループは現在の要素以降のすべての要素を横断します。それらが等しいことが判明した場合は、スプライスを使用して 1 つを削除します。内側のループは毎回 1 スペース戻る必要があることに注意してください。そうしないと、一部の要素が失われます。

function unique(arr){
    for(let i = 0;i 3) 新しい配列を作成します。<h3></h3>新しい配列を作成し、追加する前に毎回確認します。要素を配列に追加します 要素が配列内にすでに存在するかどうか: <p></p><pre class="brush:php;toolbar:false">function unique(arr){
    const res = []
    arr.forEach((item,index) => {
        // 也可以 if(res.indexOf(item) == -1)，但是无法正确判断 NaN
        if(!res,includes(item)){
            res.push(item)
        }
    })}

4) インクルードを減らす

function unique(arr){
    return arr.reduce((acc,cur) => {
        // return acc.includes(cur) ? acc : acc.concat(cur)
        return acc.includes(cur) ? acc : [...acc,cur]
    },[])}

5) 新しい配列を作成します sort

ソートのメカニズムに従って(各要素に対して toStrng を呼び出し、文字列レベルでソートします)、等しい要素が一緒にクラスター化されるようにします。新しい配列を作成します。配列に要素を追加する前に、その要素が前の要素と等しいかどうかを確認してください。等しい場合、それは繰り返し要素です:

function unique(arr){
    arr.sort()
    const res = [arr[0]]
    for(let i = 1;i 6) 次を使用して新しい配列を作成します。オブジェクトの属性<h3></h3>このメソッドは、実際には「新しい配列にインクルードする」と同じです。新しい配列を作成し、要素を配列に追加する前に毎回、その要素がオブジェクトの属性として使用されているかどうかを確認します。 <p></p><pre class="brush:php;toolbar:false">// 对象属性值可以认为是元素重复的次数function unique(arr){
    const res = []
    const obj = {}
    arr.forEach((item,index) => {
        if(!obj[item]){
            res.push(item)
            obj[item] = 1
        } else {
            obj[item]++
        }
    })
    return res}

ここで検出されるのは、オブジェクトの属性名です。属性名は本質的に文字列であるため、

obj[true] と obj["true"] は等しいとみなされ、要素 true## になります。 # または要素 "true" が存在しない 新しい配列に入れることができます7) マップ

の使用は本質的に上記の方法と同じですが、新しい配列を作成する必要があります:

function unique(arr){
    let map = new Map()
    for(item of arr){
        if(!map.has(item)){
            map.set(item,true)
        }
    }
    return [...map.keys()]}

8) filter indexOf

重複する要素を削除します。これを理解するもう 1 つの方法は、

index

が次の要素と等しい要素を保持することです。 が最初に出現したときのindex。そのような要素はフィルターで除外できます。それを配列に入れます:

function unique(arr){
    return arr.filter((item,index) => index === arr.indexOf(item))}

indexOf を使用する欠点は、NaN を正しく判断できないことです。

関連する推奨事項:

JavaScript 学習チュートリアル

以上がJavaScript 配列の一般的な操作の概要と共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。