0

0

javascript的集合类型有哪些

青灯夜游

青灯夜游

发布时间:2022-04-11 12:03:58

|

3035人浏览过

|

来源于php中文网

原创

集合类型有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) 来添加新的元素。

立即学习Java免费学习笔记(深入)”;

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 — 原型 为映射返回对原型的引用
构造函数 返回映射中的元素数
Map 对象方法 描述
clear 从映射中移除所有元素
delete 从映射中移除指定的元素
forEach 对映射中的每个元素执行指定操作
get 返回映射中的指定元素
has 如果映射包含指定元素,则返回 true
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前端

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

46

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

178

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

51

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

92

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

532

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

171

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号