Javascript의 배열 메소드 요약(권장)_javascript 기술

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이 반환됩니다.

코드 복사 코드는 다음과 같습니다.

var sy = [1111,222,4,33];
sy.sort();    sy.sort(함수(a,b){
              a-b 반환;
});                                     

참고: 여기서는 익명 함수를 사용하는 것이 가장 적합합니다. 익명 함수는 한 번만 호출되고 함수 이름을 지정할 필요가 없기 때문입니다.

4.Array.concat() 메소드

이 메서드는 새 배열을 생성하고 반환하며, 원래 배열 요소와 메서드의 각 요소를 연결하여 새 배열을 형성합니다. 이 메서드는 메서드의 매개변수를 재귀적으로 호출하지 않습니다.

코드 복사 코드는 다음과 같습니다. var a = [1,2,3];

a.concat(4,5); //=>"1,2,3,4,5"

a.concat([4,5]); //=>"1,2,3,4,5"
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]"

5.Array.slice() 메소드

이 메서드는 지정된 배열의 조각 또는 하위 배열을 반환합니다. 이 메서드에는 조각의 시작 및 끝 위치를 각각 지정하는 두 개의 매개변수가 있을 수 있습니다. 반환된 배열에는 첫 번째 매개변수로 지정된 요소와 최대 모든 요소가 포함됩니다. 단, 두 매개변수로 지정된 위치의 첫 번째 배열 요소는 포함되지 않습니다. 매개변수가 하나만 있는 경우 배열 끝까지 지정된 시작 위치가 포함됩니다. 매개변수는 배열의 마지막 요소를 기준으로 한 위치를 나타내는 음수 값일 수 있습니다. 이 메서드는 호출되는 배열을 수정하지 않습니다.

코드 복사 코드는 다음과 같습니다. var d =[1,2,3,4,5];

d.slice(1,2);                        //=>"2"

d.slice(1,-1); //=>"2,3,4"
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()是从尾到头进行搜索。