前端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类型

• 只有一种方式: Boolean(变量名)
  • 官网文档中有八种情况得到的false，其他一切均为true：0、-0、null、false、NaN、undefined、或者空字符串（""）、 document.all（js下个阶段会接触的东西）
    • MDN官网:https://developer.mozilla.org/zh-CN/
    • 关于Boolean()描述:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean

1.2-隐式数据类型转换

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

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

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