每日 30 秒 ? 數據類型大亂燉

meteor199 發布于2019-08-23 16:08 / 2891人閱讀

簡介

字符串、數字、布爾值、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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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