美文网首页js基础
[前端学习]js语法部分学习笔记,第二天

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

作者: 印象rcj | 来源:发表于2017-09-18 23:43 被阅读0次

    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的值一定不能有相同,否则会出错。
    • 注意格式比较怪,要记仔细。

    相关文章

      网友评论

        本文标题:[前端学习]js语法部分学习笔记,第二天

        本文链接:https://www.haomeiwen.com/subject/jqcusxtx.html