javascript的集合型別有哪些

集合型別有3種：1、map型別， Map集合中儲存的是鍵值對，鍵不能重複，值可以重複；2、Set型別，Set中存放的物件是無序，不能重複的，集合中的物件不按特定的方式排序；3、List型別，List中存放的物件是有序，可重複的，其查詢速度。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript的集合型別有3種：set（集）、list（列表）和map（對映）。

1、Map（鍵值對、鍵唯一、值不唯一） ：

Map是一組鍵值對的結構，具有極快的查詢速度。通過傳入陣列的陣列來建立。通過呼叫 .set(key,value) 來新增新的元素。

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('Adam', 67); // 新增新的key-value

舉個例子，假設要根據同學的名字查詢對應的成績，如果用Array實現，需要兩個Array：

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

給定一個名字，要查詢對應的成績，就先要在 names 中找到對應的位置，再從 scores 取出對應的成績，Array越長，耗時越長。

如果用Map實現，只需要一個「名字」-「成績」的對照表，直接根據名字查詢成績，無論這個表有多大，查詢速度都不會變慢。

用 JavaScript 寫一個 Map 如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化 Map 需要一個二維陣列，或者直接初始化一個空 Map。

Map 具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 新增新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

由於一個 key 只能對應一個 value，所以，多次對一個 key 放入 value，後面的值會把前面的值沖掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

1）屬性和方法

定義：鍵/值對的集合。

語法：mapObj = new Map()

備註：集合中的鍵和值可以是任何型別。如果使用現有金鑰向集合新增值，則新值會替換舊值。

// 如何將成員新增到 Map，然後檢索它們
var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
m.set({x:1}, 3);

m.forEach(function (item, key, mapObj) {
    document.write(item.toString() + "<br />");
});

document.write("<br />");
document.write(m.get(2));

// Output:
// black
// red
// 2
// 3
//
// red

2、Set（無序、不能重複）：

Set和Map類似，也是一組key的集合，但不儲存value。由於key不能重複，所以，在Set中，沒有重複的key。

Set裡存放的物件是無序，不能重複的，集合中的物件不按特定的方式排序，只是簡單地把物件加入集合中。

1）建立Set

Set 本身是一個建構函式，呼叫建構函式用來生成 Set 資料結構。

關鍵詞　識別符號　= new Set();

例

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

Set 函數可以接受一個陣列（或類似陣列的物件）作為引數，用來進行資料初始化。

let i = new Set([1, 2, 3, 4, 4]);　　//會得到　　set{1, 2, 3, 4,}

注：如果初始化時給的值有重複的，會自動去除。集合並沒有字面量宣告方式。

2）Set的屬性

常用的屬性就一個：size 　　返回 Set 範例的成員總數。

let s = new Set([1, 2, 3]);
console.log( s.size ); // 3

3）Set的方法

Set 範例的方法分為兩大類：操作方法（用於資料操作）和遍歷方法（用於遍歷資料）。

操作方法:

• add(value)　　　　新增資料，並返回新的 Set 結構

• delete(value)　　　刪除資料，返回一個布林值，表示是否刪除成功

• has(value)　　　　檢視是否存在某個資料，返回一個布林值

• clear()　　　　　　清除所有資料，沒有返回值

let set = new Set([1, 2, 3, 4, 4]);
// 新增資料 5
let addSet = set.add(5);
console.log(addSet); // Set(5) {1, 2, 3, 4, 5}
// 刪除資料 4s
let delSet = set.delete(4);
console.log(delSet); // true
// 檢視是否存在資料 4
let hasSet = set.has(4);
console.log(hasSet); // false
// 清除所有資料
set.clear();
console.log(set); // Set(0) {}

遍歷方法:

Set 提供了三個遍歷器生成函數和一個遍歷方法。

• keys()　　　　 返回一個鍵名的遍歷器

• values()　　　 返回一個鍵值的遍歷器

• entries()　　　 返回一個鍵值對的遍歷器

• forEach()　　　使用回撥函數遍歷每個成員

let color = new Set(["red", "green", "blue"]);
for(let item of color.keys()){
 console.log(item);
}
// red
// green
// blue
for(let item of color.values()){
 console.log(item);
}
// red
// green
// blue
for(let item of color.entries()){
 console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
color.forEach((item) => {
 console.log(item)
})
// red
// green
// blue

3、List（有序、可重複） ：

列表是一組有序的資料，每個列表中的資料項稱為元素。

List裡存放的物件是有序的，同時也是可以重複的，List關注的是索引，擁有一系列和索引相關的方法，查詢速度快。因為往list集合裡插入或刪除資料時，會伴隨著後面資料的移動，所有插入刪除資料速度慢。

列表擁有描述元素位置的屬性，列表有前有後（front和end）。

使用next()方法可以從當前元素移動到下一個元素，使用next（） 可以從當前元素移動到下一個元素，使用prev()方法可以移動到當前元素的前一個元素，還可以使用moveTo(n)方法直接移動到指定位置

1）List的方法：

• 定義的屬性有：

  • listSize : 列表的元素個數

  • pos： 列表的當前位置

• 定義的方法有:

  • getElement(): 返回當前位置的元素

  • insert(): 在現有元素後插入新元素

  • append()： 在列表的尾部新增新元素

  • remove(): 從列表中刪除元素

  • length(): 返回列表中元素的個數

  • clear(): 清空列表

  • contains(): 判斷元素是否存在列表中

• 移動元素：

  • front(): 將列表的當前位置移動到第一個元素

  • end(): 將列表的當前位置移動到最後一個元素

  • prev(): 將當前位置後移一位

  • next(): 將當前位置前移一位

  • currPos(): 返回列表的當前位置

  • moveTo(): 將當前位置移動到指定位置

2）List的實現

• 使用陣列實現一個列表，並初始化屬性值

function List() {
    this.listSize = 0; //記錄列表元素的個數
    this.pos = 0; //記錄列表的位置
    this.dataStore = []; //儲存列表元素
}

• append(element) 新增元素

給列表尾部新增新元素的方法與棧的壓棧方法一樣；

將記錄元素個數的listSize加1，從而獲取到儲存元素的位置；再將元素新增到這個位置；

function append(element) {
    //讓列表的長度加1，再將元素填充到新增的位置
    this.dataStore[this.listSize++] = element;
}

• find(element) 查詢元素

首先遍歷列表，如果要查詢的元素存在列表中，則返回該元素的位置，未找到則返回-1

function find(element) {
    //遍歷列表
    for (let i = 0; i < this.dataStore.length; ++i) {
        //判斷列表中是否有該元素，存在則返回索引i
        if (this.dataStore[i] == element) {
            return i;
        };
    };
    //不存在返回-1
    return -1;
};

• remove(element) 刪除元素

先呼叫find方法，查詢元素的位置，如果存在返回true，不存在則會返回false;

如果存在，使用js陣列操作方法splice刪除當前元素，splice方法接收兩個引數，即要刪除的元素的索引和要刪除的個數；

刪除元素後，要將列表的長度減1；

function remove(element) {
    //呼叫定義的find方法查詢元素
    let fountAt = this.find(element);
    //元素存在
    if (fountAt > -1) {
        //刪除索引對應的值
        this.dataStore.splice(fountAt, 1);
        //列表少了一個元素，減1
        --this.listSize;
        //操作成功返回true
        return true;
    };
    //找不到元素返回false
    return false;
};

• length() 查詢列表中有多少元素

該方法返回列表中的元素，直接返回listSize的值

function length() {
    return this.listSize;
}

• insert(element, after) 向列表中插入元素

該方法是將目標元素插入到指定元素的後面，它接收兩個引數，即目標元素element和指定元素after；

實現：先使用定義的find方法找到after的位置，然後使用splice方法在該位置的後一位插入目標元素;

splice方法傳入三個引數，目標值的位置，要刪除的數量，要插入的值（第二個引數為0表示刪除0個，不刪除元素）;

操作成功返回true, 未找到指定元素則返回false

function insert(element, after) {
    let insertPos = this.find(after);
    if (insertPos > -1) {
        this.dataStore.splice(insertPos + 1, 0, element);
        ++this.listSize;
        return true;
    };
    return false;
}

• clear() 清空列表

刪除列表，初始化資料

function clear() {
    delete this.dataStore;
    this.dataStore = [];
    this.listSize = 0;
    this.pos = 0;
};

• contains(element) 判斷元素是否存在列表中

與find方法類似，也可直接使用find方法查詢，找到返回true，不存在返回false

function contains(element) {
	for (let i = 0; i < this.dataStore.length; ++i) {
        if (this.dataStore[i] == element) {
            return true;
        };
    };
    return false;
};

• 迭代器：移動列表中的元素

建立手動迭代列表的一些方法，可以不用關心資料的內部儲存方法，以實現對列表的遍歷。

//移動到最前面
function front() {
    this.pos = 0;
};
//移動到最後面
function end() {
    this.pos = this.listSize - 1;
};
//往後移一位
function prev() {
    if (this.pos > 0) {
        --this.pos;
    };
};
//往前移一位
function next() {
    if (this.pos < this.listSize-1) {
        ++this.pos;
    };
};
//返回列表當前的位置
function currPos() {
    return this.pos;
};
//移動到指定的位置
function moveTo(position) {
    this.pos = position;
};
//返回當前元素的位置
function getElement() {
    return this.dataStore[this.pos];
};

【相關推薦：、】

以上就是javascript的集合型別有哪些的詳細內容，更多請關注TW511.COM其它相關文章！