JS运算符
一、算数运算符
以数值(字面量或者变量)作为其操作数,并返回一个单个数值。
加法 (+);减法 (-);除法 (/);乘法 (*); 求余 (%);幂 (**);递增 (++);递减 ( --);
注:
- 如果字符串中全是数值(“123456”),也可以进行除加号之外的算术运算【e.g. console.log(“1”-“3”);//-2】}
- 若得不出结果,不报错,得到一个NAN
1. 加法(+)
数值求和,或字符串的拼接
<script type="text/javascript">
// 在两个操作数都是数字的时候,会做加法运算
// 两个参数都是字符串或在有一个参数是字符串的情况下会把另外一个参数转换为字符串做字符串拼接
// 在参数有对象的情况下会调用其valueOf或toString
// 在只有一个字符串参数的时候会尝试将其转换为数字
// 在只有一个数字参数的时候返回其正数值
var num1 = 1,num2 = 2;
var str1 = "str1",str2 = "str2";
var boo1 = true,boo2 = false;
var obj1 = {a:1,valueOf(){return 100}},obj2 = {a:1};
console.log(num1+num2); //3 number + number
console.log(num1+str1); //1str1 number + string
console.log(str1+str2); //str1str2 string + string
console.log(num1+boo1); //2 number + boolean
console.log(boo1+boo2); //1 boolean + boolean
console.log(num1+obj1); //101 number + object
console.log(num1+obj2); //1[object Object] number + object
console.log(obj1+obj2); //100[object Object] object + object
console.log(str1+obj1); //str1100 string + object
console.log(+num1); //1
console.log(+str1); //NaN
console.log(+boo1); //1
console.log(+boo2); //0
</script>
2. 减法(-)
使两个操作数相减,结果是它们的差值。
<script>
var num1 = 1,num2 = 2;
var str1 = "str1",str2 = "str2";
var boo1 = true,boo2 = false;
var obj1 = {a:1,valueOf(){return 100}},obj2 = {a:1};
console.log(num1-num2); //-1 number - number
console.log(num1-str1); //NaN number - string
console.log(str1-str2); //NaN string - string
console.log(num1-boo1); //0 number - boolean
console.log(boo1-boo2); //1 boolean - boolean
console.log(num1-obj1); //-99 number - object
console.log(num1-obj2); //NaN number - object
console.log(obj1-obj2); //NaN object - object
console.log(str1-obj1); //NaN string - object
console.log(-num1); //-1
console.log(-str1); //NaN
console.log(-boo1); //-1
console.log(-boo2); //-0
</script>
3. 除法 (/)
结果是操作数得商,左操作数是被除数,右操作数是除数。(被除数 / 除数 = 商)
<script>
var num1 = 1,num2 = 2;
var str1 = "str1",str2 = "str2";
var boo1 = true,boo2 = false;
var obj1 = {a:1,valueOf(){return 100}},obj2 = {a:1};
console.log(num1/num2); //0.5 number / number
console.log(num1/str1); //NaN number / string
console.log(str1/str2); //NaN string / string
console.log(num1/boo1); //1 number / boolean
console.log(boo1/boo2); //Infinity boolean / boolean
console.log(num1/obj1); //0.01 number / object
console.log(num1/obj2); //NaN number / object
console.log(obj1/obj2); //NaN object / object
console.log(str1/obj1); //NaN string / object
</script>
4. 乘法 (*)
结果是操作数的乘积
<script>
var num1 = 1,num2 = 2,num3=1.0,num4=0.2,num5=-1;
console.log(num1/num2); //0.5 number * number
console.log(num1*num2); //2 number * number
console.log(num3*num4); //0.2 number * number
console.log(num1*num4); //0.2 number * number
console.log(num2*num5); //-2 number / number
</script>
5. 求余(%)
结果是操作数的余数。(被除数 / 除数 = 商 …… 余数)
<script>
var num1 = 100,num2 = 3;
console.log(num1/num2); //33.333333333333336 number / number
console.log(num1%num2); //1 number % number
</script>
6. 幂 (**)
返回第一个操作数做底数,第二个操作数做指数的乘方。(幂运算符是右结合的,a**b**c等同于a**(b**c))
var num1 = -2,num2 = 2,num3 = 3;
console.log(num1**num3); //-8
console.log(num2**num3); //8
7. 递增(++)
将其操作数增加1
- 若前置使用,即运算符位于操作数的后面(如X++),则在递增前返回数值;
var x = 3,y;
y = x++;
console.log(x,y); //4 3
- 若后置使用,即运算符位于操作数的前面(如++X),则在递增后返回数值
var x = 3,y;
y = ++x;
console.log(x,y); //4 4
7. 递减(-- )
将其操作数减少1
- 若前置使用,即运算符位于操作数的后面(如X --),则在递增前返回数值;
var x = 3,y;
y = x--;
console.log(x,y); //2 3
- 若后置使用,即运算符位于操作数的前面(如 --X),则在递增后返回数值
var x = 3,y;
y = --x;
console.log(x,y); //2 2
二、关系运算符(比较运算符)
- 运算结果是布尔值。
- 大于 (>);小于(<);大于等于(>=);小于等于(<=);等于(==);严格等于(===);不等于(!=);不恒等于(!==);
- >,<,>=,<= 执行两个数之间的比较运算,与算术比较相同;
- 对于字符串,从第一位开始依次比较字母所对应的ASCII码(编码格式)的大小。第一个字符串中每个字符的代码都会与第二个字符中对应位置的字符的代码进行数值比较,直到比较出大小。【注:大写字母的代码都小于小写字母的代码】
三、赋值运算符
赋值 (=); 加等于 (+=); 减等于 (-=); 乘等于 (*=); 除等于 (/=); 幂等于 (**=); 除余等于 (%=); 左移赋值 (<<=); 右移赋值 (>>=); 元符号右移赋值 (>>>=); 按位与赋值 (&=); 按位异或赋值 (^=); 按位或赋值 (|=);
1. 赋值(=)
把一个值赋给一个变量,可以链式使用赋值运算符。
<script>
var a=1,b=10,c=25;
console.log(a=b,a=b=c,a,b);//10 25 25 25
</script>
2. 加等于(+=)
<script>
var x=5;
x+=5;//→等价于x=x+5
console.log(x);//10
</script>
3. 减等于(-=)
<script>
var x=5;
x-=5;//→等价于x=x-5
console.log(x);//0
</script>
4. 乘等于(*=)
<script>
var x=5;
x*=5;//→等价于x=x*5
console.log(x);//25
</script>
5. 除等于(/=)
<script>
var x=5;
x/=5;//→等价于x=x/5
console.log(x);//1
</script>
6. 取余等于(%=)
<script>
var x=5;
x%=3;//→等价于x=x%5
console.log(x);//2
</script>
7. 幂等于(**=)
自测出的语法,运算结果
<script>
var x=5;
x**=5;//→等价于x=x**5
console.log(x);//3125
</script>
四、 逻辑运算符
与运算 (&&); 或运算 (||); 非运算 (!);
注:假值只有6个:0;NAN;“”;undefined;false;null
1. 对于布尔值进行运算:
(1)与运算(&&):同真才为真;
(2)或运算(||):有真则为真;
(3)非运算(!):假值变为真值,真值变为假值
2. 对于其他类型的值进行计算:
(1) 与运算(&&)
表并且。
值1 | 值2 | 结果 | 示例 |
---|---|---|---|
真值 | 假值 | 假值 | console.log(true&&false);//false |
真值1 | 真值2 | 真值2 | console.log("Cat"&&"Dog");//Dog |
假值1 | 假值2 | 假值1 | console.log(undefined&&false);//undefined |
(2) 或运算(||)
表或者。
值1 | 值2 | 结果 | 示例 |
---|---|---|---|
真值 | 假值 | 真值 | console.log(true&&false);//false |
真值1 | 真值2 | 真值1 | console.log("Cat"&&"Dog");//Cat |
假值1 | 假值2 | 假值2 | console.log(undefined&&false);//false |
(2) 非运算(!)
表取反。
值1 | 值2 | 结果 | 示例 |
---|---|---|---|
真值 | 假值 | console.log(!"Cat");//false | |
假值 | 真值 | console.log(!0);//true |
五、一元运算符
判断数据类型 (typeof); 一元负号 (-); 一元正号 (+); new; delete;
1. 判断数据类型(typeof)
<script>
var x=5,y="we";
console.log(typeof x,typeof y);//number string
</script>
2. 一元负号(-)
位于操作数前,并转换操作数符号(也能转换非数值类型)
<script>
var x=5;
console.log(-x,-true);//-5 -1
</script>
3. 一元正号(+)
位于操作数前,并转换操作数符号(也能转换非数值类型)
<script>
var x=5;
console.log(+x,+true);//5 1
</script>
4. new
用来调用函数,且后面只能跟一个函数
用new 调用函数的执行过程:
- 自动创建一个空对象
- 把函数内部的this指向创建的这个对象
- 在函数执行完之后自动返回创建的那个对象,即使函数里面没有return
- 函数里有return
- return的是对象,返回的是这个对象
- return的是非对象,返回的是那个创建的对象
注意:
- 用new 调用的函数,返回的永远是一个对象
- 使用new 调用的函数就是一个用来创建对象的函数(构造函数)
function test1() {
return [1,2,3];
}
var res3 = test1();
var res4 = new test1();
console.log(res3); // [1,2,3]
console.log(res4); // [1,2,3]
function test1(){
return 1;
}
var res3 = test1();
var res4 = new test1();
console.log(res3); // 1
console.log(res4); // { } 用new 调用的函数return的是非对象,返回的是创建的那个对象
六,三元运算符
三元运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 truthy ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:),如果条件为 falsy ,则冒号后面的表达式B将会执行。本运算符经常作为 if 语句的简捷形式来使用。(MDN)
语法:condition ? exprIfTrue : exprIfFalse // 如果condition为真值时, 得exprIfTrue;若为假值,得exprIfFalse
e.g.
<script>
const num = 1;
const text = num >= 2 ? "大" : "小";
console.log(text); // "小"
</script>
七,特殊运算符
in运算符
要求其左边的运算数是一个字符串,右边的运算数是一个数组或对象,如左边的值是右边对象的一个属性名,则返回true,否则返回为false。
e.g.
<script>
var person = {
name: '张三',
age: 12
}
console.log('name' in person) // true
</script>