个性化阅读
专注于IT技术分析

JavaScript基础快速入门教程(三):js运算符和实例详解

1、赋值运算符

赋值运算符为=,如var value = 9,表示把9赋值给value,多个变量赋值:var a = 1,b = 2,c = 3。

赋值符和算术运算符的简写:a = a + 2,简写:a += 2,例子如下:

var value_01 = 9, 
    value_02 = 8, 
    value_03 = 7;

console.log(value_01);
console.log(value_02);
console.log(value_03);

value_01 += 1; // 等价于 value_01 = value_01 + 1;
value_02 -= 2; // 等价于 value_01 = value_01 - 2;
value_03 *= 2; // 等价于 value_01 = value_01 * 2;
console.log(value_01);
console.log(value_02);
console.log(value_03);
value_01 /= 2; // 等价于 value_01 = value_01 / 2;
console.log(value_01);

2、算术运算符

算术元算符有:+,-,*,/,表示加减乘除,%为取余元算符。

infinity表示无穷大,即数值结构超出了ECMAScript的限制,NaN属于数值类型,但是它的值不是一个数值,什么意思呢?比如:

var number = "spring";
console.log(+number); // 输出:NaN

+number表示将字符串number转换成数值类型,等同于Number(number),所以此时+number是数值类型的数据,但是它的值不能用数值表示,所以是NaN(Not a Number)。

在算术操作中,需要注意和infinity、NaN和0的运算,任何带有NaN的运算结构都是NaN,因为它不是一个数值,自然也不会有数值的结果,infinity又可分为正无穷和负无穷,不过它的意思也不是无穷,只是ECMAScript的规范里无法再表示出来了,例如infinity与非0数相乘结果是infinity,infinity与0相乘结果是NaN,不过infinity和NaN一般我们不会主动去使用的,除非是出现异常,因为这两个值没什么意义,尽量都是避免得出这样的结果。

自增运算符为++,–,又可分为前加和后加,如a++和++a,它们的区别在于,若参与表达式计算,a++先计算表达式再将a+1,++a表示先将a+1再进行表达式计算,例如:

var index = 100;
var current = (index++) + 1;
console.log(current); // 输出:101
console.log(index); // 输出:101
current = (++index) + 1;
console.log(current); // 输出:103

JavaScript中加法还可以连接字符串,例如var a = 1 + “22”表示字符串连接,a为“122”。

3、位操作符

位操作符一般平时比较少用,但是如果你需要写出更好的算法位操作必不可少,位运算比普通的加减乘除更快,另外例如在图片处理中也会用到。

位操作主要是基于计算机二进制进行操作的,例如1010,十进制为10。

位操作符有:

符号  描述  运算规则       
&        与 两个位都为1时,结果为1
|    或     两个位都为0时,结果为0
^     异或 两个位相同为0,相异为1
~    取反 0变1,1变0
<<  左移 各二进位全部左移若干位,高位丢弃,低位补0
>>  右移 各二进位全部右移若干位,对无符号数,高位补0,有符号数,各编译器处理方法不一样,有的补符号位(算术右移),有的补0(逻辑右移)

例子:

// RGB十六进制颜色值
var color = 0xffab9d;
var red = color >> 16;
var green = (color >> 8) & 0xff;
var blue = color & 0xff;
console.log(red.toString(16)); // => ff
console.log(green.toString(16)); // => ab
console.log(blue.toString(16)); // => 9d

4、关系运算符

关系运算符返回的结构都是boolean类型,true或false,元算符有>大于,<小于,==等于,大于或等于>=,小于或等于<=,!=不等于,例如:

if(index < 1)
    console.log("index < 1");
else if(index > 2)
    console.log("index > 2");
else if(index == 100)
    console.log("index == 100");
else
    console.log("undefined");

关系元算符实质是对两个操作数进行数值比较,如果两个数是字符串,则比较两个字符串对于的ASCII编码值,如果操作数是对象,则调用valueOf()方法按照数值或字符串的比较方式比较,如果没有valueOf,则调用toString()方法执行同样的比较逻辑,如果两个数是布尔值,true转为1,false转为0进行比较。

5、逻辑运算符

逻辑与:&&,表示两边的结果同时为真结果为真,否则为假false。

逻辑或:||,表示两边的结果只要有一个为真则结果为真。

逻辑非:!,表示取反操作,!true结果为false。

&&短路运算符:返回第一个假的值或最后一个真值,例如3&&0&&null的结果为false。

||短路运算符:返回第一个真值或最后一个假值,例如null||undefined||1,结果为true。

三目条件运算符:?:,例如var result = index>2 ? 4 : 9,意思是计算index>2,如果index大于2,则result等于4,否则result等于9,例子:

var result;
if(index > 99)
    result = 78;
else
    result = 89;
// 等同于:
result = index > 99 ? 78 : 89;
console.log(result);

6、逗号运算符

逗号运算符一般有两种使用情况,第一个中是声明变量的时候可以多次声明多个变量,例如:var a,b,c。

另一种使用方式是赋值操作中,仅仅使用最后一个值,例如a = (2,3,4),仅a的结果是4。

7、运算符优先级

(1)结合性:

从右向左结合:一元运算符+-,后置++,后置–,!求反,(+-*/%)=,赋值=,typeof等,都是从右向左结合的,其它都是从左向右结合。

(2)下面是JavaScript的运算符优先级从高到低排列:

优先级 运算类型 关联性 运算符
20 圆括号 n/a ( … )
19 成员访问 从左到右 … . …
需计算的成员访问 从左到右 … [ … ]
new (带参数列表) n/a new … ( … )
函数调用 从左到右 … ( … )
18 new (无参数列表) 从右到左 new …
17 后置递增(运算符在后) n/a
 
… ++
后置递减(运算符在后) … —
16 逻辑非 从右到左 ! …
按位非 ~ …
一元加法 + …
一元减法 – …
前置递增 ++ …
前置递减 — …
typeof typeof …
void void …
delete delete …
await await …
15 从右到左 … ** …
14 乘法 从左到右
 
… * …
除法 … / …
取模 … % …
13 加法 从左到右
 
… + …
减法 … – …
12 按位左移 从左到右 … << …
按位右移 … >> …
无符号右移 … >>> …
11 小于 从左到右 … < …
小于等于 … <= …
大于 … > …
大于等于 … >= …
in … in …
instanceof … instanceof …
10 等号 从左到右
 
… == …
非等号 … != …
全等号 … === …
非全等号 … !== …
9 按位与 从左到右 … & …
8 按位异或 从左到右 … ^ …
7 按位或 从左到右 … | …
6 逻辑与 从左到右 … && …
5 逻辑或 从左到右 … || …
4 条件运算符 从右到左 … ? … : …
3 赋值 从右到左 … = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2 yield 从右到左 yield …
yield* yield* …
1 展开运算符 n/a … …
0 逗号 从左到右 … , …
赞(0) 打赏
未经允许不得转载:srcmini » JavaScript基础快速入门教程(三):js运算符和实例详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏