JavaScript的运算符

in Notes with 4 comments

JavaScript 拥有如下类型的运算符

JavaScript 拥有二元(binary)和一元(unary)运算符, 和一个特殊的三元(ternary)运算符(条件运算符)

赋值运算符

一个 赋值运算符(assignment operator) 赋一个基于它右边操作数值的值给它左边的操作数

名字速记等同于
赋值Assignmentx = y , x = y
加法赋值Addition assignmentx += y , x = x + y
减法赋值Subtraction assignmentx -= y , x = x - y
乘法赋值Multiplication assignmentx *= y , x = x * y
除法赋值Division assignmentx /= y , x = x / y
求余赋值Remainder assignmentx %= y , x = x % y
求幂赋值Exponentiation assignmentx **= y , x = x ** y
左移位赋值Left shift assignmentx <<= y , x = x << y
右移位赋值Right shift assignmentx >>= y , x = x >> y
无符号右移位赋值Unsigned right shift assignmentx >>>= y , x = x >>> y
按位与赋值Bitwise AND assignmentx &= y , x = x & y
按位异或赋值Bitwise XOR assignmentx ^= y , x = x ^ y
按位或赋值Bitwise OR assignmentx \= y , x = x\y

解构

解构赋值 destructuring assignment 语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式

var foo = ["one", "two", "three"];

// 不使用解构
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;

比较运算符

一个比较运算符(Comparison operators)比较它的操作数并返回一个机遇表达式是否为真的逻辑值

操作数可以是数字,字符串,逻辑,对象值

下面的表格描述了该示例代码中的各比较运算符

var var1 = 3, var2 = 4;
运算符描述返回true的示例
等于 Equal (==)如果两边操作数相等时返回true3 == var1 , "3" == var1 , 3 == '3'
不等于 Not equal (!=)如果两边操作数不相等时返回truevar1 != 4 , var2 != "3"
全等 Strict equal (===)两边操作数相等且类型相同时返回true3 === var1
不全等 Strict not equal (!==)两边操作数不相等或类型不同时返回truevar1 !== "3" , 3 !== '3'
大于 Greater than (>)左边的操作数大于右边的操作数返回truevar2 > var1 , "12" > 2
大于等于 Greater than or equal (>=)左边的操作数大于或等于右边的操作数返回truevar2 >= var1 , var1 >= 3
小于 Less than (<)左边的操作数小于右边的操作数返回truevar1 < var2 , "2" < 12
小于等于 Less than or equal (<=)左边的操作数小于或等于右边的操作数返回truevar1 <= var2 , var2 <= 5

算术运算符

算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值.标准的算术运算符就是加减乘除(+ - * /)

console.log(1 / 2); /* prints 0.5 */
console.log(1 / 2 == 1.0 / 2.0); /* also this is true */
运算符描述示例
% (求余)二元运算符. 返回相除之后的余数.13 % 5 返回 3
++ (自增)一元运算符. 将操作数的值加一.var x=3; console.log(++x); console.log(x);var y=3; console.log(y++); console.log(y); //4434
-- (自减)一元运算符. 将操作数的值减一.var x=3; console.log(--x); var y=3; console.log(y--);
- (一元负值符)一元运算符,返回操作数的负值.var x=3; console.log(-x);//输入-3
+ (一元正值符)一元运算符,返回操作数的正值.console.log( +'3' ); console.log( '3' ); console.log(+true); //3 '3' 1

位运算符

位运算符将它的操作数视为32位元的二进制串(0和1组成)而非十进制八进制或十六进制数.

例如:十进制数字9用二进制表示为1001,位运算符就是在这个二进制表示上执行运算,但是返回结果是标准的JavaScript数值.

位逻辑运算符

表达式结果二进制描述
15 & 991111 & 1001 = 1001
15 丨 9151111 丨 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110

移位运算符

移位运算符带两个操作数:

移位的方向由运算符来控制.

运算符描述
<<(左移位)将第一个操作数向左移动指定数量的位. 左边移出位被抛弃. 左边移出的几位被丢弃.右边多出的空位由0补齐
>>(带符号右移)将第一个操作数向右移动指定数量的位. 右边移出位被抛弃. 左边多出的空位由原值的最左边数字补齐.
>>>(补零右移)将第一个操作数向右移动指定数量的位. 右边移出位被抛弃. 左边多出的空位由0补齐.

逻辑运算符

逻辑运算符常用于布尔(逻辑)值之间

当操作数都是布尔值时,返回值也是布尔值

下面是&&(逻辑与)操作符的示例

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns Dog
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

下面是||(逻辑或)操作符的示例

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat

下面是(逻辑非)操作符的示例

var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false

字符串运算符

(+) 串联起来

console.log( "my " + "string " + 2); // "my string 2"

(+=) 串联起来

var myString = "alpha";
myString += "bet";

条件(三元)运算符

条件运算符(conditional operator)是JavaScript中唯一需要三个操作数的运算符

运算的结果根据给定条件在两个值中取其一

condition ? val1 : val2

如果condition为true,则结果取val1,否则为val2

var status = (age >= 18) ? "adult" : "minor";

当age大于等于18的时候,语句将"adult"赋值给status,否则将"minor"赋值给status

逗号操作符

逗号操作符(comma operator)对两个操作数进行求值并返回第二个操作数的值

它常常用在for循环中,在每次循环时对多个变量进行更新

for (var i = 0, j = 9; i <= j; i++, j--)
  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
a = b = 3, c = 4; // Returns 4 in console
console.log(a); // 3 (left-most)

x = (y = 5, z = 6); // Returns 6 in console
console.log(x); // 6 (right-most)

一元操作符

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

delete操作符

delete操作符, 删除一个对象(an object)或一个对象的属性(an object's property)或者一个数组中某一个键值(an element at a specified index in an array)

delete objectName;
delete objectName.property;
delete objectName[index];
delete property; // legal only within a with statement

如果 delete 操作成功, 属性或者元素会变成 undefined. 如果 delete可行会返回true,如果不成功返回false.

x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;    // create property h
delete x;       // returns true (can delete if declared implicitly)
delete y;       // returns false (cannot delete if declared with var)
delete Math.PI; // returns false (cannot delete predefined properties)
delete myobj.h; // returns true (can delete user-defined properties)
delete myobj;   // returns true (can delete if declared implicitly)

还有typeofvoid

关系运算符

in操作符

如果指定的属性(property)在指定的对象(object)中则会返回true

propNameOrNumber in objectName

in 操作的常见用法

// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees;        // returns true
3 in trees;        // returns true
6 in trees;        // returns false
"bay" in trees;    // returns false (you must specify the index number,
                   // not the value at that index)
"length" in trees; // returns true (length is an Array property)

// Predefined objects
"PI" in Math;          // returns true
var myString = new String("coral");
"length" in myString;  // returns true

// Custom objects
var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar;  // returns true
"model" in mycar; // returns true

阅读资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

复习方式:实践(代码写一次、跑一次、测试一次),不懂的地方谷歌,阅读和做笔记

底线原则:宁可重写一次,也不复制粘贴

本次复习内容有:运算符···

复习耗时:断断续续持续了几天···我也是醉了···

Responses
  1. 有没有代码高亮插件呢,我装了几个都没成功。。。

    Reply
    1. @摸鱼

      主题不需要代码高亮插件,用的是pirsmjs。

      Reply
  2. ③d

    博主的矢量缩略图是在哪找的呢?

    Reply
    1. 凯凯
      @③d

      可以百度搜索下 14个高清无版权的图片网站资源

      Reply