前端js 数据结构:对象 object、数组Array 、Map 的创建、增删改 / 遍历数据

目录

  • 前端js 数据结构:对象、数组、Map 的使用
  • 1 对象(object)
    • 1.1 创建对象
      • 1.1.1 对象字面量(最常用): {}
      • 1.1.2 使用 new 关键字和对象构造函数
      • 1.1.3 Object.create()
    • 1.2 修改对象
      • 1.2.1 直接赋值:对象的属性名直接赋值
      • 1.2.2 点号/方括号访问属性
      • 1.2.3 将属性复制到目标对象:Object.assign()
      • 1.2.4 解构赋值:{...obj, 属性: value}
    • 1.3 删除对象属性:delete obj.属性
    • 1.4 获取对象的数据
      • 1.4.1 获取对象属性数量:Object.keys(obj).length
      • 1.4.2 遍历获取对象的数据
  • 2 数组(Array)
    • 2.1 创建数组
      • 2.1.1 字面量方式(常用):[ ]
      • 2.1.2 Array 构造函数
    • 2.2 修改数组
      • 2.2.1 修改数组(添加/修改):push()、unshift()、splice()、直接赋值、使用扩展运算符
    • 2.3 删除数据
      • 2.3.1 删除数据: splice()、pop()、shift()、filter()、slice()
    • 2.4 获取数组数据
      • 2.4.1 获取数组的元素数量: arr.length
      • 2.4.2 遍历获取数组数据
  • 3 Map
    • 3.1 创建Map:Map构造函数、数组创建Map
    • 3.2 添加、修改、删除、获取键值对
    • 3.3 获取数据
      • 3.3.1 获取 Map 的 长度:map.size
      • 3.3.2 遍历 Map 的 数据

前端js 数据结构:对象、数组、Map 的使用

1 对象(object)

对象:由一组键值对组成的无序集合,可以通过键来获取对应的值。
每个键值对中的键是唯一的,值可以是任意类型的数据。
对象通常用来表示实体的属性和方法。

1.1 创建对象

1.1.1 对象字面量(最常用): {}

对象字面量:通过在大括号 {} 中定义对象的属性和方法来创建对象。
这是最简单和最常用的方式。

var obj = {}; //创建空对象
var person = { name: 'John', age: 30, city: 'New York'};

1.1.2 使用 new 关键字和对象构造函数

通过使用 new 关键字来创建一个新对象,并使用对象构造函数来设置属性和方法。

function Person(name, age, city) {this.name = name;this.age = age;this.city = city;
}
var person = new Person('John', 30, 'New York');

1.1.3 Object.create()

通过调用 Object.create() 方法来创建一个新对象,并指定原型对象。

var person = Object.create(null);
person.name = 'John';
person.age = 30;
person.city = 'New York';

有原型对象,如下:

var personProto = {city: 'New York'
};  
var person = Object.create(personProto);
person.firstName = 'John';  
person.lastName = 'Doe';  
person.age = 30;
console.log(person) 
//{firstName: 'John', lastName: 'Doe', age: 30}
console.log(person.city) //New York

1.2 修改对象

1.2.1 直接赋值:对象的属性名直接赋值

直接赋值:可以通过对象的属性名直接赋值的方式来修改对象的内容。

var person = { name: 'Alice', age: 25 };
person.age = 26; // 修改年龄
person.city = 'New York'; // 添加新的属性

1.2.2 点号/方括号访问属性

点号或方括号访问属性:可以使用对象的属性名来修改对象的内容。

var person = { name: 'Alice', age: 25 };
person.age = 26; // 使用点号访问属性
person['age'] = 26; // 使用方括号访问属性

1.2.3 将属性复制到目标对象:Object.assign()

Object.assign() :可以将一个或多个源对象的属性复制到目标对象。

var person = { name: 'Alice', age: 25 };
// 修改年龄并添加新属性
Object.assign(person, { age: 26, city: 'New York' });
console.log(person) //{name: 'Alice', age: 26, city: 'New York'}

这样可以实现对象内容的修改和合并。

1.2.4 解构赋值:{…obj, 属性: value}

解构赋值:可以使用对象的解构赋值来修改对象的内容。

var person = { name: 'Alice', age: 25 };
// 修改年龄并添加新属性
person = { ...person, age: 26, city: 'New York' }; 
console.log(person) //{name: 'Alice', age: 26, city: 'New York'}

这是创建一个新的person对象,该对象包含了原来person对象的所有属性,以及新添加的age和city属性,并将新创建的对象赋值给person变量。

1.3 删除对象属性:delete obj.属性

var person = { name: 'Alice', age: 25 };
// 删除 'age' 属性  
delete person.age;
console.log(person); // { name: 'Alice' }

1.4 获取对象的数据

1.4.1 获取对象属性数量:Object.keys(obj).length

Object.keys():返回一个对象的所有可枚举属性的属性名组成的数组。
通过获取属性名数组的长度,就可以得到对象有多少个属性。

var obj = {a: 1, b: 2, c: 3};  
var objLength = Object.keys(obj).length;  
console.log(objLength); // 输出 3

1.4.2 遍历获取对象的数据

1、for…in 循环:使用 for…in 循环可以遍历对象的可枚举属性。(常用)
2、Object.keys() 方法:返回一个包含对象所有可枚举属性的字符串数组,可以使用它来遍历对象的属性。
3、Object.values() 方法:返回一个包含对象所有可枚举属性值的数组,可以使用它来遍历对象的属性值。
4、Object.entries() 方法:返回一个包含对象所有可枚举属性的键值对数组,可以使用它来遍历对象的键值对。

var person = { name: 'Alice', age: 25, city: 'New York' };
for (var key in person) {console.log(key + ': ' + person[key]);
}
Object.keys(person).forEach(key => {console.log(key + ': ' + person[key]);
});
Object.values(person).forEach(value => {console.log(value);
});
Object.entries(person).forEach(([key, value]) => {console.log(key + ': ' + value);
});
//可以使用for...of循环来替代 forEach 方法
for (var key of Object.keys(person)) {console.log(key + ': ' + person[key]);
}
//使用for...of 循环相比forEach方法的优势在于
//可以在循环中使用break和continue语句

注意:for…of 循环是 JavaScript 中用于遍历可迭代对象(如数组、字符串、Map 等)的一种循环结构。它允许你迭代对象的每个元素,并对每个元素执行相应的操作。

2 数组(Array)

数组:用于存储一组有序的数据集合,可以通过索引来访问和修改其中的元素。
数组可以包含任意类型的数据,包括对象、数组、字符串、数字等。
数组通常用来存储一组相关的数据。

2.1 创建数组

2.1.1 字面量方式(常用):[ ]

使用 [ ] 直接定义数组的元素。

var arr = []; //创建空数组
var arr1 = [1, 2, 3, 4, 5];

2.1.2 Array 构造函数

使用 Array() 构造函数可以创建一个数组。

var arr = new Array(); //创建空数组
var arr1 = new Array(5);
console.log(arr1); //[empty × 5]
var arr2 = new Array(1, 2, 3, 4, 5);
console.log(arr2); //[1, 2, 3, 4, 5]

注意:只有一个数值传参,则表示创建一个初始长度为数值的空数组。

2.2 修改数组

2.2.1 修改数组(添加/修改):push()、unshift()、splice()、直接赋值、使用扩展运算符

1、push() 方法:用于在数组的 末尾 添加一个或多个数据。

var arr = [1, 2, 3];  
arr.push(4);
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

2、unshift() 方法:用于在数组的 开头 添加一个或多个数据。

var arr = [1, 2, 3];  
arr.unshift(0);
arr.unshift('-1');
console.log(arr)  // ['-1', 0, 1, 2, 3]

3、splice() 方法:可以在数组的 任意位置 添加/删除 一个或多个数据。
splice(index, delNum, add)
index: 开始修改的位置,
delNum: 要删除的元素数量,
add: 要添加的数据。

var arr = [1, 2, 3];
arr.splice(2, 0, 4);
console.log(arr) //[1, 2, 4, 3]
arr.splice(0, 2, 5);
console.log(arr) //[5, 4, 3]
arr.splice(2, 2, 6);
console.log(arr) //[5, 4, 6]

4、直接赋值:直接通过索引来给数组赋值,实际上是在指定位置 添加/修改数据。

var arr = [1, 2, 3];  
arr[3] = 4; 
console.log(arr) //[1, 2, 3, 4]
arr[2] = 5; 
console.log(arr) //[1, 2, 5, 4]

5、使用扩展运算符 结合 解构赋值,可以在一个声明中添加多个数据。

var arr = [1, 2, 3]; 
arr = [0,...arr, 4, 5]; 
console.log(arr); //[0, 1, 2, 3, 4, 5]

2.3 删除数据

2.3.1 删除数据: splice()、pop()、shift()、filter()、slice()

1、splice() :可以从数组中 添加/删除 项目,然后返回被删除的项目。
splice(index, delNum, add)
index: 开始修改的位置,
delNum: 要删除的元素数量,
add: 要添加的数据。

var arr = [1, 2, 3]; 
var del = arr.splice(1, 1); 
console.log(arr); //[1, 3]
console.log(del); //[2]
arr.splice(1, 0, 4);
console.log(arr); //[1, 4, 3]

2、pop():可以删除数组中的 最后一个元素,并返回删除的元素。

var arr = [1, 2, 3]; 
var del = arr.pop(); 
console.log(arr); //[1, 2]
console.log(del); //3

3、shift():可以删除数组中的 第一个元素,并返回删除的元素。

var arr = [1, 2, 3]; 
var del = arr.shift(); 
console.log(arr); //[2, 3]
console.log(del); //1

4、filter():可以根据条件筛选数组中的元素,并返回一个新的数组。

var arr = [1, 2, 3, 4, 5];  
var newArr = arr.filter(item => item !== 3); // 筛选值不为3的元素  
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [1, 2, 4, 5]

5、slice():返回被选中的元素的一个副本(数组的一个片段)。
原始数组不会被改变。

var arr = [1, 2, 3, 4, 5];  
var newArr = arr.slice(0,2); //筛选从索引0 开始到索引2的元素
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newArr); // [1, 2]

6、indexOf() 和 splice() 结合使用
使用 indexOf() 找到要删除的索引,然后使用 splice() 来删除它。

var arr = [1, 2, 3, 4, 5];
var index = arr.indexOf(3); // 找到值为3的元素的索引  
if (index !== -1) { // 如果找到了该元素arr.splice(index, 1); // 使用splice()删除该元素  
}  
console.log(arr); // [1, 2, 4, 5]

2.4 获取数组数据

2.4.1 获取数组的元素数量: arr.length

var arr = [1, 2, 3, 4, 5];  
var length = arr.length;  
console.log(length);  // 输出:5

2.4.2 遍历获取数组数据

1、 for 循环:遍历数组的每一个元素。(常用)

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {console.log(arr[i]);
}

2、for…of循环:是ES6引入的一种遍历数据的方法,可以用来遍历数组中的元素。

var arr = [1, 2, 3, 4, 5];  
for (var element of arr) {  console.log(element);  
}

3、forEach():是数组对象的一个内置方法,可以对数组中的每个元素执行指定的操作。

var arr = [1, 2, 3, 4, 5];  
arr.forEach(function(element) {  console.log(element);
});

4、map():数组对象的一个内置方法,可以对数组中的每个元素执行指定的操作,并返回一个新的数组。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(element) {  return element * 2;  // 对每个元素乘以2  
});
console.log(newArr);  // [2, 4, 6, 8, 10]

3 Map

Map:一种有序的键值对集合。
与对象不同的是,Map中的键可以是任意类型的数据,
而且 Map 会保持键值对的插入顺序。
Map通常用来存储和管理复杂的数据结构。

3.1 创建Map:Map构造函数、数组创建Map

1、使用Map构造函数,set方法逐个添加键值对(常用)

var myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap); //{'key1' => 'value1', 'key2' => 'value2'}

2、使用数组创建Map:

var myMap = new Map([['key1', 'value1'],['key2', 'value2']
]);
console.log(myMap); //{'key1' => 'value1', 'key2' => 'value2'}

3.2 添加、修改、删除、获取键值对

1、set(key, value):添加一个新的键值对到Map对象中,如果键已经存在,则更新对应的值。
2、get(key):获取指定键的值,如果键不存在则返回undefined。
3、has(key):检查Map对象中是否存在指定的键,如果存在则返回true,否则返回false。
4、delete(key):删除指定键及其对应的值,如果删除成功则返回true,否则返回false。

var myMap = new Map();
myMap.set('key1', 'value1'); // 添加键值对
myMap.set('key2', 'value2'); // 添加另一个键值对
myMap.set('key1', 'updatedValue1'); // 修改已存在的键值对
console.log(myMap); //{'key1' => 'updatedValue1', 'key2' => 'value2'}
//获取键的值
var val1 = myMap.get('key1');  
console.log(val1);  // 输出: 'updatedValue1'
var val2 = myMap.get('key11');  
console.log(val2); // undefined
//判断是否存在键
var hasKey1 = myMap.has('key1');  
console.log(hasKey1);  // 输出: true
//删除键
myMap.delete('key2');  
var hasKey2 = myMap.has('key2');  
console.log(hasKey2);  // 输出: false

3.3 获取数据

3.3.1 获取 Map 的 长度:map.size

Map对象的长度表示其包含的键值对的数量。

var myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap); //{'key1' => 'value1', 'key2' => 'value2'}
var length = myMap.size;  
console.log(length);  // 输出: 2

3.3.2 遍历 Map 的 数据

1、for…of循环
2、forEach()
3、使用 keys() 和 values() 方法

var myMap = new Map();
myMap.set('A', 1);
myMap.set('B', 2);
myMap.set('C', 3);
// for…of循环
for (var [key, value] of myMap) {console.log(key + ' = ' + value);
}
// forEach()
myMap.forEach(function(value, key) {  console.log(key + ' = ' + value);
});
// 使用 keys() 方法遍历键  
for (var key of myMap.keys()) {console.log(key);
}
var keysArray = Array.from(myMap.keys());
keysArray.forEach(key => {console.log(key);
});
// 使用 values() 方法遍历值
for (var value of myMap.values()) {console.log(value);
}

注意:myMap.keys()、myMap.values() 返回的是一个迭代器对象,
而不是一个数组,因此不能直接使用forEach方法。
要遍历Map对象中的键,可以将迭代器对象转换为数组,然后再使用forEach方法。

总的来说,对象适合表示实体的属性和方法,数组适合存储一组相关的数据,而Map适合存储和管理复杂的数据结构。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

介绍 Apache Spark 的基本概念和在大数据分析中的应用

Apache Spark 是一个开源的分布式计算系统&#xff0c;它旨在处理大规模数据集并提供高性能和易用性。Spark 提供了一个统一的编程模型&#xff0c;可以在多种编程语言中使用&#xff0c;包括 Scala、Java、Python和R。Spark 的主要特点包括&#xff1a; 快速&#xff1a;Spark…

网页设计(八)HTML5基础与CSS3应用

一、当当网企业用户注册页面设计 当当网企业用户注册页面 改版后当当网企业用户注册页面 <!-- prj_8_1.html --> <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>当当网企业用户注册页面设计</title><s…

第13章 1 进程和线程

文章目录 程序和进程的概念 p173函数式创建子进程Process类常用的属性和方法1 p175Process类中常用的属性和方法2 p176继承式创建子进程 p177进程池的使用 p178并发和并行 p179进程之间数据是否共享 p180队列的基本使用 p180使用队列实现进程之间的通信 p182函数式创建线程 p18…

Docker的本地化部署:加速软件开发周期的利器

在软件开发中&#xff0c;部署是一个至关重要的环节。随着云计算的兴起&#xff0c;人们开始在云端环境中进行应用部署&#xff0c;以获得更好的灵活性和可扩展性。然而&#xff0c;一些场景中&#xff0c;本地化部署仍然是必要的&#xff0c;它提供了更高的安全性和可控性。 本…

【算法Hot100系列】接雨水

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

git报错fatal: detected dubious ownership in repository at

git报错 在git上执行 git branch fatal: detected dubious ownership in repository at ‘/home/你的用户名/cam/code’ To add an exception for this directory, call: git config --global --add safe.directory /home/你的用户名/cam/code这个一般是权限不足导致的&#…

码云星辰:未来运维的技术交响曲

&#x1f6a9;本文介绍 ​ 随着信息技术的迅猛发展&#xff0c;运维领域正经历着翻天覆地的变革。未来的运维工程师将需要拥有更广泛、更深入的技能&#xff0c;以适应日益复杂和多变的系统环境。本文将深入探讨运维未来的行业发展趋势&#xff0c;并详细分析需要掌握的关键技…

AP上线配置流程

AP工作模式 相应地&#xff0c;AR路由器的WLAN工作模式分为FAT AP和AC两种模式&#xff0c;不同的模式对应不同的使用场景。 FAT AP模式&#xff1a;AR路由器作为FAT AP&#xff0c;独立为用户提供WLAN接入服务&#xff0c;无线网络的配置在FAT AP上单独配置。FAT AP模式主要…

Angular系列教程之单向绑定与双向绑定

文章目录 介绍单向绑定双向绑定在自定义组件中实现双向绑定属性总结 介绍 在Angular开发中&#xff0c;数据的绑定是非常重要的概念。它允许我们将应用程序的数据与用户界面进行交互&#xff0c;实现数据的动态更新。在本文中&#xff0c;我们将探讨Angular中的两种数据绑定方…

❤ Uniapp使用四( 高阶使用配置和各种实现篇)

❤ Uniapp使用四( 复杂配置和各种实现篇) uniapp引入 vant 引入方式 1、下载vant源码 方式一&#xff1a;从 Vant 官网首页进入 GitHub下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹 2、创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents …

133基于matlab的智能微电网粒子群优化算法

基于matlab的智能微电网粒子群优化算法&#xff0c;输出微型燃气轮机、电网输入微网运行计划、储能运行计算。程序已调通&#xff0c;可直接运行。 133智能微电网粒子群优化算法 (xiaohongshu.com)

Edge-TTS(文字转语音工具)Html版本

无需安装任何环境,运行html文件就能完成语音合成 软件说明 Edge-TTS绿色版(语音模型训练)是一款提取自微软Edge的文字转语音软件!众所周知,微软的Edge语音非常自然又顺畅,很受大家欢迎。该软件采用了最新的端到端学习技术,具有高度的自适应能力,能够适应各种语音场景和…

Excel 动态可视化图表分享

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 Excel 2021实操 100集&#xff0c; Excel 2021函数大全 80集 Exc…

2024.1.15 Spark 阶段原理,八股,面试题

目录 1. 简述什么是Spark? 2. 简述Spark的四大特点 3. 简述Spark比Mapreduce执行效率高的原因 4. 简述Spark on Yarn的两种部署模式的区别和特点 5. Spark底层工作原理是怎样的 6. RDD算子分成了哪几类,各自的特点是什么? 7. RDD的五大特性和五大特点 8. RDD中的重分…

Vue3中provide,inject使用

一&#xff0c;provide,inject使用&#xff1a; 应用场景&#xff1a;向孙组件传数据 应用Vue3碎片&#xff1a; ref&#xff0c;reactive&#xff0c;isRef&#xff0c;provide, inject 1.provide,inject使用 a.爷组件引入 import {ref,provide} from vue const drinkListre…

【数据结构】常见八大排序算法总结

目录 前言 1.直接插入排序 2.希尔排序 3.选择排序 4.堆排序 5.冒泡排序 6.快速排序 6.1Hoare版本 6.2挖坑法 6.3前后指针法 6.4快速排序的递归实现 6.5快速排序的非递归实现 7.归并排序 8.计数排序&#xff08;非比较排序&#xff09; 9.补充:基数排序 10.总结…

Docker-基础指令

前置知识 docker官网地址&#xff1a;https://www.docker.com/ docker镜像地址&#xff1a;https://hub.docker.com/ docker安装教程&#xff1a;https://docs.docker.com/engine/install/centos/ 安装只需要注意将仓库源改为国内就好,推荐去阿里云注册自己的账号获得加速地址…

flask不使用flask-login插件

由于flask版本升级问题&#xff0c;flask-manager里面的Command命令高版本不支持&#xff0c;低版本的兼容flask-sqlalchemy启动也会报错&#xff0c;第三方插件有很多问题&#xff0c;所以痛定思痛决定放弃使用这个&#xff0c;使用flask自带语法自己写一个 类似于django继承…

保送阿里云的云原生学习路线

近期好多人都有咨询学习云原生有什么资料。与其说提供资料不如先说一说应该如何学习云原生。 Linux基础知识&#xff1a;云原生技术通常在Linux环境中运行&#xff0c;因此建议首先掌握Linux的基础知识&#xff0c;包括命令行操作、文件系统、权限管理等。 容器化技术&#x…

CentOS将磁盘剩余空间分配到已有分区

CentOS将磁盘剩余空间分配到已有分区 引growpartresize2fs 引 手里有台云服务&#xff0c;之前磁盘只有60G&#xff0c;在执行SQL语句时报错No space left on device. 通过df -h查看磁盘占用情况&#xff0c;确实所剩无几了 通过云服务后端控制台升级了下配置&#xff0c;将…