JavaScript 데이터 처리와 관련된 5가지 일반적인 문제 해결

이 기사에서는 데이터 추가, 삭제, 수정, 데이터 정렬, 데이터 중복 제거 및 레벨 지정 목록을 포함하여 데이터 처리에서 몇 가지 일반적인 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 트리 구조로 바뀌고 동일한 항목을 병합합니다. 모든 사람에게 도움이 되기를 바랍니다.

[관련 권장사항: javascript 비디오 튜토리얼, web front-end]

프론트엔드 기술의 지속적인 발전으로 인해 프론트엔드 작업이 표시해야 하는 인터페이스는 점점 더 복잡해지고 있습니다. , 따라서 점점 더 많은 데이터 처리 시나리오가 있습니다. 예를 들어 백그라운드 관리 시스템에서 트리 구조를 표시해야 하는 경우가 많으며 이때 백그라운드에서 반환되는 프런트 엔드 데이터는 수평 구조가 필요합니다. 데이터를 트리 구조로 변환하려면 반환된 데이터를 중복 제거해야 합니다. 필터링할 때 가장 일반적인 작업은 Dom의 추가, 삭제, 수정 및 확인입니다. 따라서 오늘의 기사에서는 이러한 어려움에 정면으로 직면하여 더 이상 JavaScript 데이터 작업을 두려워하지 않고 개발 작업을 더 간단하고 효율적으로 만드는 비즈니스 시나리오를 안내할 것입니다.

1. 데이터 추가, 삭제, 수정 및 확인

시나리오: 이것은 데이터 사전 추가, 삭제, 수정 및 확인의 네 가지 작업을 포함하는 사전 관리 모듈인 백그라운드 관리 시스템입니다. 따라서 이 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: 배열을 추가, 삭제 및 수정할 수 있습니다. 모든 위치

에는 삭제, insert 및 replacement , 이 메소드는 배열을 반환합니다(원래 배열에서 삭제된 항목 포함(삭제된 항목이 없으면 빈 배열이 반환됨))

Syntax

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을 반환하여 요소가 내부에 있는지 확인합니다. the array

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']

2. 데이터 정렬

기술, 하드웨어 개발, 브라우저의 컴퓨팅 성능도 향상되었습니다. 다음으로 프런트 엔드에서 다양한 정렬을 구현해야 하는 데이터 정렬 작업에 직면하게 됩니다. ~

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 < 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、二分插入排序

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、选择排序

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 &#39;array is not an Array!&#39;;
}
}

5、冒泡排序

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 &#39;array is not an Array!&#39;;
}
}

6、快速排序

//方法一
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 &#39;array is not an Array or left or right is not a number!&#39;;
}
}
var aaa = [3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.length - 1);
console.log(aaa);


//方法二
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、堆排序

/*方法说明：堆排序
@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 < 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!';
}
}

三、数据的去重

        好的，当我们解决完排序的问题，紧接着我们又面临着数据去重的问题，不要怕，解决方案依然有很多，请您慢慢往下接着看：

        在工作上,对json数据处理时,例如遇到对某些产品的尺码进行排序,不同的产品都有相同的尺码那是正常不过的事情,如果我们要把这些转成表格的形式来展现,那么这些尺码就不要不能重复才行.在这里呢,我就写几个数组去重的方法,给大家参考参考 ：

 1、简单的去重方法

// 最简单数组去重法
/*
* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
function uniq(array){
    var temp = []; //一个新的临时数组
    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、对象键值法去重

/*
* 速度最快， 占空间最多（空间换时间）
*
* 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。
* 现思路：新建一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 < 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、排序后相邻去除法

/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
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、数组下标法

/*
*
* 还是得调用“indexOf”性能跟方法1差不多，
* 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。否则存入结果数组。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
        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、优化遍历数组法

// 思路：获取没重复的最右一值放入新数组
/*
* 推荐的方法
*
* 方法的实现代码相当酷炫，
* 实现思路：获取没重复的最右一值放入新数组。
* （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
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));

四 、平级列表变成树形结构

呐，在选择部门的时候，是不是会经常看到这种树状菜单，后台返回的数据一般都是平级的数组，那么这种菜单，我们一般是怎么生成的呢，请看~~

1、这里特意将方法奉上：

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 < arr.length; i++){
　　　　var ele = 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);

看到这 ，前端常见的几种数据处理的疑难杂症已经解决的差不多了，当然呐，现实情况下还有许许多多的问题未收录进来，后续会陆陆续续慢慢更新收录下来，同时呢也希望有遇到JavaScript数据处理比较头疼的朋友可以与博主交流探讨，有好的解题思路的也可以反馈给到博主。

本文介绍了JavaScript开发过程中常见的5种数据处理问题并提供了对应的解决思路，基本覆盖了日常开发过程中的使用需求， 阅读本片文章可以大大提升你的javaScript基本功，在收到开发需求时，能快速响应，并给出解决方案。 

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript 데이터 처리와 관련된 5가지 일반적인 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!