Résumé et partage des opérations courantes sur les tableaux JavaScript

Cet article vous apporte des connaissances sur les opérations courantes sur les tableaux en javascript, y compris les problèmes liés à la création de tableaux, à la détermination s'il s'agit de tableaux, aux conversions de type tableau et de tableau, et à la déduplication de tableau. J'espère qu'il sera utile à tout le monde.

Recommandations associées : Tutoriel d'apprentissage Javascript

Création de tableaux

La création de tableaux est une compétence de base, et ses méthodes incluent principalement les suivantes :

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]

Parmi elles, la méthode la plus couramment utilisée est le tableau littéral méthode.

Pour déterminer s'il s'agit d'un tableau

Les principales méthodes pour déterminer s'il s'agit d'un tableau sont :

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

Généralement, la méthode la plus couramment utilisée devrait être la méthode isArray. 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"

Conversion entre tableau et tableau

Les structures de données que nous rencontrons parfois ne sont pas de purs tableaux. Elles sont généralement classées comme "de type tableau". Les objets de type tableau peuvent être convertis en tableaux purs à l'aide des méthodes suivantes. :

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

Méthodes 5 et 6 Essentiellement, elles profitent toutes des caractéristiques de apply, c'est-à-dire que le deuxième paramètre (tableau ou de type tableau) passé à apply sera converti en une liste de paramètres, et ces paramètres seront ensuite envoyé à la méthode appelante (new Array ou concat).

Déduplication de tableau

La déduplication de tableau nécessite essentiellement de comparer si deux éléments sont égaux et, si c'est le cas, d'en supprimer un. Afin de juger avec précision, Object.is est utilisé ici à des fins de comparaison. 1) Utilisez set pour supprimer les doublons

set nécessite que les éléments ne soient pas répétés, vous pouvez donc supprimer les doublons après avoir converti le tableau en ensemble, puis le reconvertir en tableau.

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

2) Double boucle + splice

La boucle externe traverse tous les éléments et la boucle interne traverse tous les éléments après l'élément actuel. S'ils s'avèrent égaux, utilisez splice pour en supprimer un. N'oubliez pas que la boucle interne doit reculer d'un espace à chaque fois, sinon certains éléments seront manquésrrreee
3) Créez un nouveau tableau + inclut

🎜Créez un nouveau tableau et vérifiez si l'élément est déjà dans le tableau avant d'ajouter un élément au tableau. :🎜rrreee🎜4) réduire + inclut🎜rrreee🎜5) Créer un nouveau tableau + trier🎜🎜Selon le mécanisme de tri (appel de toStrng sur chaque élément, puis tri au niveau de la chaîne), égal les éléments sont rassemblés. Créez un nouveau tableau. Chaque fois avant d'ajouter un élément au tableau, vérifiez si l'élément est égal à l'élément précédent. Si c'est le cas, il s'agit d'un élément répété : 🎜rrreee🎜6) Créez un nouveau tableau + utilisez les attributs de l'objet 🎜🎜. Cette méthode est en fait la même que « nouveau tableau + inclut » Idem. Créez un nouveau tableau, et à chaque fois avant d'ajouter un élément au tableau, vérifiez si l'élément a été utilisé comme attribut de l'objet : 🎜rrreee🎜 Ce qui est détecté ici est le nom de l'attribut de l'objet, et le nom de l'attribut est essentiellement une chaîne, donc sera considéré comme obj[true] et obj["true"] sont égaux, ce qui donne l'élément true ou le l'élément "true" n'est pas Peut être placé dans un nouveau tableau🎜🎜7) L'utilisation de map🎜🎜 est essentiellement la même que la méthode ci-dessus, mais il n'est pas nécessaire de créer un nouveau tableau :🎜rrreee 🎜8) filter + indexOf🎜🎜Supprimez les éléments en double, comprenez-le sous un autre angle. Conservez les éléments dont 🎜index🎜 est égal à l'index🎜 lorsque 🎜Ces éléments peuvent être filtrés avec un filtre et placés dans un tableau : 🎜rrreee🎜L'inconvénient de l'utilisation de indexOf est qu'il ne peut pas juger correctement NaN. 🎜🎜Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!