首頁 web前端 前端問答 javascript的集合類型有哪些

javascript的集合類型有哪些

Apr 11, 2022 pm 12:03 PM
javascript

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

javascript的集合類型有哪些

本教學操作環境: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 物件屬性描述
建構子指定建立映射的函數
Prototype — 原型為映射傳回對原型的參考
建構子傳回映射中的元素數
##從映射中移除指定的元素forEach對映射中的每個元素執行指定操作##gethastoStringsetvalueOf#
// 如何将成员添加到 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视频教程web前端

以上是javascript的集合類型有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

See all articles
#Map 物件方法描述
#clear從映射中移除所有元素
#delete
傳回映射中的指定元素
如果對應包含指定元素,則傳回true
傳回映射的字串表示形式
新增一個新元素到映射
傳回指定物件的原始值