С постоянным развитием интерфейсных технологий интерфейсы, которые необходимо отображать в интерфейсной работе, становятся все более сложными, поэтому появляется все больше сценариев обработки данных. Например: часто необходимо отображать древовидную структуру. в фоновой системе управления, а внешние данные, возвращаемые фоном, имеют горизонтальную структуру, на данный момент нам необходимо преобразовать данные в древовидную структуру, при отображении гистограммы электронной диаграммы возвращаемые данные необходимо дедуплицировать и объединить; при фильтрации нам нужно сортировать данные; наиболее распространенный из них: «Есть добавления, удаления, изменения и проверки Dom, когда мы оставляем комментарии и т. д. Итак, сегодняшняя статья познакомит вас с этими бизнес-сценариями и столкнется с этими трудностями. нам больше не нужно бояться операций с данными JavaScript, и работа по разработке станет простой и эффективной.

1. Сценарии добавления, удаления, изменения и запроса данных

. Это фоновая система управления — модуль управления словарем, который включает в себя четыре операции добавления, удаления, изменения и запроса словаря данных. Итак, как мы можем справиться с этими четырьмя операциями? Пожалуйста, читайте дальше.

1. Новое дополнение к массиву

arr.push выталкивает один или несколько элементов из задней части массива

var arr = [1,2,3];
// Возвращаем: длину измененного массива arr.push(4,5,6);
console.log(обр.)
//Выходной результат arr=[1,2,3,4,5,6]

arr.unshift добавляет один или несколько элементов из начала массива

var arr = [1,2,3];
// Возвращаем: длину измененного массива arr.unshift(4,5,6);
console.log(обр.)
//Выходной результат arr=[4,5,6,1,2,3]

2. Удаление массива

arr.shift используется для удаления первого элемента массива

// Метод сдвига массива используется для удаления первого элемент массива. Удалить один элемент var arr = [1,2,3];
// Возвращаем удаленный элемент;
арр.сдвиг();
//Выходной результат arr=[2,3]

arr.pop удаляет последний элемент массива

//Метод pop массива используется для удаления последнего элемента массива var arr = [1,2,3] ;
// Возвращаем удаленный элемент;
арр.поп();
//Выходной результат arr = [1,2];

3. Модификация массива

arr.splice : его можно добавить, удалить или изменить в любой позиции массива.

Этот метод имеет три функции: удаление, вставка и замена. возвращает массив (включая исходные удаленные элементы в массиве (возвращает пустой массив, если ни один элемент не удален))

Syntax

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

• index - обязательный, целое число, указывает позицию для добавления); или удалить, используйте отрицательные числа, начните с конца массива. Укажите местоположение.
• сколько – обязательно, количество, которое нужно удалить, если 0, то товар не будет удален.
• item1,…itemx – необязательно, новые элементы для добавления в массив.

1. Удалить можно удалить любое количество элементов, указав 2 параметра: положение первого удаляемого элемента и количество удаляемых элементов.

пусть arr=[1,2,3];
let arr1=arr.splice(1,2);//удалит 2-й и 3-й элементы массива (т.е. 2,3)
предупреждение(прибытие);//[1]
предупреждение(arr1);//[2,3]


2. Insert может вставлять любое количество элементов в указанную позицию, предоставляя только 3 параметра: начальную позицию, 0 (количество удаляемых элементов) и элементы, которые нужно вставить.
пусть arr=[1,2,3];
let arr1=arr.splice(1,0,4,5);//вставим 4,5, начиная с позиции 1 массива
предупреждение(прибытие);//[1,4,5,2,3]
оповещение(arr1);//[]

3. Замена может вставлять любое количество элементов в указанную позицию и удалять любое количество элементов одновременно. Вам нужно указать только 3 параметра: начальную позицию, количество удаляемых элементов и любое количество элементов, которые необходимо удалить. быть вставлено (количество вставок не обязательно должно быть равно количеству удаленных)
пусть arr = [1,2,3];
let arr1=arr.splice(1,1,"red","green");//удалит 2, а затем вставит строки "красный" и "зеленый" из позиции 2
alert(arr);//[1,"красный","зеленый",3]
alert(arr1);//[2]

4. Поиск по массиву

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);

5. Соединение преобразования массива и строки

используется для соединения нескольких элементов массива в строку с указанным разделителем

var arr = [ 'User1' ,'Пользователь2','Пользователь3'];
var str = arr.join('|'); 
консоль.журнал(стр); //  
Пользователь 1 | Пользователь 2 | Пользователь 3

Метод разделения строки: преобразование чисел, за которыми следуют разделенные символы

// Этот метод используется для разделения строки на массив с указанным символом var str = 'User 1 | User 3';
вар arr = str.split('|');
console.log(обр);
['Пользователь 1', 'Пользователь 2', 'Пользователь 3']

2. Сортировка данных

Надо сказать, что с развитием технологий и развитием аппаратного обеспечения вычислительная производительность браузеров также улучшилась. Далее мы столкнемся. Вторая ситуация — операция сортировки данных, а это значит, что нам нужно реализовать различную сортировку во внешнем интерфейсе. Каковы наши решения?

1. встроенная функция js arr.sort()

var arr = [23,34,3,4,23,44,333,444];
        arr.sort(функция(a,b){
            вернуть АБ;
        })
    console.log(arr);

Здесь мы также представляем несколько часто используемых алгоритмов сортировки:

2. Сортировка вставками

var arr = [23,34,3,4,23,44,333,444];

вар arrShow = (функция InsertionSort (массив) {
if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){

    for (var я = 1; я <array.length; я++) {
        ключ вар = массив [я];
        вар j = я - 1;
        while (j >= 0 && array[j] > key) {
        массив[j + 1] = массив[j];
        дж--;
        }
      массив [j + 1] = ключ;
    }
    возвращаемый массив;
}еще{

    return 'массив не является массивом!';
}
})(обр);

console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444]

Функция

двоичной сортировки

if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
for (var я = 1; я <array.length; я++) {
    ключ var = массив [i], влево = 0, вправо = я - 1;
    в то время как (слева <= справа) {
    var middle = parseInt((лево + право)/2);
    если (ключ <массив[средний]) {
    правый = средний – 1;
} еще {
    левый = средний + 1;
}
}
for (var j = i - 1; j >= left; j--) {
    массив[j + 1] = массив[j];
}
массив [слева] = ключ;
}
возвращаемый массив;
} еще {
    return 'массив не является массивом!';
}
}

4. Функция сортировки выбором

selectedSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
    вар лен = array.length, temp;
    for (var i = 0; i <len - 1; i++) {
    вар мин = массив [я];
    for (var j = i + 1; j < len; j++) {
        если (массив[j] < мин) {
        температура = мин;
        мин = массив [j];
        массив [j] = температура;
    }
  }
    массив [я] = мин;
}
 возвращаемый массив;
} еще {
    return 'массив не является массивом!';
}
}

5. Функция пузырьковой сортировки

bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
вар лен = array.length, temp;
for (var i = 0; i <len - 1; i++) {
    for (var j = len - 1; j >= i; j--) {
        если (массив[j] <массив[j - 1]) {
        темп = массив [j];
        массив[j] = массив[j - 1];
        массив [j - 1] = температура;
}
}
}
    возвращаемый массив;
} еще {
    return 'массив не является массивом!';
}
}

6. Быстрая сортировка

//Метод 1 function fastSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
если (слева < справа) {
вар х = массив [правый], я = левый - 1, темп;
for (var j = влево; j <= вправо; j++) {
    если (массив[j] <= x) {
    я++;
    темп = массив [я];
    массив [я] = массив [j];
    массив [j] = температура;
}
}
быстрая сортировка (массив, влево, я - 1);
QuickSort (массив, я + 1, вправо);
};
} еще {
return 'массив не является массивом, а лево или право не являются числом!';
}
}
вар ааа = [3, 5, 2, 9, 1];
QuickSort(ааа, 0, ааа.длина - 1);
console.log(ааа);


//Метод 2 var QuickSort = function(arr) {
if (arr.length <= 1) { return arr;
var PivotIndex = Math.floor(arr.length / 2);
вар пивот = arr.splice(pivotIndex, 1)[0];
вар слева = [];
вар справа = [];
for (var i = 0; i <arr.length; i++){
если (arr[i] <центр) {
left.push(arr[i]);
} еще {
right.push(arr[i]);
}
}
return fastSort(left).concat([pivot], QuickSort(right));
}

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 (массив, я, heapSize);
}

//Сортировка кучей 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 размер кучи*/
функция heapify(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'number') {
вар l = 2 * x, r = 2 * x + 1, наибольший = x, temp;
if (l < len && arr[l] > arr[самый большой]) {
наибольший = л;
}
if (r < len && arr[r] > arr[самый большой]) {
наибольший = г;
}
если (самый большой != x) {
    темп = arr[x];
    arr[x] = arr[самый большой];
    arr[самый большой] = температура;
    heapify(arr, самый большой, len);
}
} еще {
    return 'arr не является массивом или x не является числом!';
}
}

3. Дедупликация данных

Хорошо, после того, как мы решили проблему сортировки, мы столкнулись с проблемой дедупликации данных. Не бойтесь, есть еще много решений. Пожалуйста, читайте дальше медленно:

На работе При обработке данных json. например, при сортировке размеров определенных товаров нормально, что разные товары имеют одинаковый размер. Если мы хотим преобразовать их в таблицу для их отображения, то эти размеры не должны дублироваться. Здесь я напишу. Ниже приведены несколько методов удаления дублирования из массивов для справки:

1. Простой метод удаления дублирования из

//Самый простой метод удаления дублирования из массивов/*
* Создайте новый массив, пройдите по входящему массиву и поместите значение в новый массив, если его нет в новом массиве * IE8 и более ранние версии не поддерживают метод indexOf массива* */
функция uniq(массив){
    var temp = []; //Новый временный массив for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(массив [я]);
        }
    }
    температура возврата;
}

вар аа = [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». */
функция uniq(массив){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; я <len; я++) {
        значение = массив [я];
        тип = тип значения;
        если (!temp[val]) {
            темп[значение] = [тип];
            р.push(вал);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(тип);
            р.push(вал);
        }
    }
    вернуть р;
}

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

3. Метод удаления смежных объектов после сортировки

/*
* Отсортируйте входящий массив так, чтобы после сортировки рядом стояли одинаковые значения.
* Тогда при обходе в новый массив добавляются только значения, не являющиеся дубликатами предыдущего значения.
* Нарушит порядок исходного массива* */
функция uniq(массив){
    массив.сорт();
    вар temp=[массив[0]];
    for(var я = 1; я <array.length; я++){
        if(array[i] !== temp[temp.length-1]){
            temp.push(массив [я]);
        }
    }
    температура возврата;
}

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

4. Метод индексации массива

/*
*
* Вам все равно придется вызвать «indexOf», и производительность будет аналогична методу 1.
* Идея реализации: если i-й элемент текущего массива впервые появляется в позиции, отличной от i,
* Тогда это означает, что i-й элемент повторяется и игнорируется. В противном случае сохраните массив результатов.
* */
функция uniq(массив){
    вар темп = [];
    for(var i = 0; i < array.length; i++) {
        //Если i-й элемент текущего массива впервые появляется в позиции i в текущем массиве, он будет сохранен в массиве; в противном случае это означает дубликат if(array.indexOf(array[i]) == i) {
            temp.push(массив[i])
        }
    }
    температура возврата;
}

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

5. Оптимизировать метод обхода массива

// Идея: получить самое правое значение без повторения и поместить его в новый массив /*
*Рекомендуемый метод*
* Код реализации метода довольно крутой.
* Идея реализации: получить самое правое значение без дублирования и поместить его в новый массив.
* (При обнаружении повторяющихся значений завершить текущий цикл и перейти к следующему раунду оценки цикла верхнего уровня) */
функция uniq(массив){
    вар темп = [];
    индекс вар = [];
    вар л = массив.длина;
    for(var i = 0; я <l; я++) {
        for(var j = i + 1; j < l; j++){
            если (массив[i] === массив[j]){
                я++;
                j = я;
            }
        }
        temp.push(массив [я]);
        index.push(я);
    }
    console.log(индекс);
    температура возврата;
}

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

4. Горизонтальный список становится древовидной структурой

. Часто ли вы видите такое древовидное меню? Данные, возвращаемые фоном, обычно представляют собой горизонтальный массив, так как же это сделать? мы обычно создаем такое меню? Посмотрите, пожалуйста~~?

1. Здесь специально представлен метод:

const dataTree = [
        {id: 1, имя: «Головной офис», родительский идентификатор: 0},
        {id: 2, имя: «Шэньчжэньский филиал», родительский идентификатор: 1},
        {id: 3, имя: «Пекинский филиал», родительский идентификатор: 1},
       {id: 4, name: «Отдел исследований и разработок», ParentId: 2},
        {id: 5, имя: «Отдел маркетинга», родительский идентификатор: 2},
        {id: 6, имя: «Отдел тестирования», ParentId: 2},
        {id: 7, имя: «Финансовый отдел», родительский идентификатор: 2},
        {id: 8, name: «Отдел эксплуатации и технического обслуживания», ParentId: 2},
        {id: 9, имя: «Отдел маркетинга», родительский идентификатор: 3},
        {id: 10, имя: «Финансовый отдел», родительский идентификатор: 3},
       
    ]
    функция измененияДанные (данные, родительский идентификатор = 0) {
        let Tree = [];//Создаем пустой массив //Обходим каждый фрагмент данных data.map((item) => {
            //parentId в каждом фрагменте данных тот же, что и переданный if (item.parentId == ParentId) {
                //Просто найдите подмножество этого элемента, чтобы найти родительскийId==item.id в элементе. Таким образом, рекурсивно item.children =changeData(data, item.id);
                Tree.push(предмет);
            }
        })
        вернуть дерево
    }
    console.log(changeData(dataTree, 0));

5. Объединение одинаковых элементов объектов массива

Мы часто сталкиваемся с обработкой данных при отображении диаграмм, а также часто сталкиваемся со объединением одинаковых элементов массивов.

• Сначала используются данные исходного массива,
• а затем создаются пустой объект карты и пустой массив результатов. На основе оценки того, содержит ли карта определенный элемент, результат массива оценивается, следует ли добавлять данные,
• а затем тот же элемент. сравнил и объединил с имеющимся содержимым результирующего массива ;

1. Родовой код, который хранился много лет, блоггер специально посвятил всем начальству здесь:

var arr = [.
{"id":"1","name":"Челизи","num":"245"},
{"id":"1","name":"Челизи","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"}
];
вар карта = {}, результат = [];
for(var i = 0; i <arr.length; i++){
вареле = arr[i];
если(!map[ele.id]){
result.push({
идентификатор:ele.id,
имя: ele.name,
значение: ele.value
});
карта[ele.id] = ele;
}еще{
for(var j = 0; j < result.length; j++){
вар dj = результат [j];
если(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
перерыв;
}
}
}
};
console.log(результат);