04、算术运算符，赋值运算符，比较运算符，逻辑运算符

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

算术运算符

算术运算符不能用小数做运算，要先把小数转整数，再除相对应的倍数，以下是几种算术运算符
加—————[+]
减—————[-]
乘—————[*]
除—————[ / ]
取模、取余 —[%]

1. 隐式类型转换
   + 在有字符串的时候,会进行字符串拼接
   - * / % 会尽力把不是数字的转化为数字，如果两边有任意一边有不是字符串数字 就会 出现NaN
   布尔值和数字运算会转换成0(false)和1(ture) 运算
   false + 8 = 8
   除number string boolean 外，讨论其他对象和另一个对象的加法无意义

%：

10%3 = 1
取余数
5.5%2 = 1.5
取余数 1.5
%会有小数

++：

let a = 10
console.log(a++) //10   后置自增表达式还是原来的值
console.log(++a) //11  前置自增先自增

取表达式整体时才有区别

let a = 10 
let b = 5
alert(a++b)//报错
alert（a+++b)//15

–：

let a = 10
a--//9

意思和++一样
隐式转换
++或-- 会强行转数字进行运算，返回值也是数字

2. NaN ——————————–not a number(不是一个数字)
   不是数字的数字类型（number类型）
   NaN和自己都不相等
   isNaN( obj ) 判断是否为NaN,是返回true,否返回false;

3. 显示类型转化

4. 模板字符串

let oWrap = document.getElementById("wrap")
let x = "啦啦啦啦"
oWrap.innerHTML = "<p></p>"字符串不能换行
oWrap.innerHTML = "<p"+ x +
"</p>"

用+拼接
单引号或双引号描述的字符串内部不能换行，但是模板字符串 可以` ` (在键盘左上角Esc下面)

oWrap.innerHTML = `<p>
<a>${x}</a>
</p>`

想显示$，用\转义符（转义只存在字符串或正则里）

oWrap.innerHTML = `<p>
<a>\${x}</a>
</p>`

赋值运算符

let a = 20
  a+=5 //a = a + 5
 <div  id="wrap">
   <p id="goudan"></p>
</div>

let oWrap = document.getElementById("wrap")
let oP = document.getElementById("goudan")
oWrap.innerHTML = oWrap.innerHTML + "<a>1234</a>"
oP.innerHTML = "789"
console.log(oWrap) //有p标签，但是标签里不会加文字

或者在改变oWrap 以后再获取oP，就可以获取到了
+=
赋值后再改变这个标签，会找不到之前的标签
也可以在不影响以前内容，添加标签

=
let a = 5
a -=2 //a = a - 2 //3
a=3 //a = a * 3 //
a/=6 //a = a / 5 //
a %= 5 //a = a % 5 //0
a%5 结果不可能超过5，不可能超过被磨的那个数

比较运算符

比较运算符，得到的结果都是布尔值
= 赋值运算符
== 只比较值是否相等，不会管数据类型
=== 值和数据类型都要一样，先会判断数据类型，再判断值
如果不是特别有必要，（模糊比较）否则都用===判断，===效率更快

!= 不等
!== 不全等

  let a = 10
  let b = 10
  console.log( a == b)//true
  console.log(a === b)//true

  let a = 10
  let b = “10”
  console.log( a == b)//true
  console.log(a === b)//false

比较指针

  let a = [10]
  let b = [10]
  console.log( a == b)//false
  console.log(a === b)//false

基础数据类型（栈内存）
string number boolean undefined null symbol

引用数据类型（堆内存）
boject
[]{}
引用数据类型在做判断时，是比较指针指向

不要用基础数据类型和引用数据类型作比较，无意义

> < >= <=

  let a = 10
  let b = 50
  console.log(a > b)//false

  let a = "3"
  let b = "20"
  console.log(a > b)//true

字符串比较是通过ascll码来比较的
判断结果是boolean值

逻辑运算符

与—————[&&]
或—————[ || ]
非—————[！]

1. && 遇到假停
   let a = true && false; 只考虑布尔值时，真真为真，其他为假，两边都为真，才是真
   console.log(a)//false
   真正的运用：遇到假就停，取这个假值，否则取最后的值
   假的意思：数据被强行转成布尔值，是真是假

哪些数据在被转成布尔值的时候是 false:
0 undefined null false ‘’ NaN
取数值本身，不会取布尔值

  let a = '' && 8 && 9
  console.log(a)//''
  let a = 2 && 7 && 9
  console.log(a)//9

2. || 遇到真停
   let a = true || false; 只考虑布尔值时，假假为假，两边有一个为真，就是真
   真正的运用：遇到真就停，取真值，否则取后面的值

  let a = 4 || 0 || NaN
  console.log(a) //4

  let a = '' || 0 || NaN
  console.log(a) //NaN

3. ！
   只考虑布尔值时，取反
   真正的作用：取数据对应相反的布尔值
   非运算完一定是一个布尔值结果

  let a = !0
  console.log(a)//true

  let a = !!0
  console.log(a)//false  //如果想知道这个数据对应的是真值还是假值，就可以用！！
  取某一个数据对应的布尔值

4. , 运算符
   let a = (4,5,6)

运算符优先级

从等级最高依次降低等级
. [] () 等级最高
++ – ! typeof
* / %
+ -
> < >= <=
&&
||
三目 ？：
=
, 等级最低

小例子

//例子1：
 let a = 8 || 9 && 0
  a = 8
  
//例子2：
  let a = 10,
  let b= 5
a = 8 || (b=6)
console.log(a)//8
console.log(b)//5

//例子3：
let a = 8 || 5 && (b=6)
console.log(a)//8
console.log(b)//5

从最惰性的开始解析，有近路可以走，就直接走近路了
惰性运算，按最低优先级开始判断是否有必要进行运算

拓展-位运算

二进制 逢二进一 0 1 2 3 4
0 1 10 11 100

let a = 15
15的二进制
00000000 00000000 00000000 00001111 （28个0)共32位）
第一位代表符号位，0代表正数

-15的二进制
00000000 00000000 00000000 00001111 先取15的二进制
11111111 11111111 11111111 11110000 取反码
11111111 11111111 11111111 11110001 反码+1

按位取非~
let a = 7
let b = ~a
b是个十进制
先求a的二进制
00000000 00000000 00000000 00000111
再按位取非
11111111 11111111 11111111 11111000 这就是b的值

得到b的十进制数
11111111 11111111 11111111 11110111 减1
00000000 00000000 00000000 00001000 取反码
b = -8

按位与 是两个数之间的操作
let a = 10
let b = 8
let c = a&b

00000000 00000000 00000000 00001010 10的二进制码
00000000 00000000 00000000 00001000 8的二进制码

console.log©//8

操作不合法标签属性（自定义标签属性）

还可以操作合法标签属性，一般不会用他们操作合法标签属性，合法标签属性可以直接·操作，更快
1、getAttribute() 拿属性
2、setAttribute() 设置属性
3、removeAttribute() 移除属性

<div id="wrap" one="789"></div>
cument.getElementById("wrap")

1. 获取自定义标签属性

console.log(oWrap.getAttribute("one"))	//获取到自定义标签one 的值789

2. 设置自定义标签属性

console.log(oWrap.setAttribute("one","123"))//第一个值是要设置的自定义标签，第二个值是修改后的值
console.log(oWrap.setAttribute("two","1234"))也可以新增一个自定义属性

自定义属性的作用：
框架最根本的原理就是基于自定义标签属性去操作的，可以把一些信息，存在自定义标签里，在HTML里存储简单信息的一种方式
vue，angular框架，都是基于自定义的属性去操作的，解析标签的自定义属性，从而把他变成对应的dom结构

3. 移除自定义标签属性

console.log(oWrap.removeArribute("one"))

4. 获取标签的内容

    <div id="wrap">123456789</div>
    let oWrap = document.getElementById("wrap")
    console.log(oWrap.innerHTML)//123456789

.innerHTML 可以解析标签
-innerText 不可以解析标签，会显示标签 火狐低版本没有，需要用.textContent
input用innerHTML获取不到里面的文字，要用.value

    <input type="text" id="inp">
    <button id="btn"></button>
    let oInp = document.getElementById("inp")
    let oBtn = document.getElementById("btn")
    document.oBtn.onclick = function(){
      console.log(oInp.innerHTML)//不能获取input框里的文字
      console.log(oInp.value)//这样才可以获取到input框里的文字
    }

CSS选择器补充

  div#wrap.on.goudan{   //首先满足是个div ，id是wrap ，class名是on和狗蛋
    width:100px;
    height:100px;
    background-color:pink;
  }
  <div id="wrap" class="on goudan"></div>