Einführung in gängige Array-Operationen in JavaScript (Codebeispiele)

Dieser Artikel bietet Ihnen eine Einführung in häufig verwendete Array-Operationen (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.

In der täglichen Entwicklung ist die Front-End-Datenverarbeitung unverzichtbar. Hier werden wir die neue Array-API von ES6/ES7/ES8 klären.

Flaches n-dimensionales Array

Array.flat() -- ES10

-Methode durchläuft das Array rekursiv entsprechend einer spezifizierbaren Tiefe und durchläuft alle Elemente bis zu den Elementen in Die Subarrays werden zu einem neuen Array zusammengefasst und zurückgegeben. Array.flat(n) ist die API für flache Arrays. Wenn der n-Wert unendlich ist, entfernt die Methode „flat()“ leere Elemente im Array 🎜>

[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)

Ersetzungsschema: Das Wesentliche besteht darin, die rekursive und Array-Zusammenführungsmethode concat zu verwenden, um Flachheit zu erreichen

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

Die Methode Array.from() erstellt eine neue Array-Instanz aus einem arrayähnlichen oder iterierbaren Array Objekt.

From und Set werden zum Deduplizieren von Arrays verwendet. Set ist ein neuer Datentyp in ES6, der sich nicht wiederholende Arrays definiert.

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]

Ersatzplan:

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]

Array-Entüberlappung und Zusammenführung

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]

Sort Array.sort()

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));

Ersatzplan: aufsteigende Reihenfolge

[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] 降序

Finden Sie den Maximalwert in einem Array Math.max()

Gibt den Maximalwert in einer bestimmten Menge von Zahlen zurück. Wenn mindestens eines der angegebenen Argumente nicht in eine Zahl umgewandelt werden kann, wird NaN zurückgegeben.

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]

Math.max() ist eine integrierte Methode des Math-Objekts, und der Parameter ist eine Zeichenfolge;

reduce ist die ES5-Array-API, und die Parameter umfassen eine Funktion und einen Standardanfangsbuchstaben value;

Die Funktion hat vier Parameter: pre(letzter Rückgabewert), cur(aktueller Wert), curIndex (aktueller Wertindex), arr (aktuelles Array)

Summenreduzierung

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

Ersetzungsschema: sum, Verwenden Sie Slice, um das Array abzufangen und zu ändern, und verwenden Sie dann die rekursive Summierung

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

merge concat

concat()-Methode, um zwei oder mehr Arrays zusammenzuführen. Diese Methode ändert das vorhandene Array nicht, sondern gibt ein neues Array zurück. Die

push()-Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück.

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]);

Ersatzplan:

[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);

Bestimmen Sie, ob der Wert enthalten ist

includes(), find(), findIndex() sind ES6-API

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

Ersetzungen Lösung:

[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

Klassenarray-Konvertierung Array.from() – ES6

Klassenarray: hat ein Längenattribut, aber das Attribut ist eine nicht negative Ganzzahl. Es verfügt nicht über einige Array-Methoden, aber das bedeutet nicht, dass keine Array-Methoden verwendet werden können.

Zum Beispiel: document.getElementsByTagName('p') gibt einen Array-ähnlichen Wert zurück

call, apply: ändert dies im Slice so, dass es auf Argumente zeigt, sodass Argumente auch die Array-Methode

Array aufrufen können. from is Erstellen Sie ein Array-ähnliches oder iterierbares Objekt als Array
Die Slice()-Methode im Array-Objekt schneidet das Array aus, ohne das ursprüngliche Array zu bearbeiten, das als flache Kopie bezeichnet werden kann

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

Array. Prototyp.slice Verständnis:

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);

Schleifenfüllung – ES6

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;
}

each – ES5; ob jedes Element die Bedingung erfüllt, einen booleschen Wert zurückgeben

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

einige so lange Wenn ein Element erfüllt ist, wird ein boolescher

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

Filter-Array-Filter zurückgegeben – Die ES5

-Methode erstellt ein neues Array, das alle Elemente des von der bereitgestellten Funktion implementierten Tests enthält.

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

Objekte und Arrays konvertieren Schlüssel, Werte, Einträge,

fromEntries

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

Der neue Map()-Konstruktor akzeptiert einen iterierbaren Eintrag. Mit Hilfe der Object.entries-Methode können Sie Object ganz einfach in Map konvertieren:

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}

[Verwandte Empfehlungen:

JavaScript-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonEinführung in gängige Array-Operationen in JavaScript (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!