简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  What are the common methods of javascript arrays?

What are the common methods of javascript arrays?

青灯夜游
青灯夜游Original
2021-06-22 14:46:379441browse

Commonly used methods: 1. push(); 2. unshift(); 3. pop(); 4. shift(); 5. splic(); 6. slice(); 7. sort() ; 8. concat(); 9. reverse(); 10. join(); 11. forEach(), etc.

What are the common methods of javascript arrays?

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Common methods of javascript arrays

Arrays provide some common methods to add, delete, replace and sort array elements. .

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

push() method can add the elements specified by the parameters to the end of the array in turn, and return the addition Array length after elements (this method must have at least one parameter). Examples are as follows: 

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)

The unshift() method can add the elements specified by the parameters to the front of the array in sequence , and returns the array length after adding elements. The method must have at least one parameter. Note: IE6 and IE7 do not support method return values. An example is as follows: 

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

The pop() method pops (removes) the last element of the array and returns the popped element. Examples are as follows: 

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

4) shift()

The shift() method deletes the first element of the array and returns the deleted element. The example is as follows: 

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

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

splic() method is relatively powerful, it can Implements deletion of the specified number of elements, replacement of the specified elements, and addition of elements at the specified position. The implementation of these different functions needs to be determined in combination with the method parameters:

When the parameters have only two parameters, index and count, if count is not equal to 0, the splice() method implements the deletion function and returns the deleted elements at the same time: Delete the number of elements specified by the count parameter starting from the position specified by the index parameter;

When there are more than 3 parameters and the count parameter is not 0, the splice() method implements the replacement function and returns the replaced elements at the same time : Use the third and subsequent parameters to replace the number of elements specified by the count parameter starting at the position specified by the index parameter;

When there are more than 3 parameters and the count parameter is 0, the splice() method Implement the adding function: use the third and subsequent parameters to add to the position specified by the index parameter.

Examples of each function implemented by the splice() method are as follows.

① Use splice() to delete the specified number of elements from the specified position: 

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

② Use splice() to replace the specified number of elements starting from the specified position with the specified element: 

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

③ Use splice() to add the specified element at the specified position: 

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

[Example 1] Use the splice() method to achieve array deduplication. 

<!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>

The above code uses splice() with two parameters to implement the function of deleting specified elements.

6) slice(index1[,index2])

The slice() method returns a slice containing elements between index1~index2-1 in the array object. array. The index2 parameter can be omitted. If omitted, it means returning the elements starting from the index1 position to the last position. It should be noted that this method only reads the specified elements and does not make any modifications to the original array.

Examples are as follows: 

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) sort(), sort(compareFunction)

sort() method is used to sort arrays according to certain rules : When the parameter of the method is empty, the array elements will be sorted in lexicographic order (that is, the Unicode encoding of the elements is sorted from small to large); when the parameter is an anonymous function, the array elements will be sorted according to the rules specified by the anonymous function. sort() will return the sorted array after sorting. The example is as follows.

① Sort the array lexicographically. 

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

From the above code, we can see that without parameters, sort() sorts the elements in the array in lexicographic order.

Next we use the sort() of the element to sort several numbers and see what the result is: 

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

We see that after sorting, the result is not the expected 76. The maximum should be ranked in In the end, 8 is ranked last. It seems that 8 is the largest among these elements, that is, the elements are not sorted by numerical size.

Why does this result occur? This is because sort() sorts each element by string by default. When sorting, it compares each character of the element bit by bit from left to right. The larger the Unicode encoding of the corresponding bit is, the larger the element is. At this time The following characters will no longer be compared; the characters at the following positions will be compared only when the corresponding characters are the same. Obviously the above array is sorted using the default sorting rules of sort(). At this time, if you want the elements in the array to be sorted by numerical size, you must modify the sorting rules through anonymous function parameters.

② Sort the array according to the rules specified by the anonymous function parameters.

The following is to modify the default sorting rules of sort() by defining an anonymous function to sort the above numerical elements by numerical size: 

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学习教程】

The above is the detailed content of What are the common methods of javascript arrays?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Array count sort foreach Filter math 回调函数 字符串 map undefined 对象 this
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What can the p tag end with in html?Next article：What can the p tag end with in html?

Related articles

See more