CoffeeScript Note
2017年06月30日 Javascript

CoffeeScript就是JavaScript的语法糖，写起来效率更高，也去掉了一些晦涩的语法，这里记录其简单用法。

  1. 空格解析表达式， 小括号部分情况可选

    使用空格和缩进区分表达式与语句的块级关系

    1
    2
    3
    4
    x = 10
    # if语句不需要大括号进行块级代码分隔，只需要缩进即可
    if x > 3
        call_function x   # 此处可以不加括号，直接使用空格

  2. -> 代替function

    使用->代替function关键字

    1
    2
    function_name: (param1, param2) ->
        function_body

  3. #{num} 字符串插值

    1
    2
    number = 10
    console.log "The number is #{number}"

  4. heredoc 首尾 “”” here document “””

    1
    2
    3
    4
    5
    block_str = """
    This is block string
    contains all whitespace and enter character
    """
    console.log block_str

  5. # 单选注释 ### 块注释 ###

    1
    2
    3
    4
    5
    6
    # single line comments

    ###
    block comments
    blah blah...
    ###

  6. ?= 存在赋值，即对应左侧变量不存在，则赋值给不存在的变量

    1
    2
    3
    4
    x ?= 3
    # 等同于
    if not x
        x = 3

  7. 存在操作 variable?，使用前会对variable进行判定是否为空操作

    1
    member?.call_func() # member 存在才会继续调用call_func()函数

  8. 操作符别名 is not isnt not and or

    coffeescript定义一堆常规操作符的英文对应别名

    1
    2
    3
    x = 10
    if x is 10
        console.log "x === 10"  # is即是 === 的别名

  9. if / unless 内联写法，即判定与

    1
    2
    func: (status_code) ->
        return "succeed" if status_code is 0

  10. 函数默认参数值 

    1
    2
    3
    func: (param1, default_param = 0.5) ->
        if default_param isnt 0.5
            console.log "...."

  11. 不定长参数 … 可在参数表任意位置

    1
    2
    3
    func: (param1, var_param...) ->
        for var in var_param
            console.log var

  12. 交换赋值 [x, y] = [y, x]

    1
    2
    3
    x = 10
    y = 100
    [x, y] = [y, x] # 无需使用第三个中间变量

  13. 区间 [1 .. 10] [1 … 10]， 开区间与闭区间的区别

    1
    2
    3
    for i in [1..10] # 1-10
        console.log i
    for i in [1...10] # 1-9

  14. 数组 array = [1, 2, 3, 4]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # 定义数组
    array = []
    array = [1, 2, 3, 4, 5, 6]
    # 数组截取
    slice_array = array[2..5] # 3 4 5 6
    # 数组插入数值
    insert_array = array[3..-1] = [10, 11, 12] # 1, 2, 3, 10, 11, 12, 4, 5, 6
    # 遍历
    for v in array by 2
        console.log v   # 间隔2个
    for v in array by -1
        console.log v   # 从后向前

  15. map map = {key: value}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 定义map
    map = {}
    map = {"LiLei": 18, "HanMeiMei": 22}
    map = 
    	"key1": "value1"
        "key2": "value2"
        
    # 迭代map，map迭代不可以使用by关键字
    for key, val of map
        console.log key + " -> " + val

  16. when关键字，针对迭代添加条件 for k, v of map when v.size() > 10

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # when 配合for循环，对象迭代使用
    array = [1, 2, 3, 5]
    for i in array when i > 2
        console.log i
    map = 
    	"1": 1
        "2": 2
    for key, val of map when val >= 1
        console.log key

  17. own关键字

  18. while, until 循环，C语言中while与do .. while

    1
    2
    3
    4
    5
    6
    7
    x = 0
    while x <= 10
        x += 1
        console.log x
    until x > 10
    	x += 1
        console.log x

  19. 列表解析 console.log x for x in array

    1
    2
    3
    # 可以使用类似python语法中列表解析的语法
    array = [2, 4, 5, 6, 8]
    console.log x for x in array

  20. do关键字在执行代码外包装函数

    1
    2
    3
    4
    5
    6
    7
    # 创建闭包，保留变量作用域
    for x in [1 .. 5]
        setTimeout -> console.log x, 1 # 输出5个6，只保留了最后一次大于5的跳出循环的结果

    for x in [1 .. 5]
        do (x) ->
        	setTimeout -> console.log x, 1 # 输出 1 2 3 4 5

  21. class 定义类， constructor构造函数，@等同于this

    1
    2
    3
    4
    5
    class Animal
        constructor: (@name, @is_fur) ->
        eat: ->
            console.log @name + "is eating..."
    new Animal("Dog", true).eat() # Dog is eating

  22. @funciton_name 等同于 static函数，即类级函数

    1
    2
    3
    4
    class Test
        @static_func: ->
            console.log "static function"
    Test.static_func()

  23. extends继承关键字

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    class Chicken extends Animal
        constructor: (@eggs) ->
            super("Chicken", true)
            console.log "Chicken constructor..."
        egg: ->
            @eggs += 1
            console.log "egg's count #{@eggs}"

    hen = new Chicken()
    hen.eat()
    hen.egg()
    # 输出
    # Chicken constructor...
    # Chickenis eating...
    # egg's count 1

  24. => 绑定this的函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    class Person
        constructor: (@name) ->
     	sayHello: ->
            console.log "Hello, " + @name

    lilei = new Person("lilei")
    hanmeimei = new Person("hanmeimei")
    log = (cb) ->
        console.log "before calling callback..."
        cb()
        console.log "after called callback..."
    log(lilei.sayHello)
    log(hanmeimei.sayHello)

    调用log之后执行cb()后提示出错，Hello, undefined，因为此时把cb传递给log的时候原函数上下文已经丢失

    这里需要使用等号箭头的方式，把this也传递进来。修改如下: 

    1
    2
    3
    4
    class Person
        constructor: (@name) ->
     	sayHello: =>
            console.log "Hello, " + @name

    这样使用=>将正确的this绑定并传递，输出就是正确的了。