专栏首页前端与Java学习前端day08-JS学习笔记
原创

前端day08-JS学习笔记

01-运算符与表达式

1.1-关系运算符和关系表达式

1.基本使用

console.log ( 5 > 3 );//true  成立
console.log ( 100 < 1 );//false 不成立

2.相等与不等:只比较数据的值,不比较数据的类型

//注意:一个 = 号表示赋值运算符  两个 == 是比较运算符,它们作用不一样,不要搞混淆了
console.log ( 1 == 1 );//true   常用
console.log ( "1" == 1 );//true  他们的值一样,只是数据类型不一样

3.全等不全等: 先比较数据的值,再比较数据的类型

 // 两者的值虽然相等都是1,但是他们数据类型不一样,所以不成立
 console.log ( "1" === 1 );//false

1.2-逻辑运算符和逻辑表达式

  • 1.逻辑运算符:三种
    • &&:逻辑与 ,读作并且
    • ||:逻辑或,读作或者
    • !:逻辑非,读作取反
      • true(真)变false(假),false(假)变true(真)
  • 2.逻辑表达式:表达式1 逻辑运算符 表达式2
  • 3.运算口诀
    • 逻辑与表达式&&:一假则假
      • 左右两边同时成立,才为真,否则为假
        • 例如:有为青年找女朋友: 白富美:既要白,又要富,还要美。多个条件需要同时成立
    • 逻辑或表达式||:一真则真
      • 左右两边同时为假,才为假,否则为真
        • 例如:小资青年找女朋友:要么白,要么富,要么美。多个条件任意一个成立即可
    • 逻辑非!:取反
      • 例如:屌丝青年找女朋友:只要不是充气的。 非xxxx类似于一种否定逻辑

1.3-运算符优先级

不需要刻意的去记,因为开发中很少会遇到多个运算符参与的式子,万一遇到也可以通过()来提升优先级

运算符优先级:确定不同运算符的运算规则

  • 1.() 小括号:优先级运算符 作用就是提升优先级
  • 2.自增与自减
  • 3.算术运算符(先乘除后加减)
  • 4.比较运算符
  • 5.逻辑运算符
  • 6.赋值运算符
  • 同级运算符从左往右运算

1.4-js转义符与逗号运算符(了解即可)

转义符: \ 改变原来符号的作用就叫转义符

1.5-前自增与后自增区别

1.自增/自减运算符既可以写在变量的前面,也可以写在后面

* 前自增表达式: ++num

* 后自增表达式: num++

2.前自增与后自增异同点

* 相同点:对于变量自身而言,没有任何区别,都是自身+1

* 不同点:表达式的结果不同

* 前自增表达式:先自身+1,后赋值(将num的值赋值给自增表达式的结果)

* 后自增表达式:先赋值,后自身+1

02-数据类型补充

1.1-五种基本数据类型补充

  • 1.复习昨天三种基本数据类型
    • string
    • number
    • boolean
  • 2.补充说明另外两种基本数据类型
    • undefined类型
      • 只有一个值,就是undefined
      • undefined:未定义,当一个变量有声明,但是没有赋值,那么这个变量的值就是undefined(未定义值)
    • null类型
      • 只有一个值,就是null
      • null这个值只能手动设置,变量在任何时候它的值都不会是null
      • 应用场景:一般用在函数中,表示这个函数返回数据失败 后面阶段会学习
  • 3.undefined与null的区别
    • null == undefined:成立,他们的值都是空
    • null === undefined:不成立,他们的值相等但是数据类型不同

1.2-NaN与isNaN

  • 1.NaN:not a number 不是一个数字
    • (1)NaN是number数据类型中一个特殊的数值,是数学计算错误得到的一个结果
      • 例如: '张三' - 100,在数学上这是一种错误的计算,它的结果就是NaN
    • (2)NaN与任何数字都不等,包含它本身
    • (3)NaN与任何数字计算得到的都是NaN
  • 2.isNaN(数据):检测一个数据是不是NaN 得到的结果是布尔类型
    • 例如:isNaN(NaN),结果为true
    • 例如:isNaN(123),结果为false,表示123不是NaN
  • 3.了解:number类型浮点数(小数)精度丢失问题
    • (1)小数在进行数学计算时,会有一定的误差,这是计算机本身的bug,不仅是js语言,其他语言也有这个问题

0.1+0.2 =0.30000000000000004

  • (2)解决方案:不要让两个小数比较大小,这种情况一般不会影响正常开发

03-数据类型转换

1.1-显式数据类型转换

  • 注意:数据类型的转变并不会改变原来变量的值,而是会产生一个新的值
    • 例如:(1) var num = '10';
    • parseInt(num) :
  • 为什么要有数据类型转换?
    • 有时候想要进行某种计算的时候,由于数据类型不同往往会产生一些错误的结果,为了避免这种结果,我们需要将某种数据类型转化为其他数据类型
      • 例如:prompt()输入框得到的数据的类型是string,如果想要进行数学计算则需要转成number类型,否则会计算出错
  • 什么是显示类型转换:程序员主动转换(可以理解为使用关键字来转换)
    • 这种方式代码易读性更高

其他类型转换成number类型:

     /**转换成numbe
     * 第一种方式:`parseInt()`
     *          * 作用:转换整数
     *          * 从左往右解析,遇到非数字结束(停止解析),将解析好的整数返回
     *          * 如果第一个字符不是数字或者符号就返回NaN
     * 第二种方式:`parseFloat()`
     *          * 作用:转换小数
     *          * 与parseInt()最大的区别就是可以解析字符串的第一个小数点
     * 第三种方式: `Number()`
               * 作用:布尔类型转换成数字 
     *         * 可以把任意值转换成数值,如果要转换的字符串只要有一个不是数字,返回NaN
     */
    console.log ( Number ( "123" ) );//123
    console.log ( Number ( "123.1.1abc" ) );//NaN  只要有一个字符不是数字,得到就是NaN
    console.log ( parseInt ( "123.1.1abc" ) );//123  从左往右解析,遇到非数字结束
    console.log ( parseFloat ( "123.1.1abc" ) );//123.1  与parseInt唯一的区别就是可以识别第一个小数点
    console.log(parseInt(null)); //NaN
    console.log(parseInt(undefined)); //NaN
    //一般数字字符串使用parseInt和parseFloat,其他数据类型转数字使用Number()
    console.log ( Number ( true ) );//1    布尔类型转换number会得到数字0(false)和1(true)
    console.log ( Number ( "" ) );//0  空字符串转number会得到0
    //js基础面试题可能会遇到
    console.log(Number(undefined));//NaN
    console.log(Number(null));//0

其他类型转换成string类型

  • 1.第一种方式:变量名.toString()
    • 如果变量的值为undefined或者null,则会报错
  • 2.第二种方式:String(变量名)
    • 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错,会得到undefined或者null

其他类型转换成boolean类型

1.2-隐式数据类型转换

显式转换:程序员主动调用语法去转换数据类型,语义更加明确

隐式转换:运算符两边数据类型不一致,编译器自动帮我们转换一致在计算,这是js的语法特点

  • 隐式转换
    • 1.转成string类型:+号两边如果有一边是字符串,则会把另一边转换成字符串,然后进行拼接
    • 2.转成number类型:以下几种运算符会将任何数据转换成number类型再运算,如果无法转换则为NaN
      • 数学正号 : +num
        • +/-号写在一个变量名的前面,此时表示数学的正/负数
      • 自增自减(++ --)
      • 算术运算符(+ - * / %)
      • 比较运算符(> < >= <= == != === !==)
        • 说明:全等与不全等会先比较值(此时会隐式转换再比较),然后再比较数据类型
    • 3.转成boolean类型:逻辑非(!)会将任何数据转为boolean类型再运算
    • 4.+号有三种含义:数学正负号(转成number)、算术运算符(转成number)、字符串连接符(转成string)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端day07-JS学习笔记

    2.浏览器内核编译器开始编译代码(cpu只能处理二进制数据,需要将我们写的代码转成二进制)

    帅的一麻皮
  • JavaScript高级语法补充(函数参数传递、in delete关键字、比较运算符隐式转换)

    1.值类型 (5种):  栈中存储的是数据,赋值时拷贝的也是数据。修改拷贝后的数据对原数据没有影响。

    帅的一麻皮
  • JAVA中的集合小结

    Collection是最基本的集合接口,声明了适用于JAVA(List和Set)集合的通用方法

    帅的一麻皮
  • 手把手教你搭建和配置Jenkins环境

      搭建Jenkins,首先得安装Jenkins,安装的问题就不说了,一般第一次安装完成后,服务会直接在浏览器中运行,网址:http://localhost:...

    令仔很忙
  • CSS中的@关键字

    大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则,在CSS中,种类还是很多的,这里总结列举下。

    javascript.shop
  • 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像 Twitte...

    叙帝利
  • 探秘|大数据技术恰恰在加剧收入不平等现象?

    在刚刚闭幕的G20杭州峰会上,世界各国的领导人在一个问题上达成了一致:日益严重的收入不平等现象存在着巨大的隐患。各国领导人都强调,应该更加均等地分享全球经济增...

    灯塔大数据
  • 8102年,这些 CSS 特性还没用上?

    CSS Grid 仿佛是在这一年持续爆炸,CSS 会议不提一提网格布局都不好意思(当然也有 CSS 更新太慢的原因)。和 Flexbox 的从 2009 年发布...

    kmokidd
  • CSS世界(异步图书)

    本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的...

    用户3157710
  • 让CodeRush Xpress for C#的菜单在Visual Studio 2008下显示

    很多情况下,CodeRush Xpress for c#功能是靠快捷键来操作的。不过,要经常使用它的options菜单,常Shift+Ctrl+Alt+O觉得也...

    williamwong

扫码关注云+社区

领取腾讯云代金券