JavaScript 集合基本操作

參考 MDN

集合

Array

1. 2種創建數組的方式

var fruits = [] ;
var friuits = new Array();

2. 遍歷

fruits.forEach(function (item, index, array){
    console.log(item, index);
});
// Apple 0
// Banana 1
for(var i in friuits){
console.log(friuits[i]);
}
for(var i=0;i<friuits.length;i++){
console.log(friuits[i]);
}
for(var value of friuits){
console.log(value);
}  

3. 基本操作

操作	代碼	說明
添加元素到數組的末尾	fruits.push('Orange')	返回數組長度
添加元素到數組的頭部	fruits.unshift('Strawberry')	返回數組長度
刪除頭部元素	fruits.shift();	返回頭部元素
刪除尾部元素	fruits.pop();	返回尾部元素
找出某個元素在數組中的索引	fruits.indexOf('Banana');	返回下標
通過索引刪除某個元素	fruits.splice(index, 1);	返回被刪除的元素
復制數組	var shallowCopy = fruits.slice(0,length);	返回指定范圍內元素組成的新數組
生成數組	Array.from()	返回Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例。

4. 根據索引刪除元素的例子

/*    splice(start: number, deleteCount: number, ...items: T[]): T[]; */

var fruits = ["apple","b","c","d"] ;
      console.log("array is : ");
      fruits.forEach(function (item, index, array){
          console.log(item, index);
      });
      var index = fruits.indexOf("b");
      fruits.splice(index,1);
      console.log("array is : ");
      fruits.forEach(function (item, index, array){
          console.log(item, index);
      });

5. Array.from()使用例子

var fruits = ["apple","b","c","d"] ;
      var f = Array.from(fruits);
      f.forEach(function (item, index, array){
          console.log(item, index);
      });
//apple 0
//b 1
//c 2
//d 3

var f = Array.from("hello");
  f.forEach(function (item, index, array){
      console.log(item, index);
  });
//h
//e
//l
//l
//o    

Array.from()還可以用於Set,Map

Set

1. 源碼定義

interface Set<T> {
    add(value: T): this;
    clear(): void;
    delete(value: T): boolean;
    forEach(callbackfn: (value: T, value2: T, set: Set<T>) => void, thisArg?: any): void;
    has(value: T): boolean;
    readonly size: number;
}

2. 基本操作說明

操作	代碼	說明
創建	new Set([iterable]);	可以放入數組，Set, Map來初始化
添加元素	set.add(5)	返回Set本身
刪除元素	set.delete(5))	返回bool
判斷是否有	set.has(5)	返回bool
長度	set.size	注意與數組長度區別，數組是length
清空	set.clear()	返回void

3. 遍歷例子

 let mySet = new Set([1,3,4,2,5]);
 //遍歷
 for (let item of mySet) console.log(item);
 for (let item of mySet.keys()) console.log(item);
 for (let item of mySet.values()) console.log(item);
 //三個遍歷結果一樣： 1 3 4 2 5

Map

1. 源碼定義

interface Map<K, V> {
    clear(): void;
    delete(key: K): boolean;
    forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void;
    get(key: K): V | undefined;
    has(key: K): boolean;
    set(key: K, value: V): this;
    readonly size: number;
}

2. 基本操作說明

操作	代碼	說明
創建	var myMap = new Map();
添加	myMap.set(1,"hello")	返回map本身
獲得	myMap.get(1)	返回對應的value
判斷是否存在鍵	myMap.has(1)	返回bool
根據鍵刪除	myMap.delete(1)	返回bool

3. 遍歷

for (var key of myMap.keys()) {
  console.log(key);
}

for (var value of myMap.values()) {
  console.log(value);
}

for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

4. 特殊說明

任何一個NaN 都不等於 NaN, 但是NaN可以作為Map的鍵，而且是唯一的。
undefined等於undefined ; 所有變量初始值都為undefined

  var myMap = new Map();
  myMap.set(NaN, "not a number");
  console.log(myMap.get(NaN));
  // "not a number"
  var otherNaN = Number("foo");
  console.log(myMap.get(otherNaN));
  // "not a number"