flash网站建设公司,电脑维修网站模板,制作企业网站费用明细,松江品划网站建设前言 数组主要使用场景有#xff1a; 存储和处理数据#xff1a;数组是一种有序的数据结构#xff0c;可以用来存储和处理多个相关的数据。在前端开发中#xff0c;我们经常使用数组来存储和处理列表、表格、选项等数据。 循环和遍历#xff1a;数组提供了循环和遍历的功能…前言 数组主要使用场景有 存储和处理数据数组是一种有序的数据结构可以用来存储和处理多个相关的数据。在前端开发中我们经常使用数组来存储和处理列表、表格、选项等数据。 循环和遍历数组提供了循环和遍历的功能可以方便地对数组中的每个元素进行操作。在前端开发中我们经常使用循环和遍历来处理列表、表格、选项等数据。 数据过滤和转换数组提供了一些方法可以对数组进行过滤和转换。例如我们可以使用filter()方法来过滤数组中的元素使用map()方法来对数组中的每个元素进行转换。 数据排序和查找数组提供了一些方法可以对数组进行排序和查找。例如我们可以使用sort()方法来对数组进行排序使用indexOf()方法来查找数组中的元素。
一、常见的数组方法
1.1 push 将指定的元素添加到数组的末尾并返回新的数组长度 const arr [春, 夏, 秋]console.log(arr, arr.push(冬), arr) 1.2 pop 从数组中删除最后一个元素并返回该元素的值 const arr [春, 夏, 秋]console.log(arr新的长度, arr.push(冬), arr, arr)console.log(pop返回, arr.pop(), arr, arr)
1.3 shift 从数组中删除第一个元素并返回该元素的值 const arr [春, 夏, 秋]console.log(arr新的长度, arr.push(冬), arr, arr)console.log(pop返回, arr.pop(), arr, arr)console.log(shift方法, arr.shift(), arr, arr) 1.4 unshift 向数组首位添加一个或多个元素并返回新的数组长度 const arr [春, 夏, 秋]console.log(arr新的长度, arr.push(冬), arr, arr)console.log(pop返回, arr.pop(), arr, arr)console.log(shift方法, arr.shift(), arr, arr)console.log(unshift, arr.unshift(春), arr, arr)console.log(unshift, arr.unshift(四季, 天气), arr, arr) 1.5 concat 合并多个数组或值返回一个新的数组 console.log(concat会返回新的值不改变原数据, arr.concat(数据拼接), arr, arr) 1.6 slice 截取数组的一部分返回一个新的数组 const arr1 [0, 1, 2, 3, 4]const arr2 [0, 1, 2, 3, 4]console.log(slice的使用, arr1.slice(2), 截一个而且只截下标为4, arr2.slice((1, 4)))
1.7 splice 删除、替换或添加数组的元素并返回被删除的元素 const name [前, 端, 百, 草, 阁]name.splice(2, 0, 你好) // 从第三个元素开始删删0个并且在第三个元素前加上 你好console.log(name, name)
1.8 fliter 过滤数组中的元素返回一个新的数组) const words [spray, limit, elite, exuberant, destruction, present]const result words.filter(word word.length 6) // 循环筛选出 长度大于6的 并返回一个新的数组console.log(result) // [exuberant, destruction, present]
1.9 map 对数组中的每个元素进行操作返回一个新的数组 const array1 [1, 4, 9, 16]const map1 array1.map(item item * 2) // 循环进行一个每一项都乘以2的操作 并返回一个 新数组console.log(map1) // [2, 8, 18, 32] 1.10 sort 对数组进行排序 const arr3 [1000,10,1,4,3,2,77]const arr4 [1000,10,1,4,3,2,77]arr3.sort((x,y) x - y) // 正序console.log(arr3) // [1, 2, 3, 4, 10, 77, 1000]arr4.sort((x,y) y - x) // 倒序console.log(arr4) // [1000, 77, 10, 4, 3, 2, 1] 1.11 reverse 翻转数组中的元素 const arr5 [1, 2, 3, 4, 5]arr5.reverse()console.log(arr5) // [5, 4, 3, 2, 1] 1.12 indexOf 查找数组中指定元素的索引 const arr6 [1, 2, 3, 4, 5, 3]const num arr6.indexOf(3) // 查找 3 出现的索引 只能查找到首次出现的索引console.log(num) // 2const num1 arr6.indexOf(6) // 查找 6 出现的索引 找不到为-1console.log(num1) // -1 1.13 find 查找数组中符合条件的第一个元素 const array2 [5, 12, 8, 130, 44]const found array2.find(item item 10) // 找到第一个大于10的元素console.log(found) // 12 1.14 findIndex 查找数组中符合条件的第一个元素的索引 const array3 [5, 12, 8, 130, 44]console.log(findIndex, array3.findIndex(i i 10)) 1.15 includes 判断一个数组是否包含一个指定的值 const array4 [1, 2, 3, 4, 5]console.log(includes, array4.includes(4)) 1.16 every 判断数组内的所有元素是否都能通过指定函数的测试 const array5 [1, 30, 39, 29, 10, 13];const res array5.every(item item 0) // 判断数组中每一个元素是否都大于0console.log(res); // trueconst res2 array5.every(item item 30) // 判断数组中每一个元素是否都大于30console.log(res2); 1.17 some 判断数组中是否至少有一个元素通过了指定函数的测试 const array5 [1, 30, 39, 29, 10, 13];const res array5.some(item item 0) // 判断数组中每一个元素是否都大于0console.log(res); // trueconst res2 array5.some(item item 100) // 判断数组中每一个元素是否都大于30console.log(res2); // false
1.18 join 将一个数组的所有元素连接成一个字符串并返回这个字符串 const elements [Fire, Air, Water];const res6 elements.join() // 将数组中每一个元素用逗号连接console.log(res6); // Fire,Air,Waterconst res4 elements.join(-) // 将数组中每一个元素用-连接console.log(res4); // Fire-Air-Waterconst res5 elements.join() // 将数组中每一个元素用连接console.log(res5); // FireAirWater 1.19 reduce 计算数组所有元素的总和 const array10 [1, 2, 3, 4];const initialValue 0;// 01234const sumWithInitial array10.reduce((accumulator, currentValue) accumulator currentValue,initialValue);// initialValue 是初始值console.log(sumWithInitial); // 10 1.20 forEach 数组循环遍历 const array11 [春, 夏, 秋, 冬];array11.forEach(element console.log(element));
1.21 fill 此方法通过用静态值填充数组来更改原始数组。你可以将所有元素更改为静态或少数选定元素。 const arr [1, 2, 3, 4]console.log(fill的使用, arr.fill(0, 1, 3)) // [1, 0, 0, 4]const arr1 [1, 2, 3, 4]console.log(fill的使用, arr1.fill(0)) // [0, 0, 0, 0] 二、 将平铺的数组结构转换为tree型数组结构
这里先给出平铺的数组结构其中pid是他的父亲id是他自己
[{id: 604e21feb205b95968e13129,pid: ,name: 总裁办,code: 1001,manager: 管理员,introduce: 公司战略部,createTime: 2021-03-14 22:47:25},{id: 604e222bb205b95968e1312a,pid: ,name: 行政部,code: XZB,manager: 管理员,introduce: 行政部,createTime: 2021-03-14 22:47:25},{id: 604e223fb205b95968e1312b,pid: ,name: 人事部,code: RSB,manager: 管理员,introduce: 人事部,createTime: 2021-03-14 22:47:25},{id: 604e2251b205b95968e1312c,pid: ,name: 财务部,code: CWB,manager: 管理员,introduce: 财务部,createTime: 2021-03-14 22:47:25},{id: 604e2262b205b95968e1312d,pid: 604e2251b205b95968e1312c,name: 财务核算部,code: CWHSB,manager: 管理员,introduce: 财务核算部,createTime: 2021-03-14 22:47:25},{id: 604e227db205b95968e1312e,pid: 604e2251b205b95968e1312c,name: 税务管理部,code: SWGLN,manager: 管理员,introduce: 税务管理部,createTime: 2021-03-14 22:47:25},{id: 604e2297b205b95968e1312f,pid: 604e2251b205b95968e1312c,name: 薪资管理部,code: XZGLB,manager: 管理员,introduce: 薪资管理部,createTime: 2021-03-14 22:47:25},{id: 6051ad90e93db6522c1d00d2,pid: ,name: 技术部,code: JSB,manager: 孙财,introduce: 技术部,createTime: 2021-03-17 15:18:23},{id: 6051adb6e93db6522c1d00d3,pid: 6051ad90e93db6522c1d00d2,name: Java研发部,code: JYFB,manager: 管理员,introduce: JAVA研发部,createTime: 2021-03-17 15:18:23},{id: 6051add6e93db6522c1d00d4,pid: 6051ad90e93db6522c1d00d2,name: Python研发部,code: PYFB,manager: 罗晓晓,introduce: Python研发部,createTime: 2021-03-17 15:18:23},{id: 6051adefe93db6522c1d00d5,pid: 6051ad90e93db6522c1d00d2,name: Php研发部,code: PhpYFB,manager: 孙财,introduce: Php研发部,createTime: 2021-03-17 15:18:23},{id: 6051ae03e93db6522c1d00d6,pid: ,name: 运营部,code: YYB,manager: 孙财,introduce: 运营部,createTime: 2021-03-17 15:18:23},{id: 6051ae15e93db6522c1d00d7,pid: ,name: 市场部,code: SCB,manager: 孙财,introduce: 市场部,createTime: 2021-03-17 15:18:23},{id: 6051ae28e93db6522c1d00d8,pid: 6051ae15e93db6522c1d00d7,name: 北京事业部,code: BJSYB,manager: 孙财,introduce: BJSYB,createTime: 2021-03-17 15:18:23},{id: 6051ae3de93db6522c1d00d9,pid: 6051ae15e93db6522c1d00d7,name: 上海事业部,code: SHSYB,manager: 文吉星,introduce: 上海事业部,createTime: 2021-03-17 15:18:23}]将平铺结构转换为树形结构
function tranListToTreeData(list) {// 定义两个变量 一个用来解决映射关系 更快速的匹配到id对应的数据const map {}// 存放最后生成的树形数组const treeList []// 目前数组还是平铺状态先做好映射关系list.forEach(item {// 这样map这个对象里面的键值对 就是id和数据的对应关系map[item.id] item})list.forEach(item {// 无论是item 还是parent 都是一个对象 涉及浅拷贝 拿的都是地址const parent map[item.pid]if (parent) {if (!parent.children) {parent.children []}parent.children.push(item)} else {treeList.push(item)}})return treeList
}之前的数据结构 现在的数据结构 三、对数组相关的查询常见方法。
1、找出数组中的最大数
const arr [1, 2, 3, 4]console.log(找出来最大值, Math.max.apply(null, arr))
2、找出数组中的最小数
const arr [1, 2, 3, 4]console.log(找出来最小值, Math.min.apply(null, arr))
四、数组常见的一些工作场景
前端工作常见数组数据处理的一些场景总结_码路老默007的博客-CSDN博客
