Welche Sammlungstypen gibt es in JavaScript?

Es gibt drei Arten von Sammlungstypen: 1. Der Kartentyp speichert Schlüssel-Wert-Paare, die Werte können jedoch wiederholt werden sind ungeordnet und können nicht wiederholt werden. 3. Die in der Liste gespeicherten Objekte sind geordnet und wiederholbar, und ihre Abfragegeschwindigkeit ist hoch.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

In JavaScript gibt es drei Sammlungstypen: Set, Liste und Karte.

1. Karte (Schlüssel-Wert-Paar, eindeutiger Schlüssel, nicht eindeutiger Wert):

Karte ist eine Struktur aus einer Reihe von Schlüssel-Wert-Paaren mit extrem schneller Suchgeschwindigkeit. Erstellt durch Übergabe eines Arrays von Arrays. Fügen Sie neue Elemente hinzu, indem Sie .set(key,value) aufrufen.

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

Angenommen, Sie möchten die entsprechenden Noten basierend auf den Namen der Klassenkameraden finden. Wenn Sie Array zur Implementierung verwenden, benötigen Sie zwei Arrays:

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

Wenn Sie einen Namen angeben, möchten Sie die entsprechenden Noten finden. Sie müssen zuerst die Entsprechung in der Namensposition finden und dann die entsprechenden Ergebnisse aus den Bewertungen abrufen. Je länger das Array, desto länger dauert es.

Wenn Sie Map zur Implementierung verwenden, benötigen Sie nur eine Vergleichstabelle „Name“ – „Score“ und können direkt anhand des Namens nach Scores suchen. Unabhängig davon, wie groß die Tabelle ist, wird die Suchgeschwindigkeit nicht langsamer runter.

Schreiben Sie eine Karte in JavaScript wie folgt:

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

Für die Initialisierung der Karte ist ein zweidimensionales Array erforderlich, oder Sie können direkt eine leere Karte initialisieren.

Map verfügt über die folgenden Methoden:

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

Da ein Schlüssel nur einem Wert entsprechen kann, wird der vorherige Wert durch den nachfolgenden Wert ausgewaschen, wenn Sie mehrmals einen Wert in einen Schlüssel eingeben:

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

1) Eigenschaften und Methoden

Definition: Eine Sammlung von Schlüssel/Wert-Paaren.

Syntax: mapObj = new Map()

Bemerkungen: Die Schlüssel und Werte in der Sammlung können von beliebigem Typ sein. Wenn Sie mithilfe eines vorhandenen Schlüssels einen Wert zur Sammlung hinzufügen, ersetzt der neue Wert den alten Wert. Eigenschaften des Kartenobjekts

Konstrukteur Gibt die Anzahl der Elemente in der Karte zurück Kartenobjektmethode Beschreibung clearAlle Elemente aus der Karte entfernen löschenEntfernen Sie das angegebene von die Karte des Elements forEachFührt die angegebene Operation für jedes Element in der Karte ausgetGibt das angegebene Element in der Karte zurückhasGibt true zurück, wenn die Karte das angegebene enthält elementtoStringGibt die Zeichenfolgendarstellung der Karte zurücksetFügt der Karte ein neues Element hinzuvalueOfGibt den ursprünglichen Wert des angegebenen Objekts zurück

// 如何将成员添加到 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前端】

Das obige ist der detaillierte Inhalt vonWelche Sammlungstypen gibt es in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!