자바스크립트 배열 배열방법 해석_기본지식

이전 기사 "Javascript Array Array 기본 소개"에 이어 이번 기사에서는 Array의 모든 메소드를 자세히 소개합니다.

모든 배열 메소드는 Array.prototype에 정의되어 있으며 Array.prototype 자체도 배열입니다.

array.concat()

현재 배열의 얕은 복사본을 만들고 수신된 매개변수를 새 배열의 끝에 추가합니다. 원래 배열은 변경되지 않습니다.

문법

array.concat(value1, value2, ..., valueN)
매개변수가 병합이 필요한 배열 또는 배열이 아닌 값입니다

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

배열 또는 비배열 값을 결합할 수 있지만 개체를 ​​포함하는 경우 개체는 여전히 원래 개체를 참조합니다.

array.join()

구분 기호를 사용하여 배열의 모든 요소와 연결된 문자열을 반환합니다. 기본 구분 기호는 쉼표입니다.

문법

array.join(구분자)
매개변수는 구분 기호입니다

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

많은 수의 문자열 조각을 조합할 때 조인 방법이 +element 연산자보다 빠릅니다.

new Array(3)를 사용하면 길이가 3인 빈 배열이 생성되고, Join() 메서드와 결합되어 특정 문자열을 반복할 수 있습니다.

var str = new Array(3).join('-+'); // -+-+

문자열이 구분 기호이므로 반복 횟수는 배열 길이에서 1을 뺀 값입니다.

배열 자체가 객체이기 때문에 배열을 문자열로 연결하는 데에도 사용할 수 있는 toString() 메서드가 있지만 구분 기호는 쉼표만 가능합니다.

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

실제로 각 요소의 toString() 메서드를 먼저 호출합니다.

array.push()

배열 끝에 하나 이상의 매개변수를 추가하고 배열 길이를 반환합니다. 배열 자체를 변경하십시오.

문법

array.push(value1, value2, ..., valueN);
예시

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

배열 끝에 값을 삽입하는 또 다른 방법을 구현할 수도 있습니다.

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

배열의 마지막 항목을 삭제하고 삭제된 항목을 반환합니다. 배열 자체를 변경하십시오.

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

배열이 비어 있으면 정의되지 않음을 반환합니다.

array.unshift()

배열의 헤드에 하나 이상의 매개변수를 삽입하고 배열 길이를 반환합니다. 배열 자체를 변경하십시오.

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

배열의 첫 번째 항목을 삭제하고 삭제된 항목을 반환합니다. 배열 자체를 변경하십시오.

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

배열이 비어 있으면 정의되지 않음을 반환합니다.

array.sort()

이 메서드는 각 요소의 toString() 메서드에서 반환된 값에 따라 정렬하므로 일반적으로 예상한 결과를 얻지 못합니다.

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

그러나 sort() 메서드는 비교를 위해 사용자 정의 함수를 받을 수 있습니다. 비교 함수는 두 개의 매개변수, 특히 오름차순을 기본값으로 하는 sort()를 허용하므로 첫 번째 매개변수가 두 번째 매개변수 앞에 오도록 하려면 음수를 반환해야 하며, 같으면 0을 반환하고, 같으면 0을 반환해야 합니다. 뒤에 있으면 양수를 반환합니다.

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

문자열 비교는 string.localeCompare() 메서드와 함께 사용할 수 있습니다.

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F'] 

array.reverse()

배열 요소의 순서를 반대로 바꾸고 배열 자체를 반환합니다.

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

배열 자체를 변경하지 않고 배열의 일부를 얕은 복사합니다.

array.slice(시작, 끝);
이 메서드는 두 개의 매개 변수를 허용하며 마지막 매개 변수는 생략할 수 있으며 기본값은 배열 자체의 길이입니다.

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

음수가 전달되면 배열의 길이가 자동으로 추가되어 음수가 아닌 숫자가 되도록 시도합니다.
절대값이 배열 길이보다 작은 값을 전달한다는 것은 음의 절대값 요소 수를 뒤에서 앞으로 가져오는 것을 의미합니다. 예를 들어, 마지막 세 요소가 예제에 사용되었습니다.

array.splice()

이것은 배열에서 가장 강력하고 일반적으로 사용되는 방법으로 삭제, 삽입 및 교체가 가능합니다.

문법

array.slice(시작, 개수, 항목);
이 메서드는 하나 이상의 요소를 제거하고 새 요소로 바꿉니다. start는 시작 위치, count는 삭제 횟수, item은 새로 추가된 요소(항목이 2개 이상이고 생략 가능), 삭제된 요소를 배열 형태로 반환한다.

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

다음은 주로 ie8이 지원하지 않는 ECMAScript5의 몇 가지 새로운 방법을 소개합니다.

indexOf() 및 lastIndexOf()

배열에서 해당 항목의 인덱스 위치를 찾습니다. 두 번째 매개변수는 해당 검색 방향의 시작 위치를 나타냅니다. 찾지 못한 경우 -1을 반환합니다.
indexOf()는 앞에서 뒤로 검색하고, lastIndexOf()는 뒤에서 앞으로 검색합니다.

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

반복 방법

다음 메소드는 두 개의 매개변수를 허용합니다. 첫 번째는 각 항목에 대해 실행할 함수이고 두 번째는 함수가 실행되는 범위입니다.
실행 중인 함수에는 현재 항목, 위치 및 배열 자체라는 세 가지 매개 변수가 있습니다.

array.every()

주어진 함수를 실행하고 반복의 각 항목이 true를 반환하면 결국 true를 반환합니다.

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数，如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数，将迭代中返回的值组成数组，返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数，将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数，不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数，第一个参数是每一个运行的自定义函数，第二项是作为归并基础的初始值。
自定义函数接受四个参数，分别是前一项，当前项，位置，数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题，下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。