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. CollapsingToolbarLayout

    CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...

  2. listview异步加载sd卡图片

    package com.example.gridview; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  3. Oracle的常见错误及解决办法

    ORA-12528: TNS:listener: all appropriate instances are blocking new connections ORA-12528问题是因为监听中的服务 ...

  4. 文件已经加入.gitignore但是vs并没有显示文件处于ignore状态

    在VS2015的项目文件中看到某些文件的状态比较特殊, 前面被标记了红色的标志, 如下图. 本来以为这是通过VS修改文件属性做到的, 但是光标移到文件上发现显示的是Ignore, 才知道是被git所忽 ...

  5. [转]笔记本Ubuntu系统关闭独显+省电降温设置

    [转载者按]最近装了Ubuntu 13.04 64 bits版操作系统玩玩,但是发现两个显卡都开着,所以上网查找资料,以在不需要3D的时候关闭Nvidia显卡.通过Bumblebee软件包可以达到这一 ...

  6. PowerDesigner 的常用小技巧 转

    中小 订阅 修改外键命名规则 选择Database—>Edit Current DBMS选择Scripts->Objects->Reference->ConstName可以发现 ...

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

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

  8. 在bootloader及IAP中使用zlib解压缩

    原有的bootloader方案是在片内FLASH上面分成3块,bootloader区占一小块,然后剩下区域平分成两块,一块是运行区,一块是新固件临时存储区. 好在现在FLASH在系统成本中占的比例越来 ...

  9. 【转】开始使用Mac OS X——写给Mac新人

    写这篇文档的原因有两个,一.身边使用Mac的朋友越来越多,经常会有人来咨询一些常见的使用问题,比如:“为什么把界面右上角的红色按钮叉掉,程序还没有关闭?”之类.而且我也不愿意看到很多人使用OSX时仅仅 ...

  10. 动态生成修改aspx文件

    using System.IO; using System.Text;/// <summary>/// SCPage 的摘要说明 修改 aspx 和aspx.cs文件/// </su ...