Heim  >  Artikel  >  Web-Frontend  >  Was sind die gängigen Methoden für Javascript-Arrays?

Was sind die gängigen Methoden für Javascript-Arrays?

青灯夜游
青灯夜游Original
2021-06-22 14:46:379442Durchsuche

Häufig verwendete Methoden: 1. push(); 3. pop(); 6. sort(); concat (); 9. reverse(); 11. forEach() usw.

Was sind die gängigen Methoden für Javascript-Arrays?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Gemeinsame Methoden von Javascript-Arrays

Arrays bieten einige gängige Methoden zum Hinzufügen, Löschen, Ersetzen und Sortieren von Array-Elementen.

1) push(element 1,...,element n)

push()-Methode kann die durch die Parameter angegebenen Elemente der Reihe nach am Ende des Arrays hinzufügen und nach dem Hinzufügen die Länge des Arrays zurückgeben die Elemente (diese Methode muss mindestens einen Parameter haben). Beispiele sind wie folgt:

var arr = [1,2,3];
alert(arr.push(4));//返回最终数组的长度:4
alert(arr);//返回:1,2,3,4
alert(arr.push(5,6,7));//返回最终数组的长度:7
alert(arr);//返回:1,2,3,4,5,6,7

2) unshift(element 1,...,element n)

unshift()-Methode kann die durch die Parameter angegebenen Elemente nacheinander an den Anfang des Arrays hinzufügen und diese zurückgeben Array-Länge nach dem Hinzufügen der Elemente. Die Methode muss mindestens einen Parameter haben. Hinweis: IE6 und IE7 unterstützen keine Methodenrückgabewerte. Ein Beispiel ist wie folgt:

var arr = [1,2,3];
alert(arr.unshift('a'));//返回最终数组的长度:4
alert(arr);//返回:a,1,2,3
alert(arr.unshift('b','c','d'));//返回最终数组的长度:7
alert(arr);//返回:b,c,d,a,1,2,3

3) pop()

Die Methode pop() öffnet (entfernt) das letzte Element des Arrays und gibt das entfernte Element zurück. Ein Beispiel ist wie folgt:

var arr = ['A','B','C','D'];
alert(arr.pop());//返回:D
alert(arr);//返回:A,B,C

4) Die Methode shift()

shift() kann das erste Element des Arrays löschen und das gelöschte Element zurückgeben. Beispiele sind wie folgt:

var arr = ['A','B','C','D'];
alert(arr.shift());//返回:A
alert(arr);//返回:B,C,D

5) Die Methode splice(index,count[,element 1,...,element n])

splic() ist relativ leistungsfähig. Sie kann eine bestimmte Anzahl von Elementen löschen und ersetzen ein angegebenes Element und fügt ein Element an der angegebenen Position hinzu. Die Implementierung dieser verschiedenen Funktionen muss durch Kombinieren der Methodenparameter bestimmt werden:

Wenn die Parameter nur zwei Parameter haben, index und count, und count ungleich 0 ist, implementiert die splice()-Methode die Löschfunktion und gibt die zurück Gleichzeitig gelöschtes Element: vom Indexparameter angegeben Beginnen Sie mit dem Löschen der durch den Zählparameter angegebenen Anzahl von Elementen an der Position

Wenn die Parameter mehr als 3 sind und der Zählparameter nicht 0 ist, wird die Methode splice() implementiert Die Ersetzungsfunktion gibt gleichzeitig die ersetzten Elemente zurück: Verwenden Sie das dritte und die folgenden Elemente. Der Parameter ersetzt die durch den Zählparameter angegebene Anzahl von Elementen, beginnend an der durch den Indexparameter angegebenen Position.

Wenn mehr als 3 Parameter vorhanden sind und der Zählparameter 0 ist, fügt die Implementierung der splice()-Methode Funktionalität hinzu: Verwenden Sie den dritten und nachfolgenden Parameter. Der Parameter wird an der durch den Indexparameter angegebenen Position hinzugefügt. Beispiele für jede von der

splice()-Methode implementierte Funktion sind wie folgt.

① Verwenden Sie splice(), um die angegebene Anzahl von Elementen ab der angegebenen Position zu löschen:

var arr = ['A','B','C','D'];
//2个参数,第二个参数不为 0,实现删除功能
alert(arr.splice(0,2));
alert(arr);  //返回C,D

② Verwenden Sie splice(), um die angegebene Anzahl von Elementen ab der angegebenen Position durch das angegebene Element zu ersetzen:

var arr = ['A','B','C','D'];
//3个参数,第二个参数不为 0,实现替换功能:用 a 替换掉 A,返回:A
alert(arr.splice(0,1,'a'));
alert(arr);  //返回:a,B,C,D
alert(arr.splice(0,2,'a or b'));//用a or b替换掉a和B,返回a,B
alert(arr);  //返回:a or b,C,D

③ Verwenden Sie splice () zum Angeben Fügen Sie das angegebene Element an der Position hinzu:

var arr = ['A','B','C','D'];
//4个参数,第二个参数为 0,实现添加功能:在下标为 1 处添加 aaa,bbb,没有返回值
alert(arr.splice(1,0,'aaa','bbb'));
alert(arr);//返回:A,aaa,bbb,B,C,D

[Beispiel 1] Verwenden Sie die Methode splice(), um eine Array-Deduplizierung zu erreichen.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用splice方法实现数组去重</title>
<script>
     var arr = [1,2,2,2,4,2];
     for(var i = 0; i < arr.length; i++){
         for(var j = i + 1; j < arr.length; j++){
              if(arr[i] == arr[j]){
                  arr.splice(j,1);//删除 j 位置处的元素
                  j--;
              }
         }
     }
     alert(arr);//返回1,2,4三个元素
</script>
</head>
<body>
</body>
</html>

Der obige Code verwendet splice() mit zwei Parametern, um die Funktion zum Löschen bestimmter Elemente zu implementieren.

6) Die Slice(index1[,index2])

slice()-Methode gibt ein Array zurück, das Elemente zwischen index1~index2-1 im Array-Objekt enthält. Der Parameter index2 kann weggelassen werden. Wenn er weggelassen wird, bedeutet dies, dass die Elemente von der Position index1 bis zur letzten Position zurückgegeben werden. Es ist zu beachten, dass diese Methode nur die angegebenen Elemente liest und keine Änderungen am ursprünglichen Array vornimmt.

Beispiele sind wie folgt:

var arr = [&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;];
alert(arr.slice(0,3));  //返回:A,B,C
alert(arr);   //返回A,B,C,D
alert(arr.slice(0));   //返回数组全部元素:A,B,C,D
alert(arr);   //返回A,B,C,D

7) Die Methode sort(), sort(compareFunction)

sort() wird verwendet, um das Array nach bestimmten Regeln zu sortieren: wenn der Parameter der Methode leer ist, in lexikographischer Hinsicht Die Reihenfolge (d. h. die Sortierreihenfolge der Elemente in der Unicode-Kodierung von klein nach groß) sortiert die Array-Elemente. Wenn der Parameter eine anonyme Funktion ist, werden die Array-Elemente gemäß den von der anonymen Funktion angegebenen Regeln sortiert. sort() gibt das sortierte Array nach dem Sortieren zurück. Das Beispiel ist wie folgt.

① Sortieren Sie das Array lexikografisch.

var arr = [&#39;c&#39;,&#39;d&#39;,&#39;a&#39;,&#39;e&#39;];
alert(arr.sort());   //返回排序后的数组:a,c,d,e
alert(arr);   //返回排序后的数组:a,c,d,e

Aus dem obigen Code können wir ersehen, dass sort() ohne Parameter die Elemente im Array in lexikografischer Reihenfolge sortiert.

Jetzt verwenden wir sort() der Elemente, um mehrere Zahlen zu sortieren und zu sehen, was das Ergebnis ist:

var arr = [4,3,5,76,2,0,8];
arr.sort();
alert(arr);  //返回排序后的数组:0,2,3,4,5,76,8

Wir sehen, dass das Ergebnis nach dem Sortieren nicht die erwarteten 76 ist. Das größte sollte an letzter Stelle stehen, 8 jedoch An letzter Stelle scheint 8 das größte dieser Elemente zu sein, das heißt, die Elemente sind nicht nach numerischer Größe sortiert.

Warum kommt es zu diesem Ergebnis? Dies liegt daran, dass sort() jedes Element standardmäßig nach Zeichenfolgen sortiert. Beim Sortieren wird jedes Zeichen des Elements bitweise von links nach rechts verglichen. Je größer die Unicode-Kodierung des entsprechenden Bits ist, desto größer ist das Element Dieses Mal werden die folgenden Zeichen nicht mehr verglichen; die Zeichen an den folgenden Positionen werden nur dann verglichen, wenn die entsprechenden Zeichen gleich sind. Offensichtlich wird das obige Array nach den Standardsortierregeln von sort() sortiert. Wenn Sie zu diesem Zeitpunkt möchten, dass die Elemente im Array nach numerischer Größe sortiert werden, müssen Sie die Sortierregeln über anonyme Funktionsparameter ändern.

② Sortieren Sie das Array gemäß den durch die anonymen Funktionsparameter angegebenen Regeln.

Im Folgenden werden die Standardsortierregeln von sort() geändert, indem eine anonyme Funktion definiert wird, um die oben genannten numerischen Elemente nach numerischer Größe zu sortieren:

var arr = [4,3,5,76,2,0,8];
arr2.sort(function(a,b){
     return a-b;//从小到大排序
     //return b-a;//从大到小排序
});
alert(arr);//返回排序后的数组:0,2,3,4,5,8,76

说明:匿名函数中返回第一个参数减第二个参数的值,此时将按元素数值从小到大的规则排序各个元素:当两个参数的差为正数时,前后比较的两个元素将调换位置排序;否则元素不调换位置。如果返回第二个参数减第一个参数的值,则按元素数值从大到小的规则排序各个元素,元素调换规则和从小到大类似。

当数组元素的前缀为数字而后缀为字符串时,如果希望这些元素能按数字大小进行排序,此时需对匿名函数中的参数作一些变通处理。因为这些参数代表了数组元素,所以它们也是一个包含数字和字符的字符串,因此要按数字大小来排序它们,就需要将参数解析为一个数字,然后再返回这些解析结果的差。

示例如下:

var arrWidth = [&#39;345px&#39;,&#39;23px&#39;,&#39;10px&#39;,&#39;1000px&#39;];
arrWidth.sort(function(a,b){
     return parseInt(a)-parseInt(b);
});
alert(arrWidth);//排序后的结果为:10px,23px,345px,1000px

此外,我们通过匿名函数,还可以实现随机排序数组元素。示例如下:

var arr = [1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
     return Math.random()-0.5;//random()返回:0~1之间的一个值
});
alert(arr);//排序后的结果为:4,3,1,2,6,5,7,8。注意:每次执行的结果可能会不一样

上述代码中的匿名函数并没有返回两个参数的差值,而是返回 Math 对象中的 random() 随机函数和 0.5 的差值,这就使得元素的排序将不是根据元素大小来排序。由于 random() 的值为 0~1 之间的一个随机值,所以它和 0.5 的差时正时负,这就导致数组元素位置的调换很随机,所以排序后的数组是随机排序的。

8) concat(数组1,…,数组n)

concat() 将参数指定的数组和当前数组连成一个新数组。示例如下:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
alert(arr1.concat(arr2,arr3));//最终获得连接后的数组:1,2,3,4,5,6,7,8,9

9) reverse()

reverse() 方法可返回当前数组倒序排序形式。示例如下:

var arr = [1,2,3,4,5,6];
alert(arr.reverse());//返回:6,5,4,3,2,1

10) join(分隔符)

join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略,省略参数时,分隔符默认为“逗号”。

11) forEach()

forEach() 方法用于对数组的每个元素执行一次回调函数。

语法如下:

array对象.forEach(function(currentValue[,index[,array]])[,thisArg])

forEach() 方法的第一个参数为 array 对象中每个元素需要调用的函数。

forEach() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

forEach() 函数的返回值为 undefined。示例如下:

var fruit = ["苹果","橙子","梨子"];
fruit.forEach(function(item,index){
    console.log("fruit[" + index + "] = " + item);
});

上述示例的运行后将在控制台中分别显示:fruit[0]=苹果、fruit[1]=橙子和fruit[2]=梨子。

12) filter()

filter() 方法用于创建一个新的数组,其中的元素是指定数组中所有符合指定函数要求的元素。

语法如下:

array对象.filter(function(currentValue[,index[,array]])[,thisArg])

filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

filter() 函数返回一个新数组,其中包含了指定数组中的所有符合条件的元素。如果没有符合条件的元素则返回空数组。

示例如下:

var names1 = ["张山","张小天","李四","张萌萌","王宁","陈浩"];//原数组
function checkName(name){ //定义回调函数,判断名字是否姓“张”
     if(name.indexOf("张") != -1){
              return true;
         }else{
              return false;
         }
}
var names2 = names1.filter(checkName);//对names1执行回调用函数,返回所有姓张的名字
names2.forEach(function(item,index){//遍历names2数组中的每个元素
          console.log("names2[" + index + "] = " + item);
});

上述示例运行后将在控制台中分别显示:names2[0]=张山、names2[1]=张小天和names2[2]=张萌萌。

13) map()

map() 方法用于创建一个新的数组,其中的每个元素是指定数组的对应元素调用指定函数处理后的值。

语法如下:

array对象.map(function(currentValue[,index[,array]])[,thisArg])

map() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数。

map() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

map() 函数返回一个新数组,其中的元素为原始数组元素调用回调函数处理后的值。示例如下:

var number = [1,2,3];//原数组
var num=number.map(function(item){//对原数组中的每个元素*2,将值分别存储在num数组中
          return item * 2;
});
num.forEach(function(item,index){//遍历num中的每个元素
          console.log("num[" + index + "]=" + item);
});

上述示例运行后将在控制台中分别显示:num[0]=2、num[1]=4和num[2]=6。

14) reduce()

reduce() 用于使用回调函数对数组中的每个元素进行处理,并将处理进行汇总返回。语法如下:

array对象.reduce(function(result,currentValue[,index[,array]])[,initialValue])

reduce() 方法的第一个参数为回调函数。

reduce() 方法中的各个参数说明如下。

  • result 参数:必需参数,表示初始值或回调函数执行后的返回值。在第一次调用回调函数前,result 参数表示初始值;在调用回调函数之后,result 参数表示回调函数执行后的返回值。

    需要注意的是,如果指定了 initialValue 参数,则初始值就是 initialValue 参数值,否则初始值为数组的第一个元素。

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素)。

    需要注意的是,如果指定了 initialValue 参数,则第一次执行回调函数时的 currentValue 为数组的第一个元素,否则为第二个元素。

  • index 参数:可选参数,表示正在处理的当前元素的索引。

  • array 参数:可选参数,表示方法正在操作的数组。

  • initialValue 参数,可选参数,作为第一次调用回调函数时的第一个参数的值。如果没有提供该参数,第一次调用回调函数时的第一个参数将使用数组中的第一个元素。

    需要注意的是:对一个空数组调用 reduce() 方法时,如果没有指定 initialValue 参数此时将会报错。

reduce() 的使用示例如下:

var num1 = [1,3,6,9];
//reduce()没有initialValue参数
var num2 = num1.reduce(function(v1,v2){ //①
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
});
console.log("num2=" + num2);//输出:num2=37
//reduce()提供了initialValue参数
var num3 = num1.reduce(function(v1,v2){ //②
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
},2);
console.log("num3=" + num3); //输出:num3=40

上述示例中,① 处调用的 reduce() 没有指定 initialValue 参数,因而初始值为数组的第一个元素,即 1,此时 reduce() 的执行过程等效于:1+2*3+2*6+2*9 运算表达式的执行,结果返回 37。② 处调用的 reduce() 指定了值为 2 的 initialValue 参数,因而初始值为 2,此时 reduce() 的执行过程等效于:2+2*1+2*3+2*6+2*9 运算表达式的执行,结果返回 40。

15) find()

find() 用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素,将返回 undefined。

语法如下:

array对象.find(function(currentValue[,index[,array]])[,thisArg])

filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

find() 函数使用示例如下:

var names = ["Tom","Jane","Marry","John","Marissa"];
//定义回调函数
function checkLength(item){
     return item.length >= 4;
}
var name = names.find(checkLength);//返回名字数组中名字长度大于或等于4的第一个名字
console.log("name: " + name);

上述示例运行后将在控制台中输出 name:Jane。

【相关推荐:javascript学习教程

Das obige ist der detaillierte Inhalt vonWas sind die gängigen Methoden für Javascript-Arrays?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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