Javascript의 배열 메소드 요약(권장)_javascript 기술
- WBOY원래의
- 2016-05-16 16:06:151153검색
Array.prototype은 배열을 작동하기 위한 다양한 메소드를 정의합니다. 다음은 ECMAScript3의 몇 가지 메소드입니다.
1.Array.join() 메소드
이 메소드는 배열의 요소를 문자열로 변환하고 지정된 기호에 따라 함께 연결하며 마지막으로 생성된 문자열을 반환합니다. 이는 배열 요소를 연결하기 위한 기호인 매개변수를 포함할 수 있습니다. .
var ay = [1,2,3];
ay.join(); // =>"1,2,3"
ay.join("+"); // => "1+2+3"
ay.join(" "); // =>"1 2 3"
ay.join(""); // =>"123"
var by = new Array(10) //新建一个长度为10的空数组
by.join("-"); //=> "---------" 连接10个空元素
2.Array.reverse() 메소드
이 메서드는 배열의 요소 순서를 반대로 바꾸고 배열을 역순으로 반환합니다. 이 메서드는 현재 배열을 변경하며 새 배열을 생성하지 않습니다.
var a = [1,2,3];
a.reverse().join(); //=>"3,2,1" , 이때 a=[3,2,1]
3.Array.sort() 메소드
이 메서드는 배열의 요소를 정렬하고 정렬된 배열을 반환합니다. sort() 메서드가 매개 변수를 사용하지 않으면 배열이 알파벳순으로 정렬됩니다. 배열에 정의되지 않은 요소가 포함되어 있으면 배열의 끝으로 정렬됩니다.
var as = ["바나나","체리","사과"];
as.sort();
as.join(" "); //=>"사과 바나나 체리"
비교 함수를 sort() 메서드에 매개 변수로 전달하여 지정된 비교 함수를 사용하여 배열을 정렬할 수도 있습니다. 비교 함수의 반환 값이 0보다 작으면 첫 번째 매개 변수가 먼저 오고, 반대로 반환 값이 0보다 크면 두 매개 변수 값이 같으면 0이 반환됩니다.
sy.sort(); sy.sort(함수(a,b){
a-b 반환;
});
참고: 여기서는 익명 함수를 사용하는 것이 가장 적합합니다. 익명 함수는 한 번만 호출되고 함수 이름을 지정할 필요가 없기 때문입니다.
4.Array.concat() 메소드
이 메서드는 새 배열을 생성하고 반환하며, 원래 배열 요소와 메서드의 각 요소를 연결하여 새 배열을 형성합니다. 이 메서드는 메서드의 매개변수를 재귀적으로 호출하지 않습니다.
a.concat([4,5],[6,7]); //=>"1,2,3,4,5,6,7"
a.concat(4,[5,[6,7]]); //=>"1,2,3,4,5,[6,7]"
이 메서드는 지정된 배열의 조각 또는 하위 배열을 반환합니다. 이 메서드에는 조각의 시작 및 끝 위치를 각각 지정하는 두 개의 매개변수가 있을 수 있습니다. 반환된 배열에는 첫 번째 매개변수로 지정된 요소와 최대 모든 요소가 포함됩니다. 단, 두 매개변수로 지정된 위치의 첫 번째 배열 요소는 포함되지 않습니다. 매개변수가 하나만 있는 경우 배열 끝까지 지정된 시작 위치가 포함됩니다. 매개변수는 배열의 마지막 요소를 기준으로 한 위치를 나타내는 음수 값일 수 있습니다. 이 메서드는 호출되는 배열을 수정하지 않습니다.
d.slice(3); //=>"4,5"
d.slice(-3,-1); //=>"3,4"
6.Array.splice()方法
该方法是在数组中插入或删除元素的通用方法，该方法会修改原始数组。该方法可以包含多个参数，第一个参数指定要在数组中插入或删除的起始位置，第二个参数制定了删除元素的个数，若不指定则将起始位置以及后面元素全部删除，两个参数之后的参数指定了插入数组的元素，该方法返回由删除元素组成的数组。
var e = [1,2,3,4,5,6];
e.splice(4); //=> 返回[5,6] ; e是[1,2,3,4]
e.splice(1,2); //=> 返回[2,3] ; e是[1,4]
var f = [1,2,3,4,5];
f.splice(2,0,"a","b"); //=>返回[]; f是[1,2,a,b,3,4,5]
f.splice(2,2,[6,7],3); //=>返回[a,b]; f是[1,2,[6,7],3,4,5]
7.push()和pop()方法
这两个方法将数组当做栈使用，push()方法是在数组尾部添加一个或多个元素，并返回数组的长度。pop()方法是删除数组的最后一个元素，减少数组长度并返回删除的值。
8.unshift()方法和shift()方法
这两个方法是在数组头部进行添加删除操作，unshift()方法是在数组头部添加一个或多个元素，返回数组长度。shift()方法是删除数组第一个元素并返回。
var a=[]; //[] a.push(1,2); //[1,2] a.pop(); //[1] a.unshift(2,3); //[2,3,1] a.shift(); //[3,1]
9.toString()和toLocaleString()方法
这两个方法是将数组每个元素转化为字符串，toString()是将每个元素转化为字符串并且输出用逗号隔开。toLocaleString()方法是数组每个元素调用toLocaleString()转化为字符串，并使用本地化分隔符连接。
下面在介绍几个ECMAScript5中特有的数组方法，在介绍方法之前首先做一个大致了解。大多数方法的第一个参数接受一个函数，并且对数组每个元素调用一次这个函数，如果说稀疏数组，不存在的元素不调用函数。大多数情况下，调用的函数使用三个参数：数组元素，元素的索引以及数组本身。
1.forEach()方法
该方法从头到尾遍历数组，数组每个元素都调用指定的函数。该方法在遍历完所有数组元素之前不会终止。若想提前终止，必须将forEach()放到try块中，并可以抛出异常。
var data=[1,2,3,4,5]
var sum = 0;
data.forEach(function(value){ //=>value为数组元素
sum+=value;
}) //=>15
data.forEach(function(value,i,a){ //=>三个参数分别指代数组元素，元素索引和数组
a[i] = v+1;
}) //=>data=[2,3,4,5,6]
2.map()方法
该方法将数组的每个元素传递给指定的函数，并返回一个新数组，该数组包含了数组元素调用函数对应的返回值。如果是稀疏数组，返回的新数组也是同样结构的系数数组。
var a=[1,2,3];
var b=a.map(function(v){
return v*v;
}) //=> b=[1,4,9]
3.filter()方法--类似于条件筛选
该方法返回的是原始数组的一个子集，传递的函数用来做逻辑判定，返回true或false，如果返回的值为true或可以转化为true，则当前数组元素就是子集的成员，添加到返回的数组中。该方法会跳过稀疏数组的空元素。
var a=[5,4,3,2,1]
var smalla=a.filter(function(v){
return v<3;
}) //=>返回[2,1]
var everya=a.filter(function(v,i){ //=>i表示元素索引
return i%2==0;
}) //=>返回[5,3,1]
4.every()和some()方法
这两个方法是对数组进行逻辑判定，对数组每个元素运用指定函数进行判定返回true或false。
every()方法是当且仅当数组中所有元素调用判定函数都返回true,才返回true，否则返回false。
some()方法是当数组中至少有一个元素调用判定函数返回true，就返回true，否则返回false。
这两个方法都是一旦确认返回值后就不在遍历数组元素了。
5.reduce()和reduceRight()方法
这两个方法使用指定的函数将数组元素进行组合，生成单个值。
reduce()需要两个参数，第一个是执行化简组合的操作函数，第二个是组合的初始值。和前面几个方法不同的是，常见的三个参数（数组元素、元素索引和数组本身）会作为操作函数的2~4个参数传递给函数，第一个参数是到目前为止进行计算组合的结果。
如果是针对空数组，并不指定初始值时调用reduce()方法会导致类型错误异常。
reduceRight()方法和reduce()方法的工作原理相同，不同的是其按数组索引从高到低进行处理（即从右到左进行合并处理）
6.indexOf()和lastIndexOf()方法
这两个方法都是用于在整个数组中搜索具体给定的值，并返回第一个匹配元素的索引值，若没有则返回-1.indexOf()方法是从头到尾进行搜索，而lastIndexOf()是从尾到头进行搜索。