JavaScript - 表达式和操作符

分配操作符

操作符	示例	意义
=	x = y	y值分配给x
+=	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

解构

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

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

var a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

比较操作符

比较操作符两边的操作数，返回逻辑结果的真或者假。若操作符两边的数据类型不一致，那么JavaScript会将它们转换为恰当的类型，之后进行比较。但是，=== 和 !== 不会做此种机制的处理，因为它们是严格比较，不仅比较值，还要比较类型。

var var1 = 3;
var var2 = 4;

操作符	说明	示例(评估结果都为真)
==	若操作数的值相等，返回真	3 == var1 "3" == var1 3 == "3"
!=	若操作数的值不相等，返回真	var1 != 4 var2 != "3"
===	操作数的值和类型都相等，返回真	3 === var1
!==	操作数的值或者类型不相等，返回真	var1 !== "3" 3 !== "3"
>	左边操作数的值大于右边操作数的值，返回真	var2 > var1 "12" > 2
>=	左边操作数的值大于等于右边操作数的值，返回真	var2 >= var1 var1 >= 3
<	左边操作数的值小于右边操作数的值，返回真	var1 < var2 2 < "12"
<=	左边操作数的值小于等于右边操作数的值，返回真	var1 <= var2 var2 <= 5

算数操作符

1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // this is true

操作符	说明	示例
% 求余	二元操作符；返回两个操作符相除的整数余数	12 % 5 = 2
++ 自增	一元操作符	x = 3 ++x 先自增，之后使用4 x++ 先使用3，之后自增为4
-- 自减	一元操作符	x = 3 --x 先自减，之后使用2 x-- 先使用3，之后自减为2
- 负	一元操作符；返回操作数的负值	x = 3 -x 返回值为：-3
+ 正	一元操作符；返回操作数的正值，会将操作数转换为数值型	+"3" 返回值为：3 +true 返回值为：1
** 求幂	计算指数	2 ** 3 = 8 意为：2的3次方 10 ** -1 返回 0.1

按位操作符

以二进制的形式，操作操作数

操作符	示例	说明
& 按位与	a & b	按操作数的对应二进制位，进行与操作
| 按位或	a | b	按操作数的对应二进制位，进行或操作
^ 按位异或	a ^ b	二进制对应位相同，返回0；二进制对应位不同，返回1
~ 按位非	~a	反转对应二进制位，1变0；0变1
<< 按位左移	a << b	a对应的二进制数，左移b位；右边空位补0
>> 按位右移	a >> b	a对应的二进制数，右移b位；左边空位忽略
>>>	a >>> b	a对应的二进制数，右移b位；左边空位填充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

短路评估

• false && anything 操作符右边不会进行评估，直接返回false
• true || anything 操作符右边不会进行评估，直接返回true

字符串操作符

连接两个字符串的作用

console.log('my ' + 'string'); // console logs the string "my string".

var mystring = 'alpha';
mystring += 'bet'; // evaluates to "alphabet" and assigns this value to mystring.

三元操作符

/*
condition ? val1 : val2
*/
var status = (age >= 18) ? 'adult' : 'minor';

逗号操作符

var x = [0,1,2,3,4,5,6,7,8,9]
var a = [x, x, x, x, x];

for (var i = 0, j = 9; i <= j; i++, j--)
  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);

一元操作符

一元操作符，其中只有一个操作数

delete 操作符

该操作符可以删除对象；删除对象的属性；删除数组中指定索引的元素。

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

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)

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
delete trees[3];
if (3 in trees) {
  // this does not get executed
}

删除数组元素的操作，不会影响数组的长度，只是删除数组指定索引的元素值。此时，该索引出的值会被设置为：undefined

typeof 操作符

使用方式：typeof 操作数 或者 typeof(操作数)，返回操作数对应的类型。

var myFun = new Function('5 + 2');
var shape = 'round';
var size = 1;
var foo = ['Apple', 'Mango', 'Orange'];
var today = new Date();

typeof myFun;       // returns "function"
typeof shape;       // returns "string"
typeof size;        // returns "number"
typeof foo;         // returns "object"
typeof today;       // returns "object"
typeof doesntExist; // returns "undefined"

typeof true; // returns "boolean"
typeof null; // returns "object"

typeof 62;            // returns "number"
typeof 'Hello world'; // returns "string"

typeof document.lastModified; // returns "string"
typeof window.length;         // returns "number"
typeof Math.LN2;              // returns "number"

typeof blur;        // returns "function"
typeof eval;        // returns "function"
typeof parseInt;    // returns "function"
typeof shape.split; // returns "function"

typeof Date;     // returns "function"
typeof Function; // returns "function"
typeof Math;     // returns "object"
typeof Option;   // returns "function"
typeof String;   // returns "function"

void 操作符

使用方式：void 表达式 或者 void(表达式)。指示表达式没有返回值

<!--无动作链接-->
<a href="javascript:void(0)">Click here to do nothing</a>

<!--有动作链接，链接指向提交表单-->
<a href="javascript:void(document.form.submit())">
Click here to submit</a>

关系操作符

in

若指定的元素，在对象中，返回true

// Arrays
var trees = ['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)

// built-in 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

instanceof

若指定属性属于指定的对象，返回true

var theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
  // statements to execute
}

操作符优先级

优先级见下表，优先级级别，自上至下，由高至低排序。同行的操作符，优先级同级。

操作符

. []

() new

! ~ -(表示负) +(表示正) ++ -- typeof void delete

* / %

+ - (表示加减)

<< >> >>>

< <= > >= in instanceof

== != === !==

&

^ (表示异或)

|

&&

||

?: (表示三元操作符)

= += -= *= /= %= <<= >>= >>>= &= ^= |=

,

表达式

基本表达式

this

<p>Enter a number between 18 and 99:</p>
<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

function validate(obj, lowval, hival) {
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}

分组操作符

var a = 1;
var b = 2;
var c = 3;

// default precedence
a + b * c     // 7
// evaluated by default like this
a + (b * c)   // 7

// now overriding precedence 
// addition before multiplication   
(a + b) * c   // 9

// which is equivalent to
a * c + b * c // 9

Left-hand-side expressions

new

var objectName = new objectType([param1, param2, ..., paramN]);

super

该关键字用来在子对象中呼叫父对象的方法

super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);

Spread operator

扩展表达式的参数

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);