1.操作符
1.1.算数运算符
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
+ | 加法 | var num = 1 + 2; | 3 |
- | 减法 | var num = 4 - 3; | 1 |
* | 乘法 | var num = 4 * 3; | 12 |
/ | 除法 | var num = 6 / 3; | 2 |
% | 取余 | var num = 7 % 3; | 1 |
var num1 = 8;
var num2 = 4;
console.log(num1 + num2); //12
console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0
var num1 = '8';
var num2 = '4';
console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0
1.2.一元运算符
JavaScript中有8种常用的一元运算符
运算符 | 描述 |
---|---|
+ | 将操作数转换成数字,字符串的拼接 |
- | 将操作数转换成数字,同时变为负数 |
! | 逻辑取反运算符 |
++ | 递增 |
– | 递减 |
delete | 删除数组或对象中特定索引的值 |
typeof | 操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回’function’,其他都只会返回’object’ |
void | void 运算符对任何值返回 undefined。 |
+ (正号)
1.'+'的第一种用法:进行数据相加
var num1 = 3;
var num2 = 5;
var sum = num1 + num2; //8
2.'+'放在数据的前面,就是取正数
var num = 6;
console.log(+num); // 6
3.'+'与字符串运算时,就是字符串连接符
var a = 'hello';
var b = 'world';
console.log(a + b); // helloworld
4.'+'可以将数字字符串或布尔类型等隐式转换成number类型
var a = '123';
var b = true;
console.log(+a, +b); // 123 1
-(负号)
1.正、负号可以对数字进行取正或取负,其他运算符不能转换
var num1 = 6;
var num2 = -6;
console.log(-num1); //-6
console.log(+num1); //6
console.log(-num2); //6
console.log(+num2); //-6
2.正、负号可以将字符串数字隐式转换成数字
var num1 = '20';
var num2 = '-20';
console.log(-num1); //-20
console.log(+num1, typeof +num1); //20 number
console.log(-num2); //20
console.log(+num2, typeof +num2); //-20 number
!(取反)
经常被用作条件判断时的取反操作,类型判断等,还可以用’!'将变量转换为Boolean类型
var a;
if (!a) {}
console.log(!null); //true
console.log(!undefined); //true
console.log(!''); //true
console.log(!100); //false
console.log(!'abc'); //false
++(递增)
通常用于循环语句,动画操作等。
++放在前面,并进行赋值:先累加,后赋值
var num = 0;
var a = ++num;
console.log(a); // 1
console.log(num); // 1
//num先自加1,再赋值给a
++放在后面,并进行赋值:先赋值,后累加
var num = 0;
var a = num++;
console.log(a); // 0
console.log(num); // 1
//先把num的值赋值给a,num再自加1
–(递减)
通常用于循环语句,动画操作等。使用方法与++类似。
delete
删除数组或对象中特定索引的值
var obj = {
name:'zhangsan',
age: 17
};
delete obj.name;
console.log(obj); // {age: 17}
var arr = [1,2,3,4,5];
delete arr[2];
console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ]
typeof
操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回’function’,其他都只会返回’object’
var obj = {
name:'zhangsan',
age: 17
};
var arr = [1,2,3,4,5];
console.log(typeof obj, typeof arr); //object object
扩展:JavaScript隐式转换
原始类型(基础类型):
Undefined、Null、S tring、Number、Boolean、Symbol(es6新推出的,暂不考虑)
对象类型
object
隐式转换中主要涉及到三种转换:
1、将值转为原始值,ToPrimitive()。
2、将值转为数字,ToNumber()。
3、将值转为字符串,ToString()。
js引擎内部的抽象操作ToPrimitive有着这样的签名:
ToPrimitive(input, PreferredType?)
input是要转换的值,PreferredType是可选参数,仅可以是Number或String类型。
他只是一个转换标志,转化后的结果并不一定是这个参数值的类型,但是转换结果一定是一个原始值(或者报错)。
对于Date求原始值比较特殊,PreferredType是String,其他Object对象均为Number。
加减乘除:
1.字符串加数字,数字就会转成字符串。数字加数字或字符串加字符串不需要转换。
在加法的过程中,首先把加号左右两边进行了求原值ToPrimitive()操作,然后如果有两个或多个原始值只要有一个是String类型,就把两个或多个原始值都进行转化字符串toString()操作,进行字符串拼接;否则把两个或多个原始值都进行转化数字toNumber()操作,进行数字相加。
var a = 1 + 2 + '3';
console.log(a, typeof a); // '33' string
var b = 1 + 2 + 3;
console.log(b, typeof b); // 6 number
2.数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。
// -
10 - '20' //-10
10 - 'one' //NaN
10 - '100a' //NaN
3.乘,除,大于,小于跟减的转换也是一样。
// *
10*'20' //200
'10'*'20' //200
// /
20/'10' //2
'20'/'10' //2
'20'/'one' //NaN
1.undefined等于null
2.字符串和数字比较时,字符串转数字
3.数字和布尔比较时,布尔转数字
4.字符串和布尔比较时,两者转数字
// ==
undefined == null; //true
'0' == 0; //true,字符串转数字
0 == false; //true,布尔转数字
'0' == false; //true,两者转数字
PreferredType转换策略
1、如果输入的值已经是一个原始值,则直接返回它
2、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法,
如果valueOf()方法的返回值是一个原始值,则返回这个原始值。
3、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。
4、否则,抛出TypeError异常。
1、如果输入的值已经是一个原始值,则直接返回它
2、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。
3、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法,
如果valueOf()方法的返回值是一个原始值,则返回这个原始值。
4、否则,抛出TypeError异常。
注意:
PreferredType的值会按照这样的规则来自动设置:
1、该对象为Date类型,则PreferredType被设置为String
2、否则,PreferredType被设置为Number
案例
[] + [] // ""
进行ToPrimitive,两个都是Array对象,不是Date对象,所以以Number为转换标准,所以先调用valueOf(),结果还是[ ],不是原始值,所以继续调用toString(),结果是“”(空字符串)原始值,将“”返回。第二个[ ]过程是相同的,返回“”。加号两边结果都是String类型,所以进行字符串拼接,结果是“”。
[] + {} // "[object Object]"
进行ToPrimitive,依然是以Number为转换标准。
[ ]的结果是“”。
{ }先调用valueOf(),结果是{ },不是原始值,所以继续调用toString(),结果是“[object Object]”,是原始值,将“[object Object]”返回。
加号两边结果都是String类型,所以进行字符串拼接,结果是“[object Object]”。
+ [] // 0
+[ ]就成了一元运算。[ ]的原值是””, 将””转化成Number结果是0。
{} + {} // "[object Object][object Object]"
在金丝雀版本的chrome浏览器和node中,结果符合预期。
结果是”object Object”。
在普通版本的chrome浏览器中结果是NaN。
这是为什么呢?原因是在node中会将以“{”开始,“}”结束的语句外面包裹一层( ),就变成了({ } + { }),结果就符合预期。而普通版本的chrome依然会解析成{};+{},结果就变成了NaN
1.3.赋值运算符
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
= 赋值运算符向变量赋值。
var x = 7;
+= 赋值运算符向变量添加值。
var x = 7;
x += 8;
-= 赋值运算符从变量中减去一个值。
var x = 7;
x -= 8;
*= 赋值运算符相乘变量。
var x = 7;
x *= 8;
/= 赋值运算符对变量相除。
var x = 7;
x /= 8;
%= 赋值运算符把余数赋值给变量。
var x = 7;
x %= 8;
1.4.比较运算符
比较运算符在逻辑语句中使用,以判定变量或值是否相等。通常用于条件判断语句中。
比较运算符的优先级低于算术运算符,高于赋值运算符运算结果一般都为boolean
运算符 | 描述 | 比较 | 返回 |
---|---|---|---|
== | 等于 | x == 8 | false |
x == 5 | true | ||
x == “5” | true | ||
=== | 值相等并且类型相等 | x === 5 | true |
x === “5” | false | ||
!= | 不相等 | x != 8 | true |
!== | 值不相等或类型不相等 | x !== 5 | false |
x !== “5” | true | ||
x !== 8 | true | ||
> | 大于 | x > 8 | false |
< | 小于 | x < 8 | true |
>= | 大于或等于 | x >= 8 | false |
<= | 小于或等于 | x <= 8 | true |
==
等同 的意思, 两边值类型不同的时候,要先进行类型转换为同一类型后,再比较值是否相等。
// 常用于相同类型的值的比较
console.log(123 == 345); //false
console.log('123' == '345'); //false
// 如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较
// 如果一个是null,一个是undefined,那么相等
console.log(null == undefined); //true
// 如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较
console.log(123 == '123'); //true
//如果是整数类型和boolean类型的数值进行比较,1和true使用==比较结果为true,0和false使用==比较结果也为true,其它都为false;可以理解记忆为使用==比较整数时将1等同true,将0等同false。
console.log(1 == true); //true
console.log(0 == false); //true
===
恒等 的意思,不做类型转换,类型不同的结果一定不等。
// 如果类型不同,就一定不相等
console.log(123 === '123'); //false
// 如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相等。(判断一个值是否是NaN,只能使用isNaN() 来判断)
console.log(123 === 123); //true
console.log(123 === 10 / 'a'); //false
// 如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。
console.log('hello' === 'hello'); //true
// 如果两个值都是true,或是false,那么相等
console.log(true === true); //true
console.log(1 === true); //false
// 如果两个值都是null,或是undefined,那么相等
console.log(null === null); //true
console.log(null === undefined); //false
双等和三等的区别
双等表示只要值相等即可为真,而三等则要求不仅值相等,而且也要求类型相同。
建议:尽量使用严格运算符 三等。因为"=="不严谨,可能会带来一些违反直觉的后果。
注意
1、对于string,number等基础类型,双等和三等是有区别的
1)不同类型间比较,双等之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等
2)同类型比较,直接进行“值”比较,两者结果一样
2、对于Array,Object等高级类型,双等和三等是没有区别的
进行“指针地址”比较
3、基础类型与高级类型,双等和三等是有区别的
1)对于==,将高级转化为基础类型,进行“值”比较
2)因为类型不同,===结果为false
!=
!= 和 ==用法类似 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。
!==
!== 和 === 用法类似 只有在相同类型下,才会比较其值。
‘>‘和’<’ 大于和小于
var a = 10;
var b = 20;
console.log(a > b); //false
console.log(a < b); //true
‘>=‘和’<=’ 大于等于和小于等于
var a = 10;
var b = 20;
console.log(a >= b); //false
console.log(a <= b); //true
非数值的情况下使用’>‘’<‘’>=‘’<=’
对于非数值进行比较时,会先将其转换为数值,然后再进行比较。
// true转换为数值是1 false转换为数值是0
console.log(1 > true); // 结果为false
console.log(1 >= true); // 结果为true
console.log(1 > '0'); // 结果为true
console.log(1 > null); // 结果为true
//任何值和NaN作比较结果都是false
console.log(1 > 'hello'); // 结果为false 任何值和NaN作比较结果都是false
如果符号两侧都是字符串,不会将其转换为数值进行比较,而会分别比较字符串中字符的Unicode编码。
注意:所以在比较两个字符串型的数字时,一定要先转型。
console.log('134545353' > '5'); // 不转型则返回false
console.log('134545353' > +'5');// 这样结果才返回true
而在比较字符编码时,是一位一位进行比较的,如果符号两侧第一位一样,则比较下一位,所以借此可以用来对英文进行排序,而比较中文是没有意义的。
console.log('1' < '5'); // 结果为true
console.log('11' < '5'); // 结果也为true
console.log('134545353' > +'135'); // 结果为false,先比较第一位11 第二位33 第三位4<5 所以输出false
console.log('be' > 'b'); // 结果为true 先比较第一位b的字符编码是一样的,再比较第二位,由于be有e,而b只有一位,所以be>b
console.log('be' < 'b'); // 结果为false
1.5.逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | ````(x==5 |
! | not | !(x==y) 为 true |
&& 与(同真才真,有假则假)
可应用于任意数值。如果有一个操作数不是布尔类型,逻辑与就不一定返回boolean类型
如果第一个操作数是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值
console.log(null && 'world'); //null
当第一个表达式为真,整个表达式的结果取决于第二个表达式,返回第二个表达式
console.log('hello' && 'world'); //world
当第一个表达式为假,整个表达式的结果就可以确定,返回第一个表达式
console.log(false && 'world'); //false
[null,NaN,undefined,false,0,“”]直接返回该操作数
console.log(''&&123); //'' 空字符串
console.log(0&&null); //0
console.log(123&&345); //345
console.log(123&&undefined); //undefined
||(有真才真,同假则假)
如果两个或多个操作数都是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值。
console.log(null || false); //false
如果第一个操作数是null,NaN,undefined,false,0,“” 则返回第二个操作数。
console.log(null || 'hello'); //'hello'
如果第一个操作数是真,直接返回第一个操作数。
console.log(123||345); //123
当第一个表达式为真,整个表达式的结果就可以确定,返回第一个表达式
当第一个表达式为假,整个表达式的结果取决于第二个表达式,返回第二个表达式
有一个为true结果就为true
同时为false结果才为false
!(NOT)
经常被用作条件判断时的取反操作,类型判断等,还可以用’!'将变量转换为Boolean类型
var a;
if (!a) {}
console.log(!null); //true
console.log(!undefined); //true
console.log(!''); //true
console.log(!100); //false
console.log(!'abc'); //false