Descifra las preguntas de la entrevista, ¿cómo juzgar el tipo de variable en JavaScript?

Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .

JavaScript es un lenguaje de escritura dinámica. La obtención de tipos de variables en tiempo de ejecución es una operación común. Debido al diseño de JavaScript, los problemas aparentemente simples pueden no serlo en JavaScript. Por ejemplo, las siguientes imágenes circularon en la comunidad. , incluso los controladores de JavaScript antiguos a menudo se reemplazan.

La figura de arriba typeof NaNdevolverá number, que puede ser diferente de lo que piensa. No es fácil obtener el tipo de variable exacto en JavaScript. Debido a esto, esta pregunta se usa a menudo para examinar a los entrevistadores. Dado que programa = datos + algoritmo, la base Los datos son la base de los datos, por lo que el tipo de investigación en la entrevista también es razonable.

Si solo responde usando typeof para obtener el tipo en la entrevista, se deducirá la probabilidad, entonces, ¿cómo debe responder esta pregunta? Este artículo presentará de manera integral y sistemática cómo juzgar los tipos en JavaScript. Leer este artículo puede ayudarlo a evitar el campo minado del juicio de tipos en el trabajo. Si responde el contenido de este artículo durante la entrevista, el entrevistador exclamará que este es Master, I Sé más de lo que sé, y entonces es naturalmente alabado.

Comencemos con el ejemplo más simple, y paso a paso para aumentar la dificultad y ampliar la idea, veamos el primer ejemplo:

En el trabajo, la programación defensiva a menudo se realiza cuando los datos están vacíos. Uno de los malentendidos es utilizar el no operador para juzgar directamente. Pero puede haber dificultades al hacerlo. Por ejemplo, esto contará muchos valores de concubina. Los valores comunes de concubina son 0, '', false, , null, undefinedetc. Por ejemplo, la siguiente función doble necesita defender el parámetro como nulo, y aquí se usa el operador no nulo.

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

Para nulo, otra forma de escribir es comparar con y nully directamente undefinedEl ejemplo es el siguiente:

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'

instanceofPuede usarse para detectar tipos de referencia, el principio es detectar constructor.prototypesi existe en la cadena prototipo del objeto de parámetro

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

Un problema con instanceof es que no es lo suficientemente preciso, y todo lo que existe en la cadena de prototipos será verdadero.

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

Al usar una instancia de tipo de juicio, debe prestar atención al orden. Si el orden es incorrecto, es posible que no obtenga el resultado correcto.

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

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

Otro problema impopular de instanceof es que cuando hay múltiples iframes, su juicio puede arrojar resultados erróneos.Este problema generalmente ocurre al pasar valores desde múltiples ventanas esclavas.

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

Para el juicio de la matriz, la mejor manera es usar el nuevo método presentado por ECMAScript 5 Array.isArray, que puede obtener resultados confiables en cualquier situación.

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

Otra forma común de juzgar el tipo es usar el método de obtener el tipo interno, con la ayuda Object.prototype.toStringdel resultado de la cadena que puede obtener el tipo interno .

const toString = Object.prototype.toString;

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

Cabe señalar que antes de ECMAScript 5, undefined y null no pueden devolver el valor correcto. Si existe un requisito de compatibilidad, debe prestar atención a este problema.

ECMAScript 2015 presenta la Symbol.toStringTagcapacidad de modificar el valor del tipo interno, lo que afectará toStringel valor de retorno, pero debe prestar atención a los problemas de compatibilidad.

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

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

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

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

Resumir

Hasta ahora, este artículo ha presentado varios métodos para juzgar el tipo de variables en JavaScript. Puede ver que no es fácil usar el método correcto en el escenario correcto. Se recomienda que use la biblioteca de tipos mantenida por el autor . Type utiliza el conocimiento presentado en este artículo. , que proporciona una función de juicio lista para usar, que ha sido probada por muchos proyectos, y le invitamos a experimentarla.

Finalmente, todos son bienvenidos a leer este artículo. Si cree que este artículo es útil para usted, haga clic en Me gusta y siga al autor. Si tiene alguna pregunta sobre este artículo, comuníquese en el área de comentarios.