ES6今年开始学的,从看文档到实践,以下是自己使用过的一些ES6的东西:
1:for-of 语法:
最喜欢的还是它支持了break/continue的语法,而且还修改了for-in的缺陷,简要写法:

for(let item of dataList){}

 
2:箭头函数 Arrow Function => 
 
 
let itemList = (pageData || []).map((item, index)=>{
            return (
                <PageDataTbody  key={index}  data={item}  /> 
            );  
        });
        
        
        
箭头函数内部没有 constructor 和 prototype,所以不支持 new 操作,也不支持arguments
  比如:
  
    new (() => {})  //VM264:1 Uncaught TypeError: (intermediate value) is not a constructor(…)
    
3:es6 终于有了类 class的含义

JavaScript语言的传统方法是通过构造函数,定义并生成新对象

function Point(x, y) {
this.x = x;
this.y = y;
} Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
}; var p = new Point(1, 2);

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念

//定义类
class Point {
constructor(props) {
super(props);
this.state = {
visible: false
}
}
componentDidMount() {
this.props.actions.getFlowData && this.props.actions.getFlowData(data);
}
}

可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象

 
4: Class的继承:
class ColorPoint extends Point {}

super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。

class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
} toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}

子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

大多数浏览器的ES5实现之中,每一个对象都有proto属性,指向对应的构造函数的prototype属性。

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

 
5:展开运算符 
在在多个参数(用于函数调用)或者多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方使用,使用姿势如下
 
  myFunction(...iterableObj);
 

var parts = ['shoulder', 'knees'];

var lyrics = ['head', ...parts, 'and', 'toes'];     // ["head", "shoulders", "knees", "and", "toes"]

function myFunction(x, y, z) { }

var args = [0, 1, 2];

myFunction(...args);

 
 
6:promise对象
 
之前有专门写过promise的分享,这里就不展开,贴一段写过的代码
 

export function refreshGraph(data, compareData) {

return (dispatch, getState)=> {

let getDataFunc = function(data) {

return new Promise(function(resolve, reject){

if(!data) {

return resolve(null);

}

return requestJsonp({

url: 'http://...'

data: data,

method: 'jsonp'

}, json=>{

resolve(json);

}, err=>{

resolve(null);

});

});

};

return Promise.all([getDataFunc(data), getDataFunc(compareData)]).then((json)=>{

if(!json[0] && !json[1]) {

dispatch({

type: DATA_ERR

});

} else {

dispatch({

type: REFRESH_GRAPH,

data: json[0] && json[0].data[data.chartType]

});

}

});

};

}

 
7:简单的比如let、const就不提了,解构等上面的例子也都有用到

关于自己的ES6使用姿势的更多相关文章

  1. Omi实战-QQ附近用户列表Web页

    原文地址https://github.com/AlloyTeam/omi/blob/master/docs/cn_pr_nearby.md 写在前面 Omi很适合大型复杂的Web页面开发,例如一些We ...

  2. Omi v1.0.2发布 - 正式支持传递javascript表达式

    原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标 ...

  3. ES6学习之Babel的正确安装姿势

    开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...

  4. 使用webpack开发ES6程序的正确姿势

    1.cnpm install babel-loader babel-core babel-preset-es2015 -D 2.cnpm install babel-plugin-transform- ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. 深入浅出ES6(十一):生成器 Generators,续篇

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...

  7. 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用

    深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...

  8. 如何在ES5与ES6环境下处理函数默认参数

    函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮)MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5 ...

  9. es6编程建议和技巧点汇总

    大括号 特点:大括号(单独的大括号或者if等后的大括号)内是一个单独的作用域 注意点:在块级作用域内声明的函数,类似var,会被提升到大括号外,应避免在块级作用域内声明函数.如果确实需要,写成函数表达 ...

随机推荐

  1. 转:二十一、详细解析Java中抽象类和接口的区别

    转:二十一.详细解析Java中抽象类和接口的区别 http://blog.csdn.net/liujun13579/article/details/7737670 在Java语言中, abstract ...

  2. bzoj1197

    水题,画个图推一下低维的就什么都明白了 从低维类推高维 ..,..] of int64; n,m,j,i:longint; begin readln(m,n); to n do f[i,]:=; to ...

  3. 如何在Azure环境里做好信息传递可扩展性经验分享

    作者 王枫 发布于2014年5月15日 综述 本文介绍建立一个在Azure上使用Azure服务总线, 高吞吐量短信平台的必要步骤.在这篇文章中提出的解决方案是在响应由客户的具体要求,建立一个基于Win ...

  4. IE浏览器Ajax缓存问题小结

    IE浏览器Ajax缓存问题 在IE下使用ajax的get方法向后台请求数据时,如果请求URL与之前完全一样,则根本不想后台获取,直接返回上一次请求缓存的数据(在缓存过期之前,针对相同地址发起的多个Aj ...

  5. 用户故事(User Story)

    摘要: 一件用户通过系统完成他一个有价值的目标(买一罐饮料)的事.这样的过程就叫“用户案例(user case)”或者“用户故事(user story)”.本文描述了敏捷开发的技巧:如何以用户故事管理 ...

  6. 整理:Google jQuery 引用地址大全和方法(转)

    什么是google的js托管? 说的明白点,跟我们以往做法一样,只不过这时候的引用的js库是放在google服务器上的. 比如引用jquery,则使用路径  http://ajax.googleapi ...

  7. Unity给力插件之LittleLocalization

    从网上随便下载了一个多语言的插件,原理很简单,自己就可以写一个.不过本身插件做的算比较全面,拿来就能用,所以精简了一下,然后重新打了个包. 为了快速使用插件,在此把步骤列出来. 1.创建空物体,添加L ...

  8. 在CentOS上为DiscuzX3安装ImageMagick支持。

    找了几篇外文的,写的很好,按照参考安装成功! http://www.tecmint.com/install-imagemagick-in-linux/ ImageMagick is an free o ...

  9. Bzoj 2393: Cirno的完美算数教室 容斥原理,深搜

    2393: Cirno的完美算数教室 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 287  Solved: 175[Submit][Status][ ...

  10. windows mobile 6.5 隐藏 左下角(左上角)的开始按钮 叉号关闭按钮

    其实做起来很简单,但是国内的网站就是找不到. 1.开始按钮原来的界面是这样的: windows mobile 6.0界面: windows mobile 6.5.X界面: 修改一个windows mo ...