Zusammenfassung und gemeinsame Nutzung allgemeiner Vorgänge für JavaScript-Arrays

Dieser Artikel vermittelt Ihnen relevantes Wissen über gängige Array-Operationen in Javascript, einschließlich Fragen im Zusammenhang mit der Erstellung von Arrays, der Bestimmung, ob es sich um ein Array handelt, der Array-ähnlichen und Array-Konvertierung sowie der Array-Deduplizierung.

Verwandte Empfehlungen: Javascript-Lerntutorial

Erstellen von Arrays

Das Erstellen von Arrays ist eine grundlegende Fähigkeit, und seine Methoden umfassen hauptsächlich die folgenden:

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]

Unter diesen ist das Array-Literal die am häufigsten verwendete Methode Verfahren.

Bestimmen Sie, ob es sich um ein Array handelt.

Die wichtigsten Methoden zur Bestimmung, ob es sich um ein Array handelt, sind:

// 方法一[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]'}

Im Allgemeinen sollte die am häufigsten verwendete Methode die Methode isArray sein. 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)

方法五和六本质上都是利用了 apply 的特点，即传给 apply 的第二个参数（数组或者类数组）会被转换为一个参数列表，这些参数再送到调用的方法（new Array 或者 concat）中。

数组去重

数组去重，本质上都需要比较两个元素是否相等，如果相等，则抛弃一个元素。为了准确地判断，这里统一使用 Object.is 进行比较。

1）利用 set 去重

set 要求元素不重复，因此将数组转换为 set 之后就可以去重了，接着再转换回数组即可。

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

2）双重循环 + splice

外层循环遍历所有元素，里层循环遍历当前元素往后的所有元素，若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格，否则会遗漏掉某些元素

function unique(arr){
    for(let i = 0;i < arr.length;i++){
        for(let j = i + 1;i < arr.length;j++){
            if(Object.is(arr[i],arr[j])){
                arr.splice(j,1)
                j--
            }
        }
    }
    return arr}

3）新建数组 + includes

新建数组，每次往数组中添加元素之前都检查数组中是否已有该元素：

function unique(arr){
    const res = []
    arr.forEach((item,index) => {
        // 也可以 if(res.indexOf(item) == -1)，但是无法正确判断 NaN
        if(!res,includes(item)){
            res.push(item)
        }
    })}

4）reduce + includes

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

根据 sort 的机制（在每个元素上调用 toStrng，之后在字符串层面进行排序），让相等的元素聚集在一起。新建数组，每次往数组中添加元素之前都检查该元素是否等于前面的元素，是则属于重复元素：

function unique(arr){
    arr.sort()
    const res = [arr[0]]
    for(let i = 1;i < arr.length;i++){
        if(!Object.is(arr[i],arr[i-1])){
            res.push(arr[i])
        }
    }
    return res}

6）新建数组 + 利用对象属性

这种方法其实和“新建数组 + includes”一样。新建数组，每次往数组中添加元素之前都检查该元素是否已经作为对象的属性：

// 对象属性值可以认为是元素重复的次数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"

Konvertierung zwischen Array-ähnlichen und Array-ähnlichen Datenstrukturen

Die Datenstrukturen, auf die wir manchmal stoßen, sind im Allgemeinen keine reinen Arrays. Sie werden im Allgemeinen mit Hilfe der folgenden Methoden in reine Arrays umgewandelt :

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

Methoden 5 und 6 Im Wesentlichen nutzen sie alle die Eigenschaften von apply, d an die aufrufende Methode gesendet (neues Array oder concat).

Array-Deduplizierung

Array-Deduplizierung erfordert im Wesentlichen den Vergleich, ob zwei Elemente gleich sind, und wenn ja, das Verwerfen eines Elements. Um eine genaue Beurteilung zu ermöglichen, wird hier zum Vergleich Object.is verwendet. 1) Verwenden Sie set, um Duplikate zu entfernen.

set erfordert, dass die Elemente nicht wiederholt werden. Sie können also Duplikate entfernen, nachdem Sie das Array in ein Set konvertiert haben, und es dann wieder in ein Array konvertieren.

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

2) Doppelte Schleife + Spleiß

Die äußere Schleife durchläuft alle Elemente nach dem aktuellen Element. Wenn festgestellt wird, dass sie gleich sind, verwenden Sie Spleiß, um eines zu entfernen. Denken Sie daran, dass die innere Schleife jedes Mal um ein Leerzeichen zurückgehen muss, da sonst einige Elemente übersehen werden Element zum Array hinzufügen. :rrreee
4) Reduzieren + Includes

rrreee🎜5) Erstellen Sie ein neues Array + Sortieren🎜🎜Gemäß dem Sortiermechanismus (Aufruf von toStrng für jedes Element und anschließendes Sortieren auf String-Ebene), gleich Elemente werden zusammengetragen. Erstellen Sie ein neues Array. Überprüfen Sie jedes Mal, bevor Sie ein Element zum Array hinzufügen. Wenn ja, handelt es sich um ein wiederholtes Element: 🎜rrreee🎜6) Erstellen Sie ein neues Array + verwenden Sie Objektattribute 🎜🎜 Diese Methode ist eigentlich dieselbe wie „Neues Array + enthält“ Das Gleiche. Erstellen Sie ein neues Array und überprüfen Sie jedes Mal, bevor Sie ein Element zum Array hinzufügen, ob das Element als Attribut des Objekts verwendet wurde: 🎜rrreee🎜 Was hier erkannt wird, ist der Attributname des Objekts, und der Attributname ist im Wesentlichen eine Zeichenfolge, daher wird als obj[true] und obj["true"] als gleich angesehen, was zu dem Element true oder dem führt Element "true" ist nicht vorhanden. Kann in ein neues Array eingefügt werden🎜🎜7) Die Verwendung von „map“ ist im Wesentlichen dasselbe wie die obige Methode, es besteht jedoch keine Notwendigkeit, ein neues Array zu erstellen:🎜rrreee 🎜8) filter + indexOf🎜🎜Entfernen Sie doppelte Elemente. Behalten Sie die Elemente bei, deren 🎜Index🎜 dem Index entspricht, wenn 🎜zum ersten Mal angezeigt wird. Solche Elemente können durch Filter herausgefiltert und in ein Array eingefügt werden: 🎜rrreee🎜Der Nachteil der Verwendung von indexOf besteht darin, dass NaN nicht korrekt beurteilt werden kann. 🎜🎜Verwandte Empfehlungen: 🎜Javascript-Lern-Tutorial🎜🎜🎜

Das obige ist der detaillierte Inhalt vonZusammenfassung und gemeinsame Nutzung allgemeiner Vorgänge für JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!