月度归档:2017年07月

ES6-iterator遍历接口

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

Iterator概念

ES6发布后Javascript的数据集合对象有ArrayObjectMapSet四种,我们同时知道在Array中,我们可以放对象,Object中我们一样可以放Array,四种数据集合对象都可以相互交叉使用。

那么问题来了,如果在一个数据集合对象中含有多个不同数据集合对象的类型,那么这时候就需要一种接口的机制,来处理不同的数据集合了。

Iterator有三个作用:

  1. 为各种数据接口提供一个统一的访问接口
  2. 使数据接口的成员能够按照某种次序排序
  3. ES6新遍历名利 for…of循环

按照《ECMAScript 6入门》这本书中的4个步骤就能很好的解释Iterator遍历过程

  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

用一个代码段来实现上面的4个点,也就是来实现一个Iterator遍历器
继续阅读

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新数据类型-Symbol

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

Symbol原始类型

Javascript一共有6种原始数据类型,分别为:

  1. undefined
  2. null
  3. Boolean
  4. Object
  5. String
  6. Array

ES6新增加了一种原始数据类型,也就是说从ES6开始,Javascript一共有7种原始数据类型,全新的数据类型是Symbol类型,Symbol用来声明一个独一无二的值。因为Symbol类型返回的是一个原始类型值,不是返回的对象,也不能添加属性,所以在Symbol函数前不能使用new命令。

继续阅读

ES6箭头函数

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

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

var a = (x) => x;

等同

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

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

var a = () => 1;

等同

var a = function() {
    return 1;
}

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

继续阅读