Web前端最新javaScript（十七）类型进阶(3)，2024年最新重磅真丝面料

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

console.log(o) //{x: 1, y: 2}

对象类型：相等比较

对象类型也叫引用类型，当给一个变量赋值为对象时，该变量保存的是该对象在内存中的地址，简单的说就是在内存上开了一个空间（这段空间就是对象，存储键值对），而变量的值就是对应引用了这段内存，所以，对象的比较是比较的引用地址是否是同一个，例如：

var o={x:1};

var x={x:1}

console.log(o===x) //false,即时完全一直也是false

var x={x:1}

var y=x;

y.z=2

consile.log(x.z) //2,对y的修改就相当于在修改内存上的内容，因此对象x，也被修改了

console.log(y===x) //true

复制变量的值

就是将它赋值给另外一个变量，赋值对象类型和原始类型略有不同

var x={x:1}

var y=x;

赋值原始类型的值

会将值拷贝一份，和原来的值是相互独立的，因此修改并不会影响原值

赋值对象类型的值

会将存储在变量中的值拷贝一份给新变量，也就是它们两指向了同一个内存地址，因此修改会相互英雄

类型转换

var aa=‘5’+‘2’; //52，字符串相连

var ab=‘5’-‘2’; //3，5和2转换成number类型进行减法运算

console.log(aa,ab)

var ac=‘’-2; //-2

var ad=true+false; //1

var ae=null+1 //1

var af=undefined+1; //NaN

var ag=[]+[]; //“”

console.log(ac,ad,ae,af,ag)

第一行是B，第一列是A

	undefined	null	number	string	boolean	object
undefined	true	true	false	false	false	IsFalsy(B)
null	true	true	false	false	false	IsFalsy(B)
number	false	false	A===B	A===ToNumber(B)	A===ToNumber(B)	A===ToPrimitive(B)
string	false	false	ToNumber(A)===B	A===B	ToNumber(A)===ToNumber(B)	A===ToPrimitive(B)
boolean	false	false	ToNumber(A)===B	ToNumber(A)===ToNumber(B)	A===B	ToPrimitive(A)===ToPrimitive(B)
object	false	false	ToPrimitive(A)===B	ToPrimitive(A)===B	ToPrimitive(A)===ToNumber(B)	A===B

值	转字符串	转数值	转布尔	转对象
undefined	'undefined'	NaN	false	TypeError
null	'null'	0	false	TypeError
true	'true'	1		new Bollean(true)
false	'false'	0		new Bollean(false)
''		0	false	new String('')
'1.2'		1.2	true	new String(1.2'')
'abc'		NaN	true	new String('abc')
0	'0'		false	new Number(0)
-0	'-0'		false	new Number(-0)
NaN	'NaN'		false	new Number(NaN)
Infinity	'Infinity'		true	new Number(Infinity)
-Infinity	'-Infinity'		true	new Number(-Infinity)
[]（空数组）	''	0	true
[9]（仅有一个数组）	'9'	9	true
['a']（不是数组或多个内容）	相当于使用了join方法	NaN	true

显示类型转换

推荐使用Booleab()，Number()，String()，Object()

Number(“123”) //123

String(123) //“123”

Boolean([]) //true

Object(3) //new Number(3)

显示类型转换：转成字符串

还可以使用toString()，它的执行结果通常和String()方法一直，Number类型的toString()方法还支持第二个参数，指定要转换的进制（注意：null和undefined没有toString方法，会报错）

(null).toString() //Error，会报错，null没有toString（）方法

(undefined).toString() //Error，会报错，undefined没有toString（）方法

(123).toString() //‘123’

(false).toString() //"false

显示类型转换：转成数值

字符串类型转为数值还有两个全局方法：parseInt()和parseFloat()

对象类型转字符串

三种方法：value.toString()，String(value)，‘’+value

console.log({x:1}.toString()) //[object Object]

console.log(‘’+{x:1}) //[object Object]

console.log(String({x:1})) //[object Object]

对象类型转数值

有两种：+varlue,Number(value)

var oa={x:1};

console.log(+oa) //NaN

console.log(Number(oa)) //NaN

类型识别

• 可以使用typeof value检测

• 也可以使用obj instanceof constructor，注意instanceof不是在获得变量的类型，而是在判断变量的类型是否与给定的相一致，不可以跨frame

var ob=new Date();

var oc=[];

var od=null;

var oe=/\d+/

console.log(ob instanceof Date) //true

console.log(oc instanceof Array) //true

console.log(od instanceof Object) //false

console.log(oe instanceof RegExp) //true

甚至自定义的构造函数也可以判断，

• **constructor，**检测变量的构造函数，不可以跨frame

console.log(({x:1}).constructor.name) //Object

console.log(([]).constructor.name) //Array

console.log((new Date()).constructor.name) //Date

console.log((‘’).constructor.name) //String

console.log((true).constructor.name) //Boolean

console.log((123).constructor.name) //Number

console.log((null).constructor.name) //TypeError,没有constructor属性，会报错

console.log((undefined).constructor.name) //TypeError,没有constructor属性，会报错

• Object.prototype.toString**（推荐）**，检测对象的内部属性

function getType(o) {

var toString=Object.p

return Object.prototype.toString.call(o);

}

var pa=new Date();

var pb=[]

var pc=/\d+/;

console.log(getType(pa)) //[object Date]

console.log(getType(pb)) //[object Array]

console.log(getType(pc)) //[object RegExp]

方法	小结
typeof	无法检测具体的对象类型，适合检测变量是否有定义
instanceof	无法检测原始类型，跨frame失效
constructor	不检查原型链，无法检测null和undefined，跨frame失效，有浏览器兼容问题，某些场景下无效
duck-typing	不可靠，某些场景下失效
Object.prototype.toString	可以检测所有原生对象，无法识别自定义对象的具体类型

最最最推荐的，是优先使用原生方法

实际开发中最常用的是检测数组，Array.isArray()

模版字面量（不会，下次在弄懂）

• 模版字面量是允许嵌入表达式的字符串字面量，可以使用多行字符串和字符串插值功能。

• 支持所有合法的JavaScript表达式，包括函数调用

• 插值表达式支持嵌套

Symbol

详细请看：https://www.cnblogs.com/ddfe/p/5609733.html

一种新的原始数据类型，表示独一无二的值。它是JavaScript语言的第七种数据类型，表示独一无二的值

想给他人创建的对象添加属性，不管该属性取什么名字，理论上都有存在冲突的可能性，而使用Symbol作为对象的属性名就没有这个顾虑，因为它的值是唯一的，这也意味着给对象添加私有属性成为了可能

• 注意：Symbol()是原始类型，不是对象，构造函数，所以不存在new这个关键字

• 注意：Symbol值作为对象属性名时，不能用点运算符，因为点运算符后面总是字符串

let name=Symbol();

let person={};

person[name]=“casd”

console.log(person[name]);

console.log(name)

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。