JavaScript 클래스 배열 개체 및 인수 인스턴스에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 클래스 배열 개체 및 인수 인스턴스에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-08-16 10:55:50

원래의

1341명이 탐색했습니다.

배열 유사 객체

소위 배열 유사 객체:

길이 속성과 여러 인덱스 속성을 가진 객체

예:

var array = [&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;];
  
var arrayLike = {
    0: &#39;name&#39;,
    1: &#39;age&#39;,
    2: &#39;sex&#39;,
    length: 3
}

로그인 후 복사

그래도 왜 그럴까요? 배열형 객체라고 하나요? 객체는 어디에 있나요?
그럼 읽기와 쓰기, 길이 얻기, 탐색이라는 세 가지 측면에서 이 두 개체를 살펴보겠습니다. 비슷하지 않나요?

배열 객체가 배열 메서드를 사용할 수 있나요? 예:

console.log(array[0]); // name
console.log(arrayLike[0]); // name
  
array[0] = &#39;new name&#39;;
arrayLike[0] = &#39;new name&#39;;

로그인 후 복사

그러나 위 코드는 오류를 보고합니다. arrayLike.push는 함수가 아닙니다
결국 여전히 배열 클래스입니다...

배열 호출 method
배열 클래스가 다음과 같은 경우 배열 메소드를 임의로 사용하려면 어떻게 해야 하나요?
직접 호출할 수 없으므로 Function.call을 사용하여 간접적으로 호출할 수 있습니다.

console.log(array.length); // 3
console.log(arrayLike.length); // 3

로그인 후 복사

Array-like to object
위의 예에서는 array-like로 변환하는 방법 배열에 세 가지를 더 추가했습니다.

for(var i = 0, len = array.length; i < len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    ……
}

로그인 후 복사

그러면 배열과 유사한 객체에 대해 이야기하는 이유는 무엇입니까? 그리고 클래스 배열의 응용은 무엇입니까?

배열 유사 객체에 대해 말하면 Arguments 객체는 배열 유사 객체입니다. 클라이언트 측 JavaScript에서 일부 DOM 메소드(document.getElementsByTagName() 등)도 배열과 유사한 객체를 반환합니다.

Arguments 객체
다음으로 Arguments 객체에 집중하겠습니다.
Arguments 객체는 함수의 매개변수 및 기타 속성을 포함하여 함수 본문에서만 정의됩니다. 함수 본문에서 인수는 함수의 Arguments 개체를 참조합니다.
예:

arrayLike.push(&#39;4&#39;);

로그인 후 복사

인쇄 결과는 다음과 같습니다.

배열의 인덱스 속성과 길이 속성 외에 호출 수신자 속성도 있음을 알 수 있습니다. .다음으로 하나씩 소개했습니다. length artpection artribute argument 객체의 길이 속성 예 :

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
  
Array.prototype.join.call(arrayLike, &#39;&&#39;); // name&age&sex
  
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] 
// slice可以做到类数组转数组
  
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
}); 
// ["NAME", "AGE", "SEX"]

로그인 후 복사

callee attribute artiption 객체의 callee 속성, 함수 자체를 통해 인수 객체의 칼리 속성 호출될 수 있습니다.
callee를 사용하여 전형적인 종결 인터뷰 질문에 대한 솔루션에 대해 이야기해 보겠습니다.

var arrayLike = {0: &#39;name&#39;, 1: &#39;age&#39;, 2: &#39;sex&#39;, length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

로그인 후 복사

다음으로 인수 개체에 대해 참고할 몇 가지 사항에 대해 이야기해 보겠습니다. JavaScript 클래스 배열 개체 및 인수 인스턴스에 대한 자세한 설명

인수 및 해당 대응 매개변수 바인딩

function foo(name, age, sex) {
    console.log(arguments);
}
  
foo(&#39;name&#39;, &#39;age&#39;, &#39;sex&#39;)

로그인 후 복사

전달된 매개변수, 실제 매개변수 및 인수 값은 공유됩니다. 매개변수가 전달되지 않으면 실제 및 인수 값은 공유되지 않습니다
그리고 위의 내용은 non-strict 모드입니다. strict 모드에서는 실제 매개변수와 인수가 공유되지 않습니다.
매개변수 전달

한 함수에서 다른 함수로 매개변수 전달

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}
  
console.log("形参的长度为：" + foo.length)
  
foo(1)
  
// 形参的长度为：3
// 实参的长度为：1

로그인 후 복사

강력한 ES6

ES6의... 연산자를 사용하여 다음을 수행할 수 있습니다. 배열로 쉽게 변환됩니다.

var data = [];
  
for (var i = 0; i < 3; i++) {
    (data<i> = function () {
       console.log(arguments.callee.i) 
    }).i = i;
}
  
data[0]();
data[1]();
data[2]();
  
// 0
// 1
// 2</i>

로그인 후 복사

Applications

JavaScript 특별 시리즈인 다음 시리즈에서는 jQuery의 확장 구현, 함수 커링, 재귀 등에서 인수를 볼 수 있습니다. 시나리오. 이 기사에서는 자세히 다루지 않습니다.
이러한 시나리오를 요약하면 당분간 생각할 수 있는 시나리오는 다음과 같습니다.