知识篇：（五）JavaScript 数组进阶操作：对象属性操作、数组转换与求和

已于 2024-10-16 17:35:25 修改
阅读量1.5k 收藏 14
点赞数 12
分类专栏： 前端 javascript 知识分享 文章标签： javascript 开发语言 ecmascript
于 2024-10-10 10:27:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmc123125/article/details/142814706
版权
前端 同时被 3 个专栏收录
50 篇文章 1 订阅
订阅专栏
知识分享
50 篇文章 0 订阅
订阅专栏
javascript
12 篇文章 0 订阅
订阅专栏

JavaScript 数组进阶操作：对象属性操作、数组转换与求和

JavaScript 数组的操作功能非常强大，尤其在处理数组中对象的属性、二维数组的转换、数组求和等场景下，能极大简化开发工作。本文将介绍几个进阶的数组操作方法及其代码示例。

知识篇：（四）JavaScript 数组操作方法详解及示例

1. 计算数组中对象的属性之和

1. 使用 reduce()

这是最常见、简洁的方式，用于对数组中的对象属性求和。

let products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 700 }
];

let totalPrice = products.reduce((sum, product) => sum + product.price, 0);
console.log(totalPrice);  // 输出 2200

2. 使用 for 循环

传统的 for 循环也可以实现同样的效果。虽然相对冗长，但适合希望明确控制流程的情况。

let totalPrice = 0;
for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
}
console.log(totalPrice);  // 输出 2200

3. 使用 for...of 循环

for...of 循环是一种简洁的遍历方式，适用于数组对象的遍历和累加操作。

let totalPrice = 0;
for (let product of products) {
    totalPrice += product.price;
}
console.log(totalPrice);  // 输出 2200

4. 使用 forEach()

forEach() 是一种简洁的方式，但它不像 reduce() 那样直接返回值，因此需要在外部定义累加变量。

let totalPrice = 0;
products.forEach(product => {
    totalPrice += product.price;
});
console.log(totalPrice);  // 输出 2200

5. 使用 map() + reduce() 组合

通过 map() 方法先提取出所有对象的 price 属性，再用 reduce() 进行求和。

let totalPrice = products.map(product => product.price).reduce((sum, price) => sum + price, 0);
console.log(totalPrice);  // 输出 2200

6. 使用 Array.prototype.every() 模拟

虽然 every() 方法通常用于检测数组中的每个元素是否满足条件，但也可以用于累加，只是略显不寻常。

let totalPrice = 0;
products.every(product => {
    totalPrice += product.price;
    return true;  // 确保遍历所有元素
});
console.log(totalPrice);  // 输出 2200

7. 使用 Array.prototype.some()

some() 通常用于检测是否存在符合条件的元素，但它也可以用于求和，通过始终返回 false 来继续遍历所有元素。

let totalPrice = 0;
products.some(product => {
    totalPrice += product.price;
    return false;  // 保证遍历完整数组
});
console.log(totalPrice);  // 输出 2200

以上这些方法都能实现计算数组中对象属性之和的效果，但在实际应用中，reduce() 是最推荐的方式，因为它既简洁又直接返回结果，适合大部分场景。而其他方式则在特殊需求或代码风格的考虑下可以选用。

2. 将二维数组转换为一维数组

1. 使用 Array.prototype.flat() —常用

flat() 方法用于将嵌套的数组 “拉平” 到指定的深度。对于二维数组，只需调用 flat() 即可。

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

let flatArr = arr.flat();
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

2. 使用 reduce() + concat()

通过 reduce() 方法可以实现将二维数组的所有子数组合并为一个一维数组。

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

let flatArr = arr.reduce((acc, subArray) => acc.concat(subArray), []);
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. 使用 for 循环

通过传统的 for 循环手动遍历每个子数组，将其元素推入新的一维数组中。

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

let flatArr = [];
for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
        flatArr.push(arr[i][j]);
    }
}
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

4. 使用 for...of 循环

for...of 循环提供了一种更简洁的方式来遍历数组。

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

let flatArr = [];
for (let subArray of arr) {
    for (let element of subArray) {
        flatArr.push(element);
    }
}
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

5. 使用 Array.prototype.flatMap() —常用

flatMap() 方法首先对每个元素进行映射，然后再进行扁平化，是一种简洁的方式。

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

let flatArr = arr.flatMap(subArray => subArray);
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

6. 使用 Array.prototype.splice() 和 while 循环

这种方法较为冷门，但可以通过循环和 splice() 方法来实现。

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

let flatArr = [];
while (arr.length) {
    flatArr.push(...arr.splice(0, 1)[0]);
}
console.log(flatArr);  // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

以上方法都可以有效地将二维数组转换为一维数组，根据具体需求和代码风格选择适合的方法是很重要的。flat() 和 flatMap() 方法在 ES2019 引入后，提供了非常简洁和高效的处理方式，而其他方法则在需要更灵活控制时可能会更加适用。

3. 数组求和的多种方式

以下是几种实现数组对象属性求和的方法：

1. 使用 reduce() 方法

reduce() 是计算数组中对象属性之和的最常用方法。可以轻松地对每个对象的指定属性进行累加。

let products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 700 }
];

let totalPrice = products.reduce((sum, product) => sum + product.price, 0);
console.log(totalPrice);  // 输出 2200

2. 使用 for 循环

使用传统的 for 循环，可以逐一访问每个对象并对属性进行累加。

let totalPrice = 0;
for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
}
console.log(totalPrice);  // 输出 2200

3. 使用 forEach() 方法

通过 forEach() 方法遍历数组，适合对每个对象的属性进行处理并进行累加。

let totalPrice = 0;
products.forEach(product => {
    totalPrice += product.price;
});
console.log(totalPrice);  // 输出 2200

4. 使用 for...of 循环

for...of 循环提供了一种简洁的方式来遍历数组对象并进行求和。

let totalPrice = 0;
for (let product of products) {
    totalPrice += product.price;
}
console.log(totalPrice);  // 输出 2200

5. 使用 map() + reduce() 组合

通过 map() 方法先提取出所有对象的 price 属性，再用 reduce() 进行求和。

let totalPrice = products.map(product => product.price).reduce((sum, price) => sum + price, 0);
console.log(totalPrice);  // 输出 2200

6. 使用 Array.prototype.every()

使用 every() 方法可以实现对对象属性的累加。

let totalPrice = 0;
products.every(product => {
    totalPrice += product.price;
    return true;  // 确保遍历所有元素
});
console.log(totalPrice);  // 输出 2200

7. 使用 Array.prototype.some()

类似于 every()，使用 some() 也可以实现属性求和，始终返回 false 以确保遍历完整数组。

let totalPrice = 0;
products.some(product => {
    totalPrice += product.price;
    return false;  // 保证遍历完整数组
});
console.log(totalPrice);  // 输出 2200

8. 使用 eval()（不推荐）

虽然可以使用 eval() 进行求和，但不推荐这种方法，因为它会执行字符串作为代码，存在安全风险。

let totalPrice = eval(products.map(product => product.price).join('+'));
console.log(totalPrice);  // 输出 2200

以上方法展示了对包含对象的数组进行属性求和的多种方式。reduce() 是最推荐的方式，因为它既简洁又强大。其他方法则可以根据实际需求进行选择，灵活应用可以提高代码的可读性和维护性。

4. 数组循环的常用方法

在 JavaScript 中，循环遍历数组对象的常用方法有多种。以下是一些常用的遍历方式及其示例：

1. 使用 for 循环

这是最基本的数组遍历方法，适用于需要对每个元素执行特定操作的情况。

let products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 700 }
];

for (let i = 0; i < products.length; i++) {
    console.log(`Product: ${products[i].name}, Price: ${products[i].price}`);
}

2. 使用 forEach() 方法

forEach() 方法是数组的一个内置方法，适合用于对每个元素执行一次指定的操作。

products.forEach(product => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
});

3. 使用 for...of 循环

for...of 循环提供了一种简洁的方式来遍历数组元素，适合于读取操作。

for (let product of products) {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
}

4. 使用 for...in 循环

for...in 循环通常用于遍历对象的属性，但也可以用于数组。注意，使用 for...in 遍历数组时，建议加以小心，因为它可能会遍历到数组原型链上的属性。

for (let index in products) {
    console.log(`Product: ${products[index].name}, Price: ${products[index].price}`);
}

5. 使用 map() 方法

map() 方法用于创建一个新数组，其元素为调用指定函数处理后的结果。虽然主要用于生成新数组，但可以用于遍历。

products.map(product => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
});

6. 使用 filter() 方法

虽然 filter() 的主要目的是创建一个新数组，其中包含通过指定测试的所有元素，但它也可以用于遍历。

products.filter(product => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
    return true;  // 只需返回 true 以保留所有元素
});

7. 使用 reduce() 方法

虽然 reduce() 的主要用途是累加，但也可以用于遍历和处理数组元素。

products.reduce((acc, product) => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
    return acc;  // 返回累加值
}, []);

8. 使用 every() 方法

every() 方法用于检测数组中的每个元素是否满足指定条件，但也可以用于遍历。

products.every(product => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
    return true;  // 确保遍历所有元素
});

9. 使用 some() 方法

some() 方法用于检测数组中是否至少有一个元素满足条件，也可以用于遍历。

products.some(product => {
    console.log(`Product: ${product.name}, Price: ${product.price}`);
    return false;  // 保证遍历完整数组
});

以上是遍历数组对象的常用方法，每种方法适合不同的场景。forEach() 和 for...of 是最推荐的方式，因为它们既简洁又易于理解。在选择遍历方式时，可以根据具体需求和代码风格来选择合适的方法。

5. 数组中对象的属性操作

在 JavaScript 中，操作数组中对象的属性是一个常见的需求。以下是一些常用的数组对象属性操作，包括获取、更新、删除和添加属性的方法。

1. 获取属性值

可以通过 map() 方法来提取对象数组中某个属性的值。

let products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 700 }
];

// 获取所有产品的名称
let productNames = products.map(product => product.name);
console.log(productNames);  // 输出 ['Laptop', 'Phone', 'Tablet']

2. 更新属性值

可以使用 forEach() 或 map() 来更新对象的属性。

// 将所有产品的价格增加 10%
products.forEach(product => {
    product.price *= 1.1;  // 价格增加 10%
});
console.log(products);
/* 输出：
[
    { name: 'Laptop', price: 1100 },
    { name: 'Phone', price: 550 },
    { name: 'Tablet', price: 770 }
]
*/

3. 添加新属性

可以使用 forEach() 来给每个对象添加新的属性。

products.forEach(product => {
    product.inStock = true;  // 添加 inStock 属性
});
console.log(products);
/* 输出：
[
    { name: 'Laptop', price: 1100, inStock: true },
    { name: 'Phone', price: 550, inStock: true },
    { name: 'Tablet', price: 770, inStock: true }
]
*/

4. 删除属性

可以使用 forEach() 来删除对象的属性。

products.forEach(product => {
    delete product.inStock;  // 删除 inStock 属性
});
console.log(products);
/* 输出：
[
    { name: 'Laptop', price: 1100 },
    { name: 'Phone', price: 550 },
    { name: 'Tablet', price: 770 }
]
*/

5. 筛选具有特定属性的对象

可以使用 filter() 方法筛选出包含特定属性的对象。

let filteredProducts = products.filter(product => product.price > 600);
console.log(filteredProducts);
/* 输出：
[
    { name: 'Laptop', price: 1100 },
    { name: 'Tablet', price: 770 }
]
*/

6. 查找具有特定属性值的对象

可以使用 find() 方法查找第一个满足条件的对象。

let expensiveProduct = products.find(product => product.price > 800);
console.log(expensiveProduct);
/* 输出：
{ name: 'Laptop', price: 1100 }
*/

7. 将对象属性的值汇总到新对象中

可以使用 reduce() 方法将对象的属性值汇总到一个新对象中。

let totalPrices = products.reduce((acc, product) => {
    acc[product.name] = product.price;
    return acc;
}, {});
console.log(totalPrices);
/* 输出：
{
    Laptop: 1100,
    Phone: 550,
    Tablet: 770
}
*/

8. 合并多个对象的属性

可以使用 Object.assign() 来合并对象的属性。

let newProduct = { name: 'Smartwatch', price: 300 };
let combinedProducts = products.map(product => Object.assign({}, product, newProduct));
console.log(combinedProducts);
/* 输出：
[
    { name: 'Smartwatch', price: 300 },
    { name: 'Smartwatch', price: 300 },
    { name: 'Smartwatch', price: 300 }
]
*/

以上展示了对数组中对象属性的常见操作，包括获取、更新、删除和添加属性。根据具体需求，选择适合的方法可以提高代码的可读性和维护性。操作对象属性时，可以结合使用不同的数组方法，以实现更加复杂的逻辑。

知识篇：（四）JavaScript 数组操作方法详解及示例

结语

通过掌握以上数组的高级操作方法，可以有效地提高代码的简洁性和可读性，尤其在处理复杂的数据结构时，这些方法将大大提升开发效率。在实际项目中，灵活应用这些技巧将会帮助你应对不同的数据处理场景。

希望这篇文章能帮助你更深入地理解和掌握 JavaScript 中数组操作的进阶技巧。如果有任何问题，欢迎在评论区交流讨论！

知识篇：（一）深入解读 Vue 核心知识点：必备技巧与实战总结
知识篇：（二）vue前端开发中的最佳实践与性能优化的10个技巧含方案
知识篇：（三）Python编程中的常见错误及解决方法
知识篇：（四）JavaScript 数组操作方法详解及示例
知识篇：（五）JavaScript 数组进阶操作：对象属性操作、数组转换与求和
知识篇：（六）微前端架构解析：使用 qiankun 实现灵活的子应用管理
知识篇：（七）VitePress 博客搭建指南：轻量化与高性能的完美结合

JavaScript——数组进阶
qq_46905110的博客
07-01 487
JavaScript——多维数组常见二维数组操作创建与遍历二维数组转置数组排序冒泡排序插入排序常见数组方法栈和队列方法检索方法数组转字符串其他方法 常见二维数组操作 创建与遍历 二维数组转置 数组排序 冒泡排序 插入排序 常见数组方法 栈和队列方法 检索方法 数组转字符串 其他方法 ...
JavaScript—进阶篇
weixin_44595042的博客
03-10 2723
JavaScript—进阶（笔记）第1章 系好安全带,准备启航1-1 让你认识JS 简介： 做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的。 课程须知： 您至少掌握HTML+CSS基础知识 学习内容： 通过JavaScript学习，掌握基本...
js 求数组中的对象某个属性和
zoepriselife316的博客
11-11 901
js求数组中的某属性和
js计算对象数组某个属性的和 数组 求和
热门推荐
祖先生的博客
01-21 1万+
let datalist = [ { 'skuId': 3333, 'skuName': 'test1', 'number': 11 }, { 'skuId': 4444, 'skuName': 'test2', 'number': 22 }, ] let price = datalist.reduce((sum, e) => sum + e.number, 0) console.log(price) // 33
js计算数组里的对象的某个值相同，其余值相加
qq_34117170的博客
07-16 9758
let arry=[ {Code:'x',Quantity:1,ItemType:'normal'}, {Code:'x',Quantity:2,ItemType:'normal'}, {Code:'x',Quantity:5,ItemType:'normal'}, {Code:'y',Quantity:1,ItemType:'spec'}, {Co...
JavaScript数组对象求和三种方法
Coding
05-03 9088
JavaScript数组对象求和三种方法
js数组求和的5种方法
最新发布
qq_39186695的博客
01-18 5223
计算给定数组 arr 中所有元素的总和。数组中的元素均为 Number 类型。
JavaScript 系列--JavaScript一些奇淫技巧的实现方法（三）数字取整，数组求和
saucxs
06-04 493
一、前言 简短的sleep函数，获取时间戳：https://www.mwcxs.top/page/746.html 数字格式化 1234567890 --> 1,234,567,890；argruments 对象(类数组)转换成数组： https://www.mwcxs.top/page/749.html 今天我们来介绍一下数字取整，数组求和。 二、数字取整 1、普通版 ...
JavaScript进阶篇②——函数、事件、内置对象
weixin_53341657的博客
01-16 330
一、函数 1、 什么是函数 函数的作用，可以写一次代码，然后反复地重用这个代码。 如:我们要完成多组数和的功能。 var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum); .... //不停重复两行代码 如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。 使用函数完成: function add2(a,b){ sum = a
JavaScript -- 进阶篇
SunMoonJP的博客
02-27 1379
一、JS基础语法 1.1：什么是变量？什么是变量？从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，盒子用来存放物品，物品可以是衣服、玩具、水果…等。 1.2：给变量取个名字（变量名）我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字(也就是变量的名字)。我么赶快给变量取个好听的名字吧！变量名可以任意取，只不
DP--最大子段和
weixin_46186002的博客
10-03 388
DP–最大子段和 题目描述 给出一个长度为 nn 的序列 aa，选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数，表示序列的长度 n。 第二行有 n 个整数，第 i 个整数表示序列的第 i 个数字 ai . 输出格式 输出一行一个整数表示答案。 输入输出样例 输入 7 2 -4 3 -1 2 -4 3 输出 4 算法思路 通过题意，我们可以了解到： f[i]=max(f[i-1]+n[i],n[i]) 但是！ f[n]的值并不一定是最终结果 比如这个输入： 5 233 233 -666
js中对象数组如何求和
qq_42931285的博客
09-04 2180
js中对象数组如何求和
js 公共方法 数组对象求和
weixin_35749545的博客
12-22 1939
JavaScript 中可以使用以下几种方法来求数组或对象的和: 使用循环 这是最常见的方法，可以使用 for 或 forEach 循环来遍历数组或对象，然后将每个元素的值相加即可。 例如，以下代码求出数组中所有数字的和: var arr = [1, 2, 3, 4, 5]; var sum = 0; for (var i = 0; i < arr.length; i++) { s...
Javascript对象相加
shaohuan_asym的专栏
12-11 5511
这次去携程面试笔试有个JS加性操作符系列的题，有几个比较有代表性： 1.[]+[] 2.{}+{} 3.[]+{} 4.{}+[] 5.({}+{}) google一下，解释也有冲突，个人总结如下： 1.[]+[]  这两个都是对象咯，按照JS加性操作符规则里，有一个为对象，则调用toString，得到""+[];然后继续用这个规则，得到“”+“”；最终得到"" 2.{
js 数组对象求和
weixin_35755823的博客
12-22 1024
要求 JavaScript 数组对象的和，有以下几种方法： 使用 for 循环迭代数组并累加每个对象的值： var arr = [{x: 1}, {x: 2}, {x: 3}]; var sum = 0; for (var i = 0; i < arr.length; i++) { sum += arr[i].x; } console.log(sum); // 输出 6 ...
JS中对数组进行求和
Meskjei的博客
03-14 3520
如果在一个数组想对数组中的所有项进行求和（当然每项都得是Number对象）该怎么做呢？ 可以使用Array对象的reduce或reduceRight方法。这两个方法会遍历数组中的每个对象，并最终返回一个值。 这两个方法都接受两个参数： 在每一项上调用的函数，这个函数包含4个参数 total：初始值，或者是每一次函数调用完之后的返回值 currentValue：当前值，当前所遍历到的值 curr...
JS 数组求和的5种方法
飞翔༒之翼
04-30 1439
1.递归 function sum(arr) { var len = arr.length; if(len == 0){ return 0; } else if (len == 1){ return arr[0]; } else { return arr[0] + sum(arr.slice(1)); } } ...
对数组中的对象某个属性相加求和
chen_c_的博客
04-17 3556
对数组中的对象某个属性相加求和
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈探索者chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值