フロントエンド テクノロジの継続的な開発に伴い、フロントエンド作業で表示する必要があるインターフェイスはますます複雑になっており、たとえば、ツリー構造を表示する必要があるデータ処理シナリオがますます増えています。 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私たちはもはやJavaScriptデータ操作を恐れず、開発作業をシンプルで効率的にします。
场景：这是一个后台管理系统——字典管理模块，包含了数据字典的增删改查4个操作。では、これらの4つの操作に対処するためのソリューションは何ですか？
var arr = [1,2,3]
の背面から1つ以上の要素を押します
。// 戻り値: 変更された配列の長さ arr.push(4,5,6); console.log（arr） //出力結果 arr=[1,2,3,4,5,6]
arr.unshift は配列の先頭から 1 つ以上の要素を追加します
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（）; //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] ; //削除された要素を返します。 arr.pop（）; // result arr = [1,2];
または
任意の位置で変更できます
配列を返します (配列内の元の削除された項目を含みます (項目が削除されていない場合は空の配列を返します))。
構文
splice(index,howmany,item1,...itemx)
1. 删除可删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。 ret arr = [1,2,3]; let arr1=arr.splice(1,2);//配列の 2 番目と 3 番目の要素 (つまり 2,3) を削除します アラート(arr);//[1] アラート（arr1）; // [2,3] 2. 插入可以向指定位置插入任意数量的项只需提供3个参数：起始位置、0（要删除的项数）、要插入的项。 arr=[1,2,3] とします。 let arr1=arr.splice(1,0,4,5);//会从数组的1位置开始插入4,5 アラート（arr）; // [1,4,5,2,3] アラート（arr1）; // [] 3. 替换可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项（插入的数量不必与删除的数量相等） ret arr = [1,2,3]; ret arr1 = arr.splice（1,1、 "red"、 "green"）; //は2を削除し、位置2から文字列「赤」と「緑」を挿入します alert（arr）; // [1、 "red"、 "緑"、3] alert(arr1);//[2]
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配列
変数 arr = [10 ,20,30] console.log（arr.indexof（30））; 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;
});
//条件コンソールを満たす最初の要素のインデックスを返します。log（ ）
;
,'User2','User3']; var str = arr.join（ '|'）; console.log（str）;ユーザー
1
|
。 var arr = str.split（ '|'）; console.log(arr); ['user 1'、 'user 2'、 'user 3']
テクノロジーの進歩とハードウェアの開発により、ブラウザのコンピューティングパフォーマンスも改善されたと言わざるを得ません2番目の状況 - データの並べ替え。つまり、フロントエンドにさまざまなソートを実装する必要があります
var arr = [23,34,3,4,23,44,333,444];
arr.sort(関数(a,b){
ABを返します。
})
console.log（arr）;ここでもさ
れるソートアルゴリズムも紹介します。
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）{
配列[j + 1] = 配列[j];
j--;
}
配列[j + 1] = キー;
}
返品配列;
}それ以外{
return '配列は配列ではありません!';
}
})(arr);
console.log（arrshow）; // [3、4、23、23、34、44、333、444] 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（左<=右）{
var middle = parseint（（左 +右） / 2）;
if（key <array [middle]）{
右 = 中央 - 1;
} それ以外 {
left = middle + 1;
}
}
for（var j = i-1; j> = left; j-）{
配列[j + 1] = array [j];
}
配列[左] = key;
}
return array;
} それ以外 {
return '配列は配列ではありません！';
}
} 関数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 = 配列[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;
} それ以外 {
return 'array is not an Array!';
}
} 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 '配列は配列ではありません！';
}
} //方法一function quickSort(array, left, right) {
if（object.prototype.tostring.call（array）.slice（8、-1）======== 'array' && typeof left === 'number' && typeof right === 'number'）{
if (左 < 右) {
var x = 配列[右]、i = 左 - 1、温度;
for（var j =左; j <=右; j ++）{
if（array [j] <= x）{
i++;
一時 = 配列[i];
配列[i] = array [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）;
//方法二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]）;
} それ以外 {
right.push(arr[i]);
}
}
return QuickSort(左).concat([ピボット], QuickSort(右));
}; /*方法说明：堆排序@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）;
}
//（var j = Heapsize-1; j> = 1; j-）のヒープソート
一時 = 配列[0];
array [0] = array [j];
配列[j] = temp;
heapify（array、0、 - heapsize）;
}
} それ以外 {
return '配列は配列ではありません！';
}
}
/*メソッド説明：ヒープのプロパティを維持@param 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、最大= 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、最大、レン）;
}
} それ以外 {
return 'arrは配列ではなく、xは数字ではありません！';
}
} データ
の延長の問題に直面しています。
たとえば、特定の製品のサイズを並べ替えると、さまざまなサイズをテーブルに変換して表示する場合は、これらのサイズを複製します参考までに、配列から重複を削除するいくつかの方法を以下に示します。
//配列から重複を削除する最も簡単な方法/*
* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中* IE8以下不支持数组的indexOf方法* */
function uniq（array）{
var temp = [];
if（temp.indexof（array [i]）== -1）{
temp.push（array [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」を呼び出す必要があります。 */
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);
}
}
rを返します。
}
var aa = [1,2、 "2"、4,9、 "a"、 "a"、2,3,5,6,5];
console.log(uniq(aa));/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序* */
function uniq（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]);
}
}
戻り温度;
}
var aa = [1,2、 "2"、4,9、 "a"、 "a"、2,3,5,6,5];
（uniq（aa））
;
*
*「インデックス」を呼び出す必要があり、パフォーマンスは方法1に似ています。
* 実装アイデア: 現在の配列の i 番目の項目が最初に i 以外の位置に出現した場合、
* 那么表示第i项是重复的，忽略掉。それ以外の場合は、結果配列を保存します。
* */
function uniq（array）{
var temp = [];
for（var i = 0; i <array.length; i ++）{
//現在のアレイのi番目のアイテムが最初に現在の配列に表示される場合、それは配列に保存されます。 {
temp.push（array [i]）
}
}
戻り温度;
}
var aa = [1,2、 "2"、4,9、 "a"、 "a"、2,3,5,6,5];
console.log(uniq(aa)); // 思路：获取没重复的最右一值放入新数组/*
*推奨方法*
*メソッドの実装コードは非常にクールです。
* 实现思路：获取没重复的最右一值放入新数组。
*（重複した値が検出されたら、現在のループを終了し、トップレベルループの次の判断ラウンドを入力してください） */
function uniq（array）{
var temp = [];
変数インデックス = [];
var l = 配列の長さ;
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);
}
コンソール.ログ(インデックス);
戻り温度;
}
var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa)); . 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一般的にこの種のメニューを生成しますか？
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: '市场部门', 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 chandedata（data、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（chanderata（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"： "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 ++）{
var ele = arr[i];
if（！map [ele.id]）{
result.push({
ID：ELE.ID、
名前: ele.name、
値：ELE.VALUE
});
マップ[ele.id] = ele;
}それ以外{
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();
壊す;
}
}
}
};
Console.log（結果）;もちろん、いくつかの一般的なデータ処理の問題はほぼ解決されています。 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ソリューションを提供します。