CoffeeScript笔记
CoffeeScript笔记
参考资料:
CoffeeScript 笔记
coffeescript中文
coffeescript英文
CoffeeScript 是一门编译到 JavaScript 的小巧语言.
CoffeeScript 的指导原则是: “她仅仅是 JavaScript”. 代码一一对应地编译到 JS, 不会在编译过程中进行解释。 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然。 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.
通过npm 全局安装coffeescript
npm install coffeescript -g
「语法糖」可以理解为让代码的读写更简单。
概例
# 赋值:
number = 42
opposite = true# 条件:
number = -42 if opposite# 函数:
square = (x) -> x * x# 数组:
list = [1, 2, 3, 4, 5]# 对象:
math =root: Math.sqrtsquare: squarecube: (x) -> x * square x# Splats:
race = (winner, runners...) ->print winner, runners# 存在性:
alert "I knew it!" if elvis?# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)
对应的js:
var cubes, list, math, num, number, opposite, race, square,__slice = [].slice;number = 42;opposite = true;if (opposite) {number = -42;
}square = function(x) {return x * x;
};list = [1, 2, 3, 4, 5];math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}
};race = function() {var runners, winner;winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];return print(winner, runners);
};if (typeof elvis !== "undefined" && elvis !== null) {alert("I knew it!");
}cubes = (function() {var _i, _len, _results;_results = [];for (_i = 0, _len = list.length; _i < _len; _i++) {num = list[_i];_results.push(math.cube(num));}return _results;
})();
语法
1.有意义的空格
CoffeeScript 移除了所有的大括号和分号。
CoffeeScript 使用显式的空白来区分代码块. 你不需要使用分号 ;
来关闭表达式, 在一行的结尾换行就可以了(尽管分号依然可以用来把多行的表达式简写到一行里). 不需要再用花括号来 { }
包裹代码快, 在 函数, if 表达式, switch, 和 try/catch 当中使用缩进.
2.变量作用域的控制
CoffeeScript 把编译生成的 JS 封装在一个匿名函数中:
(function(){// 这里是编译生成的代码
}).call(this);
这样就巧妙避免了全局作用域的污染。同时,CoffeeScript 始终在编译生成的 JS 代码中用 var
声明变量。
3.存在性判断
CoffeeScript 中有个操作符 ?
,用于检测变量是否存在。
console.log html if html?
这句 CoffeeScript 编译过来为(去掉了匿名封装函数,为了方便,之后的编译后代码都去掉)
if (typeof html !== "undefined" && html !== null) {console.log(html);
}
可见,?
会先检测变量有没有定义,如果定义了再检测是否为 null。
4.函数和 splat 操作符
CoffeeScript 中去掉了 function
关键字。用 () ->
定义一个函数。空函数看起来像这样:->
。括号内为参数,可以为参数设置默认值。当传入的参数不存在 (null 或者 undefined) 时,默认值会被使用.如:
myFunction = (a, b = 2) ->a + b
编译为:
var myFunction;myFunction = function(a, b) {if (b == null) {b = 2;}return a + b;
};
调用函数的时候,还可以不用括号。如:
myFunction 3, 5
有一点需要注意一下,CoffeeScript 会在编译后的 JS 代码中自动为最后一行添加 return
关键字。所以不论函数的最后一行是什么,都会成为返回值。如果你不想让最后一行成为返回值,就需要另起一行自己加上 return
。
splat 操作符非常强大。在你的函数需要接受可变数量的参数时就需要它了。书上的例子:
splatter = (etc...) ->console.log "Length: #{etc.length}, Values: #{etc.join(', ')}"// CoffeeScript 中字符串插值用 #{}splatter()
splatter("a", "b", "c")// 输出
Length: 0, Values:
Length: 3, Values: a, b, c
就在某个参数后面加上...
,就使传入的参数自动转化为一个数组。splat 操作符可以出现在参数列表的任意位置,但是参数列表中只能有一个 splat 操作符。
5.数组与区间
一般定义数组是这样:
myArray = ["a", "b", "c"]
在 CoffeeScript 里你还可以这样:
myArray = ["a""b""c"]
如果单个属性被写在自己的一行里, 那么逗号是可以省略的.
- 在 JS 中判断是否存在于数组,需要用
Array.prototype.indexOf
,在 CoffeeScript 中只需要用in
:
console.log "d was not be found" unless "d" in myArray
// 输出
d was not be found
- 推导式
eat food for food in ['toast', 'cheese', 'wine']
编译成
var food, _i, _len, _ref;_ref = ['toast', 'cheese', 'wine'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {food = _ref[_i];eat(food);
}
在推导式中使用by子句,可以实现以固定跨度迭代范围值: evens = (x for x in [0..10] by 2)
推导式也可以用于迭代对象中的key和value。在推导式中使用of
来取出对象中的属性,而不是数组中的值。
yearsOld = max: 10, ida: 9, tim: 11ages = for child, age of yearsOld"#{child} is #{age}"
- 交换赋值
x = "X"
y = "Y"[x, y] = [y, x]
交换 x、y 的值就这么简单!
- 多重赋值(解构赋值)
myArray = ["A", "B", "C", "D"][start, middle..., end] = myArray // 可配合 splat 操作符使用console.log "start: #{start}"
console.log "middle: #{middle}"
console.log "end: #{end}"// 输出
start: A
middle: B,C
end: D
- 区间
区间(range)能让定义包含两个数字之间所有数字的数组变得很容易。
myRange = [1..10]
console.log myRange// 输出 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
如果不想包括结束数值,可以用 ...
代替 ..
。
myRange = [10...1]
console.log myRange// 输出 [ 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
常见的数组操作,都可以通过区间完成:
myArray = [1..10]// 分割数组
// 前面的索引位置省略的话, 默认会是 0, 后面的索引位置被省略的话, 默认值是数组的大小.索引位置值可以是负数,表示逆序。
part = myArray[0..2]
console.log part
// 输出 [ 1, 2, 3 ]// 替换数组值
myArray = [1..10]
// 前面的值startIndex是索引位置,后面的值endIndex等于endIndex-startIndex+1
myArray[4..7] = ["a", "b", "c", "d"]
console.log myArray
// 输出 [ 1, 2, 3, 4, 'a', 'b', 'c', 'd', 9, 10 ]// 插入值
myArray = [1..10]
// 如果startIndex>endIndex,则为插入操作,反之则为替换
myArray[4..-1] = ["a", "b", "c", "d"]
console.log myArray
// 输出 [ 1, 2, 3, 4, 'a', 'b', 'c', 'd', 5, 6, 7, 8, 9, 10 ]
6.操作符和 aliase
CoffeeScript 会把 ==
编译为 ===
, 把 !=
变异为 !==
.
until
关键字等同于while not
, loop
关键字 等同于while true
。在 while, if/else, switch/when 的语句当中, then
可以被用来分隔判断条件跟表达式, 这样就不用强制写换行或者分号了.
CoffeeScript 引入了很多别名来代替一些关键字:
别名 | 对应关键字 |
---|---|
is | === |
isnt | !== |
not | ! |
and | && |
or | || |
true, yes, on | true |
false, no, off | false |
@, this | this |
of (探测 JavaScript 对象的属性是否存在) | in |
in (判断数据在数组中是否出现) | no JS equivalent |
a ** b (乘方) | Math.pow(a, b) |
a // b (整除) | Math.floor(a / b) |
a %% b (模运算) | (a % b + b) % b |
7.类和继承
一例胜千言:
class Animalconstructor: (@name) ->// 用 @property: value 赋值静态的属性@type: 'animal'move: (meters) ->alert @name + " moved #{meters}m."class Snake extends Animalmove: ->alert "Slithering..."super 5class Horse extends Animalmove: ->alert "Galloping..."super 45sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"sam.move()
tom.move()
- consturctor 函数为类的构造函数。在
new
的时候调用,可以重写它。 ::
就和 JS 里的prototype
一样
CoffeeScript笔记相关推荐
- CoffeeScript 学习笔记
1.什么叫 CoffeeScript CoffeeScript 是一种新的编程语言,构建于 JavaScript 之上.CoffeeScript 提供了一种简洁的语法,对 Python 或 Ruby ...
- CoffeeScript编程笔记
编程建议 由于CoffeeScript采用 空白符缩进 来控制语句,如果同级的代码缩进没有对齐(多一个空格和少一个空格)都会对程序结构产生影响,在编译过程中,经常报代码未对齐的错误. 建议 采用 Ta ...
- ReactJS学习笔记——npm、JSX、webpack
2019独角兽企业重金招聘Python工程师标准>>> #ReactJS学习笔记--npm.JSX.webpack [toc] React是一个JavaScript库文件,使用它的目 ...
- 开发利器之IntelliJ IDEA学习笔记
这篇文章主要记录的是本人学习使用IntelliJ IDEA的笔记,可能不是特别的详细.旨在记录自己的学习过程,方便日后遇到问题是及时查阅复习,另一方面也希望能帮助像笔者一样从来没使用过IDEA的人快速 ...
- 2012年9月9日参加中国软件开发者大会学习笔记
2012年9月9日参加中国软件开发者大会学习笔记 全文请访问:http://bbs.hpx-party.org/thread-74667-1-1.html 欢迎转发新浪微博:http://weibo. ...
- css预处理器(less学习笔记)
什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作 ...
- 26Play框架教程2学习笔记
Play框架教程2学习笔记 文章目录 1 play框架01 1.1 概述 1.2 特性 1.2.1 无缝集成现有开发环境 1.2.2 热重载和修改Bug 1.2.3 简单的无状态MVC架构 1.2.4 ...
- 狂神说 vue学习笔记
vue学习笔记 文章目录 vue学习笔记 一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期 二.V ...
- 【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- 模板引擎——Jade学习笔记
目录 一.Jade基础语法知识 1.文档声明和头尾标签 2.实现命令行实时编译 3.标签语法 4.属性文本和值 5.混合的成段文本和标签 6.注释与条件注释 7.变量声明和数据传递 8.安全转义与非转 ...
最新文章
- JavaScript入门篇 - DOM操作
- 借助云开发轻松实现后台数据批量导出丨实战
- 服务器计时器、Windows 计时器和线程计时器
- 当程序发布特别慢的时候,如何高效使用Eclipse
- ubuntu16.04之升级python3.5到3.6
- 台达编码器型号含义_编码器型号说明 编码器型号大全 编码器型号选型
- Lua 学习笔记(七)编译、执行外部代码块
- es 在数据量很大时(数十亿级别)如何提高查询效率啊
- SQL必知必会 课后题答案
- java se win10_Win10 JAVASE的下载和环境变量设置
- html页面导出pdf截断问题,vue页面生成pdf且避免分页截断处理
- linux运维好书《高性能Linux服务器构建实战Ⅱ》已出版发售,附封面照!
- 刀片服务器显示如何切换,刀片机服务器切换
- 2 ubuntu下geographiclib的使用--经纬度坐标转utm平面坐标及重置ECEF原点
- connection linux refuse telnet_解决telnet无法连接 Connection refused
- 慕课编译原理(第十章.构造优先关系表)
- 基于python分析微信好友的性别分布,区域分布,词云分析,头像拼接
- C/C++:计算N的N次方的个位数(火眼金睛找规律,解决此题数据问题)
- 日紫白飞星算法_地理紫白飞星择日口诀解析
- 数据可视化编程题练习
热门文章
- 2D游戏引擎开发入门(二)
- C语言中的int类型
- <C++>运算符重载完结,详解赋值,关系,函数调用运算符
- 自己动手编译Android源码(超详细)
- parcel打包报错Error opening directory
- 易语言 设置屏幕刷新率 源码_下任安卓机皇曝光,领先iPhone 12屏幕一年!
- 揭秘摄像头黑产链:暴露在外的80端口
- 安全专业委员会发言_护理专业委员会发言稿
- 天津大学仁爱学院c语言期末考试题,天津大学仁爱学院2014-2015学年第1学期期末C语言复习...
- Beamer 使用笔记