С постоянным развитием интерфейсных технологий интерфейсы, которые необходимо отображать в интерфейсной работе, становятся все более сложными, поэтому появляется все больше сценариев обработки данных. Например: часто необходимо отображать древовидную структуру. в фоновой системе управления, а внешние данные, возвращаемые фоном, имеют горизонтальную структуру, на данный момент нам необходимо преобразовать данные в древовидную структуру, при отображении гистограммы электронной диаграммы возвращаемые данные необходимо дедуплицировать и объединить; при фильтрации нам нужно сортировать данные; наиболее распространенный из них: «Есть добавления, удаления, изменения и проверки Dom, когда мы оставляем комментарии и т. д. Итак, сегодняшняя статья познакомит вас с этими бизнес-сценариями и столкнется с этими трудностями. нам больше не нужно бояться операций с данными JavaScript, и работа по разработке станет простой и эффективной.
. Это фоновая система управления — модуль управления словарем, который включает в себя четыре операции добавления, удаления, изменения и запроса словаря данных. Итак, как мы можем справиться с этими четырьмя операциями? Пожалуйста, читайте дальше.
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]
arr.shift используется для удаления первого элемента массива
// Метод сдвига массива используется для удаления первого элемент массива. Удалить один элемент var arr = [1,2,3]; // Возвращаем удаленный элемент; арр.сдвиг(); //Выходной результат arr=[2,3]
arr.pop удаляет последний элемент массива
//Метод pop массива используется для удаления последнего элемента массива var arr = [1,2,3] ; // Возвращаем удаленный элемент; арр.поп(); //Выходной результат arr = [1,2];
arr.splice : его можно добавить, удалить или изменить в любой позиции массива.
Этот метод имеет три функции: удаление, вставка и замена. возвращает массив (включая исходные удаленные элементы в массиве (возвращает пустой массив, если ни один элемент не удален))
Syntax
splice(index,howmany,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]
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('|');
консоль.журнал(стр); //
Пользователь 1 | Пользователь 2 | Пользователь 3 Метод разделения строки: преобразование чисел, за которыми следуют разделенные символы
// Этот метод используется для разделения строки на массив с указанным символом var str = 'User 1 | User 3';
вар arr = str.split('|');
console.log(обр);
['Пользователь 1', 'Пользователь 2', 'Пользователь 3'] Надо сказать, что с развитием технологий и развитием аппаратного обеспечения вычислительная производительность браузеров также улучшилась. Далее мы столкнемся. Вторая ситуация — операция сортировки данных, а это значит, что нам нужно реализовать различную сортировку во внешнем интерфейсе. Каковы наши решения?
var arr = [23,34,3,4,23,44,333,444];
arr.sort(функция(a,b){
вернуть АБ;
})
console.log(arr); Здесь мы также представляем несколько часто используемых алгоритмов сортировки:
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] 3. Функция
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 'массив не является массивом!';
}
} 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 'массив не является массивом!';
}
} 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 'массив не является массивом!';
}
} //Метод 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));
} /*Описание метода: Сортировка кучей @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 не является числом!';
}
} Хорошо, после того, как мы решили проблему сортировки, мы столкнулись с проблемой дедупликации данных. Не бойтесь, есть еще много решений. Пожалуйста, читайте дальше медленно:
На работе При обработке данных json. например, при сортировке размеров определенных товаров нормально, что разные товары имеют одинаковый размер. Если мы хотим преобразовать их в таблицу для их отображения, то эти размеры не должны дублироваться. Здесь я напишу. Ниже приведены несколько методов удаления дублирования из массивов для справки:
//Самый простой метод удаления дублирования из массивов/*
* Создайте новый массив, пройдите по входящему массиву и поместите значение в новый массив, если его нет в новом массиве * 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)); /*
* Самый быстрый и занимает больше всего места (пространство обменивается на время)
*
* Этот метод выполняется быстрее, чем любой другой метод, но занимает больше памяти.
* Текущая идея: создать новый объект 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));/*
* Отсортируйте входящий массив так, чтобы после сортировки рядом стояли одинаковые значения.
* Тогда при обходе в новый массив добавляются только значения, не являющиеся дубликатами предыдущего значения.
* Нарушит порядок исходного массива* */
функция 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)); /*
*
* Вам все равно придется вызвать «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)); // Идея: получить самое правое значение без повторения и поместить его в новый массив /*
*Рекомендуемый метод*
* Код реализации метода довольно крутой.
* Идея реализации: получить самое правое значение без дублирования и поместить его в новый массив.
* (При обнаружении повторяющихся значений завершить текущий цикл и перейти к следующему раунду оценки цикла верхнего уровня) */
функция 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)); . Часто ли вы видите такое древовидное меню? Данные, возвращаемые фоном, обычно представляют собой горизонтальный массив, так как же это сделать? мы обычно создаем такое меню? Посмотрите, пожалуйста~~?
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)); 
Мы часто сталкиваемся с обработкой данных при отображении диаграмм, а также часто сталкиваемся со объединением одинаковых элементов массивов.
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(result); Учитывая это, несколько распространенных проблем с обработкой данных во внешнем интерфейсе почти решены. Конечно, на самом деле существует еще много проблем, которые не были включены, и они будут отслеживаться одна за другой. Я буду постепенно обновлять и включать его. В то же время я также надеюсь, что друзья, у которых есть проблемы с обработкой данных JavaScript, смогут связаться с блоггером, а те, у кого есть хорошие идеи по решению проблем, также смогут оставить блоггеру отзыв.
В этой статье представлены пять распространенных проблем обработки данных в процессе разработки JavaScript и представлены соответствующие решения. Она в основном охватывает потребности использования в ежедневном процессе разработки. Чтение этой статьи может значительно улучшить ваши базовые навыки работы с JavaScript и получить возможность быстро и эффективно реагировать. предоставить решения.