【前端】JavaScript表达式-新手必看

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/6145384.html

一、什么是表达式

表达式就是JavaScript里一个短句，JavaScript解释器会将其计算出一个结果。

二、表达式分类

1、原始表达式

原始表达式是最简单的表达式，它也是表达式最简单的类型，复杂的表达式都是由原始表达式组合起来的。

JavaScript中原始表达式包含常量、直接量、关键字和变量。

例如：

1.23 // 数字直接量
"hello" // 字符串直接量
/\d/ // 正则表达式直接量
true // 关键字
false // 关键字
null // 关键字
this // 关键字

2、对象和数组的初始化表达式

对象和数组的初始化表达式实际上是一个新创建的对象和数组，这些初始化表达式有时称作“对象直接量”和“数组直接量”。然而和原始表达式不同的是，它不是原始表达式，因为它所包含的成员或者元素都是子表达式。

例如：

[] // 一个空数组
[1 + 2, 3 + 4] //两个元素的数组
{} // 一个空对象
{x: 2.3, y: -1.2} //有两个属性的对象

3、函数定义表达式

函数定义表达式定义一个JavaScript函数，表达式的值是这个新定义的函数，从某种意义上讲，函数定义表达式也可以称为“函数直接量”。

例如：

function(x){ return x * x; } // 返回一个包含了一个参数的函数

4、属性访问表达式

属性访问表达式运算得到一个对象属性或者一个数组元素的值，它有两种语法。

例如：

obj.x    // 返回obj对象的x属性
obj["x"] // 同上。这里可以传入变量，例如var str = "x"; obj[str] === obj["x"]
arr[0]   // 返回数组的第一个元素

5、调用表达式

调用表达式是一种调用函数或方法的语法表示，它以一个函数表达式开始，后面跟随一对小括号，括号里是逗号隔开的参数。

例如：

foo() // 调用foo方法，没有参数
Math.max(1, 2, 3) // 调用Math对象的max方法，传入3个参数

6、对象创建表达式

对象创建表达式创建一个对象并调用一个函数初始化新对象的属性（这个函数称作构造函数）。对象创建表达式和调用表达式非常类似，只是对象创建表达式前面多了一个关键字new。

例如：

new Object() // 创建一个Object对象
new Point(2, 3) //创建一个Point对象，并传入两个参数

如果一个对象创建表达式不需要传入任何参数给构造函数的话，那么这对小括号是可以省略的。

例如：

new Object // 创建一个Object对象
new Date //创建一个日期对象

7、算术表达式

算术表达式是将基础表达式通过运算符进行运算的复合型表达式。

算术表达式根据不同的运算符可以分为下面几类：

a) "+"运算符

可以用作数字加法，也可以用来连接字符串。

例如：

1 + 2 // => 3
"hello" + " " + "world" // => "hello world"

 1 + "2" // => "12"

b) 一元算术运算符

一元算术运算符作用于一个单独的操作数，并产生一个新值，它拥有非常高的优先级，而且是右结合。需要注意的是，在必要时，它会把操作数转换为数字。“+”和“-”是一元运算符，也是二元运算符。

例如：

i++ // => 先返回i再对i+1
++i // => 先计算结果再返回i
i--
--i
+”1” // => 1
-”1” // => -1

c) 位运算符

位运算符可以对由数字表示的二进制数据进行更低层的按位运算。

因为不常用，这里就不一一讲解了，有兴趣的同学可以自己网上搜一下。主要有：

按位与(&)

按位或(|)

按位异或(^)

按位非(~)

左移(<<)

带符号右移(>>)

无符号右移(>>>)

8、关系表达式

关系运算法用于测试两个值之间的关系（例如“相等”，“小于”，或“是...的属性”），根据关系是否成立而返回true或false。关系表达式总是返回一个布尔值。

例如：

1 > 2 // => false
3 <= 4 // => true
1 == "1" // => true
1 === "1" // => false
2 != 2 // => false
2 !== "2" // => true
“a” < “b” // => true 通过ASCII编码进行比较（"a"是97，"b"是98）
null == null // => true
null === null // => true
undefined == undefined // => true
undefined === undefined // => true
null == undefined // => true
null === undefined // => false
Infinity == Infinity // => true
Infinity === Infinity // => true
NaN == NaN // => false
NaN === NaN // => false
"toString" in new Object // => true
new Object instanceof Object // => true

注：“==”运算符的运算规则请点击此处查看

9、逻辑表达式

逻辑表达式是对操作数进行布尔算术运算，但它的返回值类型由两个操作数来决定。

例如：

true && false // => false
true && true // => true
1 && true // => true
true && 1 // => 1
(x == y) && stop() // 只有x 等于 y 的时候才会执行stop()方法
true || false // => true
false || true // => true
undefined || 3 // => 3 可以用来设置默认值
!true // => false
!false // => true
!-1 // => false
!0 // => true
!undefined // => true
!null // => true
!NaN // => true
![] // => false
!!true // => true
!!0 // => false

10、赋值表达式

JavaScript使用“=”运算符来给变量或者属性赋值。“=”运算符希望它的左操作数是一个左值——一个变量或者对象属性。它的右操作数可以是任意类型的任意值。赋值表达式的值就是右操作数的值。赋值表达式的副作用是，右操作数会赋值给左侧的变量或对象属性。它具有非常低的优先级。

例如：

obj.x = 1 // 为obj的x属性赋值为1
a = 1 // 为a赋值为1
b = a = 3 // a是3，然后返回3，然后b也是3
a += 2 // 相当于a = a + 2
b = a -= 6 // 相当于 b = a = a - 6

12、表达式计算

和其他很多解释性语言一样，JavaScript同样可以解释运行由JavaScript源代码组成的字符串，并产生一个值。JavaScript通过全局函数eval()来完成这个工作。需要注意的是，eval里并不是所有的语句都可以执行，例如return、break等会报错。

例如：

eval("3 + 2") // => 5
eval("if(true){ 1 + 2 }") // => 3
eval("{x: 1, y: 2}") // => 会报错，因为eval把大括号看作块区域
eval("({x: 1, y: 2})") // => 返回正确的对象

13、其他运算符

a) 条件运算符（?:）

条件运算符是JavaScript里唯一一个三元运算符，有时也直接称它为“三元运算符”。第一个操作数在“?”之前，第二个操作数在“?”和“:”之间，第三个操作数在“:”之后。当“?”之前的表达式运算结果为true则返回“:”之前的内容，否则返回“:”之后的内容。

例如：

x >= 0 ? x : -x // 求x的绝对值

b) typeof运算符

typeof是一元运算符，放在单个操作数前面，操作数可以是任意类型。

返回值为表示操作数类型的一个字符串，它的值为"number"，"boolean"，"string"，"function"，"object"，"undefined" 这六个之一。

例如：

typeof 1 // => “number”
typeof true // => “boolean”
typeof "abc" // => “string”
typeof function(){} // => “function”
typeof undefined // => “undefined”
typeof new Object // => “object”
typeof null // => “object”
typeof [] // => “object”
typeof NaN // => “number”
typeof Infinity // => “number”
typeof /\d{1, 3}/ // => “object”

c) delete运算符

delete是一元运算符，它用来删除对象的属性或者数组元素，删除失败则返回false，其他情况下（例如属性不存在）返回true。需要注意的是，删除数组的属性并不会改变数组的length。delete并不是简单地将属性值置为undefined，delete之后的属性使用in运算符判断会返回false。

例如：

delete obj.x // 删除obj对象的x属性
delete arr[1] // 删除数组第2个位置上的元素，但不会改变数组的长度

d) void运算符

void是一元运算符，它出现在操作数之前，操作数可以是任意类型，操作数可以正常计算，但是会忽略计算结果并返回undefined。

例如：

void 0 // => undefined

e) 逗号运算符

逗号运算符是一个二元运算符，它的操作数可以是任意类型。它首先计算左操作数，然后计算右操作数，然后返回右操作数的值。左侧表达式的计算结果会被忽略。

例如：

x = 1, y = 2, z = 3; // 返回3
a = (x = 1, y = 2, z = 3) // a的值是3

三、其他

上面讲了数组是一个object，它的typeof返回的的确是”object”，![]也的确是返回false的。那么看下面这段代码

var arr = [];
 
if(arr == true){
 
    alert(1);
 
}

这个alert(1)会不会执行呢？

答案是不会。为什么呢？因为“==”运算符会转换数据的类型，以尽量保证他们俩相同，这个在JavaScript里有一套完整的转换类型的规则[详情请点击此处]。数组并不是通过两个非运算符转换它，而是通过“+”来转换，而+[]是0。然后就会变成 0==true，0又可以转换为false，所以这里的alert(1)不会执行。

如果这里改成if(!!arr == true)，则alert(1)会执行。

四、习题

来看一道习题，看看上面的这些你是否都融会贯通。

下面这段模拟代码有一个很严重的bug，不知道你能不能看出来

function foo(){
 
    var rep = ajaxGet("/xxx.do");
 
    //如果后台成功返回了type
    if(rep.type){
        //打印信息
        console.info(rep.message);
    }
 
}
 
//模拟网络请求（不考虑异步）
function ajaxGet(){
 
    return {
        //类型 -1 ~ 3
        type: ,
        //请求信息
        message: "请求成功"
    }
 
}

自己想3分钟，如果想不出来，就去评论区看答案吧。

---

参考文献

《JavaScript权威指南》第五版