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创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

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

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

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

你可能感兴趣的:(javascript,前端,开发语言,typescript,vue.js,前端框架,ecmascript)