ES6 一些新特性的总结
一、箭头函数
ES6中新增了一个箭头函数 ()=>,箭头函数通俗点讲就是匿名函数。箭头函数还有不同点在于改变函数中this,和js中的.bind 的方法差不多,继承后指向的不是最新的函数,还是之前的那个原型对象。
二、类的支持
ES6中添加了对类的支持,引入了class关键字。JS本身就是面向对象,ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建,继承更直观,父类方法的调用,实例化,静态方法和构造函数更加形象化。
//类的定义
class Animal {
constructor(name) {
this.name =name;
}
//实例方法
sayName (){
console.log ('My name is' + this.name);
}
}
//类的继承
class Product extends Animal{
constructor(name) {
//直接调用父类构造器进行初始化
super(name);
}
progrom() {
console.log ('I'm coding....');
}
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Product('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.Product();//输出 ‘I'm coding...’
三、增强的对象字面量
实现继承,可以直接在对象字面量里面定义原型,不用再用function 关键字。
// 通过对象字面量创建对象
var human = {
breathe () {
console.log ('breathing...');
}
};
var worker = {
__proto__:human, //设置此对象的原型为human,相当于继承human
company:‘freeLancer’,
work() {
console.log ('working...');
}
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’
四、利用‘ ‘ 反引号创建字符串,这其中可以包括${vraible}
//产生一个随机数
var num =Math.random();
// 讲这个数输出到console
console.log (‘ your num is ${num}‘);
五、解构
自动解析数组或对象中的值,不用以对象的方式返回。
1、var [x,y] = getVal(),//利用函数返回值进行解构
[name,,age]=['wayou','male','secrect'];// 利用数组进行解构 function getVal () { return [1,2];
} console.log ('x:' +x+' ,y:'+y);//输出:x:1, y:2
console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect
六、可以定义默认的参数
function sayHello2(name='dude'){
console.log(`Hello ${name}`);
}
sayHello2();//输出:Hello dude
sayHello2('Wayou');//输出:Hello Wayou
七、Math 新增了一些API
八、Promises
//创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
if ( /*如果成功 */ ) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
console.log(err); // Error: "It broke"
});
ES6 里面Promise 可以用来避免异步操作函数里的嵌套回调(callback hell) 问题,'.then().then()';
适用于 ajax网络请求、读取localstorage等操作。
常规的回调嵌套:
Parse.User.logIn("user","pass", {
success:function(user) {
query.find({
success:function(results) {
results[0].save({ key: value }, {
success:function(result) {
// the object was saved.
},
error:function(result, error) {
// An error occurred.
}
});
},
error:function(error) {
// An error occurred.
}
});
},
error:function(user, error) {
// An error occurred.
}
});
Promise 的实现过程:
Parse.User.logIn("user","pass").then(function(user) {
returnquery.find();
}).then(function(results) {
returnresults[0].save({ key: value });
}).then(function(result) {
// the object was saved.
},function(error) {
// there was some error.
});
直接到错误的地方就不在继续执行.then,而是跳出执行error状态下的function。
ES6 一些新特性的总结的更多相关文章
- ES6常用新特性
https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...
- ES6 && ECMAScript2015 新特性
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...
- ES6:JavaScript 新特性
我相信,在ECMAScript.next到来的时候,我们现在每天都在写的JavaScript代码将会发生巨大的变化.接下来的一年将会是令JavaScript开发者们兴奋的一年,越来越多的特性提案将被最 ...
- ES6相关新特性介绍
你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...
- es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
- H5、C3、ES6的新特性
H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
- ES6实用新特性
兼容性 http://kangax.github.io/compat-table/es5/ http://kangax.github.io/compat-table/es6/ ES6(ES2015)兼 ...
- JS - ECMAScript2015(ES6)新特性
友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf: 碎片 var VS let VS const var:声明全局变量, let:声明块级变量,即局部变量 const:声明 ...
- ES6的新特性(1)——ES6 的概述
ES6 的概述 首先,感谢马伦老师的ES6新特性的教程. ECMAScript 和 JavaScript 的关系是 ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前 ...
- 关于ES6的新特性
1 let声明变量 01 let声明的变量,不可重复声明,比如 let a=1 : let a=2 :这样申明会报错 02 let声明的变量,有块级作用域,比如 if( ){ ...
随机推荐
- indexedDB 增删改查
/** * 打开数据库 */ export function openDB() { return new Promise((resolve, reject) => { let indexedDB ...
- 频繁项挖掘算法Apriori和FGrowth
一:背景介绍 最近在公司用spark的平台做了一个购物车的推荐,用到的算法主要是FGrowth算法,它是Apriori算法的升级版,算法的主要目的是找出频繁进行一起购买的商品.本文主要介绍两个算法的背 ...
- Laravel 5.1的多路由文件的配置
Laravel 5.1的多路由文件的配置 默认的路由配置文件只有一个,\app\Http\routes.php.在同一个文件中写路由容易起冲突,文件会越来越大,就需要定义多个路由文件.找到加载\app ...
- T1553 互斥的数 codevs
http://codevs.cn/problem/1553/ 题目描述 Description 有这样的一个集合,集合中的元素个数由给定的N决定,集合的元素为N个不同的正整数,一旦集合中的两个数x,y ...
- BZOJ1016最小生成树计数 最小生成树 + 排列组合
@[最小生成樹, 排列組合] Discription 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的 最小生成树.(如果两颗最小生成树中至少有一条边不 ...
- 转:C#并口热敏小票打印机打印位图
最近一直在研究并口小票打印机打印图片问题,这也是第一次和硬件打交道,不过还好,最终成功了. 这是DEMO的窗体: 下面是打印所需要调用的代码: class LptControl { private s ...
- 【Linux】在虚拟机上安装ubuntu
虚拟机安装步骤 参考:http://www.cnblogs.com/sxdcgaq8080/p/7466529.html 在安装ubuntu系统之前,当然是下载一个ubuntu的iso镜像在本地啦. ...
- [置顶] MySQL -- 创建函数(Function
目标 如何在MySQL数据库中创建函数(Function) 语法 CREATE FUNCTION func_name ( [func_parameter] ) //括号是必须的,参数是可选的 RETU ...
- 完整的MVC框架(前端、后台和数据库)
终于学完了数据库的连接,可以做一个完整的项目了,以前做的练习都没有关联到数据库,没法进行事务. MVC框架 先上图: 老师画的图,有点乱,但是大概意思还是可以理解. 这个练习是简单的存储一个学生读了哪 ...
- 【leetcode】 26. Remove Duplicates from Sorted Array
@requires_authorization @author johnsondu @create_time 2015.7.22 18:58 @url [remove dublicates from ...