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

于 2024-01-16 23:39:22 发布
阅读量1.2k 收藏 20
点赞数 23
分类专栏： 前端 文章标签： javascript 前端 数据结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42307069/article/details/135467701
版权

目录

前端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适合存储和管理复杂的数据结构。

2019一路前行
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
11-28
废话不多说了，直奔主题，你，具体代码如下所示： [removed] //----------------for用来遍历数组对象-- ... //为所有的对象添加clone方法，即给内置原型(object,Array,function)增加原型属性,该方法很强大，也很危险
JS——Map对象 Set对象
weixin_52148548的博客
02-15 3285
Map(key,value) Map 对象是存储键值对的集合，并且能够记住键的原始插入顺序。具有极快的查找速度。 创建 第一种：创建的时候进行初始化 let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); 第二种：创建空的Map，然后添加元素 let map=new Map() map.set(1,'one') map.set(2,'two') map.set(3,'th
JS遍历对象属性的7种方式
热门推荐
蜗牛在奔跑的博客
08-29 2万+
在有些开发场景下，可能需要获取一个对象的所有属性字段名，或者同时获取属性字段名和属性值，比如下面的一个普通的对象：}，属性值为，实际过程中的对象可能更加复杂，字段也会更多。对于遍历一个对象的属性，最容易想到的就是使用。...
【前端】js中Map的用法
m0_67403272的博客
03-29 1289
Map Map是一组键值对结构，具有极快的查找速度。 1. 创建 方法一：创建的时候初始化 let mapObj = new Map([ ['x', 1], ['y', 2], ['z', 3], ]) console.log(mapObj.size) // 3 方法二：创建空Map，之后添加元素 let mapObj = new Map(); mapObj.set('x', 1); mapObj.set('y', 2); mapObj.set('z', 3); // 注：Map对象的长
JS创建map结构以及map中的方法
m0_67391907的博客
08-18 1633
js新的数据结构创建map的时候网上有很多，但是有时候你会发现很多方法都不能使用，这里我简单写一写常用的以及怎样去查看map的哪些方法，靠人不如靠己，博客抄来抄去，看起来还浪费时间。遍历取值等等都在里面，可能有些方法你还是不知道是什么意思，但是这时候你可以有针对性的去查找了，不至于像一开始那样到处乱翻了。一般我创建的时候就用这两种就够了。...
JavaScript对象类型之Array及Object
m0_61961937的博客
04-14 935
this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象。Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的。json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货。函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象。js 的对象，不需要什么模板，它的属性和方法可以随时加减。
详谈js中数组(array)和对象(object)的区别
12-03
•object 类型： ◦ 创建方式： /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; }...
js中遍历Map对象的方法
12-12
js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出： Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性：" + key + ",值："+ jsonData[key]);...
浅谈js数据类型判断与数组判断
11-24
object：对象，可以执行new操作符后跟要创建的对象类型的名称来创建。 null：只有一个值得数据类型，逻辑上讲，null值表示一个空对象指针。 undefined：未定义，使用var声明变量但未对其初始化时，变量的值就是...
ObjectArray:对象数组
05-26
对象数组安装通过Composer安装此软件包$ composer require vgleb/object-arrayLaravel 5实现LaravelObjectArrayServiceProvider的引用添加到config/app.php的providers数组中： 'providers' => [ 'VGleb\ObjectArray...
JavaScript中如何添加，删除，修改对象属性
qq_43412065的博客
01-03 2757
JavaScript中如何添加，删除，修改对象属性
JavaScript中new Map的用法
最新发布
weixin_69811594的博客
07-13 2025
JavaScript中new Map的用法
JS中Map数据类型和map方法
m0_62763606的博客
07-11 716
map方法是针对数组的方法，该方法会返回一个新的数组，且不会改变原来的数组，新数组的数组元素是原数组元素经过map方法内部处理后的值，其本质是遍历一遍原来的数组同时根据要求得到一一对应的数组元素构成新数组。Map是键值对的集合，用法类似与对象，是一种ES6新增的数据类型。该数据类型的使用会占用较大的内存而得到更高的速度。使用size来得到集合中包含键值对的数量；使用for-of和forEach方法遍历自身，遍历时。Map实例还可以使用has来查询是否存在键名，该方法会返回一个。
js中Object的五种属性遍历
sjslln的博客
05-17 5755
前提，Object的属性划分 // 原型属性 let myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); // 对象自身可枚举属性 myObj.enumType = 'Enumerable properties of the object itself'; Object.defineProperty(myObj, 'enumType1', { enume
JavaScript中map的用法
luaond的博客
05-05 4204
JavaScript中的Map是一种基于键值对的数据结构，可以用于存储和处理数据。
JavaScript自定义map方法
dabaooooq的博客
03-13 539
1、回调函数必须是一个函数。2、调用该方法的对象必须是数组。3. 数组的map方法，其中需要传入两个参数，第一个是一个回调函数，第二个是一个回调函数的this指向的值。
JS之Map的基本使用
04-23 4365
JS之Map的基本使用
JavaScript -- Map对象及常用方法介绍
Qlz的博客
12-06 5681
Map 1 Map介绍 2 创建一个Map 3 常用方法介绍 4 将Map转换为数组 5 从数组构建Map 6 遍历Map Map 1 Map介绍 Map用来存储键值对结构的数据**（key-value）** Object中存储的数据就可以认为是一种键值对结构 Map和Object的主要区别： Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串 Map中任何类型的值都可以成为数据的key
web前端-JavaScript中的数组详解
苏凉.py的博客
06-19 1198
使用检查数组对象时返回。1.直接添加2.按照索引添加(将元素添加到哪个位置)这里值得注意的是，如果按照索引添加元素，数组的长度是按照的添加的最大索引来计算的。读取数组元素是一个返回值，需要变量去接收或者直接输出。 1.直接读取，即读取整个数组内的元素。2.读取数组中的某个元素。3.当读取一个不存在的元素时，返回undefined。length属性可以设置/返回数组长度。补充小技巧：可以利用length属性向数组的最后一个位置添加元素。 方法用于连接两个或多个数组。 方法用于把数组中的所有元素转换一个字符串
get/set:遍历数组查找equals的对象并返回index
05-26
以下是一个示例的 Java 代码实现： ``` public static int findIndex(Object[] array, Object obj) { if (array == null || obj == null) { return -1; } for (int i = 0; i < array.length; i++) { if (obj.equals(array[i])) { return i; } } return -1; } ``` 这个方法接收一个 Object 类型的数组和一个要查找的对象 obj，然后遍历数组，每次比较 obj 和当前遍历到的数组元素是否相等，如果相等就返回当前下标 i，否则继续遍历，直到遍历完整个数组。 如果数组为 null 或者 obj 为 null，那么直接返回 -1，表示没有找到。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值