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)
Nach dem Login kopieren
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]
Nach dem Login kopieren
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]Nach dem Login kopieren
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]
Nach dem Login kopieren
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]Nach dem Login kopieren
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));Nach dem Login kopieren
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] 降序
Nach dem Login kopieren
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]Nach dem Login kopieren
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) //4Nach dem Login kopieren
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)Nach dem Login kopieren
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]);Nach dem Login kopieren
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);Nach dem Login kopieren
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]Nach dem Login kopieren
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
Nach dem Login kopieren
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 如果不包含返回falseNach dem Login kopieren
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);Nach dem Login kopieren
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;
}Nach dem Login kopieren
each – ES5; ob jedes Element die Bedingung erfüllt, einen booleschen Wert zurückgeben
[1,2,3].fill(1)
[1,2,3].map(()=>0)
Nach dem Login kopieren
[1,2,3].every(item=>{return item>2})// falseNach dem Login kopieren
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})// trueNach dem Login kopieren
Objekte und Arrays konvertieren Schlüssel, Werte, Einträge,
fromEntries
[1,2,3].filter(item=>{return item >=2 });Nach dem Login kopieren
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}Nach dem Login kopieren
[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!
