Detailed explanation of 5 common problems with JavaScript data processing

This article brings you relevant knowledge about javascript, which mainly organizes the related issues of data processing, including the addition, deletion, modification and checking of data, sorting and deduplication of data, etc. Let’s take a look at it together, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

With the continuous development of front-end technology With the development, the interfaces that front-end work needs to display are becoming more and more complex, so there are more and more data processing scenarios. For example: in the background management system, it is often necessary to display a tree structure, and the front-end data returned by the background is a horizontal structure. At this time, We need to convert the data into a tree structure; when displaying the echart histogram, the returned data needs to be deduplicated and merged; when filtering, we need to sort the data; the most common one is that we are leaving comments When adding, deleting, modifying, checking, etc. of Dom, today's article will take you into these business scenarios and face these difficulties. Let us no longer be afraid of JavaScript data operations, making development work simple and efficient.

1. Add, delete, modify and check data

Scenario: This is a background management system - the dictionary management module, which includes four operations of adding, deleting, modifying and checking the data dictionary. So what is our solution to deal with these 4 operations? Please read on

1. New additions to the array

arr.push Push one or more elements from the back of the array

var arr = [1,2,3];
// 返回：修改后数组的长度
arr.push(4,5,6);
console.log(arr)
//输出结果
arr=[1,2,3,4,5,6]

arr.unshift Add one or more elements from the front of the array

var arr = [1,2,3];
// 返回：修改后数组的长度
arr.unshift(4,5,6);
console.log(arr)
//输出结果
arr=[4,5,6,1,2,3]

2. Array deletion

arr.shift Used to remove the first element of the array

// 数组的shift方法用于将数组的第一个元素移除
var arr = [1,2,3];
// 返回 被删除的元素；
arr.shift();
//输出结果
arr=[2,3]

arr.pop Delete the last element of the array One element;

// 数组的pop方法用于将数组的最后一个元素移除
var arr = [1,2,3];
// 返回 被删除的元素；
arr.pop();
//输出结果
arr = [1,2];

3. Modification of array

arr.splice: Addition, deletion and modification of any position of the array

It has three functions: deletion, insertion, and replacement. This method returns an array (including the items deleted from the original array (if no items are deleted, an empty array is returned))

Syntax

splice(index,howmany,item1,…itemx);

• index——Required, integer, specifies the position to add or delete, use negative numbers, specified from the end of the array Location.
• howmany——Required, the quantity to be deleted, if it is 0, the item will not be deleted.
• item1,…itemx – Optional, new items to add to the array.

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. Array search

arr.indexOf: Find the index based on the element. If the element is in the array, return the index, otherwise return -1 , find whether the element is inside the array

var arr = [10,20,30]
console.log(arr.indexOf(30));  // 2
console.log(arr.indexOf(40));  // -1

arr.findIndex: used to find the index of the first element that meets the condition, if not, return -1

var arr = [10, 20, 30];
var res1 = arr.findIndex(function (item) {
  return item >= 20;
});
// 返回 满足条件的第一个元素的的索引
console.log(res1);

5. Conversion between arrays and strings

join is used to concatenate multiple elements in the array into a string with specified delimiters

var arr = ['用户1','用户2','用户3'];
var str = arr.join('|'); 
console.log(str);  //  
用户1|用户2|用户3

split String method: convert numbers, followed by separated characters

// 这个方法用于将一个字符串以指定的符号分割成数组
var str = '用户1|用户2|用户3';
var arr = str.split('|');
console.log(arr);
['用户1','用户2','用户3']

2. Sorting of data

It has to be said that with the advancement of technology and the development of hardware, browsers The computing performance has also improved. Next we will encounter the second situation - data sorting operation, which requires us to implement various sorting on the front end. So what are our solutions? Let's look down~

1. js’s built-in function arr.sort()

 var arr = [23,34,3,4,23,44,333,444];
        arr.sort(function(a,b){
            return  a-b;
        })
    console.log(arr);

Here we also introduce several commonly used sorting algorithms:

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="冒泡排序">5、冒泡排序</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="快速排序">6、快速排序</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="堆排序">7、堆排序</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="对象键值法去重">2、对象键值法去重</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="排序后相邻去除法">3、排序后相邻去除法</h3><pre class="brush:php;toolbar:false">/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i <h3 id="数组下标法">4、数组下标法</h3><pre class="brush:php;toolbar:false">/*
*
* 还是得调用“indexOf”性能跟方法1差不多，
* 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。否则存入结果数组。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i <h3 id="优化遍历数组法">5、优化遍历数组法</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="四-平级列表变成树形结构">四 、平级列表变成树形结构</h2><p>        呐，在选择部门的时候，是不是会经常看到这种树状菜单，后台返回的数据一般都是平级的数组，那么这种菜单，我们一般是怎么生成的呢，请看~~</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/89a65bccb529066d08ef2fe1c0b311b1-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></p><h3 id="这里特意将方法奉上"> 1、这里特意将方法奉上：</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>【相关推荐：<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>

The above is the detailed content of Detailed explanation of 5 common problems with JavaScript data processing. For more information, please follow other related articles on the PHP Chinese website!