ECMAScript 6
参考网上其他帖子，整理如下
ES6 就是ECMAScript 6是新版本JavaScript语言的标准。
增加了如下
Promises
Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。
function fakeAjax(url) { return new Promise(function (resolve, reject) { // setTimeouts are for effect, typically we would handle XHR if (!url) { return setTimeout(reject, 1000); } return setTimeout(resolve, 1000); }); } // no url, promise rejected fakeAjax().then(function () { console.log('success'); },function () { console.log('fail'); });
异步操作
async/await 配合Promise实现异步操作，注意需要引入babel-polyfill和stage-3以上，下面是个小例子
import 'babel-polyfill'; let sleep = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`sleep ${time} ms`); }, time); }); }; let start = async () => { console.log('start'); let result = await sleep(2000); console.log(result); console.log('end'); }; start();
上次分享了es6开发环境的搭建，本次接着分享es6常用的特性。
1.变量声明let和const
我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() { if(bool) { var test = 'hello man' } else { console.log(test) } }
以上的代码实际上是：
function aa() { var test // 变量提升 if(bool) { test = 'hello man' } else { //此处访问test 值为undefined console.log(test) } //此处访问test 值为undefined }
所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？
- 在一个函数内部
- 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码：
function aa() { if(bool) { let test = 'hello man' } else { //test 在此处访问不到 console.log(test) } }
let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说const。
const name = 'lux' name = 'joe' //再次赋值此时会报错
说一道面试题
var funcs = [] for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func() })
这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。
// ES5告诉我们可以利用闭包解决这个问题 var funcs = [] for (var i = 0; i < 10; i++) { func.push((function(value) { return function() { console.log(value) } }(i))) } // es6 for (let i = 0; i < 10; i++) { func.push(function() { console.log(i) }) }
达到相同的效果，es6简洁的解决方案是不是更让你心动！！！
2.模板字符串
es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5 var name = 'lux' console.log('hello' + name) //es6 const name = 'lux' console.log(`hello ${name}`) //hello lux
第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5 var msg = "Hi \ man! " // es6 const template = `<div> <span>hello world</span> </div>`
对于字符串es6当然也提供了很多厉害的方法。说几个常用的。
// 1.includes：判断是否包含然后直接返回布尔值 let str = 'hahay' console.log(str.includes('y')) // true // 2.repeat: 获取字符串重复n次 let s = 'he' console.log(s.repeat(3)) // 'hehehe' //如果你带入小数, Math.floor(num) 来处理
3 函数
函数默认参数
在ES5我们给函数定义参数默认值是怎么样？
function action(num) { num = num || 200 //当传入num时，num为传入的值 //当没传入参数时，num即有了默认值200 return num }
但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function action(num = 200) { console.log(num) } action() //200 action(300) //300
箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的 this 关键字
//例如： [1,2,3].map( x => x + 1 ) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this))
说个小细节。
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:
var people = name => 'hello' + name //参数name就没有括号
作为参考
var people = (name, age) => { const fullName = 'h' + name return fullName } //如果缺少()或者{}就会报错
Express
是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。
Fetch 是典型的异步场景
Fetch 是浏览器提供的原生 AJAX 接口。
Fetch API 提供了能够用于操作一部分 HTTP 的 JavaScript 接口，比如 requests 和 responses。它同时也提供了一个全局的 fetch() 方法——能够简单的异步的获取资源。
使用 window.fetch 函数可以代替以前的 $. ajax、$.get 和 $.post。
转自：
什么是 Sass？
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS和 Stylus 最优秀。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
SVG
stylus
stylus是一款 CSS 的预处理器，使用它可以创建健壮的、动态的、富有表现力的CSS。
《ECMAScript 6入门》 源码
export命令规定的是对外的接口
一般放在脚本尾部
import命令用于输入其他模块提供的功能
用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
Promise 是异步编程的一种解决方案
