JS 판단 수조 네 가지 실현 방법 상세

1. 앞말
하나의 대상이나 값이 하나의 수조인지 아닌지를 어떻게 판단하는가. 면접이나 업무에서 우리는 이 문제에 자주 부딪힌다. 빈도가 높으면 정리를 해야 한다고 생각한다. 그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다.
2. 대상이 수조인지 아닌지를 판단하는 몇 가지 방식
1. instanceof를 통해 판단
instanceof 연산자는 구조 함수의prototype 속성이 대상의 원형 체인에 나타나는 모든 위치를 검사하고 볼 값을 되돌려줍니다.

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

위 코드에서 instanceof 연산자가 Array를 검출합니다.prototype 속성이 변수 a의 원형 체인에 존재하는지, 분명히 a는 하나의 수조로 Array를 가지고 있다.prototype 속성,true입니다.
문제점:
주의해야 할 것은prototype 속성은 수정할 수 있기 때문에true로 판단하면 영원히 진실이 되는 것은 아니다.
그 다음에 우리의 스크립트가 여러 개의 전역 환경을 가진다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을 수 있다. 예를 들어

// body iframe 
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
// iframe 
xArray = window.frames[0].Array;
// 
var arr = new xArray(1,2,3); 
arr instanceof Array;//false

이런 문제를 일으키는 것은 iframe가 새로운 전역 환경을 형성하고 자신의 Array를 가지기 때문이다.prototype 속성, 서로 다른 환경에서의 속성을 동일하게 하는 것은 안전하지 않은 방법이기 때문에 Array.prototype !== window.frames[0].Array.prototype,arr instance of Array를true로 하려면,arr가 원시 Array 구조 함수로 만들어졌을 때 가능하다는 것을 보증해야 합니다.
2. constructor를 통해 판단
우리는 실례적인 구조 함수 속성인constructor가 구조 함수를 가리키면constructor 속성을 통해 하나의 수조로 판단할 수 있다는 것을 안다.
let a = [1,3,4];
a.constructor === Array;//true
마찬가지로 이런 판단도 여러 전역 환경의 문제가 존재하기 때문에 발생하는 문제는 instanceof와 같다.

// body iframe 
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
// iframe 
xArray = window.frames[window.frames.length-1].Array;
// 
var arr = new xArray(1,2,3); 
arr.constructor === Array;//false

3. Object를 통해prototype.toString.call() 판단
Object.prototype.toString().call () 는 대상의 다양한 유형을 얻을 수 있습니다. 예를 들어
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true
그것의 강력한 점은 단지 수조인지 아닌지를 검사할 수 있을 뿐만 아니라, 예를 들면 함수인지, 숫자인지 등등

// 
let a = function () {};
Object.prototype.toString.call(a) === '[object Function]';//true
// 
let b = 1;
Object.prototype.toString.call(a) === '[object Number]';//true

심지어 다중 글로벌 환경에서 Object.prototype.toString().call () 도 예상 처리 판단에 부합할 수 있습니다.

// body iframe 
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
// iframe 
xArray = window.frames[window.frames.length-1].Array;
// 
var arr = new xArray(1,2,3); 
console.log(Object.prototype.toString.call(arr) === '[object Array]');//true

4. Array를 통해.isArray() 판단
Array.isArray () 는 전달된 값이 그룹인지 확인하고 부울 값을 되돌려줍니다.
let a = [1,2,3]
Array.isArray(a);//true
간단하고 사용하기 좋으며 다중 전역 환경에 대한 Array.isArray() 역시 정확하게 판단할 수 있지만, 문제가 있습니다, Array.isArray()는 ES5에서 제시된 것입니다. 즉, ES5 이전에 이 방법을 지원하지 않는 경우가 있을 수 있습니다.어떻게 해결하지?
3. 판단 수조 방법의 최종 추천
당연히 Array로 하죠.isArray(), ES5에서 새로 추가된 isArray() 방법은 바로 안정적이고 사용할 수 있는 그룹 판단 방법을 제공하기 위해서입니다. 이 때문에 특별히 좋은 것을 사용하지 않을 수 없습니다. 그러나 ES5가 이전에 이 방법을 지원하지 않았던 문제에 대해 우리는 호환성을 잘 하여 자체 봉인할 수 있습니다.

if (!Array.isArray) {
 Array.isArray = function(arg) {
  return Object.prototype.toString.call(arg) === '[object Array]';
 };
}

그러면 수조 판단의 몇 가지 방식에 대해서도 다 말했고 합리적인 추천도 해주었습니다. 어떤 문제나 잘못된 점이 있으면 여러분의 지지를 환영합니다.
참고 자료:
Determining with absolute accuracy whether or not a JavaScript object is an array
Array.isArray()---MDN
instanceof---MDN
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.