JavaScript のコレクション型とは何ですか?-フロントエンドQ&A-php.cn

コレクションタイプには 3 つのタイプがあります: 1. マップタイプ. マップコレクションはキーと値のペアを保存します. キーは繰り返すことはできませんが、値は繰り返すことができます. 2. セットタイプ. オブジェクトセットに格納されているオブジェクトは順序付けされておらず、繰り返すことができません、コレクション内のオブジェクトは特定の方法で並べ替えられていません; 3. リストタイプ、リストに格納されているオブジェクトは順序付けされており、繰り返し可能であり、クエリ速度が高速です。

JavaScript のコレクション型とは何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript には、set、list、map の 3 つのコレクションタイプがあります。

1. マップ (キーと値のペア、一意のキー、一意でない値):

マップは、一連のキーと値のペア構造です。これは非常に高速な検索速度です。配列の配列を渡すことによって作成されます。 .set(key,value) を呼び出して新しい要素を追加します。

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

ログイン後にコピー

たとえば、クラスメートの名前に基づいて対応する成績を見つけたいとします。配列を使用して実装する場合は、2 つの配列が必要です:

var names = [&#39;Michael&#39;, &#39;Bob&#39;, &#39;Tracy&#39;];
var scores = [95, 75, 85];

ログイン後にコピー

名前を指定すると、対応する成績を見つけたい場合は、まず名前内の対応する位置を見つけてから、スコアから対応する結果を取得する必要があります。配列が長いほど、時間がかかります。

Map を使用して実装した場合、必要なのは「名前」と「スコア」の比較テーブルだけであり、名前に基づいて結果を直接検索できます。テーブルがどんなに大きくても、検索速度は遅くなります。減速する。

次のように JavaScript でマップを作成します。

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

ログイン後にコピー

マップの初期化には 2 次元配列が必要です。または、空のマップを直接初期化します。

Map には次のメソッドがあります:

var m = new Map(); // 空Map
m.set(&#39;Adam&#39;, 67); // 添加新的key-value
m.set(&#39;Bob&#39;, 59);
m.has(&#39;Adam&#39;); // 是否存在key &#39;Adam&#39;: true
m.get(&#39;Adam&#39;); // 67
m.delete(&#39;Adam&#39;); // 删除key &#39;Adam&#39;
m.get(&#39;Adam&#39;); // undefined

ログイン後にコピー

1 つのキーには 1 つの値しか対応できないため、キーに値を複数回入力すると、後続の値が前の値をフラッシュします。

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

ログイン後にコピー

1) プロパティとメソッド

定義: キーと値のペアのコレクション。

構文: mapObj = new Map()

注: コレクション内のキーと値は任意の型にすることができます。既存のキーを使用してコレクションに値を追加すると、古い値が新しい値に置き換えられます。

#マップオブジェクトプロパティ説明コンストラクターPrototype — PrototypeConstructor


マッピングを作成する関数を指定します
マッピングのプロトタイプへの参照を返します
マップ内の要素の数を返します

##マップオブジェクトのメソッド説明clearマップからすべての要素を削除しますマップから削除しますマップ指定された要素マップ内の各要素に対して指定された操作を実行しますマップ内の指定された要素を返しますマップに指定された要素が含まれている場合は、trueマップの文字列表現を返しますマップに新しい要素を追加します指定されたオブジェクトのプリミティブ値を返します##

// 如何将成员添加到 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 中国語 Web サイトの他の関連記事を参照してください。