💻 【JavaScript】多维数组及数组扁平化 🏠专栏:JavaScript
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁
文章目录
【JavaScript】多维数组及数组扁平化
一. 概念
(1) 一维数组:数组中只有数据的时候就是一维数组
var arr = [10,12,23,45];
(2) 多维数组:字面理解就是数组中嵌套了数组
var arr = [1,[2,[3]]];
案例:生成一个多维数组
// 要生成的数组样式
var arr = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25]
]
方式:使用双重for循环
var arr = []; // 定义一个存放的数组
num = 1; // 初始化存放的数字
for (var i = 0; i < 5; i++) {
arr[i] = []; // 内部的数组
for (var j = 0; j < 5; j++) {
arr[i][j] = num;
num++;
}
}
console.log(arr);
二. 数组扁平化
数组扁平化通俗来讲就是将多维数组转化为一维数组
方式一:使用flat()方法
var result = arr.flat(Infinity); // ()里的数字表示要进行扁平化操作的次数 Infinity(无穷)
console.log(result); // [1, 3, 4, 5, 6, 7, 8]
方式二:使用递归
function flatten(arr) {
var result = [];
if (Array.isArray(arr)) {
arr.forEach(function(item) {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(item);
}
});
} else {
result.push(arr);
}
return result;
}
console.log(flatten(arr)); // [1, 3, 4, 5, 6, 7, 8]
方式三:使用reduce()方式处理
// 封装一个函数
function flatten(arr) {
// 定义一个空数组接收最终的结果
var result = [];
// 判断arr是不是数组
if (!Array.isArray(arr)) {
// 不是,直接全部插入空数组中
result.push(arr);
} else {
result = arr.reduce(function(prev, item) {
// 判断arr中的数组项中是否含有数组
if (Array.isArray(item)) {
return prev.concat(flatten(item));
} else {
return prev.concat(item);
}
}, []);
}
return result;
}
console.log(flatten(arr)); // [1, 3, 4, 5, 6, 7, 8]
方式四:使用toString()
toString():将对象转换成字符串
const arr = [1, 2, [3, [4, 5, [2, 6]]]];
function flatten(arr) {
let arr1 = arr.toString().split(",").map(item => +item);
return arr1;
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 2, 6]
三. 对象数组的联合操作
<style>
table {
width: 600px;
border: 1px solid #000;
}
td {
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<!-- 分割线 -->
<div id="box"></div>
<script>
var arr = [{
id: 1,
cScore: 100,
mScore: 69,
eScore: 98
}, {
id: 2,
cScore: 78,
mScore: 78,
eScore: 34
}, {
id: 3,
cScore: 34,
mScore: 56,
eScore: 56
}, {
id: 4,
cScore: 89,
mScore: 34,
eScore: 96
}, {
id: 5,
cScore: 90,
mScore: 67,
eScore: 67
}, {
id: 6,
cScore: 23,
mScore: 90,
eScore: 45
}, ]
// 计算各科成绩的总分和对总分进行评级
arr.forEach(function(item) {
item["total"] = item["cScore"] + item["eScore"] + item["mScore"];
item["remark"] = item["total"] > 200 ? "优秀" : "一般";
});
arr.sort(function(a, b) {
return b.total - a.total;
});
// 表格的表头
var str = `<table><tr>
<td>id</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>总分</td>
<td>评级</td>
</tr>`;
// 循环渲染数据到页面上
arr.forEach(function(item) {
str += `<tr>
<td>${item.id}</td>
<td>${item.cScore}</td>
<td>${item.mScore}</td>
<td>${item.eScore}</td>
<td>${item.total}</td>
<td>${item.remark}</td>
</tr>`;
});
str += "</table>"
box.innerHTML = str;
</script>
效果图:
结束语:
希望对您有一点点帮助,如有错误欢迎小伙伴指正。
👍点赞:您的赞赏是我前进的动力!
⭐收藏:您的支持我是创作的源泉!
✍评论:您的建议是我改进的良药!
一起加油!!!💪💪💪