【重温基础】5.表达式和运算符

栏目: JavaScript · 发布时间: 5年前

内容简介:本文是系列目录:一些基础:JavaScript中运算符有一元、二元和三元(条件)运算符,常见写法:

本文是 重温基础 系列文章的第五篇。 今日感受:家的意义。

系列目录:

本章节复习的是JS中的表达式和运算符,用好这些可以大大提高开发效率。

一些基础:JavaScript中运算符有一元、二元和三元(条件)运算符,常见写法:

// 操作数 + 运算符 + 操作数
1 + 2 ;

// 运算符 + 操作数
x ++;

// 操作数 + 运算符
++ x;
复制代码

本文将介绍一下几类运算符:

  • 赋值运算符(Assignment operators)
  • 比较运算符(Comparison operators)
  • 算数运算符(Arithmetic operators)
  • 位运算符(Bitwise operators)
  • 逻辑运算符(Logical operators)
  • 字符串运算符(String operators)
  • 条件(三元)运算符(Conditional operator)
  • 逗号运算符(Comma operator)
  • 一元运算符(Unary operators)
  • 关系运算符(Relational operator)

1.赋值运算符

最简单的赋值运算符是 = ,它将右边操作数的值赋值给左边的操作数,如 a = b

另外常见的复合赋值运算符有如下:

名称 简写的操作符 含义
赋值 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
求幂赋值 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
按位异或赋值 x ^= y x = x ^ y
按位或赋值 x |= y x = x | y

另外在ES6中,新增一类 解构赋值

let a = ['aa', 'bb', 'cc'];

// 不使用解构赋值
let a1 = a[0];
let a2 = a[1];

// 使用解构赋值
let [a1, a2] = a;
复制代码

2.比较运算符

通过比较两个比较对象来返回一个是否为真的布尔值,当两个比较的对象不是相同类型,JavaScript会尝试将两个比较对象转换成相同类型进行比较:

let a = 10;
let b = '12';
a > b; // false
复制代码

常用的比较运算符有:

名称 描述 返回true的示例
等于 == 操作符两边数据相等 3 == '3'
不等于 !== 操作符两边数据不相等 3 != '4'
全等 === 操作符两边数据相等且类型相同 3 === 3
不全等 !== 操作符两边数据不相等或类型不相同 3 !== '3'
大于 > 判断操作符左边大于右边 3 > 2
大于等于 >= 判断操作符左边大于或等于右边 3 >= 2
小于 < 判断操作符左边小于右边 3 < 4
小于等于 <= 判断操作符左边小于或等于右边 3 <= 4

注意:

=> 不是运算符,而是ES6中新增的 箭头函数 的标记符号。

3.算数运算符

除了标准的加减乘除这些基本运算符,JavaScript还提供一些新的算数运算符:

名称 描述 示例
求余 % 返回相除之后的余数 11 % 5 返回 1
自增 ++ ++N 返回加一以后的值, N++ 返回原数值然后加一 ++3 返回4, 3++ 返回3
自减 -- --N 返回减一以后的值, N-- 返回原数值然后减一 --3 返回2, 3-- 返回3
一元负值符 - 返回操作数的负数,若不是 Number 则试图转换为 Number 再取负值 -'-2' 返回 2-2 返回 2
一元正值符 + 若操作数不是 Number 类型则试图转换为 Number +'-2' 返回 -2+'2' 返回 2
指数运算符 ** 计算底数 a 的指数 n 次方 2 ** 3 返回 8

4.位运算符

位运算符是在数字底层(即表示数字的 32 个数位)进行操作的。

复习数字32位数的表示
名称 描述 示例
按位与 AND & ab 的位表示中,每一个对应的位都为1则返回1,否则0 a & b
按位或 OR | ab 的位表示中,每一个对应的位,只要有一个为1则返回1,否则0 a | b
按位异或 XOR ^ ab 的位表示中,每一个对应的位,两个不相同则返回1,否则0 a ^ b
按位非 NOT ~ 反转被操作数的位 ~a
左移 shift << a 的二进制串向左移动 b 位,右边移入0 a << b
算术右移 >> 译注:算术右移左边空出的位是根据最高位是0和1来进行填充的 a >> b
无符号右移(左边空出位用0填充) >>> a 的二进制表示向右移动 b 位,丢弃被移出的所有位,并把左边空出的位都填充为0 a >>> b

示例解释:

1的二进制表示为 0 0 0 0 0 0 1

3的二进制表示为 0 0 0 0 0 1 1

  • 1.按位与 &
1 & 3 ; // 1
1 | 3 ; // 3
1 ^ 3 ; // 2
~1 ;    // -2
1>>1  ; // 0
复制代码

使用案例

  • 1.16进制颜色值转RGB:
function hexToRGB(hex){
    let h = hex.replace('#','0x'),
        r = h >> 16,
        g = h >> 8 & 0xff,
        b = h & 0xff;
    return `rgb(${r},${g},${b})`
}
hexToRGB('#eeddff');           // "rgb(238,221,255)"
复制代码
  • 2.RGB转16进制:
function RGBToHex(rgb){
    let r = rgb.split(/[^\d]+/),
        c = r[1]<<16 | r[2]<<8 | r[3];
    return `#${c.toString(16)}`;
}
RGBToHex('rgb(238,221,255)'); // "#eeddff"
复制代码

5.逻辑运算符

常用来处理布尔值,但是当处理非布尔值的时候,往往返回非布尔值:

运算符 描述 示例
逻辑与 && ab 都能转为 true 则返回 true 1+1==2 && 1-1==0 返回 true
逻辑或 || ab 其中一个能转为 true 则返回 true ,若都是 false 则返回 false 1+1==3 || 1-1==0 返回 true
逻辑非 ! a 能转为 true 则返回 false !1+1==2 返回 false

注意: 能被转成 false 的值有 null0NaN ,空字符串 ""undefined

几个示例:

let a1 = true && true;    // true
let a2 = true && false;   // false
let a3 = false && true;   // false
let a4 = false && false;  // false
let a5 = false && "leo";  // false
let a6 = true && "leo";   // "leo"
let a7 = "leo" && "robin";// "robin"


let b1 = true || true;    // true
let b2 = true || false;   // true
let b3 = false || true;   // true
let b4 = false || false;  // false
let b5 = false || "leo";  // "leo"
let b6 = true || "leo";   // true
let b7 = "leo" || "robin";// "leo"

let c1 = !true;  // false
let c2 = !false; // true
let c3 = !"leo"; // false
复制代码

常常还使用 短路求值

false && anything ; // 被短路求值为false
true || anything ;  // 被短路求值为true
复制代码

6.字符串运算符

在拼接字符串中,由 + 来连接两个字符串:

let a = 'leo ' + 'cute~'; // 'leo cute~'

let b = 'ha';
a += b; // "leo cute~ha"
复制代码

7.条件(三元)运算符

可以使用三个操作数的运算符,运算结果为根据给定条件在两个值中取一个:

// 当条件为真 则取 值1 ,否则取 值2
// 条件 ? 值1 : 值2
let a = 10;
let b = a > 5 ? 'yes' : 'no'; // 'yes'
复制代码

8.逗号运算符

对两个操作数求值并且返回最终操作数的值,通常用于 for 循环中,在每次循环时对多个变量进行更新:

let a1 = [1,2,3,9,6,6];
for(let i = 0,j = 5; i<=j; i++, j--){
    console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`)
}
// i:0,j:5,i值:1,j值:6
// i:1,j:4,i值:2,j值:6
// i:2,j:3,i值:3,j值:9
复制代码

9.一元运算符

一元操作符仅对应一个操作数。

delete

删除一个对象或一个对象的属性或者一个数组中某一个键值,返回一个布尔值,删除成功返回 true ,否则返回 false :

let a = {name : 'leo',age : '15'};
delete a.name;  // true
a;              // {age: "15"}

let b = [1,3,5];
delete b[0];    // true
b;              // [empty, 3, 5]
b[0];           // undefined
复制代码

typeof

返回一个参数的类型的字符串值,参数可以输字符串,变量,关键词或者对象:

typeof new Function(); // "function"
typeof "leo" ;         // "string"
typeof 11 ;            // "number"
typeof undefined ;     // "undefined"

typeof true ;          // "boolean"
typeof null ;          // "object"
复制代码

参数也可以是表达式, typeof 会根据其返回结果返回所包含的类型:

typeof (1+1) ;         // "number"
typeof (1+1==2 ? 'yes' : 'no') ;   // "string"
复制代码

void

表示一个运算没有返回值,常常用在创建一个超链接文本,但是点击的时候没有任何效果:

<a href="javascript:void(0)">点击</a>
<a href="javascript:void(document.form.submit())">点击</a>
复制代码

10.关系运算符

比较两个操作数:

in

判断指定属性是否在指定对象中,若是则返回 true

// 对象
let a = {name:'leo',age:'15'};
'name' in a;  // true

// 数组
let b = ['leo', 'pingan', 'robin'];
0 in b;       // true
'length' in b;// true
复制代码

instanceof

判断一个对象是否是指定类型,若是则返回 true

let d = new Date();
d instanceof Date;  // true
复制代码

11.运算符优先级

当我们需要调整表达式计算顺序,就需要用到运算符的优先级,通过括号来实现排序,常见优先级从高到低:

运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值

以上所述就是小编给大家介绍的《【重温基础】5.表达式和运算符》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pattern Recognition and Machine Learning

Pattern Recognition and Machine Learning

Christopher Bishop / Springer / 2007-10-1 / USD 94.95

The dramatic growth in practical applications for machine learning over the last ten years has been accompanied by many important developments in the underlying algorithms and techniques. For example,......一起来看看 《Pattern Recognition and Machine Learning》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器