【前端】JavaScript表达式-新手必看
2016-12-08 16:16
344 查看
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/6145384.html
JavaScript中原始表达式包含常量、直接量、关键字和变量。
例如:
例如:
例如:
例如:
例如:
例如:
如果一个对象创建表达式不需要传入任何参数给构造函数的话,那么这对小括号是可以省略的。
例如:
算术表达式根据不同的运算符可以分为下面几类:
例如:
例如:
因为不常用,这里就不一一讲解了,有兴趣的同学可以自己网上搜一下。主要有:
按位与(&)
按位或(|)
按位异或(^)
按位非(~)
左移(<<)
带符号右移(>>)
无符号右移(>>>)
例如:
注:“==”运算符的运算规则请点击此处查看
例如:
例如:
例如:
例如:
返回值为表示操作数类型的一个字符串,它的值为"number","boolean","string","function","object","undefined" 这六个之一。
例如:
例如:
例如:
例如:
这个alert(1)会不会执行呢?
答案是不会。为什么呢?因为“==”运算符会转换数据的类型,以尽量保证他们俩相同,这个在JavaScript里有一套完整的转换类型的规则[详情请点击此处]。数组并不是通过两个非运算符转换它,而是通过“+”来转换,而+[]是0。然后就会变成 0==true,0又可以转换为false,所以这里的alert(1)不会执行。
如果这里改成if(!!arr == true),则alert(1)会执行。
下面这段模拟代码有一个很严重的bug,不知道你能不能看出来
自己想3分钟,如果想不出来,就去评论区看答案吧。
参考文献
《JavaScript权威指南》第五版
一、什么是表达式
表达式就是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权威指南》第五版
相关文章推荐
- 前端新手必看的6 个JavaScript 框架
- 前端新手必看JavaScript常用代码总结
- 基于JavaScript Array数组方法(新手必看篇)
- 【前端学习笔记】Javascript中的正则表达式-实例
- web前端之JavaScript高级程序设计四:函数表达式
- web前端新手向HTML+CSS+JavaScript实现列表的增删查改【施工中】
- JavaScript继承学习笔记【新手必看】
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
- 从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)
- javascript入门之string对象【新手必看】
- web前端之JavaScript正则表达式
- 【前端必看】2017 年 JavaScript 全面崛起大运势
- (一)前端必备技能JavaScript正则表达式教程
- js---在前端开发中,如何通过正则表达式去除字符串string首尾的空格,JavaScript正则去除首尾空格
- Android程序员学WEB前端(12)-JavaScript(3)-正则表达式-Sublime
- JavaScript推荐资料合集(前端必看)
- 一些web前端相关网址收藏(新手必看)
- 【前端学习笔记】Javascript中的正则表达式
- JavaScript推荐资料合集(前端必看)
- Web前端新人笔记之jquery入门心得(新手必看)