标签归档:es6

ES6-Class类

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

ES6提供了Class语句用于更的理解语义以及更接近传统的编程语言的写法。Class可以当作ES5构造函数的一个语法糖。

传统的构造函数以及继承方法如下面这样来写的:

function Getname() {
    this.name = 'wyz';
    this.age = '29';
}

// 如果我们需要定义一个给所有基于Getname构造函数使用的方法
// 那么我们必须通过prototype对象上定义

Getname.prototype.getName = function(){
    return (`Name: ${this.name}, Age: ${this.age}`);
}

let gname = new Getname();

gname.getName(); //"Name: wyz, Age: 29"

继续阅读

es6-promise

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

概念

Promise最初在社区提出的一个异步解决的方案,最后ES6将它加入了正式的标准,并规定了统一的写法。

在使用Promise之前,你需要注意下面几个点:

1.Promise有三个状态:Pending(进行中)Resolved(已完成)Rejected(已失败),这三个状态我们无法去改变,并且在一个Promise中只有两个可能,一种是从PendingResolved,另一种是PendingRejected。当结果发生后,这个状态就凝固了,也就是说我们无法去改变Promise对象的任何状态,如果再次调用这个Promise对象,返回的将是凝固状态的结果。

2.Promise在执行的过程中无法取消,并且我们也无法知道它执行到哪一步,我们只能知道返回的是已完成还是已失败。

3.Promise实例创建后会立即执行

下面的代码部署了一个Promise对象异步加载图片的例子,可以看到用Promise对象来编写异步代码是非常的清晰。
继续阅读

ES6新特性-Map和WeakMap

参考文档:MDN

Map结构

在Javascript中,对象是以键值对的方式存在的,其中的键名是以字符串或者数值以及ES6提出的新的数据类型Symbol方式存在的,比如下面:

let m = {
    k: 1,
    2: 4
}

m.k; // 1
m[2]; //4

但是无法使用引用类型数据作为键名:

const body = document.getElementsByTagName('body')[0];

let m = {};

m.k = 1;
m[body] = 4;

m; // {k: 1, [object HTMLBodyElement]: 4}

m['[object HTMLBodyElement]']; // 4


/*
    从这里看出来其实当我们用DOM对象作为m属性的时候,
    实际上并没有把DOM对象作为键名,而是通过把DOM对象
    toString()方法的返回字符串值当作了键名。
*/

继续阅读

es6新特性:Set和WeakSet

书籍参考:《ECMAScript 6入门》 作者:阮一峰

文档参考:MDN

ES6提供了两个新的数据结构:Set和WeakSet数据结构,两个结构很相识,但是有一点区别。

Set数据结构

Set数据结构是一个类数组数据结构,但是它和数组有一点区别不同的是,Set数据结构的值是唯一的,也就是说没有重复值,Set数据结构内部判断两个值是否相等类似于我们使用的精确等运算符(===),所以"1" 不等于 1但是区别在于NaN相等。Set的参数接受一个数组或类似数组的对象,它将所有元素添加进新的Set中:

var c = new Set([1,2,3,4,4]); //注意这里添加了两个4
c;  // {1,2,3,4}  只添加了一个4,这也就说明了Set数据结构的值唯一性。

继续阅读

ES6箭头函数

参考:《ES6标准入门教程》 作者:阮一峰

在ES6中允许了一种新函数方式“箭头函数”,它大概的如下:

var a = (x) => x;

等同

var a = function(x){
    return x;
}

如果不需要参数,使用一个空括号代表就可以了

var a = () => 1;

等同

var a = function() {
    return 1;
}

如果箭头函数需要在返回之前进行一些逻辑操作,那么需要添加大括号{},并显示的声明return语句,如果没有return语句那么返回的是一个undefined:

继续阅读