자바스크립트 배열에 대한 흥미로운 점

자바스크립트 배열에 대한 몇 가지 흥미로운 사실.

자바스크립트 배열은 객체일 뿐입니다.

let arr = [1, 2, 3];
let arr2 = {
  '0': 1,
  '1': 2,
  '2': 3
}

유일한 차이점은 arr이 Array 프로토타입에서 상속하므로 모든 배열 메서드(map, reduce 등...)와 length 속성이 있다는 것입니다.

새 속성을 만들 수 있습니다.

배열은 객체일 뿐이므로 다른 언어의 배열과 비교할 때 속도가 느리고 새 속성을 만들 수 있습니다.

arr.total = function() {
  return this.reduce((acc, i) => acc + i, 0)
}
console.log(arr.total()); // 10 

길이가 반드시 길이는 아니다

그것은 단지 마지막 요소 인덱스 + 1입니다.

let countries = [];
countries[1000] = 'Brazil';
console.log(arr.length); // 1001 🤷

길이를 직접 변경할 수 있습니다.

길이를 변경하는 것만으로 배열의 요소를 제거할 수 있습니다.

let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]

어레이의 길이를 변경하여 새 슬롯을 추가할 수도 있습니다.

let arr = [1, 2, 3, 4];
arr.length = 100;
console.log(arr); // [1, 2, 3, 4, 96 empty items]

범위를 벗어난 색인 오류가 없습니다.

자바 스크립트에 색인 초과 오류가 없으며 초기화되지 않았거나 존재하지 않는 색인은 정의되지 않은 값을 반환합니다.

let arr = [1, 2, 3];
console.log(arr[999]); // undefined

지도는 빈 항목에 대해 호출되지 않습니다

Map, Filter, Reduce 등은 빈(초기화되지 않은) 항목에서 작동하지 않습니다.

let arr = Array(5); // [5 empty items] 
arr = arr.map(() => 1);
console.log(arr); // [5 empty items]

비어 있음 !== 정의되지 않음

비어 있음은 정의되지 않은 것과 같지 않습니다. 즉, 정의되지 않은 항목이 있는 인덱스는 비어 있지 않습니다.

let arr = [undefined, undefined];
arr = arr.map(() => 1);
console.log(arr); // [1, 1]

그러나 빈 항목을 쿼리하면 반환된 값은 항상 정의되지 않습니다.

let arr = new Array(3);
console.log(arr[2]); // undefined

항목 초기화

Array.from으로 모든 객체를 초기화할 수 있습니다.

let arr = Array.from(Array(10));
arr = arr.map(() => 1); // map will work now
// Array.from can receive a second argument that is a map
let arr = Array.from(Array(10), () => 1);
console.log(arr); // same result as above without creating the intermediate array

자바스크립트 배열에 대한 더 흥미로운 사실이 있다면 댓글을 남겨주세요 :)