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
"

ES6新特性简介的更多相关文章

  1. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  2. 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...

  3. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  4. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  5. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  6. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  7. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  8. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  9. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

随机推荐

  1. C# 弹出窗口查看图片以及上传图片

    private void ShowSelectedPicture(string path) { FileStream fs = File.OpenRead(path); //OpenRead ; fi ...

  2. ORA-01157报错"cannot identify/lock data file"解决

    sqlplus以管理员方式接入数据库,启动时出现报错,如下: > sqlplus "/as sysdba" SQL> startup ...... ORA-01157: ...

  3. HDU 2685 I won't tell you this is about number theory

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2685 题意:求gcd(a^m - 1, a^n - 1) mod k 思路:gcd(a^m - 1, ...

  4. 关于mysql使用dbForge调试的问题:Object 'test.p_insertRoute' does not exist.

    mysql中使用dbForge6.1版本调试存储过程,如果存储过程中定义的变量时枚举类型,那么就会报出该存储过程没有报出的错误,这个应该是dbForge6.1版本的bug

  5. Android JSON数据的读取和创建

    预先准备好的一段JSON数据 { "languages":[ {"id":1,"ide":"Eclipse"," ...

  6. 《javascript dom编程艺术》笔记(二)——美术馆示例

    这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是 ...

  7. Android 6.0 以及HttpClient

    Android 6.0 SDK,API Level 是 23.更新之后,就可以修改 compileSdkVersion 和targetSdkVersion 到 23 体验新的特性了. 同时 Andro ...

  8. mac使用小技

    xcodeブラックスクリーンの解決策: 1.cd ~/Library/Developer/Xcode/DerivedData 2.rm -fr *    //注释:-fr和*是分开的3.关闭模拟器,关 ...

  9. 如何在 静态编译的QT 5.5.1 中 使用数据库插件连接 ODBC(调用静态插件)

    前段时间由于工作的关系,需要编写一个将数据插入到 Sql server 2012 的桌面软件. 由于之前使用的是MFC,偶然间接触到了Qt后,被它的简洁惊艳到了,于是便毅然而然的转投到了Qt的怀抱,哈 ...

  10. c++ 关于类构造函数的初始化列表

    除了性能问题之外,有些时场合初始化列表是不可或缺的,以下几种情况时必须使用初始化列表 常量成员,因为常量只能初始化不能赋值,所以必须放在初始化列表里面 引用类型,引用必须在定义的时候初始化,并且不能重 ...