Crack as perguntas da entrevista, como julgar o tipo de variável em JavaScript?

Estou participando do recrutamento do programa de assinatura de criadores da Comunidade de Tecnologia Nuggets, clique no link para se cadastrar e enviar .

JavaScript é uma linguagem tipada dinamicamente. A obtenção de tipos de variáveis ​​em tempo de execução é uma operação comum. Devido ao design do JavaScript, problemas aparentemente simples podem não ser simples em JavaScript. Por exemplo, as imagens a seguir circularam na comunidade. Olhe atentamente para estes Pit , até mesmo drivers JavaScript antigos costumam ser substituídos.

A figura acima typeof NaNretornará number, que pode ser diferente do que você pensa. Não é fácil obter o tipo exato de variável em JavaScript. Por isso, essa pergunta é frequentemente usada para examinar entrevistadores. Como programa = dados + algoritmo, o básico Os dados são a base dos dados, portanto, o tipo de investigação na entrevista também é razoável.

Se você apenas responder usando typeof para obter o tipo na entrevista, a probabilidade será deduzida, então como você deve responder a essa pergunta? Este artigo apresentará de forma abrangente e sistemática como julgar tipos em JavaScript. A leitura deste artigo pode ajudá-lo a evitar o campo minado do julgamento de tipos no trabalho. Se você responder ao conteúdo deste artigo durante a entrevista, o entrevistador exclamará que este é o Mestre, eu sei mais do que eu sei, e então é naturalmente elogiado.

Vamos começar com o exemplo mais simples, e passo a passo para aumentar a dificuldade e expandir a ideia, vejamos o primeiro exemplo:

No trabalho, a programação defensiva geralmente é feita quando os dados estão vazios.Um dos mal-entendidos é usar o não operador para julgar diretamente. Mas pode haver armadilhas ao fazer isso. Por exemplo, isso contará muitos valores de concubina. Os valores comuns de concubina são 0, '', false, , null, undefinedetc. Por exemplo, a função double a seguir precisa defender o parâmetro como nulo e o operador não nulo é usado aqui.

function double(x) {
  // 0会被错误计算
  if (!x) {
    return NaN;
  }
  return x * 2;
}

Para null, outra maneira de escrever é comparar com and nulle diretamente undefined. O exemplo é o seguinte:

if (x === null || x === undefined) {
  return NaN;
}

虽然逻辑看起来非常正确，但这种写法有一个比较严重的问题，在JavaScript中undefined并不是关键字，而是 window上的一个属性，在 ECMAScript 5 之前这个属性可写的，如果undefined被重新复制，在过时浏览器中会导致判断失效，示例如下：

window.undefined = 1;

// 判断不能生效
if (x === undefined) {
  console.log(111);
}

虽然在现代浏览器中不会有这个 bug，但是如果文法作用域中存在名字为undefined的变量还是会有问题，这被称作undefiined变量覆盖，例如如下代码中，undefined被1覆盖了。

(function () {
  var undefined = 1;
  // 判断不能生效
  if (x === undefined) {
    console.log(111);
  }
})();

关于判空还有比较巧妙的方法，可以只和null判断相等，借助隐式转换达到同样的效果，null是关键字，没有undefined的问题。

// null 和 undefined都会判断
if (x == null) {
}

在全等是最佳实践的背景下，这种做法并不被鼓励，建议使用 typeof 来判断undefined，typeof 通过内部类型判断，不存在undefined变量覆盖的问题。

if (x === null || typeof x === 'undefined') {
}

对于 number 类型，有个需要注意的地方，在 JavaScript 中有个特殊的值叫做 NaN，NaN 的类型也是 number，编码中很少直接使用到 NaN，通常都是在计算失败时会得到这个值。

但将 NaN 作为 number 使用时就会报错，比如调用 NaN 上的toFixed方法，更好的做法是添加 isNaN 的判断，需要注意 number 类型的特殊逻辑。

const x = Math.sqrt(-1); // NaN

// 注意这里的isNaN判断
if (typeof x === 'number' && !isNaN(x)) {
  console.log(x.toFixed(2));
}

也可以使用 ECMAScript 2015 新增的Number.isNaN，和全局函数 isNaN 的区别是，Number.isNaN 不会自行将参数转换成数字，Number.isNaN的逻辑下面的代码类似，Number.isNaN是更好的建议，但是需要注意兼容性的问题

Number.isNaN = function (value) {
  return typeof value === 'number' && isNaN(value);
};

typeof 只能判断基本类型，对于引用类型的到的值都是object

typeof []; // 'object'
typeof {}; // 'object'
typeof c; // 'object'

instanceofPode ser usado para detectar tipos de referência, o princípio é detectar constructor.prototypese existe na cadeia de protótipos do objeto de parâmetro

{} instanceof Object // true
[] instanceof Array // true
/reg/ instanceof RegExp // true

Um problema com instanceof é que não é preciso o suficiente, e tudo o que existe na cadeia de protótipos retornará true

[] instanceof Array // true
[] instanceof Object // true 注意这里

Ao usar instanceof para julgamento de tipo, você deve prestar atenção à ordem. Se a ordem estiver errada, você pode não obter o resultado correto.

function type(x) {
  if (x instanceof Object) {
    return 'object';
  }

  // Array永远得不到正确的类型哦
  if (x instanceof Array) {
    return 'array';
  }
}

Outro problema impopular de instanceof é que quando há vários iframes, seu julgamento pode retornar resultados errados.Esse problema geralmente ocorre ao passar valores de várias janelas escravas.

[] instanceof window.frames[0].Array // 返回false
[] instanceof window.Array // 返回true

Para o julgamento do array, a melhor forma é utilizar o novo método trazido pelo ECMAScript 5 Array.isArray, que pode obter resultados confiáveis ​​em qualquer situação

Array.isArray([]); // true
Array.isArray(1); // false

Outra maneira comum de julgar o tipo é usar o método de obtenção do tipo interno, com a ajuda Object.prototype.toStringdo resultado da string que pode obter o tipo interno

const toString = Object.prototype.toString;

toString.call({}); // [object Object]
toString.call(null); // [object Null]
toString.call(/reg/); // [object RegExp]

Deve-se notar que antes do ECMAScript 5, undefined e null não podem retornar o valor correto. Se houver um requisito de compatibilidade, você precisa prestar atenção a este problema

ECMAScript 2015 introduz a Symbol.toStringTagcapacidade de modificar o valor do tipo interno, o que afetará toStringo valor de retorno, mas você precisa prestar atenção aos problemas de compatibilidade

const toString = Object.prototype.toString;
const obj = {};

toString.call(obj); // '[object Object]'

obj[Symbol.toStringTag] = 'MyObject'; // 修改内部类型

toString.call(obj); // '[object MyObject]'

Resumir

Até agora, este artigo introduziu vários métodos para julgar o tipo de variáveis ​​em JavaScript. Você pode ver que não é fácil usar o método correto no cenário correto. É recomendado que você use a biblioteca de tipos mantida pelo autor . Type usa o conhecimento apresentado neste artigo. , que fornece uma função de julgamento pronta para uso, que foi testada por muitos projetos, e você pode experimentá-la.

Finalmente, todos são bem-vindos a ler este artigo. Se você acha que este artigo é útil para você, por favor, curta e siga o autor. Se você tiver alguma dúvida sobre este artigo, seja bem-vindo para se comunicar na área de comentários.