Javascript 배열 방법에 대한 심층 탐구_기본 지식

JavaScript에서는 Array 생성자를 사용하여 배열을 생성하거나 선호되는 방법인 []를 사용하여 빠르게 생성할 수 있습니다. 배열은 Object에서 상속된 프로토타입이며 typeof에 대한 특별한 반환 값이 없으며 'object'만 반환합니다.

1. Array.prototype.slice 메소드
배열의 슬라이스 메소드는 일반적으로 배열에서 슬라이스를 추출하는 데 사용됩니다. 그러나 "배열과 유사한" 개체(예: 인수 및 HTMLCollection)를 실제 배열로 변환하는 기능도 있습니다.

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

var nodeArr = Array.prototype.slice.call(document.forms);
var argsArr = Array.prototype.slice.call(인수);

배열의 슬라이스 메소드에 왜 이런 기능이 있고, 자바스크립트 엔진에서는 어떻게 구현되는지 궁금합니다. 슬라이스의 형제 방법에 그런 능력이 있습니까?

궁금한 마음으로 Google의 V8 자바스크립트 엔진 소스 코드를 로컬에서 다운로드하세요. V8 소스 코드 다운로드 주소: https://github.com/v8/v8.

v8-master/src/array.js에서 "Array.prototype.slice"를 찾으세요.

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

함수 ArraySlice(시작, 끝) {
CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
...
var result = []; // 이 문장이 핵심입니다
if (end_i < start_i) 결과 반환;
if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
...
SparseSlice(array, start_i, end_i - start_i, len, result);
} 그 밖의 {
SimpleSlice(배열, start_i, end_i - start_i, len, 결과);
}
...
결과 반환;

그러다가 "클래스 배열"을 호출하려면 SimpleSlice 메서드를 사용해야 한다고 추측한 후 소스 코드에서 "SimpleSlice"를 검색해 보니 Array.prototype.splice 소스에서도 SimpleSlice 메서드가 호출된 것을 발견했습니다. 코드, 결과 변수도 빈 배열로 초기화되었습니다. 그러나 splice 메소드를 사용하여 "유사 배열"을 실제 배열로 변환하려면 시작 위치 매개변수를 0으로 전달해야 합니다. 즉,

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

var nodeArr = Array.prototype.splice.call(document.forms, 0);

삭제된 배열 항목으로 새로운 배열을 구성하는 것이 구현 원칙이기 때문입니다. 관심 있는 어린이는 Array.prototype.splice의 소스 코드 구현을 살펴볼 수 있습니다.
게다가, 슬라이스는 배열을 복제할 수도 있습니다:

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

var arr = [1, 2, 3];
var cloneArr = arr.slice(); // cloneArr: [1, 2, 3]

2. Array.prototype.push 메소드
push 메소드를 사용하여 배열을 병합할 수 있습니다:

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

var arr1 = [1, 'str', {이름: 'lang'}];
var arr2 = [2, 'ing'];
Array.prototype.push.apply(arr1, arr2);
// 결과 반환: [1, "str", {name: 'lang'}, 2, "ing"]

3. Array.prototype.sort 메소드
먼저 코드를 입력하세요:

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

var arr = ['1', '2', '10', '12'];
arr.sort();
// 결과 반환: ["1", "10", "12", "2"]

위의 결과는 일반적으로 우리가 원하는 결과가 아니므로 숫자 값으로 정렬하는 방법:

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

arr.sort(함수(a, b) {
a - b 반환;
})
// 결과 반환: ["1", "2", "10", "12"]

정렬 비교기 기능을 사용하면 많은 비교기를 사용자 정의하여 개인화된 정렬을 달성할 수 있습니다.

4. 길이 속성
배열의 길이 속성은 읽기 전용이 아니므로 쓸 수도 있습니다. 예를 들어 배열을 자르려면 길이 속성을 사용하세요.

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

var arr = [1, 2, 3, 4];
arr.length = 2;
// 도착: [1, 2]
arr.length = 0;
// 도착: []

동시에 길이 속성을 크게 하면 배열의 길이 값이 늘어나며, 채워야 할 새 요소로 undef가 사용됩니다.

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

var arr = [];
arr.length = 3;
// 도착: [정의되지 않음, 정의되지 않음, 정의되지 않음]

오늘은 여기까지입니다. 앞으로 새로운 발견이 있으면 여기에 추가하겠습니다.
예전에는 블로그를 하는 습관이 없었기 때문에 평소에 Youdao Cloud Notes에 요약을 올리는 데에만 익숙했습니다. 다른 사람들이 더 잘 이해할 수 있도록 표현하는 것입니다.

잘못된 표현이나 오해가 있는 경우 수정하도록 도와주세요.

일반적으로 사용되는 자바스크립트 배열 방법도 첨부되어 있습니다

concat()은 두 개 이상의 배열을 연결하고 결과를 반환합니다.
Join()은 배열의 모든 요소를 ​​문자열에 넣습니다. 요소는 지정된 구분 기호로 구분됩니다.
pop()은 배열의 마지막 요소를 제거하고 반환합니다
push()는 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
reverse()는 배열 요소의 순서를 반대로 바꿉니다.
Shift()는 배열의 첫 번째 요소를 삭제하고 반환합니다.
슬라이스()는 기존 배열에서 선택한 요소를 반환합니다
sort()는 배열의 요소를 정렬합니다
splice()는 요소를 제거하고 배열에 새 요소를 추가합니다.
toSource()는 객체의 소스 코드를 반환합니다
toString()은 배열을 문자열로 변환하고 결과를 반환합니다.
toLocaleString()은 배열을 로컬 배열로 변환하고 결과를 반환합니다.
unshift()는 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
valueOf()는 배열 객체의 원래 값을 반환합니다