JavaScript의 컬렉션 유형은 무엇입니까?

세 가지 유형의 컬렉션 유형이 있습니다. 1. 맵 컬렉션은 키-값 쌍을 저장합니다. 키는 반복될 수 없지만 값은 반복될 수 있습니다. 2. 세트 유형. 3. 목록 유형 목록에 저장된 개체는 순서가 있고 반복 가능하며 쿼리 속도가 빠릅니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에는 집합, 목록, 맵의 세 가지 컬렉션 유형이 있습니다.

1. 맵(키-값 쌍, 고유 키, 고유하지 않은 값):

맵은 검색 속도가 매우 빠른 키-값 쌍 집합의 구조입니다. 배열의 배열을 전달하여 생성됩니다. .set(key,value)를 호출하여 새 요소를 추가합니다.

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

예를 들어, 반 친구들의 이름을 기준으로 해당 등급을 찾고 싶다고 가정해 보겠습니다. 이를 구현하기 위해 Array를 사용하는 경우 두 개의 배열이 필요합니다.

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

이름을 지정하고 해당 등급을 찾으려면, 먼저 이름 위치에서 해당 항목을 찾은 다음 점수에서 해당 점수를 검색해야 합니다. 배열이 길수록 시간이 더 오래 걸립니다.

Map을 이용하여 구현한다면 "이름"-"점수" 비교표만 있으면 되며, 테이블이 아무리 커도 검색속도가 느려지지 않습니다. 아래에.

다음과 같이 JavaScript로 지도를 작성하세요.

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

지도를 초기화하려면 2차원 배열이 필요하거나 빈 지도를 직접 초기화해야 합니다.

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

하나의 키는 하나의 값에만 대응할 수 있으므로 키에 값을 여러 번 추가하면 후속 값은 이전 값을 플러시합니다.

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

1) 속성 및 method

정의: 키/값 쌍의 모음입니다.

구문: ​​mapObj = new Map()

비고: 컬렉션의 키와 값은 모든 유형이 될 수 있습니다. 기존 키를 사용하여 컬렉션에 값을 추가하면 새 값이 이전 값을 대체합니다.

Map 객체 속성	Description
Constructor	지도를 생성하는 함수를 지정합니다.
Prototype — 프로토타입	지도의 프로토타입에 대한 참조를 반환합니다.
생성자	지도의 요소 수를 반환합니다.

지도 객체 방법	설명
clear	지도에서 모든 요소 제거
delete	다음에서 지정된 항목을 제거하세요. 요소의 맵
forEach	맵의 각 요소에 지정된 작업을 수행합니다
get	맵에 지정된 요소를 반환합니다
has	맵에 지정된 요소가 포함된 경우 true를 반환합니다. element
toString	지도의 문자열 표현을 반환합니다.
set	지도에 새 요소를 추가합니다.
valueOf	지정된 객체의 원래 값을 반환합니다.

// 如何将成员添加到 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!