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. 行为树实现AI逻辑

    http://blog.csdn.net/kenkao/article/details/6099966 http://www.aisharing.com/archives/99 http://www. ...

  2. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to user’

    Linux环境 Mysql+Hibernate command denied to user 错误 错误信息 如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSynt ...

  3. Wide character in print at a2.pl line 返回json 需要encode_utf8

    centos6.5:/root/test#cat a2.pl use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Heade ...

  4. C#语言的几个层次

    接到一位前不久C#培训学员的来信,这位学员虽然以前功底欠缺,但学习劲头很足,在培训中成长很快.即便基本吃透<.NET框架(修订版)>还嫌不够过瘾,一心要成为高手中的高手.来信的目的是希望我 ...

  5. 使用jQuery实现简单的拖动效果

    转自:http://www.muzilei.com/archives/136 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事 ...

  6. [Boost]图形处理库Boost::Polygon

    Background 工作中经师傅指导学习应用到了Boost::Polygon这个库,相对于Boost::Geometry,Polygon出自Intel.抽象于芯片流程,于是更贴近于芯片设计流程应用. ...

  7. 树的最大深度 leecode java

    秒杀/** * Definition for binary tree * public class TreeNode { * int val; * TreeNode left; * TreeNode ...

  8. (DT系列三)系统启动时, dts 是怎么被加载的

    一,主要问题:系统在启动的时候,是怎么加载 dts的:Lk,kernel中都应调查. 二:参考文字dts加载流程如下图所示: 启动过程中,bootloader(默认是bootable/bootload ...

  9. Eclipse编译ijkplayer

    参考链接:http://blog.csdn.net/fatiao101/article/details/49586379

  10. Verilog HDL模块的结构

    一个设计是由一个个模块(module)构成的.一个模块的设计如下: 1.模块内容是嵌在module 和endmodule两个语句之间.每个模块实现特定的功能,模块可进行层次的嵌套,因此可以将大型的数字 ...