Умный способ JS судить о 7 типах

внешний интерфейс программист JavaScript Underscore.js

Типы:

В JavaScript есть семь встроенных типов:
  1. ноль ноль)
  2. неопределенный
  3. логическое (логическое)
  4. количество
  5. строка (строка)
  6. объект
  7. символ (символ, новое в ES6)

В JS много ям, эта статья объединитисходный код undersoce.jsИ метод, который я обобщил, может точно судить об этих шести типах, а седьмой также даст представление о суждении;

Сначала на небольшой тест:

Прежде всего, знакомый метод суждения typeof, который является старомодным, но несколько практичным методом:

typeof null			// "object"			<= 在后面文章里你会看到，巨坑！！！

typeof undefined	        // "undefined"

typeof true			// "boolean"

typeof 42		        // "number"

typeof "42"			// "string"

typeof {life: 42}               // "object"

typeof Symbol()		        // "symbol"


// ------------后面3种是单独提出来的注意事项------------------

typeof void 0		       // "undefined"	<= 这是一个非常实用的技巧，我将在后面解释；

typeof [1,2,3]		       // "object"  <= 数组 其实也是对象，巨坑！！！

typeof function a() { }		// "function"

Используйте символ «!» с умом:

!null			   // true			   <= 这是一个非常巧妙的技巧，下面将解释；

!undefined		   // true			   <= 这是一个非常巧妙的技巧，下面将解释；

------------我们不一样！！！------------

!123			  // false

!true			  // false

!{a: 123}		  // false

!function a() { }         // false

!'123'			  // false

С этим различием мы можем делать некоторые интересные вещи, которыеundersoce.jsНавыки, полученные в исходном коде, чтобы можно было точно исключить null и undefined

Непобедимый метод ".toString.call()":

КонечноObject.prototype.toString.callЕго также можно заменитьObject.prototype.toString.apply.

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

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

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

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

Object.prototype.toString.call('123')		// "[object String]"

Object.prototype.toString.call({a: 123})	// "[object Object]"

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


// ---------------单独出来讲的几个注意事项---------------------

Object.prototype.toString.call([1,2,3])	// "[object Array]"

Object.prototype.toString.call(function a() { })	// "[object Function]" 其实函数也是object类型

Object.prototype.toString.call(new Date)	// "[object Date]"	日期对象

Object.prototype.toString.call(Math)		// [object Math]	数学函数对象

Object.prototype.toString.call(function a() { })	// "[object Function]" 其实函数也是object类型

Примечание 1. При использовании этого метода возникает проблема совместимости. Щелкните конкретную проблему совместимости.здесь, JavaScript 1.8.5, не может полностью определить вышеуказанное.

Примечание 2: Используя этот набор методов, можно точно различить эти 7 или более типов, в то время как typeof не может различить полностью! ! ! ! !

Давайте посмотрим на «конструктор»:

Этот метод заключается в том, чтобы определить, кто является конструктором объекта, а что такое конструктор, я напишу в другой статье;

var n1 = null;
n.constructor			  // 报错：因为 null 是 JS 原型链的起点，没有构造函数；

var u = undefined;
u.constructor			  // 报错：它也没有构造函数；

var a = [1, 2, 3];
a.constructor === Array;   // true	数组

var n = 123;
n.constructor === Number;  // true	数字

var s1 = '123';
abc.constructor === String	// true	字符串

var o = {a: 123};
o.constructor === Object;   // true 对象

var s = Symbol()
abc.constructor === Symbol	// true 符号

------------------单独出来讲的几个注意事项----------------------

var arr = [1, 2, 3];
arr.constructor === Array	// true 数组 能够很好地区分

var fun = function a() { };
fun.constructor === Function  // true 函数

var abc = new Date();
abc.constructor === Date;	 // true 日期 

var abc = new RegExp();
abc.constructor === RegExp;	// true 正则 

var abc = Math
abc.constructor === Math;	// false 不可以像Object.prototype.toString.call()一样区分;

abc.constructor === Object   // true 事实上没有Math这个构造函数，Math的构造函数在 Object上的

В крайнем случае " instanceof ":

Примечание: объект использования должен быть объектом ;

// 语法： object instanceof constructor；

var n1 = 123;			 // n 是类型为 Number 的元素！！！不是对象！！！
typeof n1;				 // "number"	回想一下我们有7种类型
n1 instanceof Number;	  // false	 function Number() { }

var n2 = new Number(123)  // 现在 n2 是一个 object 元素！！！
typeof n2;				 // "object"
n2 instanceof Number;	  // true

Как сказано выше, этот метод подходит только для оценки объекта! ! !

var a = [1, 2, 3];		// 在最开始就声明了，数组也是对象，此法可以用来判断数组；

a instanceof Array;		// 而这个对象的构造函数是 function Array() { }

// 虽然 typeof null 也是 object 但这是最底层的元素

Я не буду приводить здесь слишком много примеров.Если вы не знаете цепочку прототипов, помните, что instanceof может сначала оценить массив! !

Прочитайте заявление: Метод 1 основан на исходном коде underscore.js:

Ноль ноль):

Метод 1: Напрямую используйте строгое равное суждение.
var isNull = function (obj) {
	return obj === null;
};

Это самый прямой и эффективный способ;

Метод 2: Умное использование !null приводит к true:
var isNull = function (obj) {
	return !obj && typeof obj === "object";
};

Хотя этот метод очень умный, он не такой прямой, как метод 1;

неопределенный

Способ 1: Это наиболее рекомендуемый способ.
var isUndefined = function (obj) {
	return obj === void 0;
}

Многие распространенные библиотеки инструментов используют этот подход, настоятельно рекомендуется! ! ! ;

Метод 2: Используйте typeof напрямую, чтобы оценить:
var isUndefined = function (obj) {
	return typeof obj === "undefined";
}

Этот метод также относительно стабилен;

Уведомление:

  1. В глобальном условии undefined не может быть изменено.
  2. В местных условиях значение undefined может быть изменено при определенных обстоятельствах.
  3. Пожалуйста, нажмите здесь сильно, см. официальную документацию для объяснения.
(function(undefined) {
   console.log(undefined);        // "123"
})('123')

логическое (логическое)

На самом деле, здесь у меня тоже есть сомнения, почему underscore.js судит именно так, читатели знают, что могут связаться со мной;

var toString = Object.prototype.toString;

var isBoolean = function (obj) {
	return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
}

Точно так же мы можем реализовать суждение, используя .constructor и typeof.

количество

var toString = Object.prototype.toString;

var isNumber = function (obj) {
	return toString.call(obj) === '[object Number]';
}

Точно так же мы используемconstructorа такжеtypeofметод также может добиться суждения.

строка (строка)

var toString = Object.prototype.toString;

var isString = function (obj) {
	return toString.call(obj) === '[object String]';
}

Точно так же мы используемconstructorа такжеtypeofметод также может добиться суждения.

объект

var toString = Object.prototype.toString;

var isObject = function (obj) {
	var type = typeof obj;
	return type === 'function' || type === 'object' && !!obj;
}

Вот тут я больше всего озадачен, зачем использовать!!obj?

  1. typeof null === objectРезультатtrue ;
  2. В начале я уже сказал один,!objПуть,nullа такжеundefinedВозвращаемые результатыtrueв то время как другие типы являются ложными;
  3. В приведенной выше реализации, если переданное значение равноnull, это будет!!objОтфильтровано;

Или попробуйте,&& !!objУдалите его и посмотрите, достигнет ли он желаемого эффекта.

разное:

На самом деле идея реализации была дана выше, Date, Math, RegExp и прочие встроенные объекты, не буду вдаваться в подробности, используйте меньше:

Массив (массив)

Способ 1: Самый безопасный способ:
Object.prototype.toString.call([1,2,3])	// "[object Array]"

Честно используйте этот метод! ! !

Способ 2: метод instanceof, только для расширения:
var a = [1, 2, 3];		// 在最开始就声明了，数组也是对象，此法可以用来判断数组；

a instanceof Array;		// 而这个对象的构造函数是 function Array() { }
Способ 3: метод конструктора, только для расширения
var a = [1, 2, 3];
a.constructor === Array;   // true	数组

Примечание: еслиa = null, но и сообщать об ошибке этот способ категорически не рекомендуется! ! !

Способ 4: проверьте конструктор прототипа только для расширения:
var a = [1, 2, 3];

a.__proto__.constructor === Array

На самом деле методы 2-4 относятся к некоему мышлению, судить о том, является ли конструктор этого объекта массивом, отличается только способ реализации.

Ссылки и благодарности:

  • «JavaScript, которого вы не знаете (Китай)»;
  • Исходный код Underscore.js;
  • http://www.jb51.net/article/79939.htm
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
Категории