运算符对一个值或多个值进行运算
- 通过运算符可以对一个或多个值进行各种运算
- 大部分的运算符并不会影响到原来的变量
- 算术运算符
- 算术运算符可以用来对两个值进行算术运算
- + 用来计算符号两侧值的和
- - 用来计算符号两侧值的差
- * 乘法
- / 除法
- ** 幂运算：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 = '<html>' +
'<head>' +
'<meta charset="utf-8">' +
'<title>这是一个网页</title>' +
'</head>' +
'<body>' +
'<h1>这是一级标题</h1>' +
'</body>' +
'</html>';
// 可以使用反单引号来创建模板字符串 模板字符串可以跨多行使用,不支持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创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
