babel在线转换
*1. 变量、常量声明
{
var a = 'var';
let b = 'let';
const c = 'const';//常量
console.log(a + ',' + b);//1,2
}
console.log(a + ',' + b);//ReferenceError: b is not defined
//let增加了块级作用域，内外不同
*2. 解构赋值
//变量
let [, [, [c]]] = [1, [2, [3]]];//深层嵌套，单一也一样,逗号前也可用变量，同等情况赋值,var,const都可
console.log(c);//3
let [a, ...b] = [1, 2, 3];//"rest模式"
console.log(a+','+ b);//1, 2, 3
console.log(b);//[2, 3]
//对象
let robotA = { name: "Bender" };//对象名，属性，值
let { name: nameA } = robotA;//属性，变量名，对象名
console.log(nameA);// "Bender"
var { foo, bar } = { foo: "lorem", bar: "ipsum" };//对象名=属性，值
console.log(foo);// "lorem"
//注意
var {blowUp} = null;// TypeError: can't convert null to object
//使用对象赋值模式时，被解构的值必需能够转换成一个对象（object）。大多数的类型都可以转换为一个对象，但null和undefined却并不能被转换。
//默认值
var [missing = true] = [];//对于值和属性未定义的数组与对象，可用解构赋值设定默认值
console.log(missing);// true
var { message: msg = "Something went wrong" } = {};
console.log(msg);// "Something went wrong"
var { x = 3 } = {};
console.log(x);// 3
*3. 箭头函数Arrow Function
// ES5
function total(a, b) {
let a = b;
return a + b;
};
// ES6
var total = (a, b) => {
let a = b;
return a + b
};//单个参数可省略括号；函数体只有return ...可省略大括号；去掉前缀就是匿名函数；返回一个对象必须({})小括号包对象
/*this in arrow function*/
//ES5
{
...
addAll: function(pieces) {
var self = this;//保存this
_.each(pieces, function (piece) {
self.add(piece);//使用外部this
});
},
...
}
// ES6的方法语法
{
...
addAll(pieces) {
_.each(pieces, piece => this.add(piece));//this继承了外围作用域的this值,不可改变
},
...
}
*4. 函数参数
//默认值default
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
//参数打包Rest
function f(x, ...y) {// y is an Array
return x * y.length;
}
f(3, "hello", true);//6
//数组展开Spread
function f(x, y, z) {
return x + y + z;
}
f(...[1,2,3]);// 6
*5. 字符串模块Template Strings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`// return "Hello Bob, how are you today?"
//大括号里也可以是函数fn(),取得函数返回值
*6. 迭代器Iterators、生成器Generator
对集合中的任意项进行处理是很常见的操作。JavaScript 提供了好几种方法来遍历一个集合，从简单的 for循环至 map()和filter() 。迭代器和生成器将迭代的概念纳入javascritp的核心语言中，并提供了一种自定义 for...of 循环体的机制 。
//迭代器
//在JavaScript 中迭代器是一个对象，提供 next() 方法，返回序列中的下一项。这个方法返回包含done和value两个属性的对象。for-in可代替，但是无序,for-of可代替
function makeIterator(array){//创建一个迭代器，如果是对象，可设置第二个参数表示是否迭代属性值。。。
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
}
}
var it = makeIterator(['yo', 'ya']);//一旦初始化,next()方法可以用来依次访问对象中的键-值
console.log(it.next().value); // 'yo'
console.log(it.next().value); // 'ya'
console.log(it.next().done); // true
//生成器：一个更好的方法来构建遍历器
//一个生成器其实是一种特殊类型的函数（这个函数作为一个为迭代器工作的工厂），一个函数如果它里面包含了一个或一个以上的yield表达式（yield关键字只能被包含在下面的代码快中才有用