一.js的运算符

1.算数运算符

算数运算符

+ - * / % ++ --

+ 运算符
let num1 = 10
let num2 = 20
let num3 = num1 + num2 
console.log(num3)
如果 + 的两边有一个是字符串，则表示的是字符串的拼接。

原理：如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式转化为字符串，然后通过+ 和另一个数据拼接在一起

- 运算符

-运算符可以把他两边的字符串类型隐式转化为数字类型，如果被转化的字符串是一个数字，则参与减法运算，如果被转化的字符串是一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符串转化为数字

% 取余

% 取余又称模运算，运算的结果是相除之后的余数，被除数%除数返回结果是余数

被除数和除数不一定都是整数

/除运算

自增/自减

自增：++ 作用：让变量的值+1 使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

前置自增：每执行一次，当前变量值加1，其作用相当于 num += 1

后置自增：每执行一次，当前变量数值加1 ，其作用相当于num += 1

区别：前置自增：先自加再使用（记忆口诀：++在前先加）后置自增：先使用再自加（记忆口诀：++在后后加）

++ 和 -- 的运算优先级要高于加减乘除 + - * / %

相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js运算符</title>
</head>
<body></body>
</html>
<script>let num1 = 2;let num2 = 3;console.log(num1*num2);console.log(num1/num2);console.log( 0.1 + 0.2 );/*% 取余 又称 模运算运算的结果是 相除之后的余数被除数%除数 返回结果是 余数被除数和除数不一定都是整数*/let num3 = 10;let num4 = 3;console.log( num3 % num4 );console.log(9.3 % 2.1);/*++    --a++ ++a 都是自增写法c = a++; 先把a的值赋值给c，然后再执行a的自增c = ++a; 先执行a的自增，然后再把a的值赋值给c*/let num5 = 10;
//   ++ num5;
//   num5 ++ ;
//   console.log(num5++); 10console.log(++num5);let a = 10;let c = a++;  //1. 把a的值赋值给c，此刻c等于10，2.执行a的自增，此刻a=11console.log(c,a);let k = 10;let m = (k++)+3;console.log(k,m)let n = 13;let s = ++n+(n++)+n;/*1. ++n n的值变成了14 ，此时让n=14 参与后面的计算2. n++ 先把n的值取出来，n=14 参与当前一步的计算，然后n++（n=15）参与后来的计算3.s=14+14+15*/console.log(s);/*-- 自减，a-- --a 使用方式和上面的 ++ 一致c=a--；先把a的值赋值给c，然后再执行a的自减c = --a; 先执行a的自减，然后再把a的值赋值给c++ 和 -- 的运算优先级要高于加减乘除 + - * / %*/let j=14;let num6 = (j++) + (--j) + (j--) + (++j);//          14    14   14    14console.log(num6);
</script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js运算符</title>
</head>
<body><input id="txt" type="number" value=""> +<input id="txt2" type="number" value=""> =<button id="bth">求和</button>
</body>
</html>
<script>/*1.算数运算符2.比较（关系）运算符3.逻辑运算符4.三元运算符5.赋值运算符从1到5运算符的优先级依次减弱*//*算数运算符+ - * / % ++ --*/
//  + 运算符 
let num1 = 10
let num2 = 20
let num3 = num1 + num2 
console.log(num3)
/*
如果 + 的两边有一个是字符串，则表示的是字符串的拼接
原理：如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式
转化为字符串，然后通过+ 和另一个数据拼接在一起
*/
let str = '阿巴阿巴'
let num4 = str + num2 +num2 + num2
console.log(num4)
let str1 = '阿西吧'
console.log(str + str1)let num5 = num2 + num2 +num2 + str1
console.log(num5);// - 运算符
/*
-运算符可以把他两边的字符串类型 隐式转化为 数字类型
如果被转化的字符串是 一个数字，则参与减法运算
如果 被转化的字符串是 一个普通字符，则得出的结果是 NaN除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符串转化为数字
*/
let num6 = 200
let num7 = 100
let num8 = '300'
console.log(num6-num7)
console.log(str1-num7)console.log(num6+num8)
console.log(num6-num8)</script>

2.比较（关系）运算符

关系运算符

> 大于， < 小于， >=大于等于， <=小于等于， ==等于， != 不等于 === 全等， !== 不全等

关系表达式的返回值是 true 或者false

== 和 === 的区别

== 只比较数值，不比较类型

=== 不但比较数值还比较类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关系运算符</title>
</head>
<body></body>
</html>
<script>/*关系运算符> 大于，< 小于， >=大于等于 ，<=小于等于 ， ==等于， != 不等于=== 全等  ， !== 不全等关系表达式 的 返回值是 true 或者false== 只比较数值，不比较类型=== 不但比较数值还比较类型*/console.log( 3>=5 );console.log( 5>=5 );let num1 = 30;let num2 = '30';console.log('num1和num2是否相等', num1 === num2);if (num1 == num2) {console.log('相等');} else {console.log('不相等');}let str1 = '阿巴阿布';let str2 = '阿西吧';console.log( str1 != str2);console.log('李白'=='青莲居士');
</script>

3.逻辑运算符

逻辑运算符

或 ||

与(并且) &&

非 !

判断规则

$$ 逻辑与   并且    特点：符号两边都为ture结果才为ture   口诀:一假则假

| | 逻辑或    或者特点：符号两边有一个ture就为ture 口诀：一真则真

！   逻辑非取反   特点：ture变false    false变ture   口诀：真变假，假变真

逻辑运算的短路算法

逻辑运算的短路算法

表达式1 || 表达式2 表达式1为真的时候，表达式2不会被解析

表达式1 && 表达式2 表达式1为真的时候，表达式2才会被解析

4.三元运算符

三元运算符？：

判断条件？判断条件为真，则执行当前代码：判断条件为假，则执行当前代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>逻辑运算符</title>
</head>
<body></body>
</html>
<script>/*parseInt(num) 把数字 num 直接转化为整数，他会去掉 num的小数部分*/let num = 325;let s = num / 100;console.log( parseInt(s) );/*逻辑运算符或 ||与(并且) &&非 !判断规则 或 || ；两边的判断条件，只要有一个为真（true），则返回结果为真与 &&；两边的判断条件都为真（true），则返回结果为真（true）非 ! ：取当前结果返回布尔值的 反向值，就是取反的意思*/console.log(3>4 || 2>3);console.log(3>4 || 2<3);console.log('===========================================');
//    只要一个为true返回结果是falseconsole.log(3>4 && 2<3);
//    两个同时为true，返回结果是trueconsole.log(3<4 && 2<3);if(!(3<4)){console.log('做个屁');}else{console.log('不写');}
//0为false，非0数字为trueif(0){console.log('不吃饭');}else{console.log('减肥');}
</script>

5.赋值运算符

目标：能够使用赋值运算符简化代码
赋值运算符：对变量进行赋值运算
已经学过的赋值运算符： = 将等号右边的值赋予给左边，要求左边必须是一个容器
其他赋值运算符： +=    -=   *=     /=    %=    使用这些运算符可以在对变量赋值时进行快速操作

运算符的优先级

1. ！的优先级比算术运运算符的优先级高

2.boolean 数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中 false=>0 true=>1

优先级

1.小括号（）

2.！

3.算术运算符

4.比较运算符

5.逻辑运算符

6.赋值运算符

赋值的简写

= += -= /=

简写形式含义

n += 1; => n = n + 1;

n -= 1； => n = n - 1;

n *= 1; => n = n * 1;

n /= 1; => n = n / 1;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>运算符优先级</title>
</head>
<body></body>
</html>
<script>let bol1 = true;let bol2 = false;console.log(bol1 + 1);  //2console.log(!bol2 + 1);// 2console.log(10 + !bol2); //11console.log(!10);// false //非0为trueconsole.log(!0);//trueconsole.log('============');/*1. ！的优先级比 算术运运算符的优先级高2.boolean 数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中 false=>0 true=>1*/console.log(10<5+6 || '不吃');let str = 10>5+6 || '不吃';console.log(str);/*优先级1.小括号（）2.！3.算术运算符4.比较运算符5.逻辑运算符6.赋值运算符赋值的简写= += -= /=简写形式           含义n += 1;    =>     n = n + 1; n -= 1；   =>     n = n - 1;n *= 1;    =>     n = n * 1; n /= 1;    =>     n = n / 1; */let n = 10;n += 5; //含义 n = n + 5;console.log(n);// 字符串拼接let str1 = '篮球和鸡';str1 += 'ikun';str1 += 'ikun';console.log(str1);
</script>

二.相关扩充

1.语句和表达式的区别

表达式和语句：表达式是可以求值的代码，javascript引擎会将其计算出一个结果。语句：语句是一段可以执行的代码。

区别：表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。表达式 num = 3+4

语句：而语句不一定有值，所以比如 alret（）弹出对话框 consols.log（）控制台打印输出

2.一/二元运算

一元运算符：+- 众多的javascript的运算可以根据表达式的个数，分为一元运算符，二元运算符，三元运算符

二元运算符 let num = 10+10

3.parseInt(num)

把数字 num 直接转化为整数，他会去掉 num的小数部分

4.数据类型的显示转换

显示转换

把数据转化为字符串，使用 String（）

把数据转化为number，使用 Number（）

把数据转化为boolean，使用 Boolean（）

另外，非0即为真

0，'' ,null ,undefined 都会转化为 false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型的显示转换</title>
</head>
<body></body>
</html>
<script>/*显示转换把数据转化为字符串，使用 String（）把数据转化为number，使用 Number（）把数据转化为boolean，使用 Boolean（）另外，非0即为真0，'' ,null ,undefined 都会转化为 false*/// 字符串转数字let num = Number('斯巴达');console.log(typeof num);// 数字 转 字符串let str = String(123);console.log(typeof str);//把数据 转 为布尔值let bol1 = Boolean('斯巴达');console.log(typeof bol1 , bol1);let bol2 = Boolean(' '); // ' '引号之间有空格不是空字符串console.log(typeof bol2,bol2);let bol3 = Boolean(-1);console.log(typeof bol3 , bol3);</script>

三.简单的对象操作

通过 document.getElementById('id') 获取html中的dom元素

每一个html标签都是一个对象，称为dom对象，每一个标签的属性也是一个对象的属性

设置对象属性的值 obj.属性值 = 'aa';

获取对象属性的值 obj.属性名

每一个html标签都有style标签，因此可以使用js 操作style，’

如果设置stylr属性，则给标签行间添加一个style属性

let abc = document.getElementById('bb');abc.style.color = '#f00';

如果属性是组合形式的，需要把-去掉，使用驼峰命名法

 abc.style.fontSize = '50px';console.log(abc.title)  //获取title的值0let txt = document.getElementById('txt')let bth = document.getElementById('bth')

给bth添加点击事件

   bth.onclick = function(){alert(txt.value);console.log(txt.value);txt.style.border = '2px #f00 solid';};

通过原生js设置对象

使用{}创建对象，它里面设置属性的方式是 key：value

key是属性名 value是属性值

获取属性的值 obj.key

设置属性的值 obj.key = value

如果访问一个对象中不存在的属性那么他的结果是undefined

  let obj = {name:'黑山羊',age:213123320,sex:'女'};let obj2 = {name:'混沌',age:202131321,sex:'男'};console.log(obj.name);console.log(obj.age);console.log(obj2.name);console.log(obj2.age);

// obj2中没有属性 run，因此结果是unedefined