隨著前端技術的不斷發展,前端工作需要展示的介面越來越複雜,因此資料處理的場景越來越多,例如:在後台管理系統中常常需要展示一個樹狀結構,後台返回的前端的資料是平級結構,這時候需要我們把資料轉成樹結構; echart柱狀圖展示時,需要對返回資料進行去重合併處理;在進行篩選的時候,我們需要對資料進行一個排序處理;最常見的還有我們在做留言評論時候Dom的增刪改查等等,那麼今天這篇文章帶你一起走進這些業務場景,直面這些疑難雜症,讓我們面對JavaScript的資料操作不再恐懼,讓開發工作變得簡單有效率。
一、資料的增刪改查
場景:這是一個後台管理系統-字典管理模組,包含了資料字典的增刪改查4個作業。那麼應對這4個操作,我們的解決方案是什麼呢,請您接著往下看
#1、數組的新增
arr.push 從陣列後面推入一個元素或多個元素
var arr = [1,2,3]; // 返回:修改后数组的长度 arr.push(4,5,6); console.log(arr) //输出结果 arr=[1,2,3,4,5,6]
arr.unshift 從陣列前面新增一個或多個元素
var arr = [1,2,3]; // 返回:修改后数组的长度 arr.unshift(4,5,6); console.log(arr) //输出结果 arr=[4,5,6,1,2,3]
2、陣列的刪除
arr.shift 用於移除陣列的第一個元素
// 数组的shift方法用于将数组的第一个元素移除 var arr = [1,2,3]; // 返回 被删除的元素; arr.shift(); //输出结果 arr=[2,3]
arr.pop 刪除陣列最後一個元素;
// 数组的pop方法用于将数组的最后一个元素移除 var arr = [1,2,3]; // 返回 被删除的元素; arr.pop(); //输出结果 arr = [1,2];
3、陣列的修改
arr.splice:可進行數組任何位置的增刪改
具有刪除、插入,替換三個作用,該方法返回的是一個數組(包含從原始數組中刪除的項(如果沒有刪除項則傳回一個空數組))
語法
splice(index,howmany,item1,…itemx);
- #index——必須,整數,規定添加或刪除的位置,使用負數,從數組尾部規定位置。
- howmany-必須,要刪除的數量,如果為0,則不刪除項目。
- item1,…itemx-可選,新增給陣列的新項目。
1. 删除 可删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。 let arr=[1,2,3]; let arr1=arr.splice(1,2);//会删除数组的第2和3个元素(即2,3) alert(arr);//[1] alert(arr1);//[2,3] 2. 插入 可以向指定位置插入任意数量的项只需提供3个参数:起始位置、0(要删除的项数)、要插入的项。 let arr=[1,2,3]; let arr1=arr.splice(1,0,4,5);//会从数组的1位置开始插入4,5 alert(arr);//[1,4,5,2,3] alert(arr1);//[] 3. 替换 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项(插入的数量不必与删除的数量相等) let arr = [1,2,3]; let arr1=arr.splice(1,1,"red","green");//会删除2,然后从2位置插入字符串"red"和"green" alert(arr);//[1,"red","green",3] alert(arr1);//[2]
4、陣列的尋找
#arr.indexOf:根據元素尋找索引,如果這個元素在陣列中,返回索引,否則回傳-1,找元素在不在數組內部
var arr = [10,20,30] console.log(arr.indexOf(30)); // 2 console.log(arr.indexOf(40)); // -1
arr.findIndex :用來找出滿足條件的第一個元素的索引,如果沒有,則回傳-1
var arr = [10, 20, 30]; var res1 = arr.findIndex(function (item) { return item >= 20; }); // 返回 满足条件的第一个元素的的索引 console.log(res1);
5、陣列與字串互轉
join 用於將陣列中的多元素以指定分隔符號連接成一個字符字串
var arr = ['用户1','用户2','用户3']; var str = arr.join('|'); console.log(str); // 用户1|用户2|用户3
split 字串的方法:轉數字,後面為分隔的字元
// 这个方法用于将一个字符串以指定的符号分割成数组 var str = '用户1|用户2|用户3'; var arr = str.split('|'); console.log(arr); ['用户1','用户2','用户3']
二、資料的排序
不得不說,隨著科技的進步硬體的發展,瀏覽器的運算效能也隨之提升,接下來我們會遇到第二種情況──資料的排序操作,也就是需要我們在前端實現各種排序,那我們的解又有哪些呢,接著往下看~
#1、js的自帶函數arr.sort()
var arr = [23,34,3,4,23,44,333,444]; arr.sort(function(a,b){ return a-b; }) console.log(arr);
這裡也一併介紹一下常用的幾種排序演算法:
2、插入排序
var arr = [23,34,3,4,23,44,333,444]; var arrShow = (function insertionSort(array){ if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){ for (var i = 1; i = 0 && array[j] > key) { array[j + 1] = array[j]; j--; } array[j + 1] = key; } return array; }else{ return 'array is not an Array!'; } })(arr); console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444]
3、二分插入排序
function binaryInsertionSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { for (var i = 1; i = left; j--) { array[j + 1] = array[j]; } array[left] = key; } return array; } else { return 'array is not an Array!'; } }
4、选择排序
function selectionSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { var len = array.length, temp; for (var i = 0; i <h3 id="strong-冒泡排序-strong"><strong>5、冒泡排序</strong></h3><pre class="brush:php;toolbar:false">function bubbleSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { var len = array.length, temp; for (var i = 0; i = i; j--) { if (array[j] <h3 id="strong-快速排序-strong"><strong>6、快速排序</strong></h3><pre class="brush:php;toolbar:false">//方法一 function quickSort(array, left, right) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') { if (left <h3 id="strong-堆排序-strong"><strong>7、堆排序</strong></h3><pre class="brush:php;toolbar:false">/*方法说明:堆排序 @param array 待排序数组*/ function heapSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { //建堆 var heapSize = array.length, temp; for (var i = Math.floor(heapSize / 2); i >= 0; i--) { heapify(array, i, heapSize); } //堆排序 for (var j = heapSize - 1; j >= 1; j--) { temp = array[0]; array[0] = array[j]; array[j] = temp; heapify(array, 0, --heapSize); } } else { return 'array is not an Array!'; } } /*方法说明:维护堆的性质 @param arr 数组 @param x 数组下标 @param len 堆大小*/ function heapify(arr, x, len) { if (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'number') { var l = 2 * x, r = 2 * x + 1, largest = x, temp; if (l arr[largest]) { largest = l; } if (r arr[largest]) { largest = r; } if (largest != x) { temp = arr[x]; arr[x] = arr[largest]; arr[largest] = temp; heapify(arr, largest, len); } } else { return 'arr is not an Array or x is not a number!'; } }
三、数据的去重
好的,当我们解决完排序的问题,紧接着我们又面临着数据去重的问题,不要怕,解决方案依然有很多,请您慢慢往下接着看:
在工作上,对json数据处理时,例如遇到对某些产品的尺码进行排序,不同的产品都有相同的尺码那是正常不过的事情,如果我们要把这些转成表格的形式来展现,那么这些尺码就不要不能重复才行.在这里呢,我就写几个数组去重的方法,给大家参考参考 :
1、简单的去重方法
// 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i <h3 id="strong-对象键值法去重-strong"><strong>2、对象键值法去重</strong></h3><pre class="brush:php;toolbar:false">/* * 速度最快, 占空间最多(空间换时间) * * 该方法执行的速度比其他任何方法都快, 就是占用的内存大一些。 * 现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键, * 不是的话给对象新增该键并放入新数组。 * 注意点:判断是否为js对象键时,会自动对传入的键执行“toString()”, * 不同的键可能会被误认为一样,例如n[val]-- n[1]、n["1"]; * 解决上述问题还是得调用“indexOf”。*/ function uniq(array){ var temp = {}, r = [], len = array.length, val, type; for (var i = 0; i <h3 id="strong-排序后相邻去除法-strong"><strong>3、排序后相邻去除法</strong></h3><pre class="brush:php;toolbar:false">/* * 给传入数组排序,排序后相同值相邻, * 然后遍历时,新数组只加入不与前一值重复的值。 * 会打乱原来数组的顺序 * */ function uniq(array){ array.sort(); var temp=[array[0]]; for(var i = 1; i <h3 id="strong-数组下标法-strong"><strong>4、数组下标法</strong></h3><pre class="brush:php;toolbar:false">/* * * 还是得调用“indexOf”性能跟方法1差不多, * 实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i, * 那么表示第i项是重复的,忽略掉。否则存入结果数组。 * */ function uniq(array){ var temp = []; for(var i = 0; i <h3 id="strong-优化遍历数组法-strong"><strong>5、优化遍历数组法</strong></h3><pre class="brush:php;toolbar:false">// 思路:获取没重复的最右一值放入新数组 /* * 推荐的方法 * * 方法的实现代码相当酷炫, * 实现思路:获取没重复的最右一值放入新数组。 * (检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)*/ function uniq(array){ var temp = []; var index = []; var l = array.length; for(var i = 0; i <h2 id="strong-四-平级列表变成树形结构-strong"><strong>四 、平级列表变成树形结构</strong></h2><p> 呐,在选择部门的时候,是不是会经常看到这种树状菜单,后台返回的数据一般都是平级的数组,那么这种菜单,我们一般是怎么生成的呢,请看~~</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/5a1c26c61be3b8f0fdb8276aa4bc4565-4.png?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p><h3 id="strong-这里特意将方法奉上-strong"><strong> 1、这里特意将方法奉上:</strong></h3><pre class="brush:php;toolbar:false">const dataTree = [ {id: 1, name: '总公司', parentId: 0}, {id: 2, name: '深圳分公司', parentId: 1}, {id: 3, name: '北京分公司', parentId: 1}, {id: 4, name: '研发部门', parentId: 2}, {id: 5, name: '市场部门', parentId: 2}, {id: 6, name: '测试部门', parentId: 2}, {id: 7, name: '财务部门', parentId: 2}, {id: 8, name: '运维部门', parentId: 2}, {id: 9, name: '市场部门', parentId: 3}, {id: 10, name: '财务部门', parentId: 3}, ] function changeData(data, parentId = 0) { let tree = [];//新建空数组 //遍历每条数据 data.map((item) => { //每条数据中的和parentId和传入的相同 if (item.parentId == parentId) { //就去找这个元素的子集去 找到元素中parentId==item.id 这样层层递归 item.children = changeData(data, item.id); tree.push(item); } }) return tree } console.log(changeData(dataTree, 0));
五、数组对象相同项合并处理
我们在图表展示的时候会经常遇到数据处理,其中数组合并处理也会经常遇到,下面就是数组相同项合并的一种方式:
- 首先由原始的数组arr数据,
- 然后创建一个map空对象和一个result空数组,通过判断map中是否含有某项来判断数组result是否添加数据,
- 然后再判断相同项和已有的result数组内容比较合并;
1、博主特意将珍藏多年的祖传代码,在这里奉献给各位大佬:
var arr = [ {"id":"1","name":"车厘子","num":"245"}, {"id":"1","name":"车厘子","num":"360"}, {"id":"2","name":"苹果","num":"120"}, {"id":"2","name":"苹果","num":"360"}, {"id":"2","name":"苹果","num":"180"}, {"id":"3","name":"香蕉","num":"160"}, {"id":"4","name":"菠萝","num":"180"}, {"id":"4","name":"菠萝","num":"240"} ]; var map = {},result= []; for(var i = 0; i <p>看到这里 ,前端常见的几种数据处理的疑难杂症已经解决的差不多了,当然呐,现实情况下还有许许多多的问题未收录进来,后续会陆陆续续慢慢更新收录下来,同时呢也希望有遇到JavaScript数据处理比较头疼的朋友可以与博主交流探讨,有好的解题思路的也可以反馈给到博主。</p><hr><h2 id="strong-总结-strong"><strong>总结</strong></h2><p> 以上就是今天要讲的全部内容,本文介绍了JavaScript开发过程中常见的5种数据处理问题并提供了对应的解决思路,基本覆盖了日常开发过程中的使用需求, 阅读本片文章可以大大提升你的javaScript基本功,在收到开发需求时,能快速响应,并给出解决方案。</p><p>【相关推荐:<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p>
以上是整理分享JavaScript開發中常見的5種資料處理問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver CS6
視覺化網頁開發工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

WebStorm Mac版
好用的JavaScript開發工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。