学习前端的第十九天——数据类型转换

今天继续接着上次学习的内容，没错还是js的概念

一、数据类型转换

• 之前学习css的时候，元素类型转换，在实际的开发中有时候需要把其他类型变成自己想要的类型
• js里面很多情况下都会遇到把其他类型转成自己想要的类型 例如：两个字符串的数字进行相加
• 数据类型转换的方法：Number()、String()、Boolean()

Number()

• 把其他类型转成数值类型
• 注意点
  1、把布尔类型的true转成数值类型结果是1
  2、把布尔类型的false转成数值类型结果是0
  3、把空型转成数值类型结果是0
  4、把未定义类型转成数值类型结果是NaN
  5、把字符串不是纯数字的转成数值类型结果是NaN

String()

• 把其他类型转成字符串类型
• 在前后端交换，数据交换，以及实际开发中这种应用场景非常多
• 前后端数据交换要求（规定）的数据格式就是字符串类型，其他类型不识别

Boolean()

• 把其他类型转成布尔类型
• 注意点：
  1、把等于1、大于1还有小于1的数值类型转成布尔结果是true
  2、把Infinity或者-Infinity转成布尔类型结果是true
  3、把数字0转成布尔类型结果是false
  4、把NaN转成布尔类型结果是false
  5、把字符串的0转成布尔类型结果是true
  6、把空字符串（没有空格）转成布尔类型结果是false
  7、把空型转成布尔类型结果是false
  8、把未定义类型转成布尔类型结果是false

隐式数据类型转换：

• js会默认帮助咱们去进行转换
• 字符串加数字,数字就会转成字符串。
• 数字减字符串，字符串转成数字。如果字符串不是纯数字就会转成NaN。
  字符串减数字也一样。两个字符串相减也先转成数字。
• 乘，除，大于，小于跟减的转换也是一样。
• undefined等于null
• 字符串和数字比较时，字符串转数字
• 数字为布尔比较时，布尔转数字
• 字符串和布尔比较时，两者转数字

从字符串中提取整数和浮点函数(方法)

1. parseInt()系统函数
   功能：
   在一个字符串中，从左往右提取整型。如果遇到非整型的内容，则停止提取，并返回结果。
   可以把字符串转成数值类型
2. parseFloat()系统函数
   功能：
   在一个字符串中，从左往右提取浮点型。遇到非浮点型，则停止提取，并返回结果。
   可以把字符串转成数值类型
3. 场景：当咱们使用js获取到元素的属性的时候，如果是数值的话默认会带单位，属性的属性值数据类型默认是字符串

二、运算符

1、算术运算符：+、—、*、/、%（取余、取模）、++、- -

• 自增：++
• 自增是+1的意思
• 当++在前时，先+1，再运算
• 当++在后时，先运算，再+1
• 自减：- - 同理

2、赋值运算符：=、+=、-=、*=、/=

• = 赋值，把等号右边的值给等号左边的
• += 简写形式，使用原先的值再加上一个值，例如：a+=b，实际为a=a+b
• -= 和 += 同理
• *= 和 += 同理
• /= 和 += 同理

//输出三行三列的表格 使用+=进行简化操作
var tab = '<table border="1" width="500" height="200">';
	tab += '<tr>';
		tab += '<td></td>';
		tab += '<td></td>';
		tab += '<td></td>';
	tab += '</tr>';
	tab += '<tr>';
		tab += '<td></td>';
		tab += '<td></td>';
		tab += '<td></td>';
	tab += '</tr>';
	tab += '<tr>';
		tab += '<td></td>';
		tab += '<td></td>';
		tab += '<td></td>';
	tab += '</tr>';
tab += '</table>';  
document.write(tab);

3、比较运算符：>、<、>=、<=、== 、 != 、===

• 比较运算符常用于判断结构

关于几个等号问题（重点）：

• = 一个等号表示赋值
• == 两个等号表示比较，会进行隐式数据类型转换
• === 全等于，也是比较，只有满足两个条件的时候才会为真
  条件：
  1、当值相等时
  2、当数据类型相等时

4、逻辑运算符

• '&&'逻辑与(也可以叫并且)。如果左右两个操作符都为true，则结果为true，否则，结果为false。
  逻辑与，就是两个条件同时满足时，结果为true。
• '||'逻辑或。左右两个条件，只要一个满足，就返回true，否则，就返回false。
• '!'取反运算。

注意：typeof() 检查数据类型
typeof typeof(10) 输出为string，表示的是检查数据类型的类型

二、流程控制三大结构

1. 顺序结构，按着代码的步骤，先执行第一步再执行第二步
2. 判断结构，代码不会直接按着步骤执行，会先进行条件判断，如果为真就执行，为假就不执行
3. 循环结构，循环（重复），可以帮助咱们去重复做一些事情，简化了操作流程
4. 选择结构的条件问题：
   1、条件为真执行；
   2、为假不执行；
   3、选择结构的括号里面可以放的条件类型有哪些。
   4、注意：
   • Array ==> []
   • object ==> {}
   • [] {} 都会执行
   • function (param) { }
   • ''空字符串，不会执行
   • ’ '空字符串（里面有空格就会执行）

顺序结构

• 按照程序的书写顺序，一条一条语句执行，不允许跳过任何一条语句

选择（判断）结构：

• 单分支选择结构，使用系统提供的两个关键字 if、else
  语法：
  if(条件){
    执行代码
  }
  说明：
  1、if表示如果，是系统关键字
  2、if后面的括号里面放的是判断条件，条件为真执行，为假不执行
  3、{}花括号里面执行的代码
• 双分支结构
  语法：
  if(条件){
    执行代码（为真执行这里）
  }else{
    执行代码（为假执行这里）
  }
• 多分支结构
  语法：
  if(条件1){
    执行代码1
  }else if(条件2){
    执行代码2
  }else if(条件3){
    执行代码3
  }else{
    执行代码4（如果以上条件都不成立，则执行这里）
  }