• JavaScript 关联数组

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

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

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

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

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

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

      

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

    1. //first way to create associative array
    2. const person=[];
    3. person["firstname"] = "Mehvish";
    4. person["lastname"] = "Ashiq";
    5. person["age"] = 30;
    6. person["city"] = "Multan";
    7. person["email"] = "delfstack@example.com";
    8.  
    9. //second way to create associative array
    10. const person = {
    11.   firstname: "Mehvish",
    12.   lastname: "Ashiq",
    13.   age: 30,
    14.   city: "Multan",
    15.   email: "delfstack@example.com"
    16. };

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

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

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

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

    1. //to print in the browser
    2. document.write(person.firstname);//OUTPUT: Mehvish
    3. document.write(person['firstname']);//OUTPUT: Mehvish
    4. document.write(person[0]); //OUTPUT: undefined
    5. //to print on console
    6. console.log(person.firstname); //OUTPUT: Mehvish
    7. console.log(person[0]);//OUTPUT: undefined

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

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

    输出：

    1. "[firstname: Mehvish]"
    2. "[lastname: Ashiq]"
    3. "[age: 30]"
    4. "[city: Multan]"
    5. "[email: delfstack@example.com]"
    6. "[phone: 12334567]"
    '
    运行

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

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

    输出：

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

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

    1. //first way to create associative array using Map function
    2. const person= new Map();
    3. person.set("firstname", "Mehvish");
    4. person.set("lastname", "Ashiq");
    5. person.set("age", 30);
    6. person.set("city", "Multan");
    7. person.set("email", "delfstack@example.com");
    8.  
    9. //second way to create associative array using Map function
    10. const person = new Map([
    11.   ["firstname", "Mehvish"],
    12.   ["lastname", "Ashiq"],
    13.   ["age", 30],
    14.   ["city", "Multan"],
    15.   ["email", "delfstack@example.com"]
    16. ]);

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

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

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

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

    输出：

    1. "firstname = Mehvish"
    2. "lastname = Ashiq"
    3. "age = 30"
    4. "city = Multan"
    5. "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 关联数组

    1. //first way to create associative array
    2. const person=[];
    3. person["firstname"] = "Mehvish";
    4. person["lastname"] = "Ashiq";
    5. person["age"] = 30;
    6. person["city"] = "Multan";
    7. person["email"] = "delfstack@example.com";
    8.  
    9. //second way to create associative array
    10. const person = {
    11.   firstname: "Mehvish",
    12.   lastname: "Ashiq",
    13.   age: 30,
    14.   city: "Multan",
    15.   email: "delfstack@example.com"
    16. };

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

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

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

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

    1. //to print in the browser
    2. document.write(person.firstname);//OUTPUT: Mehvish
    3. document.write(person['firstname']);//OUTPUT: Mehvish
    4. document.write(person[0]); //OUTPUT: undefined
    5. //to print on console
    6. console.log(person.firstname); //OUTPUT: Mehvish
    7. console.log(person[0]);//OUTPUT: undefined

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

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

    输出：

    1. "[firstname: Mehvish]"
    2. "[lastname: Ashiq]"
    3. "[age: 30]"
    4. "[city: Multan]"
    5. "[email: delfstack@example.com]"
    6. "[phone: 12334567]"

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

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

    输出：

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

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

    1. //first way to create associative array using Map function
    2. const person= new Map();
    3. person.set("firstname", "Mehvish");
    4. person.set("lastname", "Ashiq");
    5. person.set("age", 30);
    6. person.set("city", "Multan");
    7. person.set("email", "delfstack@example.com");
    8.  
    9. //second way to create associative array using Map function
    10. const person = new Map([
    11.   ["firstname", "Mehvish"],
    12.   ["lastname", "Ashiq"],
    13.   ["age", 30],
    14.   ["city", "Multan"],
    15.   ["email", "delfstack@example.com"]
    16. ]);

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

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

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

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

    输出：

    1. "firstname = Mehvish"
    2. "lastname = Ashiq"
    3. "age = 30"
    4. "city = Multan"
    5. "email = delfstack@example.com"

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

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

    输出：

    1. "firstname"
    2. "lastname"
    3. "age"
    4. "city"
    5. "email"
    '
    运行

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

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

    输出：

    1. "Mehvish"
    2. "Ashiq"
    3. 30
    4. "Multan"
    5. "delfstack@example.com"
    '
    运行

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

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

  • 相关阅读:
    获取数据类型的方式和typescript is 类型谓词
    Uni-APP __css&JS
    Java实现数据结构——双链表
    css3自动吸附scroll-snap
    【精讲】vue框架 具名插槽、作用域插槽、默认插槽（内含所有源码）
    一文看懂推荐系统：特征交叉01：Factorized Machine (FM) 因式分解机
    【DS基础】栈与队列
    【LeetCode】234. 回文链表
    【位运算】把整数以二进制形式打印出来玩玩
    逆向物流：应对供应链最大的“未解决”挑战
  • 原文地址：https://blog.csdn.net/m0_63639281/article/details/126941789