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

創(chuàng)新互聯(lián)建站致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信平臺(tái)小程序開發(fā)、公眾號(hào)商城、等建站開發(fā)，創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

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

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

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

1、Map（鍵值對(duì)、鍵唯一、值不唯一） ：

Map是一組鍵值對(duì)的結(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

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

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

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

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

用 JavaScript 寫一個(gè) Map 如下：

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

初始化 Map 需要一個(gè)二維數(shù)組，或者直接初始化一個(gè)空 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

由于一個(gè) key 只能對(duì)應(yīng)一個(gè) value，所以，多次對(duì)一個(gè) key 放入 value，后面的值會(huì)把前面的值沖掉：

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

1）屬性和方法

定義：鍵/值對(duì)的集合。

語法：mapObj = new Map()

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

Map 對(duì)象屬性	描述
構(gòu)造函數(shù)	指定創(chuàng)建映射的函數(shù)
Prototype — 原型	為映射返回對(duì)原型的引用
構(gòu)造函數(shù)	返回映射中的元素?cái)?shù)

Map 對(duì)象方法	描述
clear	從映射中移除所有元素
delete	從映射中移除指定的元素
forEach	對(duì)映射中的每個(gè)元素執(zhí)行指定操作
get	返回映射中的指定元素
has	如果映射包含指定元素，則返回 true
toString	返回映射的字符串表示形式
set	添加一個(gè)新建元素到映射
valueOf	返回指定對(duì)象的原始值

// 如何將成員添加到 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的集合，但不存儲(chǔ)value。由于key不能重復(fù)，所以，在Set中，沒有重復(fù)的key。

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

1）創(chuàng)建Set

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

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

例

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

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

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

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

2）Set的屬性

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

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

3）Set的方法

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

操作方法:

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

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

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

• 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 提供了三個(gè)遍歷器生成函數(shù)和一個(gè)遍歷方法。

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

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

• entries()　　　 返回一個(gè)鍵值對(duì)的遍歷器

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

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ù)，每個(gè)列表中的數(shù)據(jù)項(xiàng)稱為元素。

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

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

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

1）List的方法：

• 定義的屬性有：

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

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

• 定義的方法有:

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

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

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

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

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

• clear(): 清空列表

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

• 移動(dòng)元素：

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

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

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

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

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

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

2）List的實(shí)現(xiàn)

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

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

• append(element) 添加元素

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

將記錄元素個(gè)數(shù)的listSize加1，從而獲取到存儲(chǔ)元素的位置；再將元素添加到這個(gè)位置；

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，不存在則會(huì)返回false;

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

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

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

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

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

function length() {
    return this.listSize;
}

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

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

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

splice方法傳入三個(gè)參數(shù)，目標(biāo)值的位置，要?jiǎng)h除的數(shù)量，要插入的值（第二個(gè)參數(shù)為0表示刪除0個(gè)，不刪除元素）;

操作成功返回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;
};

• 迭代器：移動(dòng)列表中的元素

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

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

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

網(wǎng)站題目：javascript的集合類型有哪些及怎么用
URL標(biāo)題：http://aaarwkj.com/article18/pegidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、電子商務(wù)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)