JavaScript_javascript 기술에 포함된 배열 개체의 내장 메서드 소개

/**
* 이 글은 순전히 현재 W3C 표준에 내장된 배열 객체의 메소드를 정리하기 위한 것입니다.
* 전체 내용은 영양가가 없지만 성능 테스트의 마지막 부분에서 몇 가지 질문이 제기됩니다.
*/
Mutator 메소드
이러한 메소드는 배열 자체를 직접 수정합니다
pop 및 push
Array.pop (); // 배열의 마지막 요소를 삭제하고 삭제된 요소를 반환합니다.
Array.push(element1, ..., elementN) // 배열의 끝에 1-N 요소를 삽입하고 배열의 길이를 반환합니다. 작업 후
이러한 pop 및 push를 통해 배열을 스택으로 시뮬레이션하여 작업할 수 있습니다.
스택 데이터 구조의 특징은 "후입 선출(LIFO, Last In First Out)"입니다.
shift 및 unshift
Array.shift(); // 배열의 첫 번째 요소를 삭제하고 삭제된 요소를 반환합니다.
Array.unshift(element1, ..., elementN) ; // 배열의 헤드에 1-N 요소를 삽입하고 작업 후 배열의 길이를 반환합니다.
큐 작업을 구현하려면 Shift 및 unshift를 사용하세요.
큐의 작동 모드는 스택의 작동 모드와 반대이며 "선입선출"(FIFO, First-In-First-Out)을 사용합니다.
접속

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

Array.splice(index, HowMany[, element1[, ...[, elementN]]])
Array.splice(index)

인덱스: 요소 추가/제거를 지정하는 위치입니다.
howmany: 삭제해야 하는 요소 수를 지정합니다.
elements: 인덱스가 가리키는 아래 첨자부터 시작하여 배열에 추가할 새 요소를 지정합니다.
스플라이스 방식은 팝(pop), 푸시(push), 시프트(shift), 언시프트(unshift)를 보완하는 방식입니다.
반환값은 삭제된 요소입니다.

역방향

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

Array.reverse(); // 배열 요소의 순서를 반대로 하고 역방향 배열을 반환합니다.

sort

코드 복사 코드는 다음과 같습니다. Array.sort([compareFunction])

아니요 매개변수는 이 메소드를 호출할 때 사용되며 배열의 요소를 알파벳순으로 정렬합니다.
더 정확하게는 문자 인코딩 순서에 따라 정렬됩니다.

다른 기준으로 정렬하려면 두 값을 비교하고 두 값의 상대적 순서를 설명하는 숫자를 반환하는 비교 함수를 제공해야 합니다. 비교 함수에는 a와 b라는 두 개의 매개변수가 있어야 하며 반환값은 다음과 같습니다.
•a가 b보다 작으면 정렬된 배열에서 a가 b 앞에 나타나야 하고 0보다 작은 값을 반환합니다.
•a가 b와 같으면 0을 반환합니다.
•a가 b보다 큰 경우 0보다 큰 값을 반환합니다.
---------------------------------- --- ----------------------------------

접속자 방법

이 메소드는 배열 자체를 수정하지 않고 해당 결과를 반환합니다concat

코드 복사 코드는 다음과 같습니다. Array.concat(value1, value2, ..., valueN) // 2개 이상의 배열을 연결하고 병합된 배열을 반환합니다.

그러나 주의해야 할 사항이 하나 있는데, 이는 다음 예에서 설명됩니다.

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

arr.concat(4, 5) // return [1, 2, 3, 4, 5]

arr.concat([ 4, 5]); // return [1, 2, 3, 4, 5]
arr.concat([4, 5], [6, 7]) // return [ 1, 2, 3, 4, 5, 6, 7]
arr.concat(4, [5, [6, 7]]) // return [1, 2, 3, 4, 5, [6] , 7]]



join

string = Array.join(separator) 배열의 모든 요소를 ​​문자열에 넣습니다. 그 중 요소는 지정된 구분 기호로 구분됩니다. 기본 구분 기호는 쉼표(,)이며, 반환 값은 결합된 문자열입니다.
[1, 2, 3].join(); // return "1,2,3"Array.join() 메서드는 실제로 String.splite()의 반대 작업입니다.

슬라이스

코드 복사 코드는 다음과 같습니다. Array.slice(begin[, end]); // 배열에서 선택한 요소를 반환합니다.

toString

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

Array.toString(); // 이에 대해서는 더 이상 이야기하지 않겠습니다. 모든 JavaScript에는

indexOf 및 lastIndexOf *[ECMAScript 5]

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

Array.indexOf(searchElement[, fromIndex]) //
처음부터 배열 검색 .lastIndexOf(searchElement[, fromIndex]); // 끝부터 검색

searchElement: 검색할 값
fromIndex: 시작 위치를 나타내는 인덱스 검색
------ ---------------------------- --------- -------------

각 반복 방법
*[ECMAScript 5] / / 배열을 처음부터 끝까지 순회하고, 배열의 각 요소에 대해 지정된 함수를 호출합니다.

매개변수: 콜백: 배열을 순회할 때 호출되는 함수 thisArg: 콜백 지정 의 범위 또한 콜백은 세 가지 매개변수를 호출합니다: value: 배열 요소 index: 배열 인덱스 array: 배열 자체

코드 복사


코드는 다음과 같습니다.


[1, 2].forEach(function(value, index, array) {
console.log(값, 인덱스, 배열)
})

// return // 1 0 [1, 2] // 2 1 [1 , 2] 참고: forEach는 중단을 통해 배열 순회를 중단할 수 없습니다. 해결책: try 메서드를 사용하여 예외를 발생시키고 순회를 종료합니다.

코드 복사


코드는 다음과 같습니다.

try {
[1,2 ,3] .forEach(function(val) {
console.log(val);

throw(e) }) } catch(e) { console.log( e); }

map
*[ECMAScript 5]
Array.map(callback[, thisArg]); // 배열 요소를 탐색하고 호출합니다. 지정된 함수 및 모든 결과를 배열로 반환
매개 변수:
콜백: 배열을 순회할 때 호출되는 함수
thisObject: 콜백 범위 지정
예:

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


[1, 2, 3].map(function(num) { / / return [2, 3, 4]
return num 1;
})

필터 *[ECMAScript 5]

코드 복사


코드는 다음과 같습니다.

Array.filter(callback[, thisObject]) // 배열 탐색 조건을 충족하는 요소(true 반환)는 반환 값 배열에 추가됩니다. ​​

매개변수: 콜백: 배열을 순회할 때 호출되는 함수 thisObject: 콜백 범위 지정 예:

코드 복사

코드는 다음과 같습니다.


[1, 2, 3].filter(function(num) { // return [1]
return num < 2;
}); 🎜>모든 것

*[ECMAScript 5] 코드 복사

코드는 다음과 같습니다.


Array.every(callback[, thisObject]); // "AND"
Array.some(callback[, thisObject]) // "또는"

매개변수: 콜백: 배열을 순회할 때 호출되는 함수
thisObject: 콜백의 범위를 지정합니다.

every: 모든 요소가 함수를 호출하고 true를 반환하면 결과는 true를 반환하고, 그렇지 않으면 false를 반환합니다. 일부: 모든 요소가 함수를 호출하고 false를 반환하면 결과는 false를 반환하고, 그렇지 않으면 true를 반환합니다. every 및 some의 반환 값이 결정되면 순회가 즉시 중지됩니다. 예:

코드 복사


코드는 다음과 같습니다.

[1, 2, 3].every(function(num) { // return false
return num > 1;
[1, 2, 3] . some(function(num) { // true를 반환합니다
return num > 2;
})

reduce 및 축소 *[ECMAScript 5] // 지정된 방법을 사용하여 낮은 것부터 높은 것까지(왼쪽에서 오른쪽으로) 배열 요소를 결합합니다. Array.reduceRight(callback[,initialValue]) // 지정된 방법을 사용하여 Index에 따라 배열 요소를 결합합니다. 높음에서 낮음(오른쪽에서 왼쪽)

매개변수: 콜백: 배열 순회 시 호출되는 함수 initialValue: 콜백이 처음 호출될 때 전달되는 이전 값 또한 콜백은 4개의 매개변수를 호출합니다. previousValue: 지금까지의 작업 누적 결과currentValue: 배열 요소

index: 배열 인덱스

array: 배열 자체
예:
[1, 2, 3].reduce(function(x, y) { // return 106
return x y;

}, 100)
------ --- ---------------------------------- --- -------

성능 테스트

테스트 시스템: Windows 7
테스트 브라우저: Chrome 26.0 .1386.0




코드 복사


코드는 다음과 같습니다.
var arr = []

for(var i = 0; i < 999999; i ) {

arr.push(i) } forEach

코드 복사


코드는 다음과 같습니다.

function forEachTest() { howTime ("forEach", function() {
var num = 0;

arr.forEach(function(val, key) { num = val; }); }); howTime("for" , function() { var num = 0; for(var i = 0, len = arr.length; i < len; i ) {

num = arr[i];

}
});
}


다음은 3번의 무작위 테스트 결과입니다. (구체적인 결과는 컴퓨터 구성과 관련이 있으며, 크기가 작을수록 결과가 좋을수록 성능이 좋아집니다):

time_forEach	time_for
1421.000ms	64.000ms
1641.000ms	63.000ms
1525.000ms	63.000ms

보시다시피 Chrome은 forEach를 특별히 최적화하지 않았습니다. for 루프 순회를 직접 사용하는 것과 비교하면 성능이 여전히 더 좋습니다. 큰 격차.
forEach는 ECMAScript 5이므로 이전 브라우저에서는 이를 지원하지 않습니다.
그러나 MDN은 이전 버전과 호환되는 솔루션을 제공했습니다.

코드 복사

time_forEach	time_for
1421.000ms	64.000ms
1641.000ms	63.000ms
1525.000ms	63.000ms

코드는 다음과 같습니다.

if(!Array.prototype.forEach) { Array.prototype.forEach = function(fn,scope) { for(var i = 0, len = this.length; i < len; i) { fn.call(scope, this[i], i, this) } } }

이상한 점은 성능 측면에서 기본 forEach 메서드는 실제로 직접 구성한 forEach만큼 좋지 않습니다!
또한 다른 Array 객체의 다른 반복 방법은 어떻습니까?
이 데모를 보시면 기본적으로 이해하실 것입니다: http://maplejan.sinaapp.com/demo/ArratMethod.html
또한 흥미로운 상황도 발견했습니다.
데모 자바스크립트 코드를 콘솔에서 직접 실행해 보면 성능에서 큰 차이를 느낄 수 있습니다!
이때 for 루프를 사용하여 직접 작성하는 성능은 더욱 저하됩니다.
이 질문에 대해 Zhihu에 질문했습니다. 질문 주소는 http://www.zhihu.com/question/20837774입니다.