zoukankan      html  css  js  c++  java
  • 【前端】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。需要注意的是,删除数组的属性并不会改变数组的lengthdelete并不是简单地将属性值置为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权威指南》第五版

  • 相关阅读:
    Catalan数,括号序列和栈
    NOIP2017 心路历程
    [Code Festival 2017 qual A] C: Palindromic Matrix
    HIVE 数据类型
    HADOOP-HIVE学习笔记(3)- Beeline
    HADOOP-HIVE学习笔记(2) CLI
    中信证券 指标公式 笔记
    【转】Python将列表数据写入文件(txt, csv,excel)
    Python中创建二维数组
    DevExpress 控件汉化方法
  • 原文地址:https://www.cnblogs.com/shamoyuu/p/6145384.html
Copyright © 2011-2022 走看看