Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in grundlegende und erweiterte JavaScript-Arrays

巴扎黑
Freigeben: 2017-09-05 09:37:16
Original
1485 Leute haben es durchsucht

Der folgende Editor bietet Ihnen eine Zusammenfassung der grundlegenden und erweiterten Array-Methoden in JavaScript (empfohlen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und werfen wir einen Blick darauf.

Zusammenfassung gängiger Array-Methoden:

Im Folgenden fasse ich nur die häufig verwendeten Array-Methoden in es3 zusammen . Insgesamt gibt es 11 davon. Die 9 neuen Array-Methoden in es5 werden später separat zusammengefasst.

1 Methode zum Verbinden von Arrays: concat()

2 Methoden zum Konvertieren von Arrays in Strings: join(), toString()

6 Möglichkeiten zum Hinzufügen und Löschen von Array-Elementen Methoden: pop(), push(), shift(), unshift(), Slice(), splice()

2 Array-Sortiermethoden: reverse(), sort()

Methoden zum Verbinden von Arrays:

1. concat()

Funktion: Verbindung Zwei Arrays , in einem neuen Array zusammengeführt.

Verwendung: arr1.concat(arr2, arr2...)

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

document.write(arr.concat(arr2))

</script>
Nach dem Login kopieren

Ausgabe:

George,John,Thomas,James,Adrew,Martin

Methode zum Konvertieren eines Arrays in einen String:

1. join()

Funktion: Wird verwendet, um alle Elemente im Array in einen String einzufügen. und durch das angegebene Trennzeichen getrennt.

Verwendung: arrayObject.join(separator)

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join("."))

</script>
Nach dem Login kopieren

Ausgabe:

George. John.Thomas

Hinweis: Der Rückgabewert ist eine Zeichenfolge. Wenn kein Trennzeichen vorhanden ist, wird standardmäßig die Komma-Trennung verwendet.

2. toString()

Funktion: Konvertieren Sie das Array in einen String und geben Sie das Ergebnis zurück.

Verwendung: arrayObject.toString()

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr.toString());

</script>
Nach dem Login kopieren

Ausgabe:

George, John ,Thomas

Der Rückgabewert ist derselbe wie der String, der von der Methode join() ohne Parameter zurückgegeben wird. Elemente im Array werden durch Kommas getrennt.

Methoden zum Hinzufügen und Löschen von Array-Elementen:

1. pop()

Funktion: Wird verwendet, um das letzte Element des Arrays zu löschen und zurückzugeben.

Verwendung: arrayObject.pop()

Die Methode pop() löscht das letzte Element von arrayObject, verringert die Array-Länge um 1 und gibt den Wert des gelöschten Elements zurück. Wenn das Array bereits leer ist, ändert pop() das Array nicht und gibt einen undefinierten Wert zurück.

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>
Nach dem Login kopieren

Ausgabe:


George,John,Thomas
Thomas
George,John
Nach dem Login kopieren

2. push()

Funktion: Ein oder mehrere Elemente am Ende des Arrays hinzufügen und die neue Länge zurückgeben.

Verwendung: arrayObject.push(newelement1,newelement2,....,newelementX)

Es ändert arrayObject direkt, anstatt ein neues Array zu erstellen. Die push()-Methode und die pop()-Methode verwenden die vom Array bereitgestellte First-in-Last-Pop-Funktion.

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.push("James") + "<br />")

document.write(arr)

</script>
Nach dem Login kopieren

Ausgabe:


George,John,Thomas
4
George,John,Thomas,James
Nach dem Login kopieren

3.shift()

Funktion: Wird verwendet, um das erste Element des Arrays daraus zu löschen und den Wert des ersten Elements zurückzugeben.

Verwendung: arrayObject.shift()

Wenn das Array leer ist, führt die Methode „shift()“ nichts aus und gibt einen undefinierten Wert zurück. Bitte beachten Sie, dass diese Methode kein neues Array erstellt, sondern das ursprüngliche ArrayObject direkt ändert.

Beispiel:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.shift() + "<br />")

document.write(arr)

</script>
Nach dem Login kopieren

Ausgabe:


George,John,Thomas
George
John,Thomas
Nach dem Login kopieren

4, unshift()

Funktion: Sie können ein oder mehrere Elemente am Anfang des Arrays hinzufügen und die neue Länge zurückgeben.

Verwendung: arrayObject.unshift(newelement1,newelement2,....,newelementX)

Die Methode unshift() fügt ihre Parameter in den Kopf von arrayObject ein und ersetzt die vorhandenen Elemente. Bewegen Sie sich nacheinander zu höheren Indizes, um Platz zu schaffen. Das erste Argument der Methode wird zum neuen Element 0 des Arrays, wenn es ein zweites Argument gibt, wird es zum neuen Element 1 und so weiter.

Bitte beachten Sie, dass die Methode unshift() keine neue Erstellung erstellt, sondern das ursprüngliche Array direkt ändert. Die Methode unshift() funktioniert im Internet Explorer nicht korrekt!

Beispiel:


<script type="text/javascript">

var arr = new Array()

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.unshift("William") + "<br />")

document.write(arr)

</script>
Nach dem Login kopieren

Ausgabe:


George,John,Thomas
4
William,George,John,Thomas
Nach dem Login kopieren

5, Slice()

Funktion: Gibt ausgewählte Elemente aus einem vorhandenen Array zurück.

Verwendung: arrayObject.slice(start,end)

start

Erforderlich. Gibt an, wo mit der Auswahl begonnen werden soll. Wenn negativ, gibt es die Position vom Ende des Arrays an. Das heißt, -1 bezieht sich auf das letzte Element, -2 bezieht sich auf das vorletzte Element und so weiter.

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>
Nach dem Login kopieren

输出:


George,John,Thomas
John,Thomas
George,John,Thomas
Nach dem Login kopieren

6,splice()

作用:向/从数组中添加/删除项目,然后返回被删除的项目。

用法:arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

该方法会改变原始数组。

示例:


<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>
Nach dem Login kopieren

输出:


George,John,Thomas,James,Adrew,Martin

George,John,William,Thomas,James,Adrew,Martin
Nach dem Login kopieren

数组元素排序:

1、reverse()

作用:用于颠倒数组中元素的顺序。

用法:arrayObject.reverse()

该方法会改变原来的数组,而不会创建新的数组。

示例:


<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.reverse())

</script>
Nach dem Login kopieren

输出:


George,John,Thomas
Thomas,John,George
Nach dem Login kopieren

2,sort()

作用:用于对数组的元素进行排序。

用法:arrayObject.sort(sortby)

Sortby:可选,按规定是顺序排序。必须是函数。

相对于其他方法来说复杂了一点。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值。


<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

</script>
Nach dem Login kopieren

输出:


10,5,40,25,1000,1
1,5,10,25,40,1000
Nach dem Login kopieren

上面这个例子是让数组元素从小到大排序,如果想实现从大到小排序,只需要将sortNumber函数中的a-b改为b-a即可。


<script type="text/javascript">

function sortNumber(a,b)

{

return b - a;

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

</script>
Nach dem Login kopieren

输出:


10,5,40,25,1000,1
1000,40,25,10,5,1
Nach dem Login kopieren

补充:

数组对象的属性:

属性

描述

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

prototype

使您有能力向对象添加属性和方法。

以下这个例子展示了如何使用constructor属性


<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)

{

document.write("This is an Array");

}

if (test.constructor==Boolean)

{

document.write("This is a Boolean");

}

if (test.constructor==Date)

{

document.write("This is a Date");

}

if (test.constructor==String)

{

document.write("This is a String");

}

</script>
Nach dem Login kopieren

输出:


This is an Array
Nach dem Login kopieren

length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素,而且以元素 0 开始的常规数组而言,属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。

获取数组的长度:arrayObject.length

Das obige ist der detaillierte Inhalt vonEinführung in grundlegende und erweiterte JavaScript-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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!