フロントエンド テクノロジの継続的な開発に伴い、フロントエンド作業で表示する必要があるインターフェイスはますます複雑になっており、たとえば、ツリー構造を表示する必要があるデータ処理シナリオがますます増えています。バックグラウンド管理システムでは、バックグラウンドから返されるフロントエンド データは水平構造であるため、この時点で、echart ヒストグラムを表示するときにデータをツリー構造に変換する必要があり、返されたデータを重複排除してマージする必要があります。フィルタリングするときにデータを並べ替える必要があります。最も一般的なのは、コメントを作成するときに Dom の追加、削除、変更、チェックが行われることです。そこで、今日の記事では、これらのビジネス シナリオについて説明し、これらの困難に直面します。 JavaScript のデータ操作を恐れることはなくなり、開発作業がシンプルかつ効率的になります。
シナリオ: これはバックグラウンド管理システムである辞書管理モジュールであり、データ ディクショナリの追加、削除、変更、およびクエリの 4 つの操作が含まれます。では、これら 4 つの操作に対処するための解決策は何でしょうか? 続きをお読みください。
arr.pushは、配列の後ろから 1 つ以上の要素をプッシュします
var arr = [1,2,3]; // 戻り値: 変更された配列の長さ arr.push(4,5,6); コンソール.ログ(arr) //出力結果 arr=[1,2,3,4,5,6]
arr.unshift は配列の先頭から 1 つ以上の要素を追加します
var arr = [1,2,3]; // 戻り値: 変更された配列の長さ arr.unshift(4,5,6); コンソール.ログ(arr) //出力結果 arr=[4,5,6,1,2,3]
arr.shiftを使用して配列の最初の要素を削除します
// 配列のシフトメソッドを使用して最初の要素を削除します配列の要素を 1 つ削除します。 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 : 配列内の任意の位置に追加、削除、変更が可能です。
このメソッドには、削除、挿入、置換の 3 つの機能があります。配列を返します (配列内の元の削除された項目を含みます (項目が削除されていない場合は空の配列を返します))。
構文
splice(index,howmany,item1,...itemx)
1. 削除では、最初に削除する項目の位置と削除する項目の数の 2 つのパラメータを指定することで、任意の数の項目を削除できます。 arr=[1,2,3] とします。 let arr1=arr.splice(1,2);//配列の 2 番目と 3 番目の要素 (つまり 2,3) を削除します アラート(arr);//[1] アラート(arr1);//[2,3] 2. Insert では、開始位置、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. 置換では、指定した位置に任意の数の項目を挿入し、同時に任意の数の項目を削除できます。指定する必要があるのは、開始位置、削除する項目の数、および削除する項目の任意の数の 3 つのパラメータだけです。挿入されます (挿入数は削除された数と同じである必要はありません) arr = [1,2,3] とします。 let arr1=arr.splice(1,1,"red","green");//2 を削除し、文字列 "red" と "green" を位置 2 から挿入します alert(arr);//[1,"赤","緑",3] alert(arr1);//[2]
arr.indexOf : 要素が配列内にある場合はインデックスを返し、要素が配列内にあるかどうかを返します。配列
変数 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('|');
コンソール.log(str); //
ユーザー 1 | ユーザー 2 | ユーザー 3文字列の分割メソッド: 数値に続いて区切られた文字を変換します。
// このメソッドは、指定された記号を使用して文字列を配列に分割するために使用されます。
var arr = str.split('|');
コンソール.ログ(arr);
['ユーザー 1'、'ユーザー 2'、'ユーザー 3'】 テクノロジーの進歩とハードウェアの発展に伴い、ブラウザのコンピューティング パフォーマンスも向上していると言わざるを得ません。 2 番目の状況 - データの並べ替え操作。これは、フロントエンドでさまざまな並べ替えを実装する必要があることを意味します。それでは、どのような解決策があるでしょうか?
var arr = [23,34,3,4,23,44,333,444];
arr.sort(関数(a,b){
腹部を返します。
})
console.log(arr);ここでは、一般的に使用されるいくつかの並べ
アルゴリズムも紹介します。
var arrShow = (関数挿入ソート(配列){
if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){
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) === 'Array') {
for (var i = 1; i < array.length; i++) {
var キー = 配列 [i]、左 = 0、右 = i - 1;
while (左 <= 右) {
var middle = parseInt((左 + 右) / 2);
if (キー < 配列[中間]) {
右 = 中央 - 1;
} それ以外 {
左 = 中央 + 1;
}
}
for (var j = i - 1; j >= left; j--) {
配列[j + 1] = 配列[j];
}
配列[左] = キー;
}
配列を返します。
} それ以外 {
return '配列は配列ではありません!';
}
4.ソート関数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 (配列[j] < min) {
温度 = 分;
最小 = 配列[j];
配列[j] = 温度;
}
}
配列[i] = 最小;
}
配列を返します。
} それ以外 {
return '配列は配列ではありません!';
}
5.関数 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 (配列[j] < 配列[j - 1]) {
temp = 配列[j];
配列[j] = 配列[j - 1];
配列[j - 1] = 温度;
}
}
}
配列を返します。
} それ以外 {
return '配列は配列ではありません!';
}
} //方法 1 function QuickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === '配列' && 左のタイプ === '数値' && 右のタイプ === '数値') {
if (左 < 右) {
var x = 配列[右]、i = 左 - 1、温度;
for (var j = left; j <= right; j++) {
if (配列[j] <= x) {
i++;
一時 = 配列[i];
配列[i] = 配列[j];
配列[j] = 温度;
}
}
クイックソート(配列, 左, i - 1);
クイックソート(配列、i + 1、右);
};
} それ以外 {
return '配列が配列ではないか、左または右が数値ではありません!';
}
}
var aaa = [3, 5, 2, 9, 1];
クイックソート(aaa, 0, aaa.length - 1);
コンソールログ(aaa);
//メソッド 2 var QuickSort = function(arr) {
if (arr.length <= 1) { 戻り値 }
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] < ピボット) {
left.push(arr[i]);
} それ以外 {
right.push(arr[i]);
}
}
return QuickSort(左).concat([ピボット], QuickSort(右));
7./*メソッド説明: ヒープソート @param array ソート対象の配列*/
関数 heapSort(配列) {
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(配列, i, ヒープサイズ);
}
//ヒープソート for (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 === '数値') {
var l = 2 * x、r = 2 * x + 1、最大 = x、temp;
if (l < len && arr[l] > arr[最大]) {
最大 = l;
}
if (r < len && arr[r] > arr[最大]) {
最大 = r;
}
if (最大 != x) {
温度 = arr[x];
arr[x] = arr[最大];
arr[最大] = 温度;
heapify(arr、最大、len);
}
} それ以外 {
return 'arr は配列ではないか、x は数値ではありません!';
}
3.重複
排除の問題に直面します。心配しないでください。まだ多くの解決策があります。ゆっくり読んでください。
例えば、ある商品のサイズを並べ替える場合、異なる商品は同じサイズであるのが普通ですが、これらを表に変換して表示したい場合、これらのサイズは重複してはいけないと書きます。参考までに、配列から重複を削除するいくつかの方法を以下に示します。
//配列から重複を削除する最も簡単な方法/*
* 新しい配列を作成し、受信配列を走査し、値が新しい配列にない場合はその値を新しい配列にプッシュします。 * IE8 以前は配列の IndexOf メソッドをサポートしていません* */
関数uniq(配列){
var temp = []; //新しい一時配列 for(var i = 0; i < array.length; i++){
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」を呼び出す必要があります。 */
関数uniq(配列){
var temp = {}、r = []、len = array.length、val、type;
for (var i = 0; i < len; i++) {
val = 配列[i];
タイプ = 値のタイプ;
if (!temp[val]) {
temp[値] = [タイプ];
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)); /*
* ソート後に同じ値が隣接するように受信配列をソートします。
* その後、トラバースするときに、前の値と重複しない値のみが新しい配列に追加されます。
* 元の配列の順序が崩れます* */
関数uniq(配列){
配列.sort();
var temp=[配列[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];
console.log(uniq(aa)); /*
*
* 「indexOf」を呼び出す必要があり、パフォーマンスは方法 1 と同様です。
* 実装アイデア: 現在の配列の i 番目の項目が最初に i 以外の位置に出現した場合、
※そうすると、i 番目の項目が繰り返されて無視されることになります。それ以外の場合は、結果の配列を保存します。
* */
関数uniq(配列){
var temp = [];
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 temp = [];
変数インデックス = [];
var l = 配列の長さ;
for(var i = 0; i < l; i++) {
for(var j = i + 1; j < l; j++){
if (配列[i] === 配列[j]){
i++;
j = i;
}
}
temp.push(array[i]);
インデックス.プッシュ(i);
}
コンソール.ログ(インデックス);
戻り温度;
}
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, name: '研究開発部',parentId: 2},
{id: 5、名前: 'マーケティング部門'、parentId: 2}、
{id: 6、名前: 'テスト部門'、parentId: 2}、
{id: 7、名前: '財務部'、parentId: 2}、
{id: 8, name: '運用保守部門',parentId: 2},
{id: 9、名前: 'マーケティング部門'、parentId: 3}、
{id: 10、名前: '財務部'、parentId: 3}、
】
関数changeData(データ、親ID = 0) {
let Tree = [];//空の配列を作成//データの各部分を走査します data.map((item) => {
//各データのparentIdは渡されたものと同じです if (item.parentId ==parentId) {
//この要素のサブセットを検索して、要素内でparentId==item.idを見つけるだけです。このように、再帰的に item.children = changeData(data, item.id);
ツリー.プッシュ(アイテム);
}
})
リターンツリー
}
console.log(changeData(dataTree, 0)); 
チャートを表示するときにデータ処理が頻繁に発生しますが、配列の同じ項目をマージする方法も次のとおりです。
。
{"id":"1","name":"チェリジ","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]){
result.push({
id:ele.id、
名前: ele.name、
値: ele.value
});
マップ[ele.id] = ele;
}それ以外{
for(var j = 0; j < result.length; j++){
var dj = 結果[j];
if(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
壊す;
}
}
}
};
console.log(結果);