프런트엔드 기술이 지속적으로 발전함에 따라 프런트엔드 작업에 표시해야 하는 인터페이스가 점점 더 복잡해지고 있으므로 데이터 처리 시나리오도 점점 더 많아지고 있습니다. 예를 들어 트리 구조를 표시해야 하는 경우가 많습니다. 백그라운드 관리 시스템에서 백그라운드에서 반환된 프런트엔드 데이터는 수평 구조입니다. 이때 전자 차트 히스토그램을 표시할 때 데이터를 트리 구조로 변환해야 하며 반환된 데이터는 중복 제거 및 병합되어야 합니다. 필터링할 때 데이터를 정렬해야 합니다. 가장 일반적인 것은 댓글을 작성할 때 Dom의 추가, 삭제, 수정 및 확인 등이 있습니다. 따라서 오늘의 기사에서는 이러한 비즈니스 시나리오에 대해 설명하고 이러한 어려움에 직면하게 됩니다. 우리는 더 이상 JavaScript 데이터 작업을 두려워하지 않고 개발 작업을 간단하고 효율적으로 만들 수 있습니다.
시나리오: 이것은 데이터 사전을 추가, 삭제, 수정 및 쿼리하는 4가지 작업을 포함하는 사전 관리 모듈인 백그라운드 관리 시스템입니다. 그렇다면 이 4가지 작업을 처리하는 솔루션은 무엇입니까?
배열 뒤쪽에서 하나 이상의 요소가 푸시됩니다.
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]
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];
arr.splice : 배열의 임의 위치 에 추가, 삭제, 수정이 가능합니다.
삭제, 삽입, 교체의 세 가지 기능이 있습니다. 배열을 반환합니다(배열의 원래 삭제된 항목 포함(삭제된 항목이 없으면 빈 배열 반환))
구문
splice(index,howmany,item1,...itemx)
1. 삭제는 삭제할 첫 번째 항목의 위치와 삭제할 항목 수라는 2개의 매개변수를 지정하여 원하는 만큼의 항목을 삭제할 수 있습니다. arr=[1,2,3]; let arr1=arr.splice(1,2);//배열의 두 번째 및 세 번째 요소(예: 2,3)를 삭제합니다. 경고(arr);//[1] 경고(arr1);//[2,3] 2. 삽입은 시작 위치, 0(삭제할 항목 수), 삽입할 항목의 3가지 매개변수만 제공하여 지정된 위치에 원하는 수의 항목을 삽입할 수 있습니다. arr=[1,2,3]; let arr1=arr.splice(1,0,4,5);//배열의 위치 1부터 시작하여 4,5를 삽입합니다. 경고(arr);//[1,4,5,2,3] 경고(arr1);//[] 3. 교체는 지정된 위치에 원하는 수의 항목을 삽입하고 동시에 원하는 수의 항목을 삭제할 수 있습니다. 시작 위치, 삭제할 항목 수 및 원하는 수의 항목만 지정하면 됩니다. 삽입됩니다(삽입 개수는 삭제 개수와 동일할 필요는 없습니다). arr = [1,2,3]; let arr1=arr.splice(1,1,"red","green");//2를 삭제한 다음 위치 2에서 "red" 및 "green" 문자열을 삽입합니다. 경고(arr);//[1,"빨간색","녹색",3] Alert(arr1);//[2]
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(함수 (항목) {
반품 항목 >= 20;
});
//조건을 충족하는 첫 번째 요소의 인덱스를 반환합니다. console.log(res1) 조인은 배열의 여러 요소를 지정된 구분 기호를 사용하여 문자열로 연결하는 데 사용됩니다.
var arr = [ 'User1' ,'사용자2','사용자3'];
var str = arr.join('|');
console.log(str);
사용자 1 | 사용자 2 | 사용자 3 문자열 분할 방법: 숫자를 변환한 후 문자를 구분하여 사용합니다.
// 이 방법은 문자열을 지정된 기호가 있는 배열로 분할하는 데 사용됩니다. var str = 'User 1 |
var arr = str.split('|');
console.log(arr);
['사용자 1', '사용자 2', '사용자 3'] 기술의 발전과 하드웨어의 발전으로 브라우저의 컴퓨팅 성능도 향상되었다고 할 수 있습니다. 두 번째 상황은 데이터 정렬 작업입니다. 이는 프런트 엔드에서 다양한 정렬을 구현해야 함을 의미합니다. 그럼 해결 방법은 무엇인가요?
var arr = [23,34,3,4,23,44,333,444];
arr.sort(함수(a,b){
ab를 반환;
})
console.log(arr); 여기에서는 일반적으로 사용되는 몇 가지 정렬 알고리즘도 소개합니다.
var arr = [23,34,3,4,23,44,333,444];
var arrShow = (함수 insertSort(array){
if(Object.prototype.toString.call(array).slice(8,-1) ==='배열'){
for (var i = 1; i < array.length; i++) {
var 키 = 배열[i];
var j = i - 1;
while (j >= 0 && 배열[j] > 키) {
배열[j + 1] = 배열[j];
j--;
}
배열[j + 1] = 키;
}
반환 배열;
}또 다른{
return '배열은 배열이 아닙니다!';
}
})(arr);
console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444] 함수 BinaryInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === '배열') {
for (var i = 1; i < array.length; i++) {
var 키 = 배열[i], 왼쪽 = 0, 오른쪽 = i - 1;
동안 (왼쪽 <= 오른쪽) {
var middle = parsInt((왼쪽 + 오른쪽) / 2);
if (키 < 배열[중간]) {
오른쪽 = 중간 - 1;
} 또 다른 {
왼쪽 = 가운데 + 1;
}
}
for (var j = i - 1; j >= 왼쪽; j--) {
배열[j + 1] = 배열[j];
}
배열[왼쪽] = 키;
}
반환 배열;
} 또 다른 {
return '배열은 배열이 아닙니다!';
}
} 기능 SelectionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === '배열') {
var len = array.length, 임시;
for (var i = 0; i < len - 1; i++) {
var min = 배열[i];
for (var j = i + 1; j < len; j++) {
if (배열[j] < min) {
온도 = 최소;
최소 = 배열[j];
배열[j] = 온도;
}
}
배열[i] = 최소;
}
반환 배열;
} 또 다른 {
return '배열은 배열이 아닙니다!';
}
} 함수 bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === '배열') {
var len = array.length, 임시;
for (var i = 0; i < len - 1; i++) {
for (var j = len - 1; j >= i; j--) {
if (배열[j] < 배열[j - 1]) {
온도 = 배열[j];
배열[j] = 배열[j - 1];
배열[j - 1] = 온도;
}
}
}
반환 배열;
} 또 다른 {
return '배열은 배열이 아닙니다!';
}
} //방법 1 function QuickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === '배열' && typeof left === 'number' && typeof right === 'number') {
if (왼쪽 < 오른쪽) {
var x = 배열[오른쪽], i = 왼쪽 - 1, 온도;
for (var j = 왼쪽; j <= 오른쪽; j++) {
if (배열[j] <= x) {
나++;
온도 = 배열[i];
배열[i] = 배열[j];
배열[j] = 온도;
}
}
QuickSort(배열, 왼쪽, i - 1);
QuickSort(배열, i + 1, 오른쪽);
};
} 또 다른 {
return '배열이 배열이 아니거나 왼쪽이나 오른쪽이 숫자가 아닙니다!';
}
}
var aaa = [3, 5, 2, 9, 1];
QuickSort(aaa, 0, aaa.length - 1);
console.log(aaa);
//방법 2 var QuickSort = function(arr) {
if (arr.length <= 1) { 반환 arr;
varivotIndex = Math.floor(arr.length / 2);
var 피벗 = arr.splice(pivotIndex, 1)[0];
var 왼쪽 = [];
var 오른쪽 = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < 피벗) {
left.push(arr[i]);
} 또 다른 {
right.push(arr[i]);
}
}
returnquickSort(왼쪽).concat([피벗],quickSort(오른쪽));
}; /*방법 설명: 힙 정렬 @param array 정렬할 배열*/
함수 힙정렬(배열) {
if (Object.prototype.toString.call(array).slice(8, -1) === '배열') {
//힙 구축 var heapSize = array.length, temp;
for (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(배열, i, heapSize);
}
//힙 정렬(var j = heapSize - 1; j >= 1; j--) {
온도 = 배열[0];
배열[0] = 배열[j];
배열[j] = 온도;
heapify(배열, 0, --heapSize);
}
} 또 다른 {
return '배열은 배열이 아닙니다!';
}
}
/*메서드 설명: 힙의 속성 유지 @param arr array @param x array subscript @param len heap size*/
함수 heapify(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1) === '배열' && typeof x === 'number') {
var l = 2 * x, r = 2 * x + 1, 최대 = x, 온도;
if (l < len && arr[l] > arr[가장 큰]) {
가장 큰 = l;
}
if (r < len && arr[r] > arr[가장 큰]) {
가장 큰 = r;
}
if (가장 큰 != x) {
온도 = arr[x];
arr[x] = arr[가장 큰];
arr[최대] = 온도;
heapify(arr, maximum, len);
}
} 또 다른 {
return 'arr은 배열이 아니거나 x는 숫자가 아닙니다!';
}
} 정렬 문제를 해결한 후에는 이제 데이터 중복 제거 문제에 직면하게 됩니다. 걱정하지 마세요. 아직 해결 방법이 많이 있습니다.
직장에서 json 데이터를 처리할 때, 예를 들어, 특정 상품의 사이즈를 정렬할 때, 서로 다른 상품의 사이즈가 동일한 것이 일반적입니다. 이를 표로 변환하여 표시하려면, 여기서는 사이즈가 중복되어서는 안 됩니다. 참고용으로 배열에서 중복을 제거하는 몇 가지 방법을 소개합니다.
//배열에서 중복을 제거하는 가장 간단한 방법/*
* 새 배열을 생성하고 들어오는 배열을 순회한 후 값이 새 배열에 없으면 새 배열에 값을 푸시합니다. * IE8 이하는 배열의 indexOf 메서드를 지원하지 않습니다* */
함수 uniq(배열){
var temp = []; //새로운 임시 배열 for(var i = 0; i < array.length; i++){
if(temp.indexOf(배열[i]) == -1){
temp.push(배열[i]);
}
}
복귀온도;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa)); /*
* 가장 빠르고 가장 많은 공간을 차지함(공간은 시간으로 교환됨)
*
* 이 방법은 다른 방법보다 실행 속도가 빠르지만 메모리를 더 많이 차지합니다.
* 현재 아이디어: 새로운 js 객체와 새로운 배열을 생성합니다. 들어오는 배열을 순회할 때 값이 js 객체의 키인지 확인합니다.
* 그렇지 않은 경우 객체에 키를 추가하고 새 배열에 넣습니다.
* 참고: js 객체 키인지 여부를 판단할 때 들어오는 키에 대해 "toString()"이 자동으로 실행됩니다.
* n[val]--n[1], n["1"];과 같이 서로 다른 키가 같은 것으로 오해될 수 있습니다.
* 위의 문제를 해결하려면 여전히 "indexOf"를 호출해야 합니다. */
함수 uniq(배열){
var temp = {}, r = [], len = array.length, val, type;
for (var i = 0; i < len; i++) {
val = 배열[i];
유형 = 발의 유형;
if (!temp[val]) {
온도[값] = [유형];
r.push(발);
} else if (temp[val].indexOf(type) < 0) {
임시[값].push(유형);
r.push(발);
}
}
r을 반환;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));/*
* 정렬 후 같은 값이 인접하도록 들어오는 배열을 정렬합니다.
* 그러면 순회할 때 이전 값과 중복되지 않는 값만 새 배열에 추가됩니다.
* 원래 배열의 순서를 방해합니다* */
함수 uniq(배열){
array.sort();
var 온도=[배열[0]];
for(var i = 1; i < array.length; i++){
if(배열[i] !== 임시[temp.length-1]){
temp.push(배열[i]);
}
}
복귀온도;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa)); /*
*
* 여전히 "indexOf"를 호출해야 하며 성능은 방법 1과 유사합니다.
* 구현 아이디어: 현재 배열의 i번째 항목이 i가 아닌 다른 위치에 처음 나타나는 경우,
* 그러면 i번째 항목이 반복되어 무시된다는 의미입니다. 그렇지 않으면 결과 배열을 저장합니다.
* */
함수 uniq(배열){
var 온도 = [];
for(var i = 0; i < array.length; i++) {
//현재 배열의 i번째 항목이 현재 배열의 i에 처음 나타나면 배열에 저장됩니다. 그렇지 않으면 중복임을 의미합니다. if(array.indexOf(array[i]) == i) {
temp.push(배열[i])
}
}
복귀온도;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa)); // 아이디어: 반복 없이 가장 오른쪽 값을 가져와서 새 배열에 넣습니다. /*
*권장 방법*
* 메소드의 구현 코드는 매우 멋지다.
* 구현 아이디어: 중복 없이 가장 오른쪽의 값을 가져와서 새 배열에 넣습니다.
* (중복된 값이 감지되면 현재 루프를 종료하고 최상위 루프의 다음 판단 라운드로 진입) */
함수 uniq(배열){
var 온도 = [];
var 인덱스 = [];
var l = 배열.길이;
for(var i = 0; i < l; i++) {
for(var j = i + 1; j < l; j++){
if (배열[i] === 배열[j]){
나++;
j = 나;
}
}
temp.push(배열[i]);
index.push(i);
}
console.log(index);
복귀온도;
}
var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa)); , 부서를 선택하면 이런 트리 메뉴가 자주 보이죠? 우리는 보통 이런 메뉴를 만들어요~~ 봐주세요
const dataTree = [
{id: 1, 이름: '본사', parentId: 0},
{id: 2, 이름: '심천 지점', parentId: 1},
{id: 3, 이름: '베이징 지점', parentId: 1},
{id: 4, 이름: 'R&D 부서', parentId: 2},
{id: 5, 이름: '마케팅 부서', parentId: 2},
{id: 6, 이름: '테스트 부서', parentId: 2},
{id: 7, 이름: '재무부서', parentId: 2},
{id: 8, 이름: '운영 및 유지 관리 부서', parentId: 2},
{id: 9, 이름: '마케팅 부서', parentId: 3},
{id: 10, 이름: '재무부서', parentId: 3},
]
함수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(항목);
}
})
반환 트리
}
console.log(changeData(dataTree, 0)); 
차트를 표시할 때 데이터 처리를 자주 접하게 되며, 배열의 병합도 자주 발생합니다. 다음은 배열의 동일한 항목을 병합하는 방법입니다.
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":"바나나","num":"160"},
{"id":"4","name":"파인애플","num":"180"},
{"id":"4","name":"파인애플","num":"240"}
];
var 맵 = {},결과= [];
for(var i = 0; i < arr.length; i++){
바렐 = arr[i];
if(!map[ele.id]){
결과.푸시({
id:ele.id,
이름: ele.name,
값: ele.value
});
지도[ele.id] = 요소;
}또 다른{
for(var j = 0; j < 결과.길이; j++){
var dj = 결과[j];
if(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
부서지다;
}
}
}
};
console.log(result); 이를 보면 프런트 엔드에서 흔히 발생하는 몇 가지 데이터 처리 문제는 거의 해결되었습니다. 물론 실제로는 아직 포함되지 않은 문제가 속속 발생하고 있습니다. 천천히 업데이트해서 포함하겠습니다. 동시에 JavaScript 데이터 처리에 어려움을 겪는 친구들이 블로거와 소통할 수 있고, 좋은 문제 해결 아이디어가 있는 분들도 블로거에게 피드백을 줄 수 있기를 바랍니다.
이 글은 JavaScript 개발 과정에서 흔히 발생하는 5가지 데이터 처리 문제를 소개하고 이에 대한 해결책을 제시합니다. 기본적으로 일상적인 개발 과정에서 필요한 사항을 다룹니다. 이 글을 읽으면 기본 JavaScript 기술을 크게 향상시키고 개발 요구 사항을 신속하게 파악할 수 있습니다. 솔루션을 제공합니다.