Modern JavaScript - Collection

  1. 1. Object
  2. 2. Array
    1. 2.1. 三种创建 Array 的语法:
    2. 2.2. Accessor
    3. 2.3. Loop over
    4. 2.4. Index Operation
    5. 2.5. ES2015
  3. 3. Set
    1. 3.1. Builder
    2. 3.2. Accessor
    3. 3.3. Loop over
  4. 4. Map
    1. 4.1. Builder
    2. 4.2. Has
    3. 4.3. Accessor
    4. 4.4. Clear
    5. 4.5. Loop over
    6. 4.6. Other

Array 是最传统的一个集合型的数据结构了,[1,2,3] ES 2015 对它进行了扩充。

Set 不是一个数据,它是一个对象 {1,2,3},不提供 index 查找,也就意味着不能向指定位置插入和查找指定位置,可通过 for 遍历和解构。

Map 好理解,是一个 key-value Hash {a: 1, b: 2, c:3},在 E2015 之前,都是通过对象来做 Hash 的。

Object

Array

Array 是一个有序数组,提供 Index 操作。

三种创建 Array 的语法:

1
2
3
[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

Accessor

Get by Index

1
2
3
4
5
6
7
let fruits = ["Apple", "Banana"];
let first = fruits[0];
// Apple
let last = fruits[fruits.length - 1];
// Banana

Add

1
2
3
4
5
6
7
// Add to the end of an Array
let newLength = fruits.push("Orange");
// ["Apple", "Banana", "Orange"]
// Add to the front of an Array
let newLength = fruits.unshift("Strawberry") // add to the front
// ["Strawberry", "Banana"];

Remove

1
2
3
4
5
6
7
// Remove from the end of an Array
let last = fruits.pop(); // remove Orange (from the end)
// ["Apple", "Banana"];
// Remove from the front of an Array
let first = fruits.shift(); // remove Apple from the front
// ["Banana"];

Loop over

1
2
3
4
5
fruits.forEach(function (item, index, array) {
console.log(item, index);
});
// Apple 0
// Banana 1

ES2015 for.of 语法

JavaScript原有的for…in循环,只能获得对象的键名,不能直接获取键值。ES6提供for…of循环,允许遍历获得键值。

1
2
3
4
5
let index = 0;
for (let f of fruits) {
console.log(f, index);
index++;
}

Index Operation

Array 没有 has 用法,要通过 indexof 来取值,看返回的 index 判断是否存在。

1
2
3
4
5
6
7
8
9
10
// Find the index of an item in the Array
let pos = fruits.indexOf("Banana");
// Remove an item by Index Position
let removedItem = fruits.splice(pos, 1); // this is how to remove an item
// ["Strawberry", "Mango"]
// Insert item into arr at the specified index
let insertedItem = fruits.splice(1, 0, 'Orange');
// ["Strawberry", "Orange", "Mango"]

ES2015

ES 2015,扩充了一些新的类方法:

  • Array.from
  • Array.of


Set

Set 没有索引,数据不能重复,是一个无序数据,不能进行 sort。

以下是 Set 支持的所有操作:

Builder

  • new Set:创建一个新的、空的 Set。
  • new Set(iterable):从任何可遍历数据中提取元素,构造出一个新的集合。
1
2
3
4
5
Set 可以用一个数组来做初始化
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

Accessor

  • set.add(value):添加元素。如果与已有重复,则不产生效果。
  • set.delete(value):删除元素。如果并不存在,则不产生效果。

.add() 和 .delete() 都会返回集合自身,所以我们可以用链式语法。

高性能的 Array.indexOf()

  • set.has(value):判定集合中是否含有指定元素,返回一个布尔值。

Other

  • set.clear():清空集合。
  • set.size:获取集合的大小,即其中元素的个数。

Loop over

  • set.forEach(f)
  • for (let value of set)

setSymbol.iterator:返回一个新的遍历整个集合的迭代器。一般这个方法
不会被直接调用,因为实际上就是它使集合能够被遍历,也就是说,我们可以
直接写 for (v of set) {…}等等。

set.keys()、set.values()和 set.entries() 返回各种迭代器。这里的返回值是一样的,没意义,只是为了兼容 Map。

遍历顺序就是插入顺序

1
2
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )

如果想对一个 Array 去重,可以这样写

1
[...new Set(array)]

支持 map, filter 方法:

1
2
3
4
5
6
7
let set = new Set([1, 2, 3, 4, 5]);
let set1 = set.map(x => x * 2);
// 返回Set结构:{2, 4, 6, 8, 10}
let set2 = set.filter(x => (x % 2) == 0);
// 返回Set结构:{2, 4}


Map

Map 好理解,是一个 key-value Hash {a: 1, b: 2, c:3},在 ES2015 之前,都是通过对象来做 Hash 的,Map 提供了数据遍历等更强大的数据处理函数。

注意区分Object和Map,只有模拟现实世界的实体对象时,才使用Object。如果只是需要key: value的数据结构,使用Map结构。因为Map有内建的遍历机制。

一个 Map 对象由若干键值对组成,支持:

Builder

  • new Map:返回一个新的、空的 Map。
  • new Map(pairs):根据所含元素形如[key, value]的数组 pairs 来创建一个新的
    Map。这里提供的 pairs 可以是一个已有的 Map 对象,可以是一个由二元数组
    组成的数组,也可以是逐个生成二元数组的一个生成器,等等。

Has

  • map.has(key):测试一个键名是否存在,类似 key in obj。

Accessor

  • map.get(key):返回一个键名对应的值,若键名不存在则返回 undefined,类似
    obj[key]。
  • map.set(key, value):添加一对新的键值对,如果键名已存在就覆盖。
  • map.delete(key):按键名删除一项,类似 delete obj[key]。

Clear

  • map.clear():清空 Map。
  • mapSymbol.iterator:返回遍历所有项的迭代器,每项用一个键和值组成的
    二元数组表示。

Loop over

  • map.forEach(f)
  • for (let [key, value] of map) { f(value, key,
    map); } 。
1
2
3
4
5
6
7
8
9
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// 只想获取键名
for (let [key] of map) { ... }
// 只想获取键值
for (let [,value] of map) { ... }
  • map.keys():返回遍历所有键的迭代器。
  • map.values():返回遍历所有值的迭代器。
  • map.entries():返回遍历所有项的迭代器,就像 mapSymbol.iterator。实
    际上,它们就是同一个方法,不同名字。

Other

  • map.size:返回 Map 中项目的个数。

http://node.green/#Map