每日 30 秒 ⏱ 数据类型大乱炖

meteor199 发布于2019-08-23 16:08 / 2885人阅读

简介

字符串、数字、布尔值、Null、Undefined、对象、数组、函数、判断方法

JavaScript 中有两种数据类型，分别是基本数据类型和引用数据类型：

基本数据类型	引用数据类型
Number、String、Boolean、Null、Undefined、Symbol	Object、Array、Function

在开发过程中我们有时候会需要对变量进行类型判断，一般是利用 typeof 并搭配相应的特性来完成。

Number

判断一个变量是不是 Number 可以利用 typeof 判断是不是 number 但是有个小坑就是 typeof NaN === number，可以利用 NaN !== NaN 的特性来加以判断。

const isNumber = val => typeof val === "number" && val === val;

String

判断 String 就很简单了没有那么多弯弯绕绕一个 typeof 搞定。

const isString = val => typeof val === "string";

Boolean

Boolean 的判断也很简单使用 typeof，当然也可以使用 === 来进行判断。

const isBoolean = val => typeof val === "boolean";

Null 和 Undefined

为什么要把这两个数据类型放在一起讲呢？

在其他编程语言中往往只有 Null、Undefined、Nil中的其中一个，而 JavaScript 却把它们两个都多带带进行了定义：

名称	定义
null	是一个对象，表示无值
undefined	是一个特殊属性，其值是未定义，表示缺少值

由于在 JavaScript 中都有自己定义对应的值直接利用值来判断就可以了：

const isNull = val => val === null;
const isUndefined = val => val === undefined;
const isNil = val => val === undefined || val === null;

Symbol

Symbol 是 ES6 新引入的数据类型用于表示表示独一无二的值，由于是新引入并没有特别大的坑直接利用 typeof 梭它就对了。

const isSymbol = val => typeof val === "symbol";

Object

Null 也是对象需要进行判断。

Object 可以是 PlainObject 字面量对象也可以是由 new 操作符生成的对象：

在 JavaScript 中可以利用函数来实现类的功能：

function Person (name) {
    this.name = name;
}

var person = new Person("xiaoer")

对于这样的类对象和字面量对象、类对象类型我们都可以使用下面方法进行判断，Object.constructor 当遇到 Null 和 Undefined 会返回一个空对象，否则则会返回给予的对象。

const isObject = obj => obj === Object(obj);

而字面量对象则指的是通过 Object.constructor 方法创建的对象，当然 const a = {a: 1} 这样声明创建的对象其实也是调用了Object.constructor 方法，利用 constructor 和 typeof 则可以进行判断。这里巧妙的利用 !! 来进行布尔值的转换来判断是否为 Null 和 Undefined：

const isPlainObject = val => !!val && typeof val === "object" && val.constructor === Object;

Array

Array 算是一个特殊的 Object 不信你用上面的对象方法判断看看就知道了。

那我们这么判断 Array 呢？

ES6 提供了一个判断数组的方法 Array.isArray，但是如果你在使用不支持 ES6 的浏览器时需要自己实现一下这个方法了：

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

Function

Function 在引用数据类型中算是简单只需要使用 typeof 进行判断：

const isFunction = val => typeof val === "function";

JSON

在日常开发中 JSON 实在是太经常使用拉，在这里我们也把它当做一种“类型”给出它的判断方法：

const isValidJSON = str => {
  try {
    const o = JSON.parse(str)
    return o != null && typeof o === "object"
  } catch (e) {
    return false;
  }
};

终极奥义

内容太多让你无法呼吸了？

没事小二这里还有杀手锏可以提供大家使用：

function getType(obj) {
    if(obj && obj.constructor && obj.constructor.name) {
        return obj.constructor.name;
    }
    return Object.prototype.toString.call(obj).replace(/^[object (.+)]$/,"$1").toLowerCase();
}

需要注意的是 NaN 在这里依旧返回的是 "number"，在每日 30 秒 ⏱ 终极等号中有同学提问了为什么没有对 NaN 进行判断，在日常开发中出现 NaN 是一件不好的事情，所以小二就没有把它加到判断中去了，如果有需要可以利用 isNaN() 这个方法来进行判断。

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

云服务器 GPU云服务器云服务器开机要开30秒大乱斗每日数据统计每日vps

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102717.html

2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
每日 30 秒 ⏱ 数组转CSV表格数据

showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 简介数组、CSV、表格、工具将一个数组转化为逗号为分割符的字符串（CSV）即表格数据。 // 该源码来自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...

nanchen2251 2019-08-23 15:38 评论0 收藏0
每日 30 秒 ⏱ 简单的 HTTP 工具

showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/simple-http/poster.png); 简介 XMLHttpRequest、HTTP 工具原理、XHR jQuery.ajax、axios 和新的 Web API fetch 在浏览器不支持的兼容代码都是...

陈伟 2019-08-26 18:18 评论0 收藏0