hello，js

一、什么是JS

JS是一种运行在客户端的脚本语言，客户端就是HTML网页，JS可以实现网页的动态功能，属于浏览器的一种引擎。 二、JS的组成

JS由ES、DOM、BOM组成

1、ES

是规定JS脚本规范的语言，她描述了JS的基本语法和数据类型

2、DOM

document object model 文档对象模型，有一套操作可以控制页面元素的API，如自动增加或者减少几个div等

3、BOM

browser object model浏览器对象模型，有一套操作可以控制浏览器元素的API，实现浏览器的动态功能，如实现一个页面跳转、弹窗等

API：application programming interface，应用程序接口 定义变量 五、JS的数据类型

1、数据类型

数据类型有：数字类型（Nomber类型）字符串（String类型）布尔值（Boolean）未定义（Undefined）空值（Null）

1.1：数字类型

1.1.1 使用场景：

需要打印台打印出数值的时候，number类型，不区分整数和浮点数的

1.1.2 代码：

var num1 = 123 //定义一个变量并赋值为整数

var num2 = 123.456 //定义一个变量并赋值为浮点数

console.log(num1,num2)

1.1.3 实现效果

1.2：字符串类型

1.2.1 使用场景：

需要打印台打印出字符串的时候，特点是加单引号 ‘’ 或者双引号 “”，不加引号，就会出现未定义，只有加了引号才能告诉计算机那是字符串。而且只要加了引号，数值，字母，汉字都是字符串

1.2.2 代码：

var str1 = ‘11111’ / /定义一个变量并赋值为浮点数，值为123

var str2= ‘abcd’ / /定义一个变量并赋值为浮点数，值为abcd

var str3 = ‘我是字符串’ / /定义一个变量并赋值为浮点数，值为我是字符串

console.log(str1,str2,str3)

1.2.3 实现效果

1.3：布尔值类型

1.3.1 使用场景：

需要打印台打印出布尔值（true，false，数字，加引号的字母或汉字）的时候，布尔值用来判断值为真还是假

1.3.2 代码：

var bol1 = true //定义一个变量并赋值为true（不是普通单词，就是一个规定的布尔值）

var bol2 =f alse //定义一个变量并赋值为false（不是普通单词，就是一个规定的布尔值）

var bol3 = 1 //定义一个变量并赋值为1

var bol4= 0 //定义一个变量并赋值为0

var bol5 = 2222 //定义一个变量并赋值为false

var bol6 = '我是布尔值' //定义一个变量并赋值为汉字

console.log(bol1,bol2)

1.3.3 实现效果

1.4：未定义类型

1.4.1 使用场景：

需要打印台打印出未定义的时候，实际上，一个变量没有被定义赋值也会出现undefined

1.4.2 代码：

var undef = undefined

var u //一个没有被赋值只是被定义了的变量

console.log(undef,u)

1.1.3 实现效果

tip：如果一个变量连定义都没有就打印出来，就会出现报错，报错为未定义

1.5：空类型

1.4.1 使用场景：

需要打印台打印出空类型（null）的时候。

1.4.2 代码：

var nu = null

console.log（nu)

1.4.3 实现效果

2、数据类型的检测

2.1：为什么要检测数据类型

① JS 是一门动态语言，被赋值一个变量后，里面的数据是会随时变化的，数据类型也会发生变化

② 因为她的变化性，所以有时候我们可能不知道她的数据类型，这时候就会用到数据类型的检测了，避免出错

2.2：检测方式

2.2.1 代码

 var num1 = 123     var num2 = 123.456     console.log(typeof(num1),num1,typeof(num2),num2)     // 分割线     var str1 = '123'     var str2 = 'hello'     var str3 = '我是字符串'     console.log(typeof str1,str1,typeof str2,str2,typeof str3,str3)     // 分割线     var bol1 = true     var bol2 = false     var bol3 = 1     var bol4 = 0     var bol5 = 2222// 随便输入一个数字     var bol6 = '我是布尔值'     console.log(typeof(bol1),bol1,typeof(bol2),bol2,typeof(bol3),bol3,typeof(bol4),bol4,typeof(bol5),bol5,typeof(bol6),bol6,)     // 分割线     var undef = undefined     var u     console.log(typeof(undef),undef,typeof(u),u)     // 分割线     var nu = null     console.log(typeof(nu),nu)     console.log(Object.prototype.toString.call(nu))

tip：数值为空类型的检测出来为对象，必须通过其他语法检测，才能检测出她为空类型

2.2.1 实现效果

3、数据类型的转换

在JS中，我们会涉及到一些数据类型的转换，数据类型之间可以实现相互转换

3.1 转换为数值类型

3.1.1转换为number

任何数据类型转化为数值，这个数值既可以是整数又可以是小数

① 自身转自身

代码及实现效果

var num1 = 123 var num2 = 123.456 console.log(typeof Number(num1),Number(num1),typeof Number(num2),Number(num2))

结果：值和数据类型都没没变

②字符串转数值类型

代码及实现效果

var str1 = '123' var str2 = '456hello' var str3 = '789我是字符串' console.log(typeof Number(str1),Number(str1),typeof Number(str2),Number(str2),typeof Number(str3),Number(str3))

结果：数据类型都变成了number类型，除了纯数字的，其余值都为NaN

③ 布尔类型转number类型

代码及实现效果

var bol1 = true var bol2 = false var bol3 = 1 var bol4 = 0 var bol5 = 2222// 随便输入一个数字 var bol6 = '我是布尔值' console.log(typeof Number(bol1),Number(bol1),typeof Number(bol2),Number(bol2),typeof Number(bol3),Number(bol3),typeof Number(bol4),Number(bol4),typeof Number(bol5),Number(bol5),typeof Number(bol6),Number(bol6))

结果：数据类型都成功地转为了number类型，除了之前值为汉字的变为了NaN

④ 未定义类型转number类型

代码及实现效果

var undef = undefined var u console.log(typeof Number(undef),Number(undef),typeof Number(u),Number(u))

结果：数据类型都成功地转为了number类型，之前的数值本来就不是数字，所以转换后也看不到数字，就为NaN

⑤ 空类型转换为number类型

代码及实现效果

 var nu = null  console.log(typeof Number(nu),Number(nu))

结果：数据类型都成功地转为了number类型,由于之前是空的，所以就为0

3.1.2转换为Parseint

与number不同的是，她转换为整数类型，数据类型可转换为她，不会报错，可能就是没什么意义，只是为了让我们了解她的功能罢了

① number类型转为Parseint类型

代码及实现效果

var num1 = 123     var num2 = 123.456     console.log(typeof parseInt(num1),parseInt(num1),typeof parseInt(num2),parseInt(num2))

结果：数据类型还是number类型（整数也是数），但浮点数会变成整数

②字符串转parseint类型

代码及实现效果

var str1 = '123.589' var str2 = '456hello' var str3 = '789.123我是字符串' var str4 = 'leah123' console.log(typeof parseInt(str1),parseInt(str1),typeof parseInt(str2),parseInt(str2),typeof parseInt(str3),parseInt(str3),typeof parseInt(str4),parseInt(str4))

结果：数据类型还是number类型（整数也是数），是浮点数的会转换为整数，与number类型不同的是，哪怕字符串中有其他字母，只要开头出现了数字，就会把它提取出转为整数，前提得是数字在开头

③布尔转parseint类型

代码及实现效果

var bol1 = true var bol2 = false var bol3 = 1 var bol4 = 0 var bol5 = 2222// 随便输入一个数字 var bol6 = '我是布尔值' console.log(typeof parseInt(bol1),parseInt(bol1),typeof parseInt(bol2),parseInt(bol2),typeof parseInt(bol3),parseInt(bol3),typeof parseInt(bol4),parseInt(bol4),typeof parseInt(bol5),parseInt(bol5),typeof parseInt(bol6),parseInt(bol6))

结果：数据类型还是number类型（整数也是数），除了带有数字的会转换为整数，其他都是NaN

④未定义转parseint类型

代码及实现效果

var undef = undefined var u console.log(typeof parseInt(undef),parseInt(undef),typeof parseInt(u),parseInt(u))

结果：数据类型还是number类型（整数也是数），值为NaN

⑤未定义转parseint类型

代码及实现效果

var nu = null console.log(typeof parseInt(nu),parseInt(nu))

结果：数据类型还是number类型（整数也是数），值为NaN

3.1.3 转换为Parsefloat

① number转换为parsefloat类型

代码及实现效果

var num1 = 123 var num2 = 123.456 console.log(typeof parseFloat(num1),parseFloat(num1),typeof parseFloat(num2),parseFloat(num2))

结果：数据类型还是number类型（浮点数也是数），是整数的还是整数，是浮点数的还是浮点数

② number转换为parsefloat类型

代码及实现效果

var num1 = 123 var num2 = 123.456 console.log(typeof parseFloat(num1),parseFloat(num1),typeof parseFloat(num2),parseFloat(num2))

结果：数据类型还是number类型（浮点数也是数），是整数的还是整数，是浮点数的还是浮点数，数字也是必须得在最前面才能实现

③ 布尔转换为parsefloat类型

代码及实现效果

var bol1 = true var bol2 = false var bol3 = 1 var bol4 = 0 var bol5 = 22.22// 随便输入一个数字 var bol6 = '我是布尔值' console.log(typeof parseFloat(bol1),parseFloat(bol1),typeof parseFloat(bol2),parseFloat(bol2),typeof parseFloat(bol3),parseFloat(bol3),typeof parseFloat(bol4),parseFloat(bol4),typeof parseFloat(bol5),parseFloat(bol5),typeof parseFloat(bol6),parseFloat(bol6))

结果：数据类型还是number类型（浮点数也是数），是整数的还是整数，是浮点数的还是浮点数，与转换成整数类似

④自定义转换为parsefloat类型

代码及实现效果

var undef = undefined var u console.log(typeof parseFloat(undef),parseFloat(undef),typeof parseFloat(u),parseFloat(u))

结果：数据类型还是number类型（浮点数也是数），是整数的还是整数，是浮点数的还是浮点数，与转换成整数类似

④空类型转换为parsefloat类型

代码及实现效果

var nu = null console.log(typeof parseFloat(nu),parseFloat(nu))

结果：数据类型还是number类型（浮点数也是数），是整数的还是整数，是浮点数的还是浮点数，与转换成整数类似

分割线------------------------------------------------------------

补充：使用

3.2 转换为字符串类型

所有数据类型都可以完成字符串数据类型转换，只是有些转换可能会没意义，只是为了让我们更清楚地了解她。

3.2.1 number类型转换为字符串

代码及实现效果

var num1 = 123 var num2 = 123.456 console.log(typeof String(num1),String(num1),typeof String(num2),String(num2))

结果：数据类型都变成了字符串，值都没变

3.2.2 布尔类型转换为字符串

代码及实现效果

var bol1 = true var bol2 = false var bol3 = 1 var bol4 = 0 var bol5 = 22.22// 随便输入一个数字 var bol6 = '我是布尔值' console.log(typeof String(bol1),String(bol1),typeof String(bol2),String(bol2),typeof String(bol3),String(bol3),typeof String(bol4),String(bol4),typeof String(bol5),String(bol5),typeof String(bol6),String(bol6))

结果：数据类型都变成了字符串，值都没变

3.2.3 未定义类型转换为字符串

代码及实现效果

var undef = undefined var u console.log(typeof String(undef),String(undef),typeof String(u),String(u))

结果：数据类型都变成了字符串，值都没变

3.2.4 未定义类型转换为字符串

代码及实现效果

var nu = null console.log(typeof String(nu),String(nu))

结果：数据类型都变成了字符串，值都没变

3.3 转换为布尔类型

所有数据类型都可以完成布尔数据类型转换，只是有些转换可能会没意义，只是为了让我们更清楚地了解她，转换成布尔类型，只会输出两个值，那就是true和false

3.3.1 number类型转换为布尔类型

代码及实现效果

var num1 = 123 var num2 = 0 var num3 = -9 console.log(typeof Boolean(num1),Boolean(num1),typeof Boolean(num2),Boolean(num2),typeof Boolean(num3),Boolean(num3))

结果：数据类型当然都变成了布尔类型，0就是false，负数和整数都是true

3.3.2 字符串类型转换为布尔类型

代码及实现效果

var str1 = '123.589' var str2 = ' ' var str3 = '' var str4 = '0' console.log(typeof Boolean(str1),Boolean(str1),typeof Boolean(str2),Boolean(str2),typeof Boolean(str3),Boolean(str3),typeof Boolean(str4),Boolean(str4))

结果：数据类型当然都变成了布尔类型，引号里有东西（数字，字母，文字，空格，0，值都为true。字符串里没东西就为false

3.3.3 自定义类型转换为布尔类型

代码及实现效果

var undef = undefined var u console.log(typeof Boolean(undef),Boolean(undef),typeof Boolean(u),Boolean(u))

结果：数据类型当然都变成了布尔类型，由于未定义啥也没有，所以就是false

3.3.3空类型转换为布尔类型

代码及实现效果

var nu = null console.log(typeof Boolean(nu),Boolean(nu))

结果：数据类型当然都变成了布尔类型，由于空啥也没有，所以就是false

3.3 转换为未定义类型

理论上所有数据类型都可以转换成未定义类型，但是她们转换以后，就会报错

3.3.3number类型转换为未定义类型

代码及实现效果

var num1 = 123 var num2 = 0 var num3 = -9 console.log(typeof undefined(num1),undefined(num1),typeof undefined(num2),undefined(num2),typeof undefined(num3),undefined(num3))

分割线-------------------------------------------------------------------

以下的数据类型转换成未定义类型都是同样的结果

3.3 转换为空类型

理论上所有数据类型都可以转换成空类型，但是她们转换以后，就会报错

3.3.3 number类型转换为空类型

代码及实现效果

var num1 = 123 var num2 = 0 var num3 = -9 console.log(typeof null(num1),null(num1),typeof null(num2),null(num2),typeof null(num3),null(num3))

分割线-------------------------------------------------------------------

以下的数据类型转换成空类型都是同样的结果

分割线-------------------------------------------------------------------

补充：当使用运算符时，是否可以转换？

1、使用加号‘+’时

1.1 number类型的

代码及实现效果

var num1 = 123 var num2 = 0 var num3 = -9 console.log(typeof (num1 + 0),(num1 + 0),typeof (num2 + 0),(num2 + 0),typeof (num3 + 0),(num1 + 0))