【重温基础】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
&
|
在 a
和 b
的位表示中,每一个对应的位都为1则返回1,否则0 |
a & b
|
按位或 OR
|
|
在 a
和 b
的位表示中,每一个对应的位,只要有一个为1则返回1,否则0 |
a | b
|
按位异或 XOR
^
|
在 a
和 b
的位表示中,每一个对应的位,两个不相同则返回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.逻辑运算符
常用来处理布尔值,但是当处理非布尔值的时候,往往返回非布尔值:
运算符 | 描述 | 示例 |
---|---|---|
逻辑与 &&
|
若 a
和 b
都能转为 true
则返回 true
|
1+1==2 && 1-1==0
返回 true
|
逻辑或 ||
|
若 a
和 b
其中一个能转为 true
则返回 true
,若都是 false
则返回 false
|
1+1==3 || 1-1==0
返回 true
|
逻辑非 !
|
若 a
能转为 true
则返回 false
|
!1+1==2
返回 false
|
注意: 能被转成 false
的值有 null
, 0
, NaN
,空字符串 ""
和 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.表达式和运算符》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- python3 第五章 - 什么是变量、运算符、表达式
- ES6—扩展运算符和rest运算符(6)
- C/C++三元运算符实际上是否具有与赋值运算符相同的优先级?
- Python 运算符
- Python算术运算符
- 004.Python运算符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
闪魂FLASH8网站建设实录
马谧铤 / 中国林业 / 2006-7 / 46.00元
《闪魂FLASH8网站建设实录》旨在提供以Flash(Flash 8.0为创作工具)为技术核心的整套互动网站的开发思路,其中包括了网站策划、平面设计、程序设计等实用的互联网应用技术。内容包括Photoshop CS2设计,FIash 8创作和ActionScript应用程序开发的操作流程。在技术学习的过程中.大家还将体会到顶级互动网站设计、网站建设的设计流程和思路。《闪魂FLASH8网站建设实录》......一起来看看 《闪魂FLASH8网站建设实录》 这本书的介绍吧!