배열, 배열 생성자, for in 루프, typeof, instanceOf_javascript技巧

참고: JavaScript의 배열은 연관 배열이 아닙니다. JavaScript에는 키-값 대응을 관리하는 객체만 있습니다. 그러나 연관 배열은 순서를 유지하지만 객체는 그렇지 않습니다.

for in 루프는 프로토타입 체인의 모든 속성을 열거하므로 이러한 속성을 필터링하는 유일한 방법은 `hasOwnProperty` 함수를 사용하는 것입니다. 따라서 일반 for 루프보다 몇 배 더 느립니다.

반복
배열 순회 성능을 극대화하려면 클래식 for 루프를 사용하는 것이 좋습니다.

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

var list = [1, 2, 3 , 4, 5, ... 100000000];
for(var i = 0, l = list.length; i < l; i ) {
console.log(list[i]); >}

위 코드에는 l = list.length를 통해 배열의 길이를 캐시하는 처리가 있습니다.

길이는 배열의 속성이지만 각 루프에서 길이에 액세스하면 성능 오버헤드가 있습니다. 어쩌면 최신 JavaScript 엔진이 이를 최적화했을 수도 있지만, 우리 코드가 이러한 최신 엔진에서 실행되는지 여부는 보장할 수 없습니다.

사실 배열 길이를 캐싱하지 않는 방식은 캐싱된 버전보다 훨씬 느립니다.

`length` 속성(`length` 속성)
length 속성의 getter 메소드는 단순히 배열의 길이를 반환하는 반면 setter 메소드는 배열을 자릅니다.

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

var foo = [1, 2, 3 , 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]

foo.length; // [1, 2, 3]


번역자 주: 현재 Firebug에서 foo의 값을 보면 [1, 2, 3, 정의되지 않음, 정의되지 않음, 정의되지 않음]이지만 이 결과는 정확하지 않습니다. , Chrome 콘솔에서 foo의 결과를 확인하면 다음과 같은 것을 확인할 수 있습니다. [1, 2, 3] JavaScript에서는 변수가 키워드가 아니므로 변수의 의미는 다음과 같습니다. 위의 두 결과는 완전히 다릅니다.

// 번역자 주: 확인을 위해 다음 코드를 실행하여 foo에 일련번호 5가 있는지 확인해 보겠습니다.
5 in foo; // Firebug 또는 Chrome에서 false를 반환합니다.
foo[5] = 정의되지 않음;
5 in foo; // Firebug 또는 Chrome에서 true를 반환합니다.
은 길이 A로 설정됩니다. 값이 작을수록 배열이 잘리지만 길이 속성을 늘려도 배열에는 영향을 주지 않습니다.

결론(In 결론)
더 나은 성능을 위해서는 일반 for 루프를 사용하고 배열의 길이 속성을 캐시하는 것이 좋습니다. for in을 사용하여 배열을 반복하는 것은 잘못된 코딩 관행으로 간주되며 오류를 생성하고 성능 문제를 일으키는 경향이 있습니다.

배열 생성자
Array의 생성자는 인수를 처리하는 방법이 약간 모호하므로 배열을 생성하려면 항상 배열에 대한 리터럴 구문([])을 사용하는 것이 좋습니다.

[1, 2, 3]; // 결과: [1, 2, 3]
new Array(1, 2, 3) // 결과: [1, 2, 3]

[3]; // 결과: [3]
new Array(3); // 결과: []
new Array('3') // 결과: ['3']
번역자 참고: 여기서 모호한 점은 배열의 두 가지 생성자 구문을 나타냅니다. var arr1 = new Array(arrayLength); var arr2 = new Array(element0, element1, ..., elementN); / 번역자 주: 따라서 다음 코드는 매우 혼란스러울 것입니다.
new Array(3, 4, 5) // 결과: [3, 4, 5]
new Array(3) // 결과: [] , 이 배열의 길이는 3입니다.
생성자에 매개변수가 하나만 전달되고(역자 주: new Array(3);의 호출 메서드 참조) 이 매개변수가 숫자이므로 생성자는 빈 값을 반환합니다. 이 매개변수에 길이 속성이 설정된 배열입니다. 이때는 length 속성만 설정되고 실제 배열은 생성되지 않는다는 점에 유의해야 합니다. 번역가의 메모: Firebug에서는 [정의되지 않음, 정의되지 않음, 정의되지 않음]이 표시되는데 이는 실제로 잘못된 것입니다. 이전 섹션에 자세한 분석이 있습니다.

var arr = new Array(3);
arr[1]; // 정의되지 않음
1 in arr; // false, 배열이 아직 생성되지 않았습니다.
이 내용이 우선합니다. 배열의 과도한 설정 길이 속성은 for 루프의 문제를 피하기 위해 문자열을 루프해야 하는 경우와 같은 몇 가지 상황에서만 유용합니다.

new Array(count 1).join(stringToRepeat);
// 번역자 참고 사항: new Array(3).join('#')은 "##"을 반환합니다.
결론(In 결론)
새 배열을 생성할 때 배열 생성자를 사용하지 않도록 노력해야 합니다. 배열의 리터럴 구문을 사용하는 것이 좋습니다. 더 짧고 간결해져서 코드의 가독성이 높아집니다.

for in 루프
in 연산자와 마찬가지로 for in 루프도 객체 속성을 찾을 때 프로토타입 체인의 모든 속성을 순회합니다.

참고: for in 루프는 배열의 길이 속성과 같이 열거 가능 항목이 false로 설정된 속성을 반복하지 않습니다.




코드 복사

코드는 다음과 같습니다.

// Object.prototype 수정
Object.prototype.bar = 1;

var foo = {moo: 2}
for(var i in foo) {
console.log(i); // bar와 moo 두 가지 속성 출력
}

for 자체의 동작을 변경할 수 없으므로 필터링이 필요합니다. 루프 본문에 나타나는 예상되지 않은 속성은 Object.prototype 프로토타입의 `hasOwnProperty` 함수를 통해 수행할 수 있습니다.

참고: for in은 항상 전체 프로토타입 체인을 순회하므로 객체의 상속 수준이 너무 깊으면 성능에 영향을 미칩니다.

`hasOwnProperty`를 사용하여 필터링

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

// foo 변수는 위 예의 변수입니다.
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i); 🎜>}
}

이 버전의 코드가 코드를 작성하는 유일한 올바른 방법입니다. hasOwnProperty를 사용했기 때문에 이번에는 moo만 출력됩니다. hasOwnProperty를 사용하지 않으면 기본 객체 프로토타입(예: Object.prototype)이 확장될 때 이 코드가 중단될 수 있습니다.

널리 사용되는 클래스 라이브러리인 Prototype은 기본 JavaScript 개체를 확장합니다. 따라서 이 클래스 라이브러리가 페이지에 포함되면 hasOwnProperty 필터링이 없는 for in 루프는 필연적으로 문제를 일으킬 수 있습니다.

모범 사례
항상 hasOwnProperty를 사용하는 것이 좋습니다. 코드가 실행되는 환경에 대해 어떤 가정도 하지 말고 네이티브 개체가 확장되었는지도 가정하지 마세요.

typeof 연산자
typeof 연산자(`instanceof`와 함께)는 원하는 결과를 얻는 것이 거의 불가능하기 때문에 아마도 JavaScript의 가장 큰 설계 결함일 것입니다.

instanceof에는 매우 적은 응용 시나리오가 있지만 typeof에는 실제 응용 프로그램이 하나만 있습니다(역자 주: 이 실제 응용 프로그램은 객체가 정의되었는지 또는 값이 할당되었는지 감지하는 데 사용됩니다). 객체의 유형을 확인하는 데 사용되지 않습니다.

참고: typeof(obj)와 같은 함수 구문을 사용하여 typeof를 호출할 수도 있지만 이는 함수 호출이 아닙니다. 이 두 괄호는 표현식의 값을 계산하는 데에만 사용되며, 반환 값은 typeof 연산자의 피연산자로 사용됩니다. 실제로 typeof라는 함수는 없습니다.


JavaScript 유형 테이블 값 클래스 유형
------------------------- - ------------------
"foo" String string
new String("foo") String 객체
1.2 Number number
new Number (1.2 ) Number 객체
true Boolean boolean
new Boolean(true) Boolean 객체
new Date() Date 객체
new Error() Error 객체
[1,2,3] 배열 object
new Array(1, 2, 3) 배열 개체
new Function("") 함수 함수
/abc/g RegExp 개체(Nitro/V8의 함수)
new RegExp("meow ") RegExp 객체(Nitro/V8의 함수)
{} Object 객체
new Object() Object object
위 표에서 Type 열은 typeof 연산자의 연산 결과를 나타냅니다. 보시다시피, 이 값은 대부분의 경우 "객체"를 반환합니다.

클래스 객체의 내부 속성 [[클래스]] 값을 나타내는 열입니다.

JavaScript 표준 문서는 다음을 정의합니다: [[클래스]] 값은 다음 문자열 중 하나만 될 수 있습니다: Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp , String

객체의 [[Class]]를 가져오려면 Object.prototype에 정의된 toString 메서드를 사용해야 합니다.

객체의 클래스(The Class of an object)
JavaScript 표준 문서에서는 [[Class]] 값을 얻는 방법 중 Object.prototype.toString을 사용하는 한 가지 방법만 제공합니다.

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

function is(type, obj) {
var clas = Object.prototype.toString.call(obj).slice(8, -1);
return obj !== 정의되지 않음 && obj !== null && clas === type;

is('String', 'test'); // 참
is('String', new String('test')) // 참


위의 예에서는 Object.prototype.toString 메소드가 호출되며 이는 [[Class]] 값을 가져와야 하는 객체로 설정됩니다.

번역자 참고 사항: Object.prototype.toString은 표준 형식 문자열을 반환하므로 위의 예에서는 아래와 같이 슬라이스를 통해 지정된 위치에서 문자열을 가로챌 수 있습니다.

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

Object.prototype.toString.call([]) // "[object Array]"

Object.prototype.toString.call({}) // "[객체 객체]"
Object.prototype.toString.call(2) // "[객체 번호]"


ES5 팁: ECMAScript 5에서는 편의상 Object.prototype.toString 메서드가 null 및 정의되지 않은 상태에서 호출되고 해당 반환 값이 Object에서 Null 및 Undefine으로 변경됩니다.

번역자 주: 이 변경 사항은 아래와 같이 IE8 및 Firefox 4에서 볼 수 있습니다.

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

// IE8
Object.prototype.toString.call(null) // "[object Object]"
Object.prototype.toString.call ( 정의되지 않음) // "[객체 객체]"

// Firefox 4
Object.prototype.toString.call(null) // "[객체 Null]"
Object.prototype.toString . call(undefine) // "[object Undefine]"
정의되지 않은 변수 테스트
typeof foo !== 'undefine'

위 코드는 foo가 정의되었는지 여부를 감지합니다. 정의되지 않고 직접 사용되지 않으면 ReferenceError 예외가 발생합니다. 이것은 typeof가 유용한 유일한 장소입니다.

결론
객체의 유형을 감지하려면 Object.prototype.toString 메서드를 사용하는 것이 가장 신뢰할 수 있는 방법이므로 적극 권장됩니다. 위 표에서 볼 수 있듯이, typeof의 일부 반환 값은 표준 문서에 정의되어 있지 않으므로 엔진 구현마다 다를 수 있습니다.

변수가 정의되었는지 확인하려는 경우가 아니면 typeof 연산자를 사용하지 않도록 노력해야 합니다.

instanceof 연산자
instanceof 연산자는 두 피연산자의 생성자를 비교하는 데 사용됩니다. 사용자 정의 개체를 비교할 때만 의미가 있습니다. 내장 유형을 비교하는 데 사용된다면 typeof 연산자만큼 쓸모가 없습니다.

사용자 정의 개체 비교

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

function Foo() {}
function Bar() {}
Bar.prototype = new Foo()

new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true

// Foo 생성자의 인스턴스가 아닌 Foo 함수 자체에만 Bar.prototype을 설정하는 경우
Bar.prototype = Foo; ) instanceof Foo; // false
`instanceof` 기본 유형과 함께 `instanceof` 사용)
new String('foo') instanceof String; // true
new String('foo ') instanceof Object; // true

'foo' instanceof String; // false
'foo' instanceof Object; // false

한 가지 주의할 점은, instanceof 오류가 발생하는 경우입니다. 생성자가 동일한 객체가 아니기 때문에 서로 다른 JavaScript 컨텍스트(예: 브라우저의 서로 다른 문서 구조)에 속하는 객체를 비교합니다.

결론적으로, instanceof 연산자는 동일한 JavaScript 컨텍스트의 사용자 정의 개체를 비교하는 데에만 사용해야 합니다. `typeof` 연산자와 마찬가지로 다른 사용법은 피해야 합니다.