前端js 数据结构：对象 object、数组Array 、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适合存储和管理复杂的数据结构。文章来源地址https://www.toymoban.com/news/detail-811361.html

到了这里，关于前端js 数据结构：对象 object、数组Array 、Map 的创建、增删改 / 遍历数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！