关于自己的ES6使用姿势

ES6今年开始学的，从看文档到实践，以下是自己使用过的一些ES6的东西：

1：for-of 语法：

最喜欢的还是它支持了break/continue的语法，而且还修改了for-in的缺陷，简要写法：

for(let item of dataList){}

2：箭头函数 Arrow Function =>

在

let itemList = (pageData || []).map((item, index)=>{

return (

);

});

箭头函数内部没有 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就不提了，解构等上面的例子也都有用到

转载于:https://www.cnblogs.com/yinsu12311/p/5801270.html

关于自己的ES6使用姿势相关推荐

面对前端六年历史代码，如何接入并应用ES6解放开发效率
作者/分享人:Lucas http://gitbook.cn/gitchat/author/583f821b87fdee392692ed22 写在最前很荣幸有机会和大家分享自己在前端工作中的一些经验 ...
一段人人都应该知道的从Vue到React的过渡史
写在前面以前写Vue写惯了,心血来潮,写起了react.并根据Vue官网文档的语法顺序,写了对应的React的语法,并附一个教程demo. 教程的github地址:Close2React 项目使用框 ...
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
前言年末研发组解散失业, 选择回去学车了,也顺利拿到了驾照,最近回归大深圳,开始踏上漫漫的找工作之路. 拉勾上吊一百年不匹配, BOSS直聘日夜没反应. 题目范围涵盖我最近遇到的笔试题和面谈的(CS ...
2019春招前端面试: 闯关记(精排精校)
前言去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照最近回归大深圳....开始踏上漫漫的找工作之路; "拉勾上吊一百年不匹配!!!","BOSS直聘日夜 ...
开发函数计算的正确姿势——支持 ES6 语法和 webpack 压缩
为什么80%的码农都做不了架构师?>>> 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算 ...
使用webpack开发ES6程序的正确姿势
1.cnpm install babel-loader babel-core babel-preset-es2015 -D 2.cnpm install babel-plugin-transform- ...
es6标准入门第3版pdf_最详细，快速入门Web前端开发的正确姿势
入门标准入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
数组去重的正确编写姿势
引言数组去重是前端面试的一个必备题目,其具体表现内容为:怎样去掉Javascript的Array的重复项.问题简单直接,咱们也废话不多说,直入主题吧. 一般姿势使用数组的indexOf()方法可以 ...
前端代码规范(es6,eslint,vue)
2019独角兽企业重金招聘Python工程师标准>>> 前端开发规范一.HTML 1.语义化标签 HTML5 提供了很多语义化元素,更好地帮助描述内容.希望你能从这些丰富的标签库中 ...

关于自己的ES6使用姿势

关于自己的ES6使用姿势相关推荐

最新文章

热门文章