JavaScript运算符 operator 操作符：

运算符对一个值或多个值进行运算

- 通过运算符可以对一个或多个值进行各种运算

- 大部分的运算符并不会影响到原来的变量

- 算术运算符

- 算术运算符可以用来对两个值进行算术运算

- + 用来计算符号两侧值的和

- - 用来计算符号两侧值的差

- * 乘法

- / 除法

- ** 幂运算：a=10**2 --- a=10*10 二次方- a=16**0.5 结果为4 开方运算

幂运算不能兼容ie低版本

- % 模运算，两个数相除取余数

// var a = 10 + 5;

var a = 5;

// 只有使用赋值运算符时，才会对变量的值产生影响

// 一个变量位于等号左侧是它才是一个变量，位于等号右边时它代表的是它所指向的值

a = a + 5; // 等价于 a = 5 + 5

a = 10 - 5;

a = 10 * 5;

a = 10 / 5;

a = 10 ** 2;

a = 16 ** 0.5;

a = 2 ** 0.5;

a = 10 % 2;

console.log(a);

8.2对数字以外的类型的值进行算术运算

在JS中，可以对数字以外的类型的值进行算术运算

- 在对非数字的值进行算术运算时，JS引擎会先将其转换为数值，

然后再运算

- 任何值和NaN，运算结果都是NaN，包括(NAN)

- 特殊情况：

- 任意值和字符串做加法时，会先将其转换为字符串，

然后对字符串进行拼串的操作

var a = true + false; //1 + 0

a = '100' - 3; //100 - 3

a = 33 * null; //33 * 0

a = 33 + undefined;// 33 + NaN

a = '123' + '456';// '123456'

a = 123 + 'hello'; // '123hello'

a = NaN + '123';// 'NaN123'

a = '1' + 2 + 3; // '123'

a = '1' + (2 + 3); // '15'

console.log(a);

拼接字符串：

//var a = 'hello' + 'world' + '哈哈' + '嘿嘿' + '嘻嘻';

var a = '' +

'' +

'' +

'' +

'' +

'' +

'

这是一级标题

' +

'' +

'';

// 可以使用反单引号来创建模板字符串 模板字符串可以跨多行使用,不支持ie低版本！

a = `

今天天气真不错

明天天气也不错

哈哈哈哈哈哈哈

`

var b = 10;

// b = 10

// console.log('b = ' + b);

// console.log('b =', b);

// console.log(`b = ${b}`);

//在模板字符串中可以直接使用变量

// var c = `Hello Hello ${b}`;

// console.log(c);

 隐式类型转换：

var a = true;

// console.log(a, typeof a);

// 可以通过为任意值+空串的形式来将其转换为一个字符串

// 它的原理和String()函数是一样的，但是操作起来更加的简单

a = a + ''; // 'true' + ''

// console.log(a, typeof a);

var b = '123';

console.log(b, typeof b);

//将b转换为数值

// 可以通过为任意值-0 *1 /1这些方式来将一个任意值转换为数字（了解）

// 它的原理和Number()函数一样，但是操作起来更加的简便

b = b - 0;

console.log(b, typeof b)//123 number

- 使用一元的+（原理和Number()一样，使用起来更加简单）

var a = '10';

a = +a;

//var b=+”10”

利用非运算！，可以将一个任意类型的值转换为布尔值

一元运算符：

一元运算符

- 只有一个操作数的运算符

- +（一元+），正号

- 正号不会对数字产生任何的影响

- -（一元-），负号

- 符号会对数字进行符号位取反

- 对于非数字来说，一元的+和-，它会先将其转换为数字然后在运算

-还有(typeof 检查)和(delete 删除)

-(void) 对给定的表达式进行求值，然后返回 undefined.

var a = 10;

a = -a;

var b = true;

b = -b;

// 可以利用一元的+，来将将任意值转换为数值，原理同Number，但是更加便捷

// var c = '123';

// console.log(c, typeof c);

// c = +c;

// console.log(c, typeof c);

var d = 1 + +'2' + 3;

console.log('d =',d);

自增 逻辑运算—>

一、 自增和自减:

1.1自增++：

- 自增可以使变量在原来值的继承上增加1

- 自增运算符调用完毕后，变量的值会发生改变，使原变量增加1

- 自增分为前++（++a）和后++（a++）

- 无论是前++ 还是后++，对于原来的变量来说，都是一样的

都会使原变量增加1

- 后++（a++）的值是变量的原值（自增前的值）

- 前++（++a）的值是变量的新值（自增后的值）

- 自增运算，有两个作用：

1.会使原变量自增1

2.会返回一个值

var a = 10;

// console.log('a =',a);

// var b = a++; // 创建一个变量b，来接收a++的值

var b = ++a; // 创建一个变量b，来接收++a的值

console.log('a =',a)//11

console.log('++a =', b)//11

1.2自减--：

- 自减会使变量在原来值的基础上-1

- 自减分成前--（--a）和后--（a--）

- 无论是--a还是a--都会使变量在原来的基础上自减1

- 不同点在于，后减减（a--）的值是变量的原值（自减前的值）

前减减（--a）的值是变量的新值（自减后的值）

var c = 10;

console.log('c =', c)//10

var d = --c;

console.log('c =', c)//9

console.log('--c =', d)//9

1.3自增减和不同数据类型计算的各种结果：

let a

a = ['2']

console.log(a++)

// 12: ['12'] (['N']第一个元素是n 就会转换为数字n)

// 1: true '1' ['1']

// 0: false null undefined [] ''

// NaN: object function {} string 'xxx' ['1','2']

二、 逻辑运算符：

逻辑运算符有三个：

! 逻辑非（非运算） && 逻辑与 （与运算）|| 逻辑或 （或运算）

2.1! 逻辑非（非运算）

- 非运算可以用对一个布尔值进行取反操作，

可以把一个布尔值true变false，false变true

- 如果对一个非布尔值进行非运算，它会向将其转换为布尔值，

然后再取反

利用非运算！，可以将一个任意类型的值转换为布尔值 var a = false;

a = !a; //对a进行非运算，然后将结果再赋值给a

a = 'hello';

a = !a; // false

a = 'false';

a = !a;// false

a = null;

a = !a; // true

a = 100;

a = !!a;

// console.log(a);

2.2-&&逻辑与（与运算）||逻辑或（或运算）

&& 逻辑与 （与运算）

- 与运算可以对符号两侧值进行与运算

- 如果与运算两侧的值都为true，则返回true，否则返回false

- 与运算是找false的！

|| 逻辑或 （或运算）

- 如果或运算两侧的值都是false，则返回false，否则返回true

- 或运算是找true的！

// 与运算

var result = true && true; // true

result = true && false; // false

result = false && true; // false

result = false && false; // false

// 或运算

result = true || true; // true

result = true || false; // true

result = false || true; // true

result = false || false; // false

console.log('result =',result);

2.3非布尔值的与 或运算：

对与非布尔值进行与或运算时，

它会先将其转换为布尔值，然后进行运算，最终返回原值

-&& 与运算的规则：

- 如果第一个值是true，则返回第二个值。否则返回第一个

- ||或运算的规则：

如果第一个值是true，则返回第一个值。否则返回第二个

在JS中，与（&&）和或（||）都是短路的与和短路的或

- 对于与运算来说，如果第一个值是false，则不会再去查看第二个值

- 对于或运算来说，如果第一个值是true，则不会再去查看第二个值

var result = 'hello' && 'abc'; // 'abc'

// true && false

result = 'hello' && 0; // 0

// false && true

result = 0 && 1; // 0

// false && false

result = 0 && null; // 0

// true || true

result = 'hello' || 'abc'; // 'hello'

// true || false

result = 'hello' || 0; // 'hello'

// false || true

result = 0 || 'hello'; // 'hello'

// false || false

result = 0 || null; // null

// console.log('result =', result);

// console.log(0 || 1); //1

// console.log(0 || null); // null

// console.log(0 || 'hello'); // 'hello'

// console.log(NaN && 'abc'); // NaN

// console.log(NaN && 123123); // NaN

// console.log(NaN && null); // NaN

// console.log(null && NaN); // null

console.log(Infinity && 'hello'); // 'hello'

三、 关系运算符：

3.1 关系运算符

关系运算符，用来比较两个值之间的关系是否成立，成立返回true，不成立返回false

> 用来比较左侧的值是否大于右侧的值

>= 用来比较左侧的值是否大于 或 等于右侧的值

< 用来比较左侧的值是否小于右侧的值

<= 用来标记左侧的值是否小于或等于右侧的值

如果对非数值进行关系运算，通常JS解析器会先将非数字的值转换为数值然后再比较

！注意： - 当比较两个字符串的的大小时，解析器不会将字符串转换为数值然后比较，

比较字符串时，解析器会逐位的比较字符串的Unicode编码

- 通过这个特点可以比较两个字符串的大小，从而对它们按照字母顺序进行排序，

但是对于中文来说，编码表应该是安装偏旁部首进行排序的，所以意义不大

- 如果比较的是两个字符串类型的数字时，依然会比较编码，可能会得到错误的结果

var result = 100 > 50; //true

result = 50 > 60; // false

result = 10 > 10; // false

result = 10 >= 10; // true

// 100 < 1

result = '100' < true; // false

// 1 > 0

result = 1 > null; // true

// 1 <= NaN 和NaN左比较时，怎么比都返回false

result = 1 <= 'hello'; // false

// 1 2

result = 'azzzz' > 'bcd'; // false

// 98 < 101

result = 'b' < 'e'; // true

result = 'abcde' < 'abcdf'; // true

result = '5' < '6'; // true

// result = '5' < '16'; // false

var a = '5';

var b = '16';

result = Number(a) < Number(b);

result = +a < +b;

console.log('result =', result);

3.2相等运算符：

主要用来比较两个值是否相等，相等则返回true，否则返回false

==(相等)

- 比较两个值是否相等

- 注意：如果使用相等运算符比较两个不同类型的值，

解析器会将它们转换为相同的类型，然后再比较

通常情况下，不同的类型都会被转换为数值然后再比较

null和undefined左相等比较时，会返回true

!= (不相等)

- 检查两个值是否不等，如果不等返回true，否则返回false

- 不相等会做自动的类型的转换，只有两个值转换为相同类型后依然不等，才会返回true

===(全等)

- 比较两个值是否全等，不会做自动的类型转换，

如果两个值的类型不一样，它会直接返回false

!==（不全等）

- 检查两个值是否不全等，如果不全等返回true，否则返回false

- 不会做自动的类型转换，如果两个值的类型不一样，直接返回true

var result = 10 == 10; // true

result = 10 == 5; // false

result = 'hello' == 'hello' // true

result = '1' == 1; // true

// NaN == 1

result = 'true' == true; // false

result = '1' == true; // true

// null和其他类型进行比较时，不会转换为Number

result = null == 0; // false

// null和undefined左相等比较时，会返回true

result = null == undefined; // true

result = 1 === 1; // true

result = 1 === '1'; // false

// null和undefined相等，但是不全等

result = null === undefined; //false

//NaN不和任何值相等，包括它自身

result = NaN == NaN; // false

result = NaN === NaN; // false

var a = 123;

//检查a是不是NaN

// 要检查一个值是否是NaN，需要使用函数 isNaN()

// console.log(a == NaN);

// console.log(isNaN(a));

// console.log('result =',result);

3.3赋值运算符：

赋值运算符用于将一个值赋值给一个变量

= ，用来将=号右侧的值，赋给等号左侧的变量

+= ，a += 5 相当于 a = a + 5

-= ，a -= 5 相当于 a = a - 5

*= ，a *= 5 相当于 a = a * 5

/= ，a /= 5 相当于 a = a / 5

%= ，a %= 5 相当于 a = a % 5

**= ，a **= 5 相当于 a = a ** 5 （老版本的IE不支持）

- 使用这些赋值运算符都会导致变量的改变

- 可能会导致变量改变的情况：

1.使用赋值运算符

2.使用自增或自减

var a = 10; // a = a + 2;

//a += 2; // 在a原来值的基础上增加2

// a *= 10;

console.log(a);

3.4（三元运算符）条件运算符：

条件运算符（三元运算符），可以根据条件选择要执行的语句

语法：条件表达式?语句1:语句2;

执行顺序：

条件运算符在执行时，会先对条件表达式进行求值判断，

如果结果为true，则执行语句1

结果为false，则执行语句2

// false?alert('hello'):alert('你好');

var a = 40;

var b = 50;

var c = 73;

// a > b ? alert('a大') : alert('b大');

// 获取a和b中的较大值

// var max = a > b ? a : b;

// 获取到a b c三者中的较大值

// var max = a > b ? a : b;

// max = max > c ? max : c;

// 这种方式即使是加了括号的，强烈不建议使用

// var max = a > b ? a > c ? a : c : b > c ? b : c;

var max = a > b ? ( a > c ? a : c ) : (b > c ? b : c);

console.log(max);

3.5运算符优先级：

在JS中，运算符也是有计算的优先级的，

比如：先乘除 后加减

有一个说中的传运算符优先级的表格，

在表格中越靠前，优先级越高，优先级越高越优先计算

优先级一样，自左向右计算，如果遇到优先级不清楚的，可以通过该表格查询
https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

优先级的表格，不需要记忆，如果遇到优先级不清楚的，可以通过()来改变运算的优先级

var a = 1 + 2 * 3;

// 假设或的优先级高，或优先级一样 结果应该是 3

// 如果与的优先级的高，结果应该是 1

a = (1 || 2) && 3;

// console.log(a);

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！