热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

经常被面试官考的JavaScript数据类型知识你真的懂吗?

本文中讲解的内容面试题引入js中的数据类型js弱类型语言js中的强制转换规则js转换规则不同场景应用js中的数据类型判断NaN相关总结toString与String的一些误区文章篇

    640?wx_fmt=gif

本文中讲解的内容

640?wx_fmt=jpeg

面试题引入

js中的数据类型

js弱类型语言

js中的强制转换规则

js转换规则不同场景应用

js中的数据类型判断

NaN相关总结

toString与String的一些误区


文章篇幅较长, 建议收藏或者关注公众号, 方便日后翻阅

前言

面试了几个开发者,他们确实做过不少项目,能力也是不错的,但是发现Javascript基础并不好,于是决定写一下这篇javascrip数据类型相关的基础文章,其实也不仅仅是因为面试了他们,之前自己在面试的时候,也曾经被虐过,面试官说过的最深刻的一句话我到现在都记得。

基础很重要,只有基础好才会很少出bug,大多数的bug都是基础不扎实造成的。

这里给出两道我们公司数据类型基础相关的面试题和答案,如果都能做对并且知道为什么(可以选择忽略本文章):

640?wx_fmt=png

640?wx_fmt=png


本篇文章会以一个面试官问问题的角度来进行分析讲解

js中的数据类型

面试官问:说一说Javascript中有哪些数据类型?

Javascript 中共有七种内置数据类型,包括基本类型对象类型

基本类型

基本类型分为以下六种:

注意:

  1. string 、number 、boolean 和 null  undefined 这五种类型统称为原始类型(Primitive),表示不能再细分下去的基本类型

  2. symbol是ES6中新增的数据类型,symbol 表示独一无二的值,通过 Symbol 函数调用生成,由于生成的 symbol 值为原始类型,所以 Symbol 函数不能使用 new 调用;

  3. null 和 undefined 通常被认为是特殊值,这两种类型的值唯一,就是其本身。

对象类型

对象类型也叫引用类型,array和function是对象的子类型。对象在逻辑上是属性的无序集合,是存放各种值的容器。对象值存储的是引用地址,所以和基本类型值不可变的特性不同,对象值是可变的。

js弱类型语言

面试官问:说说你对Javascript是弱类型语言的理解?

Javascript 是弱类型语言,而且Javascript 声明变量的时候并没有预先确定的类型, 变量的类型就是其值的类型,也就是说变量当前的类型由其值所决定,夸张点说上一秒种的String,下一秒可能就是个Number类型了,这个过程可能就进行了某些操作发生了强制类型转换。虽然弱类型的这种不需要预先确定类型的特性给我们带来了便利,同时也会给我们带来困扰。为了能充分利用该特性就必须掌握类型转换的原理,

js中的强制转换规则

面试官问:Javascript中强制类型转换是一个非常易出现bug的点,知道强制转换时候的规则吗?

注:规则最好配合下面什么时候发生转换使用这些规则看效果更佳。

ToPrimitive(转换为原始值)

ToPrimitive对原始类型不发生转换处理,只针对引用类型(object)的,其目的是将引用类型(object)转换为非对象类型,也就是原始类型。

ToPrimitive 运算符接受一个值,和一个可选的 期望类型作参数。ToPrimitive 运算符将值转换为非对象类型,如果对象有能力被转换为不止一种原语类型,可以使用可选的 期望类型 来暗示那个类型。

转换后的结果原始类型是由期望类型决定的,期望类型其实就是我们传递的type。直接看下面比较清楚。 ToPrimitive方法大概长这么个样子具体如下。

/*** @obj 需要转换的对象* @type 期望转换为的原始数据类型,可选*/ToPrimitive(obj,type)
ToPrimitive(obj,type)

type不同值的说明
  1. 先调用obj的toString方法,如果为原始值,则return,否则第2步

  2. 调用obj的valueOf方法,如果为原始值,则return,否则第3步

  3. 抛出TypeError 异常

  1. 调用obj的valueOf方法,如果为原始值,则返回,否则下第2步

  2. 调用obj的toString方法,如果为原始值,则return,否则第3步

  3. 抛出TypeError 异常

  1. 该对象为Date,则type被设置为String

  2. 否则,type被设置为Number

Date数据类型特殊说明:

对于Date数据类型,我们更多期望获得的是其转为时间后的字符串,而非毫秒值(时间戳),如果为number,则会取到对应的毫秒值,显然字符串使用更多。 其他类型对象按照取值的类型操作即可。

ToPrimitive总结

ToPrimitive转成何种原始类型,取决于type,type参数可选,若指定,则按照指定类型转换,若不指定,默认根据实用情况分两种情况,Date为string,其余对象为number。那么什么时候会指定type类型呢,那就要看下面两种转换方式了。

toString

Object.prototype.toString()

toString() 方法返回一个表示该对象的字符串。

每个对象都有一个 toString() 方法,当对象被表示为文本值时或者当以期望字符串的方式引用对象时,该方法被自动调用。

这里先记住,valueOf() 和 toString() 在特定的场合下会自行调用。

valueOf

Object.prototype.valueOf()方法返回指定对象的原始值。

Javascript 调用 valueOf() 方法用来把对象转换成原始类型的值(数值、字符串和布尔值)。但是我们很少需要自己调用此函数,valueOf 方法一般都会被 Javascript 自动调用。

不同内置对象的valueOf实现:

对照代码会更清晰一些:

var str = new String('123');console.log(str.valueOf());//123var num = new Number(123);console.log(num.valueOf());//123var date = new Date();console.log(date.valueOf()); //1526990889729var bool = new Boolean('123');console.log(bool.valueOf());//truevar obj = new Object({valueOf:()=>{ return 1}})console.log(obj.valueOf());//1new String('123');
console.log(str.valueOf());//123

var num = new Number(123);
console.log(num.valueOf());//123

var date = new Date();
console.log(date.valueOf()); //1526990889729

var bool = new Boolean('123');
console.log(bool.valueOf());//true

var obj = new Object({valueOf:()=>{
return 1
}})
console.log(obj.valueOf());//1

Number

Number运算符转换规则:

注意:对象这里要先转换为原始值,调用ToPrimitive转换,type指定为number了,继续回到ToPrimitive进行转换(看ToPrimitive)。

String

String 运算符转换规则

注意:对象这里要先转换为原始值,调用ToPrimitive转换,type就指定为string了,继续回到ToPrimitive进行转换(看ToPrimitive)。

String(null) // 'null'String(undefined) // 'undefined'String(true) // 'true'String(1) // '1'String(-1) // '-1'String(0) // '0'String(-0) // '0'String(Math.pow(1000,10)) // '1e+30'String(Infinity) // 'Infinity'String(-Infinity) // '-Infinity'String({}) // '[object Object]'String([1,[2,3]]) // '1,2,3'String(['koala',1]) //koala,1null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(1) // '1'
String(-1) // '-1'
String(0) // '0'
String(-0) // '0'
String(Math.pow(1000,10)) // '1e+30'
String(Infinity) // 'Infinity'
String(-Infinity) // '-Infinity'
String({}) // '[object Object]'
String([1,[2,3]]) // '1,2,3'
String(['koala',1]) //koala,1

Boolean

ToBoolean 运算符转换规则

除了下述 6 个值转换结果为 false,其他全部为 true:

  1. undefined

  2. null

  3. -0

  4. 0或+0

  5. NaN

  6. ''(空字符串)

假值以外的值都是真值。其中包括所有对象(包括空对象)的转换结果都是true,甚至连false对应的布尔对象new Boolean(false)也是true

Boolean(undefined) // falseBoolean(null) // falseBoolean(0) // falseBoolean(NaN) // falseBoolean('') // falseBoolean({}) // trueBoolean([]) // trueBoolean(new Boolean(false)) // trueundefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

js转换规则不同场景应用

面试官问:知道了具体转换成什么的规则,但是都在什么情况下发生什么样的转换呢?

什么时候自动转换为string类型

'2' + 1 // '21''2' + true // "2true"'2' + false // "2false"'2' + undefined // "2undefined"'2' + null // "2null"1 // '21'
'2' + true // "2true"
'2' + false // "2false"
'2' + undefined // "2undefined"
'2' + null // "2null"

//toString的对象var obj2 = { toString:function(){ return 'a' }}console.log('2'+obj2)//输出结果2a//常规对象var obj1 = { a:1, b:2}console.log('2'+obj1);//输出结果 2[object Object]//几种特殊对象'2' + {} // "2[object Object]"'2' + [] // "2"'2' + function (){} // "2function (){}"'2' + ['koala',1] // 2koala,1
var obj2 = {
toString:function(){
return 'a'
}
}
console.log('2'+obj2)
//输出结果2a

//常规对象
var obj1 = {
a:1,
b:2
}
console.log('2'+obj1);
//输出结果 2[object Object]

//几种特殊对象
'2' + {} // "2[object Object]"
'2' + [] // "2"
'2' + function (){} // "2function (){}"
'2' + ['koala',1] // 2koala,1

对下面'2'+obj2详细举例说明如下:

  1. 左边为string,ToPrimitive原始值转换后不发生变化

  2. 右边转化时同样按照ToPrimitive进行原始值转换,由于指定的type是number,进行ToPrimitive转化调用obj2.valueof(),得到的不是原始值,进行第三步

  3. 调用toString() return 'a'

  4. 符号两边存在string,而且是+号运算符则都采用String规则转换为string类型进行拼接

  5. 输出结果2a

对下面'2'+obj1详细举例说明如下:

  1. 左边为string,ToPrimitive转换为原始值后不发生变化

  2. 右边转化时同样按照ToPrimitive进行原始值转换,由于指定的type是number,进行ToPrimitive转化调用obj2.valueof(),得到{ a: 1, b: 2

  3. 调用toString() return [object Object]

  4. 符号两边存在string,而且是+号运算符则都采用String规则转换为string类型进行拼接

  5. 输出结果2[object Object]

代码中几种特殊对象的转换规则基本相同,就不一一说明,大家可以想一下流程。

注意:不管是对象还不是对象,都有一个转换为原始值的过程,也就是ToPrimitive转换,只不过原始类型转换后不发生变化,对象类型才会发生具体转换。

string类型转换开发过程中可能出错的点:

var obj = { width: '100'};obj.width + 20 // "10020"
width: '100'
};

obj.width + 20 // "10020"

预期输出结果120 实际输出结果10020

什么时候自动转换为Number类型

注意:null转为数值时为0,而undefined转为数值时为NaN。

判断等号也放在Number里面特殊说明

== 抽象相等比较与+运算符不同,不再是String优先,而是Nuber优先。 下面列举x == y的例子

  1. 如果x,y均为number,直接比较 没什么可解释的了

1 == 2 //false2 //false

  1. 如果存在对象,ToPrimitive() type为number进行转换,再进行后面比较

var obj1 = { valueOf:function(){ return '1' }}1 == obj1 //true//obj1转为原始值,调用obj1.valueOf()//返回原始值'1'//'1'toNumber得到 1 然后比较 1 == 1[] == ![] //true//[]作为对象ToPrimitive得到 '' //![]作为boolean转换得到0 //'' == 0 //转换为 0==0 //true
valueOf:function(){
return '1'
}
}
1 == obj1 //true
//obj1转为原始值,调用obj1.valueOf()
//返回原始值'1'
//'1'toNumber得到 1 然后比较 1 == 1
[] == ![] //true
//[]作为对象ToPrimitive得到 ''
//![]作为boolean转换得到0
//'' == 0
//转换为 0==0 //true

  1. 存在boolean,按照ToNumber将boolean转换为1或者0,再进行后面比较

//boolean 先转成number,按照上面的规则得到1 //3 == 1 false//0 == 0 true3 == true // false'0' == false //true
//3 == 1 false
//0 == 0 true
3 == true // false
'0' == false //true

4.如果x为string,y为number,x转成number进行比较

//'0' toNumber()得到 0 //0 == 0 true'0' == 0 //true
//0 == 0 true
'0' == 0 //true

什么时候进行布尔转换

条件部分的每个值都相当于false,使用否定运算符后,就变成了true

if ( !undefined && !null && !0 && !NaN && !'') { console.log('true');} // true//下面两种情况也会转成布尔类型expression ? true : false!! expressionundefined
&& !null
&& !0
&& !NaN
&& !''
) {
console.log('true');
} // true

//下面两种情况也会转成布尔类型
expression ? true : false
!! expression

js中的数据类型判断

面试官问:如何判断数据类型?怎么判断一个值到底是数组类型还是对象?

三种方式,分别为 typeof、instanceof 和 Object.prototype.toString()

typeof

通过 typeof操作符来判断一个值属于哪种基本类型。

typeof 'seymoe' // 'string'typeof true // 'boolean'typeof 10 // 'number'typeof Symbol() // 'symbol'typeof null // 'object' 无法判定是否为 nulltypeof undefined // 'undefined'typeof {} // 'object'typeof [] // 'object'typeof(() => {}) // 'function''seymoe' // 'string'
typeof true // 'boolean'
typeof 10 // 'number'
typeof Symbol() // 'symbol'
typeof null // 'object' 无法判定是否为 null
typeof undefined // 'undefined'

typeof {} // 'object'
typeof [] // 'object'
typeof(() => {}) // 'function'

上面代码的输出结果可以看出,

  1. null 的判定有误差,得到的结果 如果使用 typeof,null得到的结果是object

  2. 操作符对对象类型及其子类型,例如函数(可调用对象)、数组(有序索引对象)等进行判定,则除了函数都会得到 object 的结果。

综上可以看出typeOf对于判断类型还有一些不足,在对象的子类型和null情况下。

instanceof

通过 instanceof 操作符也可以对对象类型进行判定,其原理就是测试构造函数的  prototype 是否出现在被检测对象的原型链上。

[] instanceof Array // true({}) instanceof Object // true(()=>{}) instanceof Function // trueArray // true
({}) instanceof Object // true
(()=>{}) instanceof Function // true

注意:instanceof 也不是万能的。 举个例子:

let arr = []let obj = {}arr instanceof Array // truearr instanceof Object // trueobj instanceof Object // true
let obj = {}
arr instanceof Array // true
arr instanceof Object // true
obj instanceof Object // true

在这个例子中,arr 数组相当于 new Array() 出的一个实例,所以 arr.proto === Array.prototype,又因为 Array 属于 Object 子类型,即 Array.prototype.proto === Object.prototype,所以 Object 构造函数在 arr 的原型链上。所以 instanceof 仍然无法优雅的判断一个值到底属于数组还是普通对象。

还有一点需要说明下,有些开发者会说 Object.prototype.proto === null,岂不是说 arr instanceof null 也应该为 true,这个语句其实会报错提示右侧参数应该为对象,这也印证 typeof null 的结果为 object 真的只是Javascript中的一个 bug 。

Object.prototype.toString() 可以说是判定 Javascript 中数据类型的终极解决方法了,具体用法请看以下代码:

Object.prototype.toString.call({}) // '[object Object]'Object.prototype.toString.call([]) // '[object Array]'Object.prototype.toString.call(() => {}) // '[object Function]'Object.prototype.toString.call('seymoe') // '[object String]'Object.prototype.toString.call(1) // '[object Number]'Object.prototype.toString.call(true) // '[object Boolean]'Object.prototype.toString.call(Symbol()) // '[object Symbol]'Object.prototype.toString.call(null) // '[object Null]'Object.prototype.toString.call(undefined) // '[object Undefined]'Object.prototype.toString.call(new Date()) // '[object Date]'Object.prototype.toString.call(Math) // '[object Math]'Object.prototype.toString.call(new Set()) // '[object Set]'Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]'Object.prototype.toString.call(new Map()) // '[object Map]'Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'// '[object Object]'
Object.prototype.toString.call([]) // '[object Array]'
Object.prototype.toString.call(() => {}) // '[object Function]'
Object.prototype.toString.call('seymoe') // '[object String]'
Object.prototype.toString.call(1) // '[object Number]'
Object.prototype.toString.call(true) // '[object Boolean]'
Object.prototype.toString.call(Symbol()) // '[object Symbol]'
Object.prototype.toString.call(null) // '[object Null]'
Object.prototype.toString.call(undefined) // '[object Undefined]'

Object.prototype.toString.call(new Date()) // '[object Date]'
Object.prototype.toString.call(Math) // '[object Math]'
Object.prototype.toString.call(new Set()) // '[object Set]'
Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]'
Object.prototype.toString.call(new Map()) // '[object Map]'
Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'

我们可以发现该方法在传入任何类型的值都能返回对应准确的对象类型。用法虽简单明了,但其中有几个点需要理解清楚:

NaN相关总结

NaN的概念

NaN 是一个全局对象的属性,NaN 是一个全局对象的属性,NaN是一种特殊的Number类型

什么时候返回NaN (开篇第二道题也得到解决)

一些例子:

Infinity / Infinity; // 无穷大除以无穷大Math.sqrt(-1); // 给任意负数做开方运算'a' - 1; // 算数运算符与不是数字或无法转换为数字的操作数一起使用'a' * 1;'a' / 1;parseInt('a'); // 字符串解析成数字parseFloat('a');Number('a'); //NaN'abc' - 1 // NaNundefined + 1 // NaN//一元运算符(注意点)+'abc' // NaN-'abc' // NaNInfinity; // 无穷大除以无穷大
Math.sqrt(-1); // 给任意负数做开方运算
'a' - 1; // 算数运算符与不是数字或无法转换为数字的操作数一起使用
'a' * 1;
'a' / 1;
parseInt('a'); // 字符串解析成数字
parseFloat('a');

Number('a'); //NaN
'abc' - 1 // NaN
undefined + 1 // NaN
//一元运算符(注意点)
+'abc' // NaN
-'abc' // NaN

误区

toString和String的区别

toString()可以将数据都转为字符串,但是null和undefined不可以转换。

console.log(null.toString())//报错 TypeError: Cannot read property 'toString' of nullconsole.log(undefined.toString())//报错 TypeError: Cannot read property 'toString' of undefinednull.toString())
//报错 TypeError: Cannot read property 'toString' of null

console.log(undefined.toString())
//报错 TypeError: Cannot read property 'toString' of undefined

toString()括号中可以写数字,代表进制

二进制:.toString(2);

八进制:.toString(8);

十进制:.toString(10);

十六进制:.toString(16);

String()可以将null和undefined转换为字符串,但是没法转进制字符串

console.log(String(null));// nullconsole.log(String(undefined));// undefinedString(null));
// null
console.log(String(undefined));
// undefined




640?wx_fmt=png

Javascript中的闭包这一篇就够了

JS中的for循环——你可能不知道的点。

一道面试题引发的事件循环深入思考

公司要求会使用框架vue,面试题会被问及哪些?


640?wx_fmt=jpeg


觉得本文对你有帮助?请分享给更多人

640?wx_fmt=jpeg


真的对你有帮助点个在看哦,亲!


推荐阅读
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • Java学习笔记之面向对象编程(OOP)
    本文介绍了Java学习笔记中的面向对象编程(OOP)内容,包括OOP的三大特性(封装、继承、多态)和五大原则(单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则)。通过学习OOP,可以提高代码复用性、拓展性和安全性。 ... [详细]
  • Python SQLAlchemy库的使用方法详解
    本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介,包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式,即SQL表达式语言和ORM。针对不同的需求,给出了选择哪种模式的建议。最后,介绍了连接数据库的方法,包括创建SQLAlchemy引擎和执行SQL语句的接口。 ... [详细]
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • 阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ... [详细]
  • Spring特性实现接口多类的动态调用详解
    本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍,以及getBeansOfType方法的应用,解决了在实际工作中遇到的接口及多个实现类的问题。同时,文章还提到了SPI使用的不便之处,并介绍了借助ApplicationContext实现需求的方法。阅读本文,你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 集合的遍历方式及其局限性
    本文介绍了Java中集合的遍历方式,重点介绍了for-each语句的用法和优势。同时指出了for-each语句无法引用数组或集合的索引的局限性。通过示例代码展示了for-each语句的使用方法,并提供了改写为for语句版本的方法。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
author-avatar
落叶野
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有