實(shí)現(xiàn)類型判斷 挑戰(zhàn)介紹

本節(jié)我們來挑戰(zhàn)一道大廠面試真題 —— 實(shí)現(xiàn)類型判斷。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括通江網(wǎng)站建設(shè)、通江網(wǎng)站制作、通江網(wǎng)頁制作以及通江網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，通江網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到通江省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！挑戰(zhàn)準(zhǔn)備

新建一個getType.js文件，在文件里寫一個名為getType的函數(shù)，并導(dǎo)出這個函數(shù)，如下圖所示：

這個文件在環(huán)境初始化時會自動生成，如果發(fā)現(xiàn)沒有自動生成就按照上述圖片自己創(chuàng)建文件和函數(shù)，函數(shù)代碼如下：

function getType(target) {// 補(bǔ)充代碼
}

module.exports = getType;

挑戰(zhàn)內(nèi)容

請封裝一個函數(shù)，能夠以字符串的形式精準(zhǔn)地返回?cái)?shù)據(jù)類型。

要求返回的類型全部由小寫字母組成。

示例：

輸入	輸出
true	‘boolean’
100	‘number’
‘a(chǎn)bc’	‘string’
100n	‘bigint’
null	‘null’
undefined	‘undefined’
Symbol(‘a(chǎn)’)	‘symbol’
[]	‘a(chǎn)rray’
{}	‘object’
function fn() {}	‘function’
new Date()	‘date’
/abc/	‘regexp’
new Error()	‘error’
new Map()	‘map’
new Set()	‘set’
new WeakMap()	‘weakmap’
new WeakSet()	‘weakset’

注意事項(xiàng)

• 文件名、函數(shù)名不可隨意更改。
• 文件中編寫的函數(shù)需要導(dǎo)出，否則將無法提交通過。

題目解答：

先貼一波答案

function getType(target) {const type = typeof target;
  if (type !== "object") {return type;
  }
  return Object.prototype.toString
    .call(target)
    .replace(/^\[object (\S+)\]$/, "$1")
    .toLocaleLowerCase();
}

首先我們要知道javascrip數(shù)據(jù)類型有兩種：

1. 基本類型：Undefined，Null，Boolean，Number，String

2. 引用類型：

   • 第一類:原生對象：object，Array，Date，RegExp，F(xiàn)unction以及有基本類型衍生出來的包裝類型Boolean，Number，String；

   • 第二類內(nèi)置對象，如Global,Math

   • 宿主對象，如IE中的window，WS中的WScript實(shí)例，以及任何用戶創(chuàng)建的類

判斷一個數(shù)據(jù)的類型，比較常用的有下面幾種方式：

• typeof
• instanceof
• Object.prototype.toString.call(xxx)

判斷一個數(shù)據(jù)的類型，用得最多的就是 typeof 操作符， 但是使用typeof常常會遇到以下問題：

• 無法判斷null。
• 無法判斷除了function之外的引用類型。

// 可以判斷除了 null 之外的基礎(chǔ)類型。
console.log(typeof true);// boolean
console.log(typeof 100);// number
console.log(typeof "abc");// String
console.log(typeof 100n);// bigint
console.log(typeof undefined);// undefined
console.log(typeof Symbol("a"));// symbol

// 無法判斷 null function 之外的引用類型。
console.log(typeof null);// object
console.log(typeof []);// object
console.log(typeof {});// object
const fn = function(){};
console.log(typeof fn);// function

typeof無法精確地判斷引用類型，這時，可以使用 instanceof 運(yùn)算符，但是instanceof運(yùn)算符一定要是判斷對象實(shí)例的時候才是正確的

console.log([] instanceof Array);// true
const obj = {};
console.log(obj instanceof Object);// true
const fn = function(){};
console.log(fn instanceof Function);// true
const date = new Date();
console.log(date instanceof Date);// true
const re = /abc/;
console.log(re instanceof RegExp);// true

const str1 = "qwe";
const str2 = new String("qwe");
console.log(str1 instanceof String); // false，無法判斷原始類型。
console.log(str2 instanceof String); // true

null比較特殊，可以直接判斷

function getType(target) {// ...
  if (target === null) {return "null";
  }
  // ...
}

調(diào)用Object.prototype.toString方法，會統(tǒng)一返回格式為[object Xxx]的字符串，用來表示該對象（原始類型是包裝對象）的類型。

// 引用類型 以此類推
console.log(Object.prototype.toString.call({})); // '[object Object]'
console.log(Object.prototype.toString.call(function () {})); // "[object Function]'
console.log(Object.prototype.toString.call(/123/g)); // '[object RegExp]'
console.log(Object.prototype.toString.call(new Date())); // '[object Date]'
console.log(Object.prototype.toString.call([])); // '[object Array]'
console.log(Object.prototype.toString.call(new WeakSet())); // '[object WeakSet]'

// 原始類型  以此類推
console.log(Object.prototype.toString.call(1)); // '[object Number]'
console.log(Object.prototype.toString.call("abc")); // '[object String]'

Object.prototype.toString方法來獲取數(shù)據(jù)具體的類型，然后把多余的字符去掉即可，只取[object Xxx]里的Xxx。

所以最終的代碼實(shí)現(xiàn)為

function getType(target) {// 先進(jìn)行 typeof 判斷，如果是基礎(chǔ)數(shù)據(jù)類型，直接返回。
  const type = typeof target;
  if (type !== "object") {return type;
  }

  // 如果是引用類型或者 null，再進(jìn)行如下的判斷，正則返回結(jié)果，注意最后返回的類型字符串要全小寫。
  return Object.prototype.toString
    .call(target)
    .replace(/^\[object (\S+)\]$/, "$1")
    .toLocaleLowerCase();
}

或者返回

// ...
return Object.prototype.toString
  .call(target)
  .match(/\s([a-zA-Z]+)\]$/)[1] // 這種寫法也可以。
  .toLocaleLowerCase();

不用正則表達(dá)式也可以哦

// ...
return Object.prototype.toString
  .call(target)
  .slice(8, -1) 
//slice(startIndex,endIndex)，從0開始索引，其中8代表從第8位（包含）開始截?。ū纠写砜崭窈竺娴奈恢茫?['也是代表一位，不要看少了哦），-1代表截取到倒數(shù)第一位（不含），所以正好截取到[object String]中的String。
  .toLocaleLowerCase();

call 是函數(shù)的方法，是用來改變 this 指向的，用 apply 方法也可以。

如果不改變this指向?yàn)槲覀兊哪繕?biāo)變量xxx，this將永遠(yuǎn)指向調(diào)用的Object.prototype，也就是原型對象，對原型對象調(diào)用toString方法，結(jié)果永遠(yuǎn)都是[object Object]

console.log(Object.prototype.toString([]));
// 輸出 '[object Object]'  不調(diào)用 call，this 指向 Object.prototype，判斷類型為 Object。
console.log(Object.prototype.toString.call([]));
// 輸出 '[object Array]'   調(diào)用 call，this 指向 []，判斷類型為 Array

最后加幾個學(xué)到的常見的js面試問題

1：JavaScript 有哪些數(shù)據(jù)類型

答： JavaScript 的數(shù)據(jù)類型分為原始類型和對象類型。

原始類型有 7 種，分別是：

• Boolean
• Number
• BigInt
• String
• Null
• Undefined
• Symbol

對象類型（也稱引用類型）是一個泛稱，包括數(shù)組、對象、函數(shù)等一切對象。

常見面試題 2：typeof null 的結(jié)果是什么

答：

typeof null; // 'object'

常見面試題 3：原始類型和引用類型的區(qū)別是什么

答：

類型	原始類型	對象類型
值	不可改變	可以改變
屬性和方法	不能添加	能添加
存儲值	值	地址（指針）
比較	值的比較	地址的比較

常見面試題 4：typeof 和 instanceof 的區(qū)別是什么

答：

• typeof運(yùn)算符用來判斷數(shù)據(jù)的類型。
• instanceof運(yùn)算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實(shí)例對象的原型鏈上，也可以用來判斷數(shù)據(jù)的類型。
  • typeof返回一個變量的類型字符串，instanceof返回的是一個布爾值。
  • typeof可以判斷除了null以外的基礎(chǔ)數(shù)據(jù)類型，但是判斷引用類型時，除了function類型，其他的無法準(zhǔn)確判斷。
  • instanceof可以準(zhǔn)確地判斷各種引用類型，但是不能正確判斷原始數(shù)據(jù)類型。

常見面試題 5：Symbol 解決了什么問題

答：Symbol是 ES6 時新增的特性，Symbol是一個基本的數(shù)據(jù)類型，表示獨(dú)一無二的值，主要用來防止對象屬性名沖突問題。

const obj = {name: "song",
  age: 18,
};

obj.name = "xxx"; // 給 obj.name 賦值，把以前的 name 覆蓋了
console.log(obj); // { name: 'xxx', age: 18 }
copy
const obj = {name: "song",
  age: 18,
};
const name = Symbol("name");

obj[name] = "xxx"; // 使用 Symbol，不會覆蓋

console.log(obj); // { name: 'song', age: 18, Symbol(name): 'xxx' }
console.log(obj.name); // 'song'
console.log(obj[name]); // 'xxx'

挑戰(zhàn)總結(jié)

• 這個題之前幾次測試都沒過，因?yàn)檫€不是很理解原始類型和對象類型的類型判斷的方法
• Bigint和symbol也不熟悉，感覺第一次看到，不清楚他們是哪一種類型的數(shù)據(jù)
• 對instanceof的使用也不夠熟練

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)站名稱：實(shí)現(xiàn)類型判斷-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/dcsjoe.html