[前端学习]js语法部分学习笔记，第二天

JS的组成

• JS是由ECMAscripte、BOM、DOM三个部分组成的。
  • ECMA是一个组织，它制定了js语言的规范，定义了对象、属性等，而且随着版本的更迭，会让js越来越强大
  • BOM(broswer object modle)浏览器对象模型，对浏览器的一些列操作，比如弹出窗口、回到顶部、页面自适应等等。
  • DOM(document object modle)文档对象模型，对html文档的操作，一系列页面特效。

js数据类型转换

• 在实际工作中，我们经常会用到数据类型的转换，比如表单和弹出输入框，它默认的输入内容是字符串，但如果想用来运算字符串是不行的，就需要转换为数值型；再例如手机号和邮箱等，我们又需要把它转换成字符串，否则数字不知道多大去了。
• 总结来说就是，数据类型经常会被转换。

字符型转换

• 隐式转换。前面已经说过+法运算中出现任意字符串（空字符串也算）是把所有参与运算的连接起来，当连接之后该值自动就转换为字符型数据了。
• 显式转换。
  • String()，使用这个函数可以把值强制转换为字符型
  • toString(),这个函数与上面的作用一样，但是使用方法不同。
  • 分别的用法：
    • String(变量或者值)是函数，输入要转换的参数即可
    • 变量.toSrting()是字符串内置方法，在前面写变量.就行，注意toString()不能转换null类型和undefined类型。

数值型转换

• 隐式转换。把变量参与三种方式都能隐式转换数值型：1.非加法以外的基础运算符；2.比较运算符< > <= >=；3.一元运算符正号+和负号-。
• 显式转换。使用Number()函数强制把值转换为数值型。
• 注意，如果是非数字的字符串使用以上方法转换，虽然类型可以转换，但是返回值是NaN。ture转为数值是1，false转为数值是0，null转为数值是0，undefined转为数值是NaN。如果值是NaN那么参与运算结果都是NaN
• 专用转换数值型函数：
  • parseInt(); 这个函数转换类型时，如果不是有效数字，会把数字部分取出来再进行转换，有小数直接省略。比如："100岁"不是一个有效数字，它会把100这个数字取出来，再转换。当然这个函数转换只支持数字在前的值，如果是"我100"数字在后,那还是会返回NaN
  • parseFloat();与上一个用法特性都是几乎相同，唯一的区别是遇到小数会完整的取出来。

布尔型转换

• 使用!!或者Boolean()都可以把值转换为布尔型
  • 类型对应转换：
  • true、非0数字、字符串转换后都为true
  • false、undefined、null、0、NaN、 空字符串转换后都为false

字面量

• 描述不同数据类型的方式叫做字面量，只是写法不同，例如number，string，boolean等

JS条件分支结构

if语句

• 格式：
  if(表达式) {
代码块
} else {
代码块
}
• if语句也可以称为判断语句，它会自动把表达式的结果转换为布尔值，然根据真还是假，来分别执行不同的代码。
• if语句的几个要点：
  • 可以只写if不写else，这样如果条件不成立就没有任何操作，直接跳过，很常用
  • 只有if后面跟表达式
  • 表达式可以是任意代码，因为会自动转换为布尔值

三元运算符

• 格式：
  表达式 ？ 结果a : 结果b；
• 三元运算符就是对if语句的简化。如果表达式为真，返回结果a。否则返回结果b。可以看出来与if else作用相似，所以也可看成是if else的简写，当然如果if里还有if嵌套就不能代替了。

多分支判断结构

• 格式：
  if (表达式1) {
xxx；
}else if(表达式2) {
xxx;
}else if(表达式3) {
xxx;
}else {
xxx;
}
• 为了让条件判断语句功能更加强大有了多分支判断结构，它会依次执行每个表达式，如果条件为真则直接结束判断，返回对应代码。所有条件都为假才会执行最后的else。
• 多分支判断结构常用于多个范围之间的判断。

使用浏览器断点调试js

• 浏览器断点调试需要在调试工具中，选中source。加载完代码后，在需要加上断点的地方的行号上单击一下，就成功加上了断点。
• 重新加载执行代码时，到了断点处执行会暂停，只有不断通过单击下一步才会继续执行，并且还能用光标看到代码的运行结果(也可以用add to watch添加的监视，这样在右侧会一直显示结果)，这样很容易就能找到代码中是哪里出错。

switch case判断语句

• 格式：
  var num = 3;
switch(num) {
case 1：
document.write(xxx);
break;
case 2:
document.write(xxx);
break;
case 3:
document.write(xxx);
break;
default :
document.write(xxx);
}
• switch功能与if多分支结构相似，但是switch一般用于多个准确值的判断，if多分支常用于多个范围的判断。
• 每个case对应一个条件，执行时会依次来匹配表达式里的值（注意必须值全等才会匹配成功），然后跟上一个break表示匹配成功跳出判断，必须加上break否则会一直到最后全都执行。
• 当所有case都不能匹配成功，就执行default里的代码。
• case的值一定不能有相同，否则会出错。
• 注意格式比较怪，要记仔细。