搜尋
首頁web前端js教程整理分享JavaScript開發中常見的5種資料處理問題

整理分享JavaScript開發中常見的5種資料處理問題

        隨著前端技術的不斷發展,前端工作需要展示的介面越來越複雜,因此資料處理的場景越來越多,例如:在後台管理系統中常常需要展示一個樹狀結構,後台返回的前端的資料是平級結構,這時候需要我們把資料轉成樹結構; 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中文網其他相關文章!

陳述
本文轉載於:csdn。如有侵權,請聯絡admin@php.cn刪除
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能