ES6新特性简介

ES6新特性简介

环境安装

npm install -g babel
npm install -g babel-node //提供基于node的REPL环境
//创建 .babelrc 文件
{"presets": ["es2015"]}
npm install babel-presets-es2015

箭头函数和词法this

箭头函数的用法类似phython, coffeeScriptjava8

//expression func body, (仅有1参数 括号可省略)
var odds = evens.map(v => v+1);
var nums = evens.map((v,i) => v + i); //statement func body
nums.forEach( v => {
if(v % 5 === 0){
fives.push(v);
}
}); //lexical this
var sindy = {
name: 'Sindy',
friends: ['nami', 'robin'],
printFriends() {
//sindy.printFriends() this指向sindy,
//forEach迭代函数内部this,跟它定义的上下文this一致
this.friends.forEach(f=>{
console.log(this.name + ' knows ' + f);
});
}
};

类和继承

classextend 是一种语法糖,也是基于原型继承实现的。

class支持 super calls, 实例化,静态方法和构造函数。

class关键字 声明类

//class声明类 内部直接是属性和方法 不用,分隔。 constructor
class Person{
constructor(name, age){
this.name = name;//实例属性
this.age = age; } sayhi(name){//原型对象的方法
console.log(this.name+' say hello to ' + name);
} static like(){//静态方法
console.log('i want to be freedom king');
}
}

extends关键字 声明继承

//继承关键字 extends
class Zoro extends Person{ constructor(fav){
super('zoro', 18); //constructor中, super引用父类的构造函数 this.fav = 'keep going'; // console.log(super); //error 不能直接打印super
console.log(super('cici',9),'<--c'); } sayhi(){
// console.log(super); //error 不能直接打印super
console.log(super.sayhi(),'<--m'); //原型对象的方法中, super引用父类的原型对象 super.sayhi();//调用父类原型对象的方法
}
}

增强的对象字面量

书写对象字面量更方便简洁。 如:foo:foo的简写, 函数定义简写, 动态属性名。

var obj = {
__proto__: theProtoObj, //设置原型对象
['__proto__']: somethingElse, //['__proto__']表示计算的属性名,不会认为是设置原型对象, 有时也可避免提早报同名属性的错误
handler, // hanlder: handler 的简写
toString(){//类似定义类 命名函数表达式的名称作为key
//super calls
return 'd' + super.toString(); //super 应该指向 theProtoObj
},
['prop_'+(()=>23)]: 23 //[expression] 中括号表示内部为属性名的计算表达式,可实现动态属性名
}

__proto__属性在node下都支持,但在浏览器环境不一定都支持, chrome是支持的。

模板字符串

模板字符串跟php双引号字符串类似 "hello ,$name",字符串中可以解析变量和语句, 对于构造字符串是很方便的。

//单行
`this is an alone night` //多行
`In ES5 this is
not legal` //变量插值
var name = 'idle', time='today';
var greeting = `hello ${name}, how are you ${time}`; //不转义
String.raw`in es5 "\n" is a line-feed`

解构

参数解构 对象解构 数组解构, 解构是一种十分方便的语法特性. 当结构不对应解析失败时,会对应的返回undefined,不报错.

//解构赋值
var [a, b] = [1,2]; // a===1, b===2 var {name, age} = getPerson(); //参数解构
function hello({name: x}){
console.log('hello, ', x);
}
hello({name: 'alice'}); //解构失败
var [a] = []; // a===undefined //提供解构失败时的默认值
var [a=1] = []; //a===1 //参数解构失败的默认值
function r({x,y,w=10,h=20}){
return x+y+w+h;
}
r({x:1, y:2}); //参数默认值
function f(a, b=10){
return a+b;
}
f(5); //rest arguments
function f(x,...y){//剩余形参
// y is an array
return x * y.length
} f(3, 'hello', true);//6 function f(x,y,z){
return x+y+z;
} f(...[2,3,4]); //=>9 剩余实参

块级作用域

letconst 声明的变量和常量都是属于块级作用域的.

function f(){
let x;
{
const x = 'sindy'; //ok 因为块级作用域
x = 'foo'; //error 因为x是常量
}
x = 'bar'; //在let 之后赋值,没问题
let x = 'inner'; //error 重复声明
}

迭代对象(iterator) 和 for .. of ..

迭代对象允许自定义迭代方式,如:

let fibonacci = {
[Symbol.iterator]() {
let pre=0, cur=1;
return {//返回包含next方法的迭代对象(iterator)
next(){
[pre, cur] = [cur, pre+cur];
return {done: false, value: cur}; //iteratorResult
}
}
}
}; for(var n of fibonacci){
if(n>100){//若无终止条件会一直迭代下去 n应该代表的是每次迭代的结果
break;
}
console.log(n);
} //typescript风格的iterator接口定义
interface IteratorResult{
done: boolean,
value: any
} interface Iterator {
next(): IteratorResult //包含next方法,且next()返回IteratorResult类型结果
} interface Iterable {
[Symbol.iterator](): Iterator // fibonacci() 执行后返回Iterator
}

生成器generators

function*yield, function*声明的函数返回一个generator实例. generator是iterator的子类型,它包含自己的thrownext

generator可以实现await风格的异步编程

//generator版的fibonacci
var fibonacci = {
[Symbol.iterator]: function*() {//function*声明
var pre=0, cur=1;
for(;;){//不会终止的循环?
var temp = pre;
pre = cur;
cur += pre;
yield cur;//generator实例每次执行都从yield的地方重新开始?
}
}
}; for(var n of fibonacci){
if(n > 100){
break;
}
console.log(n);
} //typescript风格的generator接口定义
interface generator extends iterator {
next(value?: any): IteratorResult; //next方法可带参数, yield返回参数给next?
throw(exception: any);
}

注意 iterator and generator 目前需要polyfill才能使用, 新版的chrome已支持.

unicode的完全支持

// same as ES5.1
"
上一篇:99乘法表输出对齐结果


下一篇:J2EE中的HttpSession