/**
* 이 글은 순전히 현재 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
아니요 매개변수는 이 메소드를 호출할 때 사용되며 배열의 요소를 알파벳순으로 정렬합니다.
더 정확하게는 문자 인코딩 순서에 따라 정렬됩니다.
다른 기준으로 정렬하려면 두 값을 비교하고 두 값의 상대적 순서를 설명하는 숫자를 반환하는 비교 함수를 제공해야 합니다. 비교 함수에는 a와 b라는 두 개의 매개변수가 있어야 하며 반환값은 다음과 같습니다.
•a가 b보다 작으면 정렬된 배열에서 a가 b 앞에 나타나야 하고 0보다 작은 값을 반환합니다.
•a가 b와 같으면 0을 반환합니다.
•a가 b보다 큰 경우 0보다 큰 값을 반환합니다.
---------------------------------- --- ----------------------------------
접속자 방법
이 메소드는 배열 자체를 수정하지 않고 해당 결과를 반환합니다
concat
코드 복사
코드는 다음과 같습니다. Array.concat(value1, value2, ..., valueN) // 2개 이상의 배열을 연결하고 병합된 배열을 반환합니다.
그러나 주의해야 할 사항이 하나 있는데, 이는 다음 예에서 설명됩니다.
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] / / 배열을 처음부터 끝까지 순회하고, 배열의 각 요소에 대해 지정된 함수를 호출합니다.
코드 복사
코드는 다음과 같습니다.
[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);
map
*[ECMAScript 5]
Array.map(callback[, thisArg]); // 배열 요소를 탐색하고 호출합니다. 지정된 함수 및 모든 결과를 배열로 반환
매개 변수:
콜백: 배열을 순회할 때 호출되는 함수
thisObject: 콜백 범위 지정
예:
코드 복사
코드는 다음과 같습니다.
[1, 2, 3].map(function(num) { / / return [2, 3, 4]
return num 1;
})
코드 복사
코드는 다음과 같습니다.
Array.filter(callback[, thisObject]) // 배열 탐색 조건을 충족하는 요소(true 반환)는 반환 값 배열에 추가됩니다.
코드 복사
코드는 다음과 같습니다.
[1, 2, 3].filter(function(num) { // return [1]
return num < 2;
}); 🎜>모든 것
코드는 다음과 같습니다.
Array.every(callback[, thisObject]); // "AND"
Array.some(callback[, thisObject]) // "또는"
매개변수: 콜백: 배열을 순회할 때 호출되는 함수
thisObject: 콜백의 범위를 지정합니다.
코드 복사
코드는 다음과 같습니다.
[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에 따라 배열 요소를 결합합니다. 높음에서 낮음(오른쪽에서 왼쪽)
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 ) {
코드 복사
코드는 다음과 같습니다.
function forEachTest() { howTime ("forEach", function() {
var num = 0;
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 |
코드는 다음과 같습니다.
이상한 점은 성능 측면에서 기본 forEach 메서드는 실제로 직접 구성한 forEach만큼 좋지 않습니다!
또한 다른 Array 객체의 다른 반복 방법은 어떻습니까?
이 데모를 보시면 기본적으로 이해하실 것입니다: http://maplejan.sinaapp.com/demo/ArratMethod.html
또한 흥미로운 상황도 발견했습니다.
데모 자바스크립트 코드를 콘솔에서 직접 실행해 보면 성능에서 큰 차이를 느낄 수 있습니다!
이때 for 루프를 사용하여 직접 작성하는 성능은 더욱 저하됩니다.
이 질문에 대해 Zhihu에 질문했습니다. 질문 주소는 http://www.zhihu.com/question/20837774입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
