Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung von sechs Beispielen für die Verwendung von JS-Arrays

不言
Freigeben: 2020-07-10 17:58:12
Original
9554 Leute haben es durchsucht

Beim Erlernen von js ist es notwendig, die Methoden von js-Arrays zu beherrschen. Hier habe ich die häufig verwendeten Methoden in js-Arrays zusammengefasst, damit jeder voneinander lernen kann. Kommen wir ohne weitere Umschweife direkt zum Haupttext.

1. Von js-Objekten geerbte Methoden

Array ist ein spezielles Objekt, das toString() und toLocaleString( des Objektobjekts) erbt. und valueOf()-Methode

1.toString()

toString-Methode gibt eine durch Symbole getrennte Zeichenfolge zurück, die durch jeden Wert im Array verkettet ist. Die Zeichenfolge ist dieselbe wie Der von join() ohne Parameter zurückgegebene String

[1,2,3].toString()//'1,2,3'
['a','b','c'].toString()//'a,b,c'
[1,[2,3]].toString()//'1,2,3'
Nach dem Login kopieren

2.toLocaleString()

toLocaleString() ist die Lokalisierung der toString()-Version unter normalen Bedingungen das Gleiche wie bei der Rückgabe von toString(). Wenn die Zahl mehr als 3 Ziffern erreicht, wird sie automatisch formatiert, und das Datum kann auch mit

var a = 3333; a.toLocaleString()//3,333
var b = new Date; b.toLocaleString()//2018/7/13 下午3:43:39
Nach dem Login kopieren

3.valueOf()

formatiert werden

valueOf() gibt sich selbst zurück, wenn es um Array-Objekte geht

var a = [1,2,3]; a.valueOf()//[1,2,3];
a.valueOf() instanceOf() Array//true
Nach dem Login kopieren

js-Array-Konvertierungsmethode

1.join ()

Array.join() ist die umgekehrte Operation von Array.split(). Ersteres besteht darin, die Arrays in Parametereinheiten zu einer Zeichenfolge zusammenzuführen (Standard ist Komma), und letzteres ist es Schneiden Sie die Zeichenfolge in ein Array. Unterstützt Arrays und arrayähnliche Objekte, unterstützt jedoch keine Objekte

var a = [1,2,3,4,5]; a.join()//'1,2,3,4,5'
var b = [1,undefined,2,null,3]; b.join()//'1,,2,,3'
var c = Array.prototype; c.join.call('hello','-')//'h-e-l-l-o'
var d = {1:'a',2:'b',length:3}; d.join()//'a,b'
var e = {1:'a',2:'b'}; e.join()//''
Nach dem Login kopieren

3. js-Array-Datenstruktur-Operationsmethode

Die Datenstruktur von Das Array ist in eine Stapelstruktur (Last In, Last Out) und eine Warteschlangenstruktur (First In, First Out) unterteilt.

Stapelstruktur (Last In, Last Out):

1.push()

push() fügt am Ende nacheinander eine beliebige Anzahl von Parametern hinzu, ändert das ursprüngliche Array, modifiziert die Array-Länge und gibt

var a = [1,2]; a.push('11,22') - a//3 - [1,2,33,44]
var b = [3,4]; a.push([33.44]) - a//2 - [1,2,[33,44]]
Array.prototype.push.apply(a,b)//[1,2,3,4]
Array.prototype.push.call(a,b)//[1,2,[3,4]]
Nach dem Login kopieren
zurück

push() kann dem Objekt auch Parameter hinzufügen. Nach dem Hinzufügen wird das Objekt zu einem Array-Objekt. Der Schlüssel des neu hinzugefügten Elements entspricht dem Index des Arrays und das Objekt verfügt über ein Längenattribut

var c = {}; .call(c,1) //{0:1,length:1}

2.pop()

pop() entfernt den letzten Element im Array und gibt die Array-Länge zurück und ändert dann die Array-Länge, um das ursprüngliche Array zu ändern

var a = [1,2,3]; a.pop() - a//3 - [1,2];
//如果数组本身是空数组,则返回undefined
var b = []; b.pop()//undefined
Nach dem Login kopieren

Warteschlangenstruktur (vorwärts, zuerst raus):

1.shift()

shift() entfernt das erste Element im Array, gibt das entfernte Element zurück und ändert dann die Länge des Arrays, um das Array zu ändern

var a = [1,2,3]; a.shift() - a//1 - [2,3];
Nach dem Login kopieren

2.unshift()

unshift() fügt einen beliebigen Parameter zur Startposition des Arrays hinzu, um die Array-Länge zu ändern, und gibt die Array-Länge zurück, um das Array zu ändern

var a = [1,2,3]; a.unshift(4,5) - a//5 - [1,2,3,4,5]
Nach dem Login kopieren

4. js-Array-Sortiermethode

1.reverse()

reverse() wird zum Umkehren verwendet die Reihenfolge des Arrays, ändern Sie das ursprüngliche Array und geben Sie das aktuelle Array zurück

 var a = [1,2,4,3,5]; a.reverse()// [5,3,4,2,1];
Nach dem Login kopieren

2.sort()

sort() ändert das Array in aufsteigende Reihenfolge um Standardmäßig ruft sort standardmäßig toString()

var a = [1,2,3,4,5]; a.sort() //[1,2,3,4,5]
var b = [1,2,12,13]; c.sort() //[1,12,13,2]
var c = [1,2,'1a','2b']; c.sort() //[1,'1a',2,'2b'];
Nach dem Login kopieren

für jedes Array-Element auf, wenn das Array undefiniert enthält, dann wird undefiniert bis zum Ende sortiert

var d = [1,3,undefined,2]; d.sort() //[1,2,3,undefined]
Nach dem Login kopieren

Wenn sort Parameter hat (der Parameter muss eine Funktion sein); wenn der Wert der Funktionsrückgabe eine positive Zahl oder der erste Parameter minus dem zweiten Parameter ist, dann ist die Reihenfolge positiv, andernfalls ist die Reihenfolge umgekehrt. Wenn die Zeichenfolge vorhanden ist, ist sie minimal. Ordnen Sie es an der Startposition an

function sortNumber(a,b){
  return b-a
}
var e = [1,2,3]; e.sort(sortNumber)//[3,2,1]; 
var f = ['1a',1,'2b',2,3]; f.sort()//['1a','2b',3,2,1];
Nach dem Login kopieren

Wenn der Sortierparameter eine zufällige positive oder negative Zahl ist, die von der Funktion zurückgegeben wird, ist die Array-Reihenfolge zufällig

function sortRandom(a,b){
  return Math.random()-0.5
}
var g = [1,2,3,4,5]; g.sort(sortRandom)//[2,1,5,4,3](此为随机顺序)
Nach dem Login kopieren

3.concat ()

concat()-Methode erstellt ein neues Array basierend auf dem aktuellen Array und fügt die empfangenen Parameter am Ende ein, ohne das ursprüngliche Array zu beeinflussen

var a = [1,2]; b = [3,4]; a.concat - a//[1,2,3,4] - [1,2];五.创建子数组方法
Nach dem Login kopieren

4. Slice()

Die Methode Slice() fängt die Startposition des ersten Parameters und die Endziffer des zweiten Parameters ab. und erstellen Sie ein neues Array. Wenn keine Parameter vorhanden sind, werden alle

var a = [1,2,3,4,5];a.slice(2,4)//[3,4,5]
var a = [1,2,3,4,5];a.slice(2)//[3,4,5]
var a = [1,2,3,4,5];a.slice(-3)//[3,4,5] 
var a = [3,4,5];a.slice()//[3,4,5]
Nach dem Login kopieren

5.js-Array-Löschmethode

1.splice() abgefangen

splice() erhält drei Parameter. Der erste Parameter ist für die zu löschende Nummer erforderlich werden von nun an gelöscht. Neue Elemente sind optional. Zurückgegeben wird das gelöschte Array

var a = [1,2,3]; a.splice(2,0,1)-a//[]-[1,2,1,3];
var b = [1,2,3]; a.splice(2,1,1)-a//[3]-[1,2,1];
var c = [1,2,3]; a.splice(2)-a//[1,2,3]-[]
var d = [1,2,3]; a.splice(2,1,4,5)-a//[3]-[1,2,4,5]
Nach dem Login kopieren

2.indexOf()

indexOf() gibt die Position zurück, an der der erste Parameter zum ersten Mal erscheint, wenn es ein zweites When gibt Parameter n erscheint, was zurückgegeben wird, ist, dass die Elemente vor dem n-ten Element nicht zum ersten Mal gezählt werden

var a = ['a','b','c',a,2,3]; a.indexOf('a')//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//4
var a = ['a','b','c',1,2,3]; a.indexOf('a',-5)//0
Nach dem Login kopieren

3.lastIndexOf()

lastIndexOf( ) ist Anders als indexOf(): Suche von rechts nach links

var a = ['a','b','c',a,2,3]; a.indexOf('a')//4
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',-1)//0
Nach dem Login kopieren

6.js-Array-Zusammenführungsmethode

1 Der erste Parameter von Die Methode .reduce()

reduce() besteht darin, das angegebene Funktionsarray zu durchlaufen und es in einer benutzerdefinierten Form zu kombinieren, um einen einzelnen Wert zu generieren. Es empfängt vier Parameter (Anfangsvariable, aktuelle Variable, aktueller Index, ursprüngliches Array-Objekt). Der zweite Parameter von Reduce gibt einen einzugebenden Anfangswert an.

var a = [1,2,3,4,5];
a.reduce(function(x,y){return x+y}) // 15
a.reduce(function(x,y){return x+y},3)//18
Nach dem Login kopieren

2.reduceRight()

reduceRight() unterscheidet sich von reduce() darin, dass der Indexwert von hoch nach niedrig reicht

a.reduce(function(x,y){console.log(x,y);return x+y},0)
// 5,4 9,3 12,2 14,1 15,0
Nach dem Login kopieren

Seven.js-Array-Iterationsmethode

1.map()

map() gibt die Operation für jedes Element an in der Funktionsarray-Funktion und gibt das Ergebnis jedes Funktionsaufrufs in ein Array zurück

var a = [1,2,3]; a.map(function(item,index,arr){return item*2})
//[2,4,6]
var b = ['aa','bb','cc'];
a.map(function(item,index,b){return this[item]})
//['aa','bb','cc'];
Nach dem Login kopieren

map()日常中多用于去解析对象中的属性

var c = {[name:1,value:2],[name:11,value:22]}
c.map(function(item){return item.name})//[1,11]
Nach dem Login kopieren

2.forEach()

forEach()给函数数组的每一项运行指定的函数(于map()对比不同于没有返回值)。forEach()可接受第二参数,用来改变this的指向。

var a = {
    name:'111',
    arr:[1,2,3],
    value:function(){
        console.log(this);
        this.arr.forEach(function(){
        console.log(this);
        })
    }
}//循环外this指向value方法,循环内指向a对象
var b = {
  name:'111',
  arr:[1,2,3],
  value:function(){
    console.log(this);
    this.arr.forEach(function(){
      console.log(this);
    },this)
  }
}//全文的this全部都指向对象a
Nach dem Login kopieren

3.filter()

filter()给函数数组的每一项运行指定的函数,并返回制定规则返回True的项的数组。该方法多用于查询,第二个参数值指定this指向

var a = [1,2,3];a.filter(function(item){return item>1)//[2,3];
Nach dem Login kopieren

4.some()

filter()给函数数组的每一项运行指定的函数进行筛选,如果都返回false,则返回false。反之则返回true

a = [1,2,3,4,5];
a.some(function(item){return item === 3;})//true
a.some(function(item){return item === 6;})//false
Nach dem Login kopieren

5.every()

every()给函数数组的每一项运行指定的函数进行筛选,如果有返回false,则返回false。反之如果全部返回true,则返回true;空数组会返回true

a = [1,2,3,4,5];
a.every(function(item){return item === 3;})//false
a.every(function(item){return item < 6;})//true
Nach dem Login kopieren

相关推荐:

JS中数组重排序方法

js数组方法

Das obige ist der detaillierte Inhalt vonZusammenfassung von sechs Beispielen für die Verwendung von JS-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage