JavaScript 关联数组

已于 2022-09-23 15:43:12 修改
阅读量1.3k 收藏 2
点赞数 1
文章标签： javascript 散列表 数据结构
于 2022-09-19 20:57:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63639281/article/details/126941789
版权

我们将学习如何使用对象和 Map() 实现 JavaScript 关联数组

尽管 JavaScript 除了对象之外没有关联数组/哈希表。但是还有其他方法可以做到这一点。

在深入了解详细实现之前，有必要了解关联数组、映射、字典和哈希表之间的区别。虽然这些都是用来保存键值对数据的，但还是有区别的。

     1.关联数组是一种数据结构概念，包含（键、值）对中的数据。它也被称为抽象数据类型，就像 Map 和字典一样。这里的索引是字符串，而不是整数。有不同的方法来实现关联数组

    2.字典还保存（键，值）对中的数据，与关联数组相同。但是，它的索引是整数。

    3.Map 也有键值对的数据。它会记住键的原始插入顺序。

  

    使用对象创建JavaScript关联数组 使用对象创建JavaScript关联数组

//first way to create associative array
const person=[];
person["firstname"] = "Mehvish";
person["lastname"] = "Ashiq";
person["age"] = 30;
person["city"] = "Multan";
person["email"] = "delfstack@example.com";

//second way to create associative array
const person = {
  firstname: "Mehvish",
  lastname: "Ashiq",
  age: 30,
  city: "Multan",
  email: "delfstack@example.com"
};

我们在上面的代码中创建了一个用作关联数组的 JavaScript 对象。firstname、lastname、age、city 和 email 是键（索引）。这些值是 Mehvish、Ashiq、30、Multan、delfstack@example.com。

假设我们要添加一个新的键值对作为 phone:12334567。为此，我们可以使用 Object.assign() 函数。它将第二个对象复制到第一个对象的末尾

//Here the second object is {phone:12334567}
//Here the first object is person
Object.assign(person, {phone:12334567});

我们可以通过定位键（索引）来访问每个键的值。请记住，索引是字符串，而不是数字。所以，你不能在这里像 person[0] 一样访问（如果你使用字典，你可以使用 person[0]）

//to print in the browser
document.write(person.firstname);//OUTPUT: Mehvish
document.write(person['firstname']);//OUTPUT: Mehvish
document.write(person[0]); //OUTPUT: undefined
//to print on console
console.log(person.firstname); //OUTPUT: Mehvish
console.log(person[0]);//OUTPUT: undefined

我们可以使用 for 循环打印完整的关联数组

//print complete associative array using for look
for(var key in person){
  var value = person[key];
  document.write(value);
  document.write(" ");
}

输出：

"[firstname: Mehvish]"
"[lastname: Ashiq]"
"[age: 30]"
"[city: Multan]"
"[email: delfstack@example.com]"
"[phone: 12334567]"

打印整个关联数组的更优化方法是 Object.entries() 方法，它采用对象数据类型的一个参数。你可以阅读this了解更多 Object 的功能

//print complete associative array using for look
let completeAssociateArray = Object.entries(person); 
console.log(completeAssociateArray);

输出：

[["firstname", "Mehvish"], ["lastname", "Ashiq"], ["age", 30], ["city", "Multan"], ["email", "delfstack@example.com"], ["phone", 12334567]]

使用Map()选数创建JavaScript关联数组 

//first way to create associative array using Map function
const person= new Map();
person.set("firstname", "Mehvish");
person.set("lastname", "Ashiq");
person.set("age", 30);
person.set("city", "Multan");
person.set("email", "delfstack@example.com");

//second way to create associative array using Map function
const person = new Map([
  ["firstname", "Mehvish"],
  ["lastname", "Ashiq"],
  ["age", 30],
  ["city", "Multan"],
  ["email", "delfstack@example.com"]
]);

使用 get(key) 方法，我们可以获得一个特定的值。

person.get("city"); //output is "Multan"

显示整个关联数组键值对。

for (const [key, value] of person.entries()) {
  console.log(key + ' = ' + value)
}

输出：

"firstname = Mehvish"
"lastname = Ashiq"
"age = 30"
"city = Multan"
"email = delfstack@example.com"
  • report this ad
  3.  贴士文章
  5.  JavaScript 贴士
  7.  JavaScript 关联数组和哈希表

JavaScript 关联数组和哈希表

JavaScript JavaScript Hash Table

创建时间: May-05, 2022

  

  1. 使用对象创建 JavaScript 关联数组
  2. 使用 Map() 函数创建 JavaScript 关联数组
  3. 使用 JavaScript 对象实现哈希表

我们将学习如何使用对象和 Map() 实现 JavaScript 关联数组和哈希表。

风水2023年的颜色提示 fs

Video Player is loading.

Pause

Unmute

Loaded: 29.45%

Remaining Time -0:34

ShareFullscreen风水2023年的颜色提示 fs

尽管 JavaScript 除了对象之外没有关联数组/哈希表。但是还有其他方法可以做到这一点。

在深入了解详细实现之前，有必要了解关联数组、映射、字典和哈希表之间的区别。虽然这些都是用来保存键值对数据的，但还是有区别的。

  1. 关联数组是一种数据结构概念，包含（键、值）对中的数据。它也被称为抽象数据类型，就像 Map 和字典一样。这里的索引是字符串，而不是整数。有不同的方法来实现关联数组；哈希表就是其中之一。
  2. 字典还保存（键，值）对中的数据，与关联数组相同。但是，它的索引是整数。
  3. Map 也有键值对的数据。它会记住键的原始插入顺序。
  4. 哈希表就是使用哈希方法在内存中排列数据。它是模拟关联数组的方法之一。

使用对象创建 JavaScript 关联数组

//first way to create associative array
const person=[];
person["firstname"] = "Mehvish";
person["lastname"] = "Ashiq";
person["age"] = 30;
person["city"] = "Multan";
person["email"] = "delfstack@example.com";

//second way to create associative array
const person = {
  firstname: "Mehvish",
  lastname: "Ashiq",
  age: 30,
  city: "Multan",
  email: "delfstack@example.com"
};

我们在上面的代码中创建了一个用作关联数组的 JavaScript 对象。firstname、lastname、age、city 和 email 是键（索引）。这些值是 Mehvish、Ashiq、30、Multan、delfstack@example.com。

假设我们要添加一个新的键值对作为 phone:12334567。为此，我们可以使用 Object.assign() 函数。它将第二个对象复制到第一个对象的末尾。

//Here the second object is {phone:12334567}
//Here the first object is person
Object.assign(person, {phone:12334567});

我们可以通过定位键（索引）来访问每个键的值。请记住，索引是字符串，而不是数字。所以，你不能在这里像 person[0] 一样访问（如果你使用字典，你可以使用 person[0]）。

//to print in the browser
document.write(person.firstname);//OUTPUT: Mehvish
document.write(person['firstname']);//OUTPUT: Mehvish
document.write(person[0]); //OUTPUT: undefined
//to print on console
console.log(person.firstname); //OUTPUT: Mehvish
console.log(person[0]);//OUTPUT: undefined

我们可以使用 for 循环打印完整的关联数组。

//print complete associative array using for look
for(var key in person){
  var value = person[key];
  document.write(value);
  document.write(" ");
}

输出：

"[firstname: Mehvish]"
"[lastname: Ashiq]"
"[age: 30]"
"[city: Multan]"
"[email: delfstack@example.com]"
"[phone: 12334567]"

打印整个关联数组的更优化方法是 Object.entries() 方法，它采用对象数据类型的一个参数。你可以阅读 this 了解更多 Object 的功能。

//print complete associative array using for look
let completeAssociateArray = Object.entries(person); 
console.log(completeAssociateArray);

输出：

[["firstname", "Mehvish"], ["lastname", "Ashiq"], ["age", 30], ["city", "Multan"], ["email", "delfstack@example.com"], ["phone", 12334567]]

使用 Map() 函数创建 JavaScript 关联数组

//first way to create associative array using Map function
const person= new Map();
person.set("firstname", "Mehvish");
person.set("lastname", "Ashiq");
person.set("age", 30);
person.set("city", "Multan");
person.set("email", "delfstack@example.com");

//second way to create associative array using Map function
const person = new Map([
  ["firstname", "Mehvish"],
  ["lastname", "Ashiq"],
  ["age", 30],
  ["city", "Multan"],
  ["email", "delfstack@example.com"]
]);

使用 get(key) 方法，我们可以获得一个特定的值。

person.get("city"); //output is "Multan"

显示整个关联数组键值对。

for (const [key, value] of person.entries()) {
  console.log(key + ' = ' + value)
}

输出：

"firstname = Mehvish"
"lastname = Ashiq"
"age = 30"
"city = Multan"
"email = delfstack@example.com"

使用 keys() 函数仅打印键。

for (const key of person.keys()) {
  console.log(key)
}

输出：

"firstname"
"lastname"
"age"
"city"
"email"

仅使用 values() 函数获取值。

for (const value of person.values()) {
  console.log(value)
}

输出：

"Mehvish"
"Ashiq"
30
"Multan"
"delfstack@example.com"

我们可以使用 delete(key) 删除一个元素；如果成功删除，则返回 true。如果元素与给定键相关联，则 has(key) 返回 true，而 clear() 删除所有键值对。

如需详细了解，你可以访问这页面。如果你正在寻找哈希表的实现，你可以使用 mao() 函数，但我们使用 JavaScript 对象来实现哈希表。

遇上日落
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习（九十二）—关联数组的基本操作
道阻且长，行则将至。
07-28 1228
JavaScript学习（九十二）—关联数组的基本操作 王同学的每天进步一点点系列！！！ 一、关联数组的定义 定义：所谓关联数组，就是指数组元素的下标为字符型 二、关联数组的创建方式 1）定义一个空数组 var arr=[]; 2）为这个数组赋值 如 arr[‘下标名称’]=值； 三、关联数组的基本操作 查：数组名称[‘键’] 注意事项：关联数组不可以使用length属性获取数组的长度 ...
JavaScript关联数组用法分析【概念、定义、遍历】
01-19
本文实例讲述了JavaScript关联数组用法。分享给大家供大家参考，具体如下： 基本概念： “关联数组”是一种具有特殊索引方式的数组。不仅可以通过整数来索引它，还可以使用字符串或者其他类型的值（除了NULL）来索引...
Javascript 关联数组简介
allway2的博客
11-16 2920
关联数组是一组键值对和用户根据需要修改的动态对象。当用户为数据类型为 Array 的键赋值时，它会转换为一个对象，并失去以前数据类型的属性和方法。关联数组使用字符串而不是数字作为索引。在这里，我们需要了解 Javascript 不支持关联数组，但是由于 javascript 中的所有数组都是对象，并且 javascript 的对象语法有助于模仿关联数组。 句法： <name of the array> = {key1:’value1’, key2:’value2’, key3:’valu
JavaScript学习（九十二）—关联数组的基本操作，2024年最新
最新发布
2401_83974590的博客
04-04 461
一、关联数组的定义定义：所谓关联数组，就是指数组元素的下标为字符型二、关联数组的创建方式1）定义一个空数组 var arr=[];2）为这个数组赋值 如 arr[‘下标名称’]=值；
JavaScript中关联数组的用法分析
<Glad to meet you />
08-25 9945
前言 最近用到了JavaScript中的关联数组，关联数组因为有key值的索引，所以在数组查找中比较便利，同时也使得相应的代码算法实现显得更清晰，易读易维护。下面是JavaScript中关联数组的一些用法分析。 正文 一.关联数组 １. 关联数组定义 // 定义空数组 var arr = []; //or var arr = {}; 2. 关联数组赋值 //在定义时同时赋值 v
javascript关联数组
weixin_33694172的博客
08-04 237
原文地址：http://wyllife.blog.163.com/blog/static/4116390120115210038676/ 一.关联数组(hash数组)标准javascript 是内含支持hash关联数组，经查找资料并测试，有关标准javascript内含的hash关联数组操作备忘如下 １。Hash关联数组定义 // 定义空数组 myhash = { } // 直接定义数组 ...
关于JavaScript中的关联数组分析
10-27
JavaScript中的关联数组，也常被称为对象（Object），是语言特性的一种独特表现形式，它允许我们以键值对的形式存储数据。这种数据结构不同于传统的索引数组，它不需要连续的整数索引，而是使用字符串作为键来标识和...
JavaScript中的关联数组问题
10-24
主要介绍了JavaScript中的关联数组问题的相关资料,需要的朋友可以参考下
JavaScript 以对象为索引的关联数组
10-29
JavaScript中的关联数组是一种非常强大的数据结构，它允许我们将任意类型的值作为数组的索引来存储数据。这种特性使得JavaScript的对象（Object）在很多情况下被用作类似关联数组的角色，尤其是在处理JSON数据时。...
javascript基础
Karley_baby的博客
12-06 144
认识js，js基础
js中的关联数组与普通数组详解
12-11
var privArr = []; privArr['staProjQueryGrid'] = [{ btn_id : 'but_add', roles : ['2001','2005'] }] console.log(privArr,privArr.staProjQueryGrid[0].btn_id) 第一行是定义一个数组priArr，第二行是给这个数组添加一个属性staProjQueryGird，这个属性值是一个数组。打印结果是  but_add var unPrivArr = [];//创建一个空数组并赋给unPrivArr unPrivArr['1000
javascript 一个数组对象字段和另一个数组对象字段关联操作
onlylele的博客
07-05 2313
1、比较两个数组对象,取出不同的值 var array1 = [ {"Num": "A " },{"Num": "B" }]; var array2 = [ {"Num": "A ","Name": "t1 " }, {"Num": "B","Name": "t2"}, {"Num": "C " ,"Name": "t3 "}]; var result = []; for(var i = 0...
JS关联数组的定义
weixin_30325793的博客
04-24 829
方法一： // 用Array 定义数组myhash = new Array();或者myhash=[]myhash[”key1″] = “val1″;myhash[”key2″] = “val2″; 方法二： 以对象的格式显示定义 var myArray = {"a" : "Athens", "b" : "Belgrade", "c" : "Cairo" }; 转载于:...
JavaScript学习（九十二）—关联数组的基本操作，想跳槽的朋友必看
2401_84007015的博客
04-04 363
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
javascript关联数组用法总结
yuanmei1986的博客
12-25 3619
Hash关联数组定义代码如下 // 定义空数组 myhash = { }// 直接定义数组 myhash = {"key1":"val1","key2":"val2" }// 用Array 定义数组 myhash = new Array(); myhash["key1"] = "val1"; myhash["key2"] = "val2";向Hash关联数组添加键值代码如下 /
js中数组与关联数组
轩逸云的博客
11-30 2342
常规数组以非负整数作为下标，而关联数组则用字符串作为下标。 JavaScript是一种非类型语言，因此数组元素不必具有相同的类型。
javascript中讨论关联数组和对象的区别
helloword_chen的博客
10-31 2988
数组是批量管理多个数据的存储空间而统一起的一个名字，而对象是程序中描述现实中的一个物体的属性和功能的结构。数组存在的形式是在windows之外的一个空间的引用类型的对象。而windows只是存储了数组的地址值，探究其原理不难看出数值也是属于对象。在JS中一切都是对象。 关联数组是指每个元素自定义的字符串的下标的数组，由于是自定义的下标所以关联数组的length属性没有效果。 那么要遍历关联数组
javascript中的关联数组
热门推荐
xiyoki的博客
04-04 1万+
含义： “关联数组”是一种具有特殊索引方式的数组。不仅可以通过整数来索引它，还可以使用字符串或者其他类型的值（除了NULL）来索引它。 关联数组和数组类似，由以名称作为键的字段和方法组成。 它包含标量数据，可用索引值来单独选择这些数据，和数组不同的是， 关联数组的索引值不是非负的整数而是任意的标量。这些标量称为Keys，可以在以后用于检索数组中的数值。 关联数组的元
js中关联数组和索引数组的区别
suandfei的博客
09-25 4490
1. 索引数组 就是数组的下标是数字其实这是关联数组的简写方式 举个例子 arr[0] 其实他是arr[“0”] 的简写方式 所以索引数组的本质上是关联数组 2.关联数组 关联数组的定义就是数组里面的下标为字符串 例如 arr[“index”] 可以简写为arr.index 这时候有人会问为什么上面的arr[“0”]不简写为arr.0 有一个很重要的原因就是 和js里面的小数冲突了 所以简写方式...
js 关联数组转字符串
11-10
以下是两种将JS关联数组转换为字符串的方法： 1. 使用for循环和字符串拼接的方式： ```javascript let arr = {name: "John", age: 30, city: "New York"}; let str = ""; for (let key in arr) { str += key + ":" + arr[key] + ","; } str = str.substring(0, str.length - 1); // 去掉最后一个逗号 console.log(str); // 输出：name:John,age:30,city:New York ``` 2. 使用toString()方法： ```javascript let arr = {name: "John", age: 30, city: "New York"}; console.log(Object.entries(arr).toString()); // 输出：name,John,age,30,city,New York ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值