1.什么是类型转换？

script是一种弱类型言语，这象征着变量是没有明白类型的，而是由JavaScript引擎在编译时隐式成功。类型转换就是将一种数据类型转换为另一种数据类型，例如：

20+"twenty"//"20twenty""10"*"10"//1002-"x"

Javascript经常使用严厉相等（===）和宽松相等（==）来测试两个值的相等性，类型转换仅在经常使用宽松相等运算符时出现。当经常使用===测试严厉相等时，要比拟的变量的类型和值都必定相反，例如：

10===10//trueNaN===NaN//false

在上方的代码中，10和10都是数字并且是齐全相等的，所以正如预期的那样前往了，两个NaN永远不会相等。当经常使用==测试宽松相等时，或许会出现隐式转换：

'20'==20//truefalse==0//true

关于任何数据类型，无论是原始类型还是对象，都可以启动类型转换。虽然原始类型和对象的转换逻辑各不相反，然而都只能转换为三种类型： 字符串（string）、数字（number）、布尔值（boolean） 。

JavaScript中的类型转换有两种方式：

上方先来看看JavaScript中的显式和隐式类型转换。

（1）显示类型转换

咱们可以经过JavaScript内置的一些API将一种类型转换为另一种类型，这称为显式类型转化。口头显式类型转换的最简双方法是经常使用、和、 parseInt() 等函数，例如：

String(2-true);//'1''56'===String(56);//trueNumber('2350e-2');//'23.5'Number('23')+7;//30Boolean('');//falseBoolean(2)===true;//true

（2）隐式类型转换

隐式类型转换是将一种数据类型转换为另一种数据类型（确保在相反数据类型之间成功操作）以使运算符或函数反常上班，这种转换是由JavaScript编译器智能成功的，隐式类型转换也称为类型强迫。例如：

'25'+15;//'2515'23*'2';//4623-true;//22true-null;//1false+undefined;//NaNconstarr=[];if(arr){console.log('HelloWorld')};

上方这些经常出现的操作会触发隐式地类型转换，编写代码时要分外留意：

①+运算符

/*一个操作数*/+x//将x转化为数字,假设不能转化为数组将输入NaN+"1234string"//NaN+1//1+'1'//1+true//1+undefined//NaN+null//0+newDate()//1660493819396/*两个操作数*/a+b//1.假设其中任何一个是对象，则先将其转换为原始类型{}+{}//'[objectObject][objectObject]'[]+[]//''[]+newDate()//'MonAug15202200:18:18GMT+0800(中国规范期间)'//2.假设一个是字符串，则将另一个转换为字符串1+''//'1'''+1//'1'''+true//'true'//3.否则，将两者都转换为数字1+true//2true+true//2

//将一个或多个值转换为数字-'1'//-1[]-1//-1[]-{}//NaN

//两个操作数a==b//1.假设一个是`null`而另一个是`undefined`，它们是相等的null==undefined//true//2.假设一个是数字，另一个是字符串，将字符串转换为数字，再比拟1=='1'//true//3.假设其中一个是布尔值，将其转换为数字，再次比拟true==1//truefalse==0//true//4.假设一个是对象，另一个是数字或字符串，将对象转换为原始类型，再次比拟[1]==1//true['1']=='1'//true

下图是在经常使用==时，判别两个操作数能否相等的总结（绿色示意相等，红色示意不等）：

//两个操作数a>b//1.假设其中一个是对象，则将其转换为原始类型，再次比拟[2]>1//true//2.假设两者都是字符串，经常使用字母顺序比拟它们'b'>'a'//true//3.假设其中一个是数字，则将一个或两个非数字转换为数字'2'>1//true

/*假设左操作数不是字符串，则将其转换为字符串*/ainb'1'in{1:''}//true1in{1:'a'}//true1in['a','b']//true

2.经常出现类型转换

（1）字符串转换

将数据类型转换为字符串称为字符串转换，可以经常使用函数将数据类型显式转换为字符串。当一个操作数是字符串时，可以经过经常使用运算符来触发隐式字符串转换。

①数字=>字符串：

Number对象的 toString() 方法会前往指定Number对象的字符串示意方式。和 newString() 会把对象的值转换为字符串。

String(20);//'20'String(10+40);//'50'(10+40).toString();//'50'newString(10+20);//'30'

②布尔值=>字符串：

和 toString() 方法会将布尔值转化为对应的字符串方式。

String(true);//'true'String(false);//'false'true.toString()//'true'false.toString()//"false"

③数组=>字符串：

方法会将数组元素经过逗号衔接起来，无论嵌套多少层，都会将其开展并前往元素拼接好的字符串。假设是空数字，会前往空字符串：

String([1,2,3]);//'1,2,3'String([1,2,3,[4,[5]]]);//'1,2,3,4,5'String([1,2,3,[4,[5,{}]]]);//'1,2,3,4,5,[objectObject]'String([]);//''

④对象=>字符串：

经常使用String()方法会将对象转化为 '[objectObject]' ，无论对象能否为空对象：

String({name:"Hello"});//'[objectObject]'

⑤null/undefined/NaN=>字符串：

经常使用方法会将、、转化为其对应的字符串方式：

String(undefined);//'undefined'String(null);//'null'String(NaN);//'NaN'

String(newDate('2022-08-20'))//'SatAug20202208:00:00GMT+0800(中国规范期间)'

⑦隐式转换

当任何数据类型经常使用运算符与字符串衔接时会出现到字符串的转换（隐式转换）:

"25"+56;//'2556'"25"+null;//'25null'"Hello"+undefined;//'Helloundefined'"25"+false;//'25fasle'"25"+{};//'25[objectObject]'"25"+[10];//'2510'

所以，当咱们想要创立一个操作并且操作数类型之一是字符串时，应该小心经常使用类型强迫转换。

⑧总结

上方是ECMAScript规范中将数据类型转换为字符串的规定：

ECMAScript规范：

（2）布尔转换

将数据类型转换为布尔值称为布尔转换。这种转换既可以由函数显式成功，也可以在逻辑高低文中隐式成功（如if/else）或经过经常使用逻辑运算符（||、&&、!）触发。

①字符串=>布尔值：

经常使用方法转化字符串时，只要当字符串为空时会前往，其余状况都会前往：

Boolean('hello');//trueBoolean('');//trueBoolean('');//false

②数字=>布尔值：

经常使用方法转化数字时，只要0、-0或NaN会转化为，其余状况会前往：

Boolean(-123);//trueBoolean(123);//trueBoolean(0);//falseBoolean(-0);//falseBoolean(NaN);//false

③数组/对象=>布尔值：

经常使用方法转化数组或对象时，无论数组和对象能否有内容，都会前往：

Boolean([1,2,3]);//trueBoolean([]);//trueBoolean({});//trueBoolean({'hello':'world'});//true

④null/undefined=>布尔值：

经常使用方法转化或时，都一直前往：

Boolean(undefined);//falseBoolean(null);//false

⑤隐式转换

在数学运算中，转换为1，转换为0：

true+5;//6false+5;//55-true;//55-false;//4

⑥逻辑运算符、逻辑高低文

//假设其中一个不是布尔值，则将其转换为布尔值Boolean(null||undefined||0||-0||NaN||'')//falseBoolean(1&&'a'&&{}&&[]&&[0]&&function(){})//truetrue&&false//falsetrue&&true//truetrue||false//truetrue||!false//true

留意，逻辑运算符，例如或外部启动布尔转换，但实践上台往原始操作数的值，即使它们不是布尔值。

'hello'&&123;//123

可以经常使用双慨叹号（）来将变量转为为布尔值：

!!0//false!!""//false!!""//true!!{}//true!![]//true!!true//true

if、elseif、while、do/while和for经常使用与&&、||、!相反的隐式类型转换方式（逻辑表白式）。

上方是在if语句（逻辑高低文）中的隐式转换规定（绿色为，红色为）：

⑦总结

Boolean('');//falseBoolean(0);//falseBoolean(-0);//falseBoolean(NaN);//falseBoolean(null);//falseBoolean(undefined);//falseBoolean(false);//false

Boolean({})//trueBoolean([])//trueBoolean(Symbol())//trueBoolean(function(){})//true

可以经过以下方式来过滤数组中的假值：

[0,"","",null,undefined,NaN].map(Boolean);//输入结果：[false,false,true,false,false,false]

咱们可以会遇到一种状况，当经常使用时，结果为，而经常使用时，则5被以为是并进入语句：

5==true;//falseif(5){console.log('5');//5};

这种状况下，即一个值和数字启动比拟时，JavaScript会试图将这个值转换为数字。所以，当比拟时，JavaScript偏差于将转换为1，由于1不等于5，因此结果为。而在的状况下，5被转换为布尔值，而5是一个真值，所以它进入块。在这种状况下，可以选用显式转换以防止失误，由于5是一个真值，可以口头 Boolean(5)==true ，这样就会前往了。

上方是ECMAScript规范中将数据类型转换为布尔值的规定： ECMAScript规范：

（3）数字转换

将数据类型转换为数字称为数字转换，可以经常使用、 parseInt() 、 parseFloat() 等方法将数据类型显式转换为数字。当一个值不能被强迫转换为一个数字时，就会前往。

①字符串=>数字：

当把字符串转换为数字时，JavaScript引擎首先会修剪前导和后置空格、、字符，假设修剪后的字符串不代表有效数字，则前往。假设字符串为空，则前往0。

Number('123');//123Number("-12.34")//-12.34Number("12s");//NaNNumber("n")//0parseInt('203px');//203parseInt('10.000')//10parseInt('10.20')//10parseFloat('203.212px');//203.212parseFloat('10.20')//10.2parseFloat('10.81')//10.81

可以看到，函数会从字符串中读取一个数字并删除它前面一切字符，然而假设数字前面有字符（空格除外），那么它将输入。

②布尔值=>数字：

当经常使用将布尔值转化为数字时，会转化为1，会转化为0。

Number(true);//1Number(false);//0

③null=>数字：

当经常使用将转化为数字时，会前往0：

Number(null);//0null+5;//5

④undefined/数组/对象/NaN=>数字：

当经常使用将、数组、对象、转化为数字时，会前往：

Number(undefined);//NaNNumber([1,2,3])//NaNNumber({})//NaNNumber(NaN)//NaN

⑤数组元素

可以经常使用遍历数组元素，并经常使用须要的类型来启动类型转换：

["1","9","-9","0.003","yes"].map(Number);//输入结果：[1,9,-9,0.003,NaN]

⑥不凡规定

在表白式中，当咱们将运算符运行于或时，不会出现数字转换。此外，只等于或，不能等于其余任何值：

null==null;//truenull==0;//falsenull==undefined;//trueundefined==undefined//true

依据运算符优先级，运算符具备从左到右的关联性，因此假设有一个表白式 2+3+'4'+'number' ，则操作按以下方式成功：

2+3+'4'+'number'==>5+'4'+'number'//数字5被隐式转换为字符串，而后衔接起来==>'54'+'number'==>'54number'

不等于任何其余类型，甚至它自身：

NaN==NaN//false

⑦总结

上方的例子中，可以清楚地看到一些意想不到的结果：将转换为数字时前往了0，而将转换为数字前往了。两个操作都应该前往，由于这两种值类型显然都不是有效的数字，将空字符串转换为数字时也前往了0。

上方是ECMAScript规范中将数据类型转换为字符串的规定，清楚的解释了上方的异常现象：

另外，在ECMAScript规范中，还提到一点：

意思就是： 为空或仅蕴含空格的StringNumericLiteral将转换为+0 。这也就解释了为什么将空字符串转换为数字时也前往了0。

ECMAScript规范：

3.Symbol类型转换

只能启动显式转换，不能启动隐式转换。也就是说，不能被强迫转换为字符串或数字，这样它们就不会被异常地用作原本应该体现为的属性。

constmySymbol=Symbol.for("mySymbol");conststr=String(mySymbol);console.log(str);//'Symbol(mySymbol)'

当经常使用 console.log() 来打印时，它之所以有效，是由于 console.log() 在上调用了方法以创立可用的结果。

假设尝试间接经常使用字符串衔接，它将抛出：

constmySymbol=Symbol.for("mySymbol");constsum=mySymbol+"";console.log(sum);//UncaughtTypeError:CannotconvertaSymbolvaluetoastring

将衔接到字符串须要首先将转换为字符串，并且在检测到强迫转换时会抛出失误，从而阻止以这种方式经常使用它。

雷同，咱们不能将强迫转换为数字，一切数学运算符在与符号一同经常使用时都会引发失误：

constmySymbol=Symbol.for("mySymbol");constfactor=mySymbol/2;console.log(factor);//UncaughtTypeError:CannotconvertaSymbolvaluetoanumber

4.对象类型转换

引见完了基本数组类型的转化，上方来看看对象类型的转化。例如，当口头 obj_1+obj_2 或许 obj_1-obj_2 时，都会先将对象转换为原始类型，而后将其转换为最终类型。当然，这里的转化依然只要三种类型：数字、字符串和布尔值。

对象经过外部的 ToPrimitive 方法将其转换为原始类型，该算法准许咱们依据经常使用对象的高低文来选用应如何转换对象。从概念上讲，ToPrimitive算法可以分为两局部：Hints和Object-to-primitive转换方法。

Hints是 ToPrimitive 算法用于确定对象在特定高低文中应转换为什么的信号。有三种状况：

alert(obj);String(obj)//经常使用对象作为属性key值anotherObj[obj]=1000;

//二元加letsum=obj1+obj2;//obj==string/number/symbolif(obj==10){...};

（2）Methods

在ToPrimitive算法依据确定对象应转换为的原始值类型之后。而后经常使用Object-to-primitive转换方法将对象转换为原始值。有三种状况：

letPerson={name:"Mary",age:22,//hint是"string"toString(){return`{name:"${this.name}"}`;},//hint是"number"或"default"valueOf(){returnthis.age;}};alert(Person);//toString->{name:"Mary"}alert(+Person);//valueOf->22alert(Person+10);//valueOf->32

在上方的代码中，变成了一个对象字符串或数字，详细取决于转换高低文。 toString() 的转换，用于其余状况（Hints为number或default）。

你或许宿愿在一个中央处置一切转换。在这种状况下，只能像这样成功 toString() 方法：

letPerson={name:"Mary",toString(){returnthis.name;}};alert(Person);//toString->Maryalert(Person+1000);//toString->Mary1000

Symbol.toPrimitive ：与 toString() 和方法不同， Symbol.toPrimitive 准许笼罩JavaScript中的自动对象到原始值的转换（其中 toString() 和方法由ToPrimitive算法经常使用）并定义咱们宿愿如何将对象转换为原始类型的值。为此，须要经常使用此Symbol称号定义一个方法，如下所示：

obj[Symbol.toPrimitive]=function(hint){//前往原始类型值//hint等于"string","number","default"中的一个}

例如，这里的对象经常使用 Symbol.toPrimitive 口头与上方相反的操作：

letPerson={name:"Mary",age:22,[Symbol.toPrimitive](hint){alert(`hint:${hint}`);returnhint=="string"?`{name:"${this.name}"}`:this.age;}};alert(Person);//hint:string->{name:"Mary"}alert(+Person);//hint:number->22alert(Person+10);//hint:default->32

可以看到，单个方法 Person[Symbol.toPrimitive] 处置了一切转换状况。须要留意，在没有 Symbol.toPrimitive 和的状况下， toString() 将处置一切原始类型转换。

上方是将对象转化为布尔值、字符串、数字时的口头环节：

（1）对象到布尔值的转换

Javascript中的一切对象都转换为true，包括包装对象newBoolean(false)和空数组。对象到布尔值的转换不须要对象到原始类型算法。

（2）对象到字符串的转换

当须要将对象转换为字符串时，Javascript首先经常使用ToPrimitive算法（Hints=string）将其转换为原始类型，而后将派生的原始类型转换为字符串。例如，假设将对象传递给String()这样的内置函数，或许在模板字符串中拔出对象时。

（3）对象到数字的转换

当须要将对象转换为数字时，Javascript首先经常使用ToPrimitive算法（Hints=number）将其转换为原始类型，而后将派生的原始类型转换为数字。希冀数字参数的内置Javascript函数和方法以这种方式将对象参数转换为数字，例如Math()。

（3）不凡状况

当某些Javascript运算符的操作数是对象时，也会出现类型转换：

---

详解JavaScript基础知识（JSON、Function对象、原型、引用类型）

1、JSON概念：JavaScript对象表示法(JavaScriptObjectNotation)，是一种轻量级的数据交换格式特点：易于程序员编写和查看；易于计算机解析和生成数据结构：Object对象格式{key:value,key:value}Array数组格式[value,value]Eg:varjson=‘{“”:‘‘}(内部双引号，外部单引号)*JSON-支持独立的文件；允许嵌套JSON格式在主流开发语言中几乎都支持---各个语法语言的共识就是字符串JSON中的字符串只能使用双引号*支持的数据类型：string；number；boolean；null；object；array转换JSON对象与字符串转换为JSON对象(对象)---(服务器=>客户端),解析JSON字符串，转换为JSON字符串(字符串)----(客户端=>服务器)，2、Function对象函数与Function对象：Function类型是JavaScript提供的引用类型之一；通过Function类型创建了一个Function类型的对象，该对象实际是一个[函数]。 var对象名=newObject();---创建对象var函数名=newFunction();//functionanonymous(){}【在JavaScript中，所有函数是Function的对象】var函数名=newFunction(参数，函数体);括号()里面最后一个参数，识别为函数体，除此都是形参。 ---不建议构造函数：作用：为了创建对象（工厂方式）语法结构：function构造函数名称（形参）{this.属性名=属性值;----this的含义->指的是创建的对象this.方法名=function(){}}var对象名=new构造函数名称();3、原型在JavaScript中，函数是一个包含属性和方法的Function类型的对象。 属性(Prototype)在函数定义时就已经存在，是Function对象(即函数)预定义的一个属性；它的初始值是一个空对象。 在JavaScript中没有定义函数的原型类型，所以原型可以是任何类型。 原型是用于保存对象的共享属性和方法，原型的属性和方法并不影响函数本身属性和方法。 ²显式原型-Function的prototype在真实的开发环境中使用²隐式原型-Function的__proto__用于开发过程中的测试，不能被使用在真实的开发环境中4、引用类型数据类型：Number-通过创建对象方式定义数字；String-通过创建对象方式定义数字；Boolean-通过创建对象方式定义数字；Date类型作用：获取常规的日期+时间getFullYear():获取年份;getMonth():获取月份;getDate()：获取日期getTime()：距离1970年1月1日到目前的时间和日期[利用毫秒值进行时间的计算；实现时间戳(标识)]eg:日期格式为YYYY年MM月DD日的当前时间vardate=newDate();(()+年+()+月+()+日);Math类型属性：PI-圆周率注：不需要创建对象方法：对数字的处理ceil(x)：向上取整即增；floor(x)：向下取整即舍；round(x)：四舍五入pow(x1,x2)：n1的n2次方random()：生成0-1之间的随机数eg：0-100随机数(()*100);1-100随机整数(()*99+1);20%概率执行一，50%概率执行二if(num<=0.2){}else{}Global类型全局对象：全局属性(Infinity、NaN、undefined)、全局方法，在JavaScript中任何位置都可调用。 您可能感兴趣的文章:JS对象与JSON互转换、NewFunction()、forEach()、DOM事件流等js开发基础小结

Web前端开发知识点之JavaScript的介绍与语法

今天小编要跟大家分享的文章是关于Web前端开发知识点之JavaScript的介绍与语法。 正在学习web前端相关知识的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。 一、JavaScript介绍JavaScript是一门客户端脚本语言，是适应动态网页制作的需要而诞生的一种编程语言。 这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 在HTML基础上，使用Javascript可以开发交互式Web网页，可以增强用户和HTML页面的交互过程，可以控制HTML元素让页面有一些动态的效果，增强用户的体验。 JavaScript使有规律地重复的HTML文段简化，减少下载时间。 二、JavaScript语法①与HTML的结合方式JavaScript与HTML的结合方式有两种，一种是内部JavaScript，一种是外部JavaScript，定义的方式与CSS类似。 内部JavaScript需要定义一对外部JavaScript也需要定义一对注意：JavaScript可以定义在HTML页面的任何地方，但是定义的位置会影响执行的顺序。 而且可以在HTML文档中放入不限数量的脚本。 通常的做法是把函数放入部分中，或者放在页面底部。 这样就可以把它们安置到同一处位置，不会干扰页面的内容。 ②注释JavaScript的注释与java相同，一种是“//”单行注释，一种是“/**/”多行注释。 例如//这是单行注释/*这是多行注释这是多行注释*/③数据类型JavaScript的数据类型包括两大类：原始数据类型和引用数据类型。 原始数据类型包括：·number数字：包括整数、小数和NaN(notanumber不是数字的数字类型)·string字符串·boolean布尔型：包括true和false·null：一个对象为空的占位符·undefined：未定义引用数据类型就是指对象类型。 ④变量所谓变量就是一小块存储数据的内存空间。 java语言是强类型语言，在开辟变量存储空间时就定义了存储数据的类型，而且只能存储固定类型的数据;JavaScript是弱类型语言，在开辟变量存储空间时不定义存储数据的类型，可以存储任意类型的数据。 声明变量用var关键字，例如：vara=3;我们可以使用typeof运算符获取变量的类型。 ⑤运算符JavaScript中的运算符与java中的基本一致，大家可以参考这个链接复习一下，接下来我再说说JavaScript里比较特殊的运算符。 在说运算符之前先说一个注意事项：在JavaScript中如果运算数不是运算符所要求的的类型，那么JavaScript引擎会自动将运算数进行类型转换。 因此在JavaScript中1==1的结果是true，那么我想让他的结果是false该怎么办呢?所以JavaScript引入了新的运算符全等于(===)，此时1===1的结果就是false了。 ⑥流程控制语句JavaScript中流程控制语句包括...、switch、while、...、for等，语法规则与java中完全一致，点击上方关键词可查看java语法规则。 ⑦特殊语法(不建议)JavaScript语句以;结尾，如果一行只有一条语句则;可以省略。 变量定义是使用var关键字，也可以不使用。 以上就是小编今天为大家分享的关于Web前端开发知识点之JavaScript的介绍与语法的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。 文章来源：原创凯哥的故事凯哥的故事