Introduction aux opérations courantes sur les tableaux en JavaScript (exemples de code)

Cet article vous présente une introduction aux opérations de tableau couramment utilisées en JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le développement quotidien, le traitement des données front-end est indispensable. Ici, nous allons trier la nouvelle API de tableau d'ES6/ES7/ES8...

Tableau plat à n dimensions

Array.flat() -- ES10

la méthode parcourra de manière récursive le tableau selon une profondeur spécifiable et traversera tous les éléments jusqu'aux éléments dans les sous-tableaux sont combinés dans un nouveau tableau et renvoyés. Array.flat(n) est l'API pour les tableaux plats. n représente la dimension Lorsque n est Infinity, la dimension est infinie

[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]].flat(3) //[1,2,3,4,5]
[1,[2,3,[4,5]]].toString()  //'1,2,3,4,5'
[1,[2,3,[4,5],[...]]].flat(Infinity)

La méthode flat() supprimera les éléments vides du tableau :

var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Solution alternative : l'essence est d'utiliser la récursivité et la méthode de fusion de tableaux concat pour obtenir un aplatissement

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
flatten([1,[2,3]]) //[1,2,3]
flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]

La méthode Array.from() crée une nouvelle instance de tableau à partir d'un objet de type tableau ou itérable.

From et set sont utilisés pour dédupliquer des tableaux ; set est un nouveau type de données dans ES6 qui définit des tableaux non répétitifs. Array.from convertit un tableau de type tableau en un tableau.

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

Schéma de remplacement :

Array.prototype.distinct = function(){
    var arr = this,
        result = [],
        i,
        j,
        len = arr.length;
    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] === arr[j]){ 
                j = ++i;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
[1,2,3,3,4,4].distinct(); //[1,2,3,4]

Déchevauchement et fusion de tableaux

function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));

Sort Array.sort()

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序

Solution de remplacement : ordre croissant

Array.prototype.bubleSort=function () {
    let arr=this,
        len = arr.length;
    for (let outer = len; outer >= 2; outer--) {
        for (let inner = 0; inner <= outer - 1; inner++) {
            if (arr[inner] > arr[inner + 1]) {
                //升序
                [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
                //console.log([arr[inner], arr[inner + 1]]);
            }
        }
    }
    return arr;
}
[1,2,3,4].bubleSort(); //[1,2,3,4]

Rechercher la valeur maximale dans le tableau Math.max()

Renvoie la valeur maximale dans un ensemble de nombres donné. Si au moins un des arguments donnés ne peut pas être converti en nombre, NaN est renvoyé.

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
    return Math.max(prev,cur);
},0) //4

Math.max() est une méthode intégrée de l'objet Math, et le paramètre est une chaîne
reduce est l'API du tableau ES5, et les paramètres incluent des fonctions et une initiale par défaut ; valeurs ;
La fonction a quatre paramètres, pre (dernière valeur de retour), cur (valeur actuelle), curIndex (index de la valeur actuelle), arr (tableau actuel)

Réduire la somme

[1,2,3,4].reduce(function (prev, cur) {
    return prev + cur;
},0)

Plan de remplacement : somme, utilisez l'interception de tranche pour modifier le tableau, puis utilisez la sommation récursive

function sum(arr) {
    var len = arr.length;
    if(len == 0){
        return 0;
    } else if (len == 1){
        return arr[0];
    } else {
        return arr[0] + sum(arr.slice(1));
    }
}
sum([1,2,3,4]);

merge concat

la méthode concat() est utilisée pour fusionner deux tableaux ou plus . Cette méthode ne modifie pas le tableau existant, mais renvoie un nouveau tableau. La méthode
push() ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply( ['parsnip', 'potato'], ['celery', 'beetroot']);
console.log(vegetables);

Plan de remplacement :

let arr=[1,2,3,4];
[5,6].map(item=>{
    arr.push(item)
}) //arr值为[1,2,3,4,5,6]

Déterminer si la valeur est incluse

includes(), find(), findIndex() sont des API ES6

[1,2,3].includes(4)//false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3) //2 如果数组中无值返回-1

Remplacement :

[1,2,3].some(item=>{
    return item===3
}) //true 如果不包含返回false

Conversion de type tableau Array.from() — ES6

Semblable à un tableau : un attribut avec une longueur, mais l'attribut est un non- entier négatif. Il ne dispose pas de certaines méthodes de tableau, mais cela ne signifie pas qu'il ne peut pas utiliser de méthodes de tableau.
Par exemple : document.getElementsByTagName('p') renvoie une valeur de type tableau
call, apply : modifie cela dans la tranche pour pointer vers des arguments, afin que les arguments puissent également appeler la méthode tableau
Array. from est Créer un objet de type tableau ou itérable en tant que tableau
La méthode slice() dans l'objet tableau coupe le tableau sans utiliser le tableau d'origine, ce qui peut être appelé une copie superficielle

var a={
    0:"aa",
    1:"cc",
    2:"dd",
    length:3
}
var callArr = Array.prototype.slice.call(a);
var applyArr = Array.prototype.slice.apply(a)
var fromArr = Array.from(a)
console.log(a,callArr, applyArr, fromArr);

Array.prototype .slice comprend :

Array.prototype.slice = function(start,end){
    var result = new Array();
    start = start || 0;
    end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
    for(var i = start; i < end; i++){
        result.push(this[i]);
    }
    return result;
}

remplissage de boucle -- ES6

[1,2,3].fill(1)
[1,2,3].map(()=>0)

every -- ES5 si chaque élément remplit les conditions, renvoie une valeur booléenne

    [1,2,3].every(item=>{return item>2})// false

some renvoie une valeur booléenne tant qu'un des éléments est satisfait

    [1,2,3].some (item=>{return item>2})// true

filter array filter -- La méthode ES5

crée un nouveau tableau contenant tous les éléments du test implémenté par la fonction fournie.

[1,2,3].filter(item=>{return item >=2 });

Les objets et les tableaux convertissent les clés, les valeurs, les entrées,

fromEntries

Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}

le nouveau constructeur Map() accepte une entrée itérable. À l'aide de la méthode Object.entries, vous pouvez facilement convertir un objet en carte :

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

[Recommandations associées : Tutoriel vidéo 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!