【前端】JavaScript表达式-新手必看
详细介绍了js中几乎所有表达式，用大量示例代码加深理解，对初学者理解js有非常大的帮助
转载请注明出处：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: 3,
//请求信息
message: "请求成功"
}
}自己想3分钟，如果想不出来，就去评论区看答案吧。
参考文献
《JavaScript权威指南》第五版