일반적으로 사용되는 방법: 1. push(); 3. pop(); 5. splic(); concat(); 9. reverse(); 10. Join();
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
자바스크립트 배열의 일반적인 방법
배열은 배열 요소를 추가, 삭제, 교체 및 정렬하는 몇 가지 일반적인 방법을 제공합니다.
1) push(element 1,...,element n)
push() 메소드는 매개변수로 지정된 요소를 배열의 끝에 차례로 추가하고, 추가한 후 배열의 길이를 반환할 수 있습니다. 요소(이 메소드에는 매개변수가 하나 이상 있어야 함) 그 예시는 다음과 같습니다.
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() 메소드는 매개변수로 지정된 요소를 배열의 맨 앞에 차례로 추가하고 반환할 수 있습니다. 요소를 추가한 후의 배열 길이입니다. 메서드에는 매개변수가 하나 이상 있어야 합니다. 참고: IE6 및 IE7은 메서드 반환 값을 지원하지 않습니다. 예는 다음과 같습니다.
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()
pop() 메서드는 배열의 마지막 요소를 팝(제거)하고 팝된 요소를 반환합니다. 예는 다음과 같습니다:
var arr = ['A','B','C','D']; alert(arr.pop());//返回：D alert(arr);//返回：A,B,C
4) Shift()
shift() 메소드는 배열의 첫 번째 요소를 삭제하고 삭제된 요소를 반환할 수 있습니다. 예는 다음과 같습니다:
var arr = ['A','B','C','D']; alert(arr.shift());//返回：A alert(arr);//返回：B,C,D
5) splice(index,count[,element 1,...,element n])
splic() 메서드는 상대적으로 지정된 수의 요소를 삭제하고 교체할 수 있습니다. 지정된 요소, 지정된 위치에 요소를 추가합니다. 이러한 다양한 함수의 구현은 메소드 매개변수와 함께 결정되어야 합니다.
매개변수에 index와 count라는 두 개의 매개변수만 있는 경우 count가 0이 아니면 splice() 메소드는 삭제 함수를 구현하고 반환합니다. 동시에 삭제된 요소: index 매개변수에서 지정 위치에서 count 매개변수로 지정된 요소 수만큼 삭제를 시작합니다.
매개변수가 3개 이상 있고 count 매개변수가 0이 아닌 경우 splice() 메서드; 대체 함수를 구현하고 대체된 요소를 동시에 반환합니다. 세 번째 이후의 요소를 사용합니다. 매개변수는 index 매개변수로 지정된 위치부터 시작하여 count 매개변수로 지정된 요소 수를 대체합니다.
3개보다 많은 경우; 매개변수 및 count 매개변수가 0인 경우 splice() 메소드 구현은 기능을 추가합니다. 세 번째 및 후속 매개변수를 사용합니다. 매개변수는 index 매개변수로 지정된 위치에 추가됩니다.
splice() 메소드로 구현된 각 함수의 예시는 다음과 같습니다.
① splice()를 사용하여 지정된 위치에서 지정된 개수의 요소를 삭제합니다.
var arr = ['A','B','C','D']; //2个参数，第二个参数不为 0，实现删除功能 alert(arr.splice(0,2)); alert(arr); //返回C,D
② splice()를 사용하여 지정된 위치에서 시작하여 지정된 개수의 요소를 지정된 요소로 교체합니다.
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
③ splice를 사용합니다. () 지정 위치에 지정된 요소를 추가합니다:
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
[예제 1] 배열 중복 제거를 달성하려면 splice() 메서드를 사용합니다.
<!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>위 코드는 두 개의 매개변수와 함께 splice()를 사용하여 지정된 요소를 삭제하는 기능을 구현합니다.
6) Slice(index1[,index2])
slice() 메서드는 배열 객체의 index1~index2-1 사이의 요소를 포함하는 배열을 반환합니다. index2 매개변수는 생략 가능하며, 생략할 경우 index1 위치부터 마지막 위치까지 요소를 반환한다는 의미입니다. 이 메서드는 지정된 요소만 읽고 원래 배열을 수정하지 않는다는 점에 유의해야 합니다.
예제는 다음과 같습니다:
var arr = ['A','B','C','D']; 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() 메소드는 특정 규칙에 따라 배열을 정렬하는 데 사용됩니다. 메소드의 매개변수가 비어 있는 경우 사전식으로 order(즉, 요소 유니코드 인코딩 정렬 순서)는 배열 요소를 정렬합니다. 매개변수가 익명 함수인 경우 배열 요소는 익명 함수가 지정한 규칙에 따라 정렬됩니다. sort()는 정렬 후 정렬된 배열을 반환합니다. 예는 다음과 같습니다.
① 사전순으로 배열을 정렬합니다.
var arr = ['c','d','a','e']; alert(arr.sort()); //返回排序后的数组：a,c,d,e alert(arr); //返回排序后的数组：a,c,d,e
위 코드에서 매개변수 없이 sort()가 배열의 요소를 사전순으로 정렬하는 것을 볼 수 있습니다.
다음으로 요소의 sort()를 사용하여 여러 숫자를 정렬하고 결과가 무엇인지 확인합니다.
var arr = [4,3,5,76,2,0,8]; arr.sort(); alert(arr); //返回排序后的数组：0,2,3,4,5,76,8
정렬 후 결과가 예상한 76이 아니라는 것을 알 수 있습니다. 가장 큰 숫자는 마지막에 순위가 지정되어야 하지만 8 가 마지막으로 순위가 매겨져 있으므로 이 요소 중에서 8이 가장 큰 것 같습니다. 즉, 요소를 숫자 크기별로 정렬하지 않은 것입니다.
이 결과는 왜 발생합니까? 이는 sort()가 기본적으로 각 요소를 문자열로 정렬하기 때문입니다. 정렬 시 해당 비트의 유니코드 인코딩이 클수록 요소의 크기가 커집니다. 이번에는 다음 문자가 더 이상 비교되지 않습니다. 다음 위치의 문자는 해당 문자가 동일한 경우에만 비교됩니다. 분명히 위의 배열은 sort()의 기본 정렬 규칙을 사용하여 정렬됩니다. 이때 배열의 요소를 숫자 크기별로 정렬하려면 익명 함수 매개변수를 통해 정렬 규칙을 수정해야 합니다.
② 익명 함수 매개변수에 지정된 규칙에 따라 배열을 정렬합니다.
다음은 위의 숫자 요소를 숫자 크기별로 정렬하기 위해 sort()의 기본 정렬 규칙을 수정하는 익명 함수를 정의합니다.
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 = ['345px','23px','10px','1000px'];
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学习教程】
위 내용은 자바스크립트 배열의 일반적인 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
