With the continuous development of front-end technology, the interfaces that need to be displayed in front-end work are becoming more and more complex, so there are more and more data processing scenarios. For example: a tree structure often needs to be displayed in the background management system, and the front-end data returned by the background is 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 There are additions, deletions, modifications and checks of Dom when we are making comments, etc. So today’s article will take you into these business scenarios and face these difficulties. Let us no longer be afraid of JavaScript data operations and let the development work Become simple and efficient.

1. Data addition, deletion, modification and query

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

1. New addition to the array

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

var arr = [1,2,3];
// Return: the length of the modified array arr.push(4,5,6);
console.log(arr)
//Output result arr=[1,2,3,4,5,6]

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

var arr = [1,2,3];
// Return: the length of the modified array arr.unshift(4,5,6);
console.log(arr)
//Output result arr=[4,5,6,1,2,3]

2. Array deletion

arr.shift is used to remove the first element of the array

// The shift method of the array is used to remove the first element of the array. Remove one element var arr = [1,2,3];
// Return the deleted element;
arr.shift();
//Output result arr=[2,3]

arr.pop deletes the last element of the array;

//The pop method of the array is used to remove the last element of the array var arr = [1,2,3];
// Return the deleted element;
arr.pop();
//Output result arr = [1,2];

3. Array modification

arr.splice : It can be added, deleted, or modified at any position in the array.

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

Syntax

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

• index - required, integer, specifies the position to add or delete, use negative numbers, start from the end of the array Specify 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. Delete can delete any number of items by specifying 2 parameters: the position of the first item to be deleted and the number of items to be deleted.

let arr=[1,2,3];
let arr1=arr.splice(1,2);//will delete the 2nd and 3rd elements of the array (i.e. 2,3)
alert(arr);//[1]
alert(arr1);//[2,3]


2. Insert can insert any number of items into the specified position by providing only 3 parameters: starting position, 0 (number of items to be deleted), and items to be inserted.
let arr=[1,2,3];
let arr1=arr.splice(1,0,4,5);//will insert 4,5 starting from position 1 of the array
alert(arr);//[1,4,5,2,3]
alert(arr1);//[]

3. Replacement can insert any number of items into the specified position and delete any number of items at the same time. You only need to specify 3 parameters: the starting position, the number of items to be deleted, and any number of items to be inserted (the number of insertions does not have to be equal to the number deleted)
let arr = [1,2,3];
let arr1=arr.splice(1,1,"red","green");//will delete 2, and then insert the strings "red" and "green" from position 2
alert(arr);//[1,"red","green",3]
alert(arr1);//[2]

4. Array search

arr.indexOf : Find the index according to 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;
});
//Return the index of the first element that meets the condition console.log(res1);

5. Array and string conversion

join is used to connect multiple elements in the array into a string with the specified separator

var arr = [ 'User1','User2','User3'];
var str = arr.join('|'); 
console.log(str); //  
User 1 | User 2 | User 3

Split string method: convert numbers, followed by separated characters

// This method is used to split a string into an array with the specified symbol var str = 'User 1 | User 2 | User 3';
var arr = str.split('|');
console.log(arr);
['User 1', 'User 2', 'User 3']

2. Sorting of data

It must be said that with the advancement of technology and the development of hardware, the computing performance of browsers has also improved. Next we will encounter The second situation - data sorting operation, which means we need to implement various sorting on the front end, so what are our solutions? Let’s read on~

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

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

Here we also introduce several commonly used sorting algorithms:

2. Insertion sort

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 < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while (j >= 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. Binary insertion sort

function binaryInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
for (var i = 1; i < array.length; i++) {
    var key = array[i], left = 0, right = i - 1;
    while (left <= right) {
    var middle = parseInt((left + right) / 2);
    if (key < array[middle]) {
    right = middle - 1;
} else {
    left = middle + 1;
}
}
for (var j = i - 1; j >= left; j--) {
    array[j + 1] = array[j];
}
array[left] = key;
}
return array;
} else {
    return 'array is not an Array!';
}
}

4. Selection sorting

function selectionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
    var len = array.length, temp;
    for (var i = 0; i < len - 1; i++) {
    var min = array[i];
    for (var j = i + 1; j < len; j++) {
        if (array[j] < min) {
        temp = min;
        min = array[j];
        array[j] = temp;
    }
  }
    array[i] = min;
}
 return array;
} else {
    return 'array is not an Array!';
}
}

5. Bubble sort

function bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.length, temp;
for (var i = 0; i < len - 1; i++) {
    for (var j = len - 1; j >= i; j--) {
        if (array[j] < array[j - 1]) {
        temp = array[j];
        array[j] = array[j - 1];
        array[j - 1] = temp;
}
}
}
    return array;
} else {
    return 'array is not an Array!';
}
}

6. Quick sort

//Method 1 function quickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
if (left < right) {
var x = array[right], i = left - 1, temp;
for (var j = left; j <= right; j++) {
    if (array[j] <= x) {
    i++;
    temp = array[i];
    array[i] = array[j];
    array[j] = temp;
}
}
quickSort(array, left, i - 1);
quickSort(array, i + 1, right);
};
} else {
return 'array is not an Array or left or right is not a number!';
}
}
var aaa = [3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.length - 1);
console.log(aaa);


//Method 2 var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};

7. Heap sort

/*Method description: Heap sort @param array Array to be sorted*/
function heapSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
//Build a heap var heapSize = array.length, temp;
for (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(array, i, heapSize);
}

//Heap sort 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!';
}
}
/*Method description: Maintain the properties of the heap @param arr array @param x array subscript @param len heap size*/
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 < len && arr[l] > arr[largest]) {
largest = l;
}
if (r < len && arr[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!';
}
}

3. Data deduplication

Okay, after we have solved the sorting problem, we are now faced with the problem of data deduplication. Don’t be afraid, there are still many solutions. Please read on slowly:

At work When processing json data, for example, when sorting the sizes of certain products, it is normal for different products to have the same size. If we want to convert these into a table to display them, then these The size should not be duplicated. Here, I will write down a few methods to remove duplication from arrays for your reference:

1. Simple method to remove duplication from

//The simplest method to remove duplication from arrays/*
* Create a new array, traverse the incoming array, and push the value into the new array if it is not in the new array * IE8 and below do not support the indexOf method of the array* */
function uniq(array){
    var temp = []; //A new temporary array for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

2. Object key-value method to remove duplicates

/*
* The fastest and takes up the most space (space is exchanged for time)
*
* This method executes faster than any other method, but it takes up more memory.
* Current idea: Create a new js object and a new array. When traversing the incoming array, determine whether the value is the key of the js object.
* If not, add the key to the object and put it into a new array.
* Note: When determining whether it is a js object key, "toString()" will be automatically executed on the incoming key.
* Different keys may be mistaken for the same, such as n[val]--n[1], n["1"];
* To solve the above problem, you still have to call "indexOf". */
function uniq(array){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    return r;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

3. Adjacent removal method after sorting

/*
* Sort the incoming array so that the same values ​​are adjacent after sorting.
* Then when traversing, only values ​​that are not duplicates of the previous value are added to the new array.
* Will disrupt the order of the original array* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if(array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

4. Array subscripting method

/*
*
* You still have to call "indexOf" and the performance is similar to method 1.
* Implementation idea: If the i-th item of the current array first appears in a position other than i,
* Then it means that the i-th item is repeated and ignored. Otherwise, store the result array.
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //If the i-th item of the current array first appears at i in the current array, it will be stored in the array; otherwise, it means a duplicate if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

5. Optimize array traversal method

// Idea: Get the rightmost value without repetition and put it into a new array /*
*Recommended method*
* The implementation code of the method is quite cool.
* Implementation idea: Get the rightmost value without duplication and put it into a new array.
* (When duplicate values ​​are detected, terminate the current loop and enter the next round of judgment of the top-level loop) */
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));

4. The horizontal list becomes a tree structure

. When selecting a department, do you often see this kind of tree menu? The data returned by the background is generally horizontal. Array, so how do we generally generate this kind of menu? Please see~~

1. The method is specially presented here:

const dataTree = [
        {id: 1, name: 'Head Office', parentId: 0},
        {id: 2, name: 'Shenzhen Branch', parentId: 1},
        {id: 3, name: 'Beijing Branch', parentId: 1},
       {id: 4, name: 'R&D Department', parentId: 2},
        {id: 5, name: 'Marketing Department', parentId: 2},
        {id: 6, name: 'Testing Department', parentId: 2},
        {id: 7, name: 'Finance Department', parentId: 2},
        {id: 8, name: 'Operation and Maintenance Department', parentId: 2},
        {id: 9, name: 'Marketing Department', parentId: 3},
        {id: 10, name: 'Finance Department', parentId: 3},
       
    ]
    function changeData(data, parentId = 0) {
        let tree = [];//Create an empty array//Traverse each piece of data data.map((item) => {
            //The parentId in each piece of data is the same as the one passed in if (item.parentId == parentId) {
                //Just look for a subset of this element to find parentId==item.id in the element. This way, recursively item.children = changeData(data, item.id);
                tree.push(item);
            }
        })
        return tree
    }
    console.log(changeData(dataTree, 0));

5. Merging the same items of array objects

We often encounter data processing when displaying charts, and we also often encounter the merging of arrays. The following is a way to merge the same items of arrays:

• First, the original array arr data is used,
• and then an empty map object and an empty result array are created. By judging whether the map contains a certain item, the array result is judged whether to add data,
• and then the same item is compared and merged with the existing result array contents. ;

1. The blogger specially dedicated the ancestral code that has been treasured for many years to all the bosses here:

var arr = [
{"id":"1","name":"Chelizi","num":"245"},
{"id":"1","name":"Chelizi","num":"360"},
{"id":"2","name":"Apple","num":"120"},
{"id":"2","name":"Apple","num":"360"},
{"id":"2","name":"Apple","num":"180"},
{"id":"3","name":"banana","num":"160"},
{"id":"4","name":"Pineapple","num":"180"},
{"id":"4","name":"Pineapple","num":"240"}
];
var map = {},result= [];
for(var i = 0; i < arr.length; i++){
varele = arr[i];
if(!map[ele.id]){
result.push({
id:ele.id,
name: ele.name,
value: ele.value
});
map[ele.id] = ele;
}else{
for(var j = 0; j < result.length; j++){
var dj = result[j];
if(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
break;
}
}
}
};
console.log(result);

Seeing this, several common data processing problems on the front end have been almost solved. Of course, in reality, there are still many problems that have not been included, and they will be followed one after another. I will slowly update and include it. At the same time, I also hope that friends who have trouble processing JavaScript data can communicate with the blogger and those who have good problem-solving ideas can also give feedback to the blogger.

This article introduces five common data processing problems in the JavaScript development process and provides corresponding solutions. It basically covers the usage needs in the daily development process. Reading this article can greatly improve your basic JavaScript skills and receive development needs. Able to respond quickly and provide solutions.