javascript的集合類型有哪些及怎么用

這篇文章主要介紹了javascript的集合類型有哪些及怎么用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇javascript的集合類型有哪些及怎么用文章都會有所收獲，下面我們一起來看看吧。

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

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

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

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

Map是一組鍵值對的結(jié)構(gòu)，具有極快的查找速度。通過傳入數(shù)組的數(shù)組來建立。通過調(diào)用 .set(key,value) 來添加新的元素。

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

舉個例子，假設(shè)要根據(jù)同學(xué)的名字查找對應(yīng)的成績，如果用Array實現(xiàn)，需要兩個Array：

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

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

如果用Map實現(xiàn)，只需要一個“名字”-“成績”的對照表，直接根據(jù)名字查找成績，無論這個表有多大，查找速度都不會變慢。

用 JavaScript 寫一個 Map 如下：

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

初始化 Map 需要一個二維數(shù)組，或者直接初始化一個空 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 只能對應(yīng)一個 value，所以，多次對一個 key 放入 value，后面的值會把前面的值沖掉：

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

1）屬性和方法

定義：鍵/值對的集合。

語法：mapObj = new Map()

備注：集合中的鍵和值可以是任何類型。如果使用現(xiàn)有密鑰向集合添加值，則新值會替換舊值。

// 如何將成員添加到 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（無序、不能重復(fù)）：

Set和Map類似，也是一組key的集合，但不存儲value。由于key不能重復(fù)，所以，在Set中，沒有重復(fù)的key。

Set里存放的對象是無序，不能重復(fù)的，集合中的對象不按特定的方式排序，只是簡單地把對象加入集合中。

1）創(chuàng)建Set

Set 本身是一個構(gòu)造函數(shù)，調(diào)用構(gòu)造函數(shù)用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

關(guān)鍵詞　標(biāo)識符　= new Set();

例

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

Set 函數(shù)可以接受一個數(shù)組（或類似數(shù)組的對象）作為參數(shù)，用來進行數(shù)據(jù)初始化。

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

注：如果初始化時給的值有重復(fù)的，會自動去除。集合并沒有字面量聲明方式。

2）Set的屬性

常用的屬性就一個：size 　　返回 Set 實例的成員總數(shù)。

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

3）Set的方法

Set 實例的方法分為兩大類：操作方法（用于數(shù)據(jù)操作）和遍歷方法（用于遍歷數(shù)據(jù)）。

操作方法:

• add(value)　　　　添加數(shù)據(jù)，并返回新的 Set 結(jié)構(gòu)

• delete(value)　　　刪除數(shù)據(jù)，返回一個布爾值，表示是否刪除成功

• has(value)　　　　查看是否存在某個數(shù)據(jù)，返回一個布爾值

• clear()　　　　　　清除所有數(shù)據(jù)，沒有返回值

let set = new Set([1, 2, 3, 4, 4]);
// 添加數(shù)據(jù) 5
let addSet = set.add(5);
console.log(addSet); // Set(5) {1, 2, 3, 4, 5}
// 刪除數(shù)據(jù) 4s
let delSet = set.delete(4);
console.log(delSet); // true
// 查看是否存在數(shù)據(jù) 4
let hasSet = set.has(4);
console.log(hasSet); // false
// 清除所有數(shù)據(jù)
set.clear();
console.log(set); // Set(0) {}

遍歷方法:

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

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

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

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

• forEach()　　　使用回調(diào)函數(shù)遍歷每個成員

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（有序、可重復(fù)） ：

列表是一組有序的數(shù)據(jù)，每個列表中的數(shù)據(jù)項稱為元素。

List里存放的對象是有序的，同時也是可以重復(fù)的，List關(guān)注的是索引，擁有一系列和索引相關(guān)的方法，查詢速度快。因為往list集合里插入或刪除數(shù)據(jù)時，會伴隨著后面數(shù)據(jù)的移動，所有插入刪除數(shù)據(jù)速度慢。

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

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

1）List的方法：

• 定義的屬性有：

• listSize : 列表的元素個數(shù)

• pos： 列表的當(dāng)前位置

• 定義的方法有:

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

• insert(): 在現(xiàn)有元素后插入新元素

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

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

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

• clear(): 清空列表

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

• 移動元素：

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

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

• prev(): 將當(dāng)前位置后移一位

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

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

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

2）List的實現(xiàn)

• 使用數(shù)組實現(xiàn)一個列表，并初始化屬性值

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

• append(element) 添加元素

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

將記錄元素個數(shù)的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) 刪除元素

先調(diào)用find方法，查找元素的位置，如果存在返回true，不存在則會返回false;

如果存在，使用js數(shù)組操作方法splice刪除當(dāng)前元素，splice方法接收兩個參數(shù)，即要刪除的元素的索引和要刪除的個數(shù)；

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

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

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

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

function length() {
    return this.listSize;
}

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

該方法是將目標(biāo)元素插入到指定元素的后面，它接收兩個參數(shù)，即目標(biāo)元素element和指定元素after；

實現(xiàn)：先使用定義的find方法找到after的位置，然后使用splice方法在該位置的后一位插入目標(biāo)元素;

splice方法傳入三個參數(shù)，目標(biāo)值的位置，要刪除的數(shù)量，要插入的值（第二個參數(shù)為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() 清空列表

刪除列表，初始化數(shù)據(jù)

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;
};

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

創(chuàng)建手動迭代列表的一些方法，可以不用關(guān)心數(shù)據(jù)的內(nèi)部存儲方法，以實現(xiàn)對列表的遍歷。

//移動到最前面
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;
    };
};
//返回列表當(dāng)前的位置
function currPos() {
    return this.pos;
};
//移動到指定的位置
function moveTo(position) {
    this.pos = position;
};
//返回當(dāng)前元素的位置
function getElement() {
    return this.dataStore[this.pos];
};

關(guān)于“javascript的集合類型有哪些及怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“javascript的集合類型有哪些及怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。