javascript

Js数组与对象的常用方法

Js数组与对象

Posted by Starrynight on 2024-03-07
Estimated Reading Time 6 Minutes
Words 1.4k In Total
Viewed Times

Js数组与对象的常用方法

好的，我将进一步详细列举 JavaScript 数组 和 对象 的常用操作，包含一些进阶的技巧和用法，帮助你更深入地理解。

1️⃣ 数组（Array）详细操作

（1）数组创建和初始化

1
2
3
4
5
6
7
8
// 创建一个包含数字的数组
let arr = [1, 2, 3, 4, 5];

// 创建一个指定长度的空数组
let emptyArr = new Array(5); // 创建长度为5的空数组，元素为 undefined

// 使用 Array.of 创建数组
let arrFromValues = Array.of(1, 2, 3); // [1, 2, 3]

（2）添加、删除和更新数组元素

1
2
3
4
5
6
7
8
9
10
11
12
13
let arr = [1, 2, 3];

// push() 在数组末尾添加一个元素
arr.push(4); // [1, 2, 3, 4]

// unshift() 在数组头部添加一个元素
arr.unshift(0); // [0, 1, 2, 3, 4]

// pop() 删除并返回数组末尾的元素
let last = arr.pop(); // last = 4, arr = [0, 1, 2, 3]

// shift() 删除并返回数组头部的元素
let first = arr.shift(); // first = 0, arr = [1, 2, 3]

（3）数组遍历

forEach()

用于遍历数组的每个元素，通常用于执行副作用。

1
2
3
4
let arr = [1, 2, 3];
arr.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

map()

返回一个新的数组，数组中的每个元素都经过函数处理。

1
2
let arr = [1, 2, 3];
let doubledArr = arr.map(x => x * 2); // [2, 4, 6]

filter()

返回一个新的数组，包含所有符合条件的元素。

1
2
let arr = [1, 2, 3, 4];
let evenArr = arr.filter(x => x % 2 === 0); // [2, 4]

reduce()

通过累积数组的值返回单一结果，通常用于计算总和、平均值等。

1
2
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10

find()

返回符合条件的第一个元素，如果没有找到，则返回 undefined。

1
2
let arr = [5, 10, 15];
let found = arr.find(x => x > 10); // 15

some() & every()

  • some()：检查是否有任何元素符合条件。
  • every()：检查是否所有元素都符合条件。
1
2
3
let arr = [1, 2, 3];
let hasEven = arr.some(x => x % 2 === 0); // true
let allEven = arr.every(x => x % 2 === 0); // false

（4）数组的排序和反转

1
2
3
4
5
6
7
8
9
10
let arr = [3, 1, 4, 2];

// 升序排序
arr.sort((a, b) => a - b); // [1, 2, 3, 4]

// 降序排序
arr.sort((a, b) => b - a); // [4, 3, 2, 1]

// 反转数组
arr.reverse(); // [1, 2, 3, 4]

（5）合并和切割数组

concat()

将两个或多个数组合并成一个新数组。

1
2
3
let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2); // [1, 2, 3, 4]

slice()

返回数组的一部分，原数组不变。

1
2
let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // [2, 3]

splice()

用于修改原数组，可以删除、替换或添加元素。

1
2
let arr = [1, 2, 3, 4];
arr.splice(2, 1, 5, 6); // 删除索引2的元素，添加5和6，结果：[1, 2, 5, 6, 4]

（6）数组的其他常用操作

includes()

检查数组中是否包含某个值。

1
2
let arr = [1, 2, 3];
let isIncluded = arr.includes(2); // true

indexOf()

返回元素的第一个索引，如果不存在返回 -1。

1
2
let arr = [1, 2, 3];
let index = arr.indexOf(2); // 1

2️⃣ 对象（Object）详细操作

（1）创建对象

1
2
3
4
5
6
7
// 对象字面量创建
let person = { name: "Alice", age: 25 };

// 使用构造函数创建对象
let obj = new Object();
obj.name = "Bob";
obj.age = 30;

（2）访问和修改对象属性

1
2
3
4
5
6
7
8
9
10
11
let person = { name: "Alice", age: 25 };

// 通过点操作符访问
let name = person.name; // "Alice"

// 通过方括号操作符访问
let age = person["age"]; // 25

// 修改对象属性
person.age = 26; // 修改 age 属性
person["name"] = "Bob"; // 修改 name 属性

（3）对象遍历

for...in

遍历对象的所有属性。

1
2
3
4
5
6
7
let person = { name: "Alice", age: 25 };
for (let key in person) {
    console.log(key, person[key]);
}
// 输出：
// name Alice
// age 25

Object.keys()

返回对象的键名数组。

1
2
let person = { name: "Alice", age: 25 };
let keys = Object.keys(person); // ["name", "age"]

Object.values()

返回对象的值数组。

1
2
let person = { name: "Alice", age: 25 };
let values = Object.values(person); // ["Alice", 25]

Object.entries()

返回对象的键值对数组。

1
2
let person = { name: "Alice", age: 25 };
let entries = Object.entries(person); // [["name", "Alice"], ["age", 25]]

（4）对象的合并与拷贝

Object.assign()

合并多个对象到目标对象。

1
2
3
let person = { name: "Alice", age: 25 };
let address = { city: "New York" };
let merged = Object.assign({}, person, address); // 合并 person 和 address 对象

扩展运算符（Spread Operator）

通过扩展运算符合并对象。

1
2
3
let person = { name: "Alice", age: 25 };
let address = { city: "New York" };
let merged = { ...person, ...address }; // 合并

深拷贝

使用 JSON.parse(JSON.stringify()) 进行深拷贝，但此方法无法拷贝函数、undefined、symbol 等。

1
2
let person = { name: "Alice", age: 25, address: { city: "NY" } };
let personCopy = JSON.parse(JSON.stringify(person)); // 深拷贝

（5）删除对象属性

1
2
3
4
let person = { name: "Alice", age: 25 };

// 删除对象属性
delete person.age; // 删除 age 属性

（6）判断对象是否含有某个属性

in 操作符

检查对象中是否有指定的属性。

1
2
3
let person = { name: "Alice", age: 25 };
let hasName = "name" in person; // true
let hasGender = "gender" in person; // false

hasOwnProperty()

判断对象自身是否具有指定的属性。

1
2
let person = { name: "Alice", age: 25 };
let hasName = person.hasOwnProperty("name"); // true

3️⃣ 总结

数组常用操作

  • 数组创建：[1, 2, 3]、new Array(5)
  • 添加/删除：push()、pop()、shift()、unshift()
  • 遍历：forEach()、map()、filter()、reduce()、find()
  • 排序：sort()、reverse()
  • 合并：concat()、slice()、splice()

对象常用操作

  • 创建对象：字面量 {}、new Object()
  • 访问和修改：obj.key、obj["key"]
  • 遍历：for...in、Object.keys()、Object.values()、Object.entries()
  • 合并：Object.assign()、扩展运算符
  • 删除属性：delete obj.key
  • 深拷贝：JSON.parse(JSON.stringify())

如果你对某些操作有更多的疑问或需要进一步的讲解，请告诉我！😊

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。 也欢迎您共享此博客，以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。 谢谢 ！

特色标签
javascript
链友
ESC