ES6新特性简介
ES6新特性简介
环境安装
npm install -g babel
npm install -g babel-node //提供基于node的REPL环境
//创建 .babelrc 文件
{"presets": ["es2015"]}
npm install babel-presets-es2015
箭头函数和词法this
箭头函数的用法类似phython
, coffeeScript
和 java8
//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);
});
}
};
类和继承
class
和 extend
是一种语法糖,也是基于原型继承实现的。
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 剩余实参
块级作用域
let
和 const
声明的变量和常量都是属于块级作用域的.
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的子类型,它包含自己的throw
和next
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新特性简介的更多相关文章
- ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
- 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法
1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
随机推荐
- C# 弹出窗口查看图片以及上传图片
private void ShowSelectedPicture(string path) { FileStream fs = File.OpenRead(path); //OpenRead ; fi ...
- ORA-01157报错"cannot identify/lock data file"解决
sqlplus以管理员方式接入数据库,启动时出现报错,如下: > sqlplus "/as sysdba" SQL> startup ...... ORA-01157: ...
- 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, ...
- 关于mysql使用dbForge调试的问题:Object 'test.p_insertRoute' does not exist.
mysql中使用dbForge6.1版本调试存储过程,如果存储过程中定义的变量时枚举类型,那么就会报出该存储过程没有报出的错误,这个应该是dbForge6.1版本的bug
- Android JSON数据的读取和创建
预先准备好的一段JSON数据 { "languages":[ {"id":1,"ide":"Eclipse"," ...
- 《javascript dom编程艺术》笔记(二)——美术馆示例
这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是 ...
- Android 6.0 以及HttpClient
Android 6.0 SDK,API Level 是 23.更新之后,就可以修改 compileSdkVersion 和targetSdkVersion 到 23 体验新的特性了. 同时 Andro ...
- mac使用小技
xcodeブラックスクリーンの解決策: 1.cd ~/Library/Developer/Xcode/DerivedData 2.rm -fr * //注释:-fr和*是分开的3.关闭模拟器,关 ...
- 如何在 静态编译的QT 5.5.1 中 使用数据库插件连接 ODBC(调用静态插件)
前段时间由于工作的关系,需要编写一个将数据插入到 Sql server 2012 的桌面软件. 由于之前使用的是MFC,偶然间接触到了Qt后,被它的简洁惊艳到了,于是便毅然而然的转投到了Qt的怀抱,哈 ...
- c++ 关于类构造函数的初始化列表
除了性能问题之外,有些时场合初始化列表是不可或缺的,以下几种情况时必须使用初始化列表 常量成员,因为常量只能初始化不能赋值,所以必须放在初始化列表里面 引用类型,引用必须在定义的时候初始化,并且不能重 ...