Как интерфейс быстро обрабатывает данные нужным образом (массив статей)

JavaScript
Как интерфейс быстро обрабатывает данные нужным образом (массив статей)

Когда мы пишем бизнес-логику, нам часто нужно обработать большой объем данных.Этот вид обработки заключается не только в получении данных, возвращаемых интерфейсом для рендеринга, но иногда возвращаемые данные являются «неполными» и не могут быть использованы напрямую. .Поэтому нам нужно обрабатывать и возвращать новые данные, чтобы они стали тем, что мы хотим.Эта статья в основном посвящена распространенным json-массивам.Почему json-массив?Главное,я думаю,например, в проектах торговых центров будут классификационные списки,товарные списки , списки магазинов и т. д., а какие списки комментариев, списки статей и т. д. есть в других проектах.Много json-массивов.После прочтения этой статьи я надеюсь улучшить нашу способность быстро обрабатывать разные данные.

Категория требований к массиву

  • Добавление массива -увеличивать
    • Добавить к первому из массива
    • добавить в конец массива
    • Добавить в середину массива
  • Удаление массива -удалять
    • Первое удаление массивов
    • удалить последнюю цифру массива
    • среднее удаление массива
  • Замена массива -изменять
    • Замените первую позицию массива
    • Заменить последнюю цифру массива
    • Промежуточная замена массива
  • Запрос массива -чек об оплате
    • Запрос значений в массиве
    • Запрос на индексацию значений в массиве
  • Решение массива
    • все ли значения в массиве удовлетворяют заданному условию
    • находится в массивеВключатьзначение, удовлетворяющее заданному условию
  • обработка массивов
    • Обработка значений массива
    • объединение массивов
    • объединение массивов
  • сортировка массивов
    • обратный порядок массива
    • Массив отсортирован по условию
  • обход массива
    • обход массива
  • Мелкая копия массива
  • глубокая копия массива
  • Динамическое создание массивов (значение переменной)

добавление массива

Добавить к первому из массива

unshift

let arr = [1,2,3,4,5]

//在数组arr首位插入9，10两个值
arr.unshift(9,10)

arr // [9,10,1,2,3,4,5]

splice

let arr = [1,2,3,4,5]

//在数组arr首位插入9，10两个值
arr.splice(0,0,9,10)

arr // [9,10,1,2,3,4,5]

Добавить в конец массива

push

let arr = [1,2,3,4,5]

//在数组arr末尾添加一个6
arr.push(6)

arr // [1, 2, 3, 4, 5, 6]

splice

let arr = [1,2,3,4,5]

//在数组arr末尾添加一个6
arr.splice(arr.length,0,6)

arr // [1, 2, 3, 4, 5, 6]

Добавить в середину массива

splice

let arr = [1,2,3,4,5]

//在数组arr索引为1的值前面插入9，10两个值
lis.splice(1,0,9,10) 

lis // [1, 9, 10, 2, 3, 4, 5]

удаление массива

удалить первый массив

shift

let arr = [1,2,3,4,5]
arr.shift()
arr              //[2,3,4,5]

splice

let arr = [1,2,3,4,5]
arr.splice(0,1)
arr             //[2,3,4,5]

удалить конец массива

pop

let arr = [1,2,3,4,5]
arr.pop()                   
arr                          //[1,2,3,4]

splice

let arr = [1,2,3,4,5]
arr.splice(arr1.length-1,1)
arr                         //[1,2,3,4]

Удалить в середине массива

splice

let arr = [1,2,3,4,5]

//从数组索引 为 1 的开始，删除 1 个
arr.splice(1,1)
arr //[1,3,4，5]

let arr1 = [1,2,3,4,5]

//从数组索引 为 1 的开始，删除 2 个
arr1.splice(1,2)
arr1 //[1,4,5]

замена массива

Замените первую позицию массива

splice

let arr = [1,2,3,4,5]

//在数组arr首位(1) 替换成 8和9
arr.splice(0,1,8,9)

arr //[8, 9, 2, 3, 4, 5]

Заменить последнюю цифру массива

splice

let arr = [1,2,3,4,5]

//在数组arr末位 (5) 替换成 8和9
arr.splice(arr.length-1,1,8,9)

arr //[1,2,3,4,8,9]

Промежуточная замена массива

splice

let lis1 = [1,2,3,4,5]

//删除了lis数组中索引为 3 的值（4），同时用9和10替换了其位置
lis1.splice(3,1,9,10)

lis1 // [1,2,3,9,10,5]

запрос массива

Запрос значений в массиве

Запрос первого значения в массиве, который соответствует данному условию

find

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
//找到 age 为 30的值
jsonArr.find(item=>item.age===30)  //{id: "1", name: "lisi", age: 30}
//找到 age为 301的值
jsonArr.find(item=>item.age===301) //undefined

Запросить первое значение в массиве в обратном порядке, которое соответствует заданному условию.

lastFind(пользовательский метод)

function lastFind(jsonArr,callback){
    let _jsonArr = jsonArr.reverse()
    let obj = _jsonArr.find(callback)
    return obj
}
let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
lastFind(jsonArr,item=>item.age==30) //  {id: "5", name: "wuming", age: 30}
lastFind(jsonArr,item=>item.age==18) //  {id: "4", name: "xiaoming", age: 18}
lastFind(jsonArr,item=>item.age==188)//  undefined

Запросить все значения в массиве, соответствующие заданному условию

filter

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
//找到 age 为 30的所有值
jsonArr.filter(item=>item.age===30) //[{id:'1',name:'lisi',age:30},{id:'3',name:'lisi',age:30}]
//找到 age为 301的所有值
jsonArr.filter(item=>item.age===301) //[]

Запрос на индексацию значений в массиве

Запросите индекс первого значения в массиве, которое соответствует заданным критериям.

findIndex

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'lisi',age:30}
]
// 查询age为30的第一个值的索引
jsonArr.findIndex(item=>item.age===30)//0

indexOf(обычное значение)

let arr = [1,2,1,4]
arr.indexOf(1)//0

Обратный запрос индекса первого значения в массиве, которое соответствует заданному условию.

lastFindIndex(пользовательский метод)

function lastFindIndex(jsonArr,callback){
    let _jsonArr = jsonArr.reverse()
    let index = _jsonArr.findIndex(callback)
    return index>-1?_jsonArr.length-index-1:-1
}
let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]

lastFindIndex(jsonArr,item=>item.age==18) //3
lastFindIndex(jsonArr,item=>item.age==30) //4

lastIndexOf(обычное значение)

let arr = [1,2,1,4]
arr.lastIndexOf(1)//2

Запрос индексов всех значений в массиве, соответствующих заданному условию, в обратном порядке

allFindIndex(пользовательский метод)

function allFindIndex(jsonArr,callback){
    let res= []
    for(let i=0;i<jsonArr.length;i++){
        if(callback(jsonArr[i])){
            res.push(i)
        }
    }
    return res
}

let jsonArr = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//从jsonArr数组中  找到符合给定条件的值的所有索引

allFindIndex(jsonArr,item=>item.age==30)//  [0, 2, 4]
allFindIndex(jsonArr,item=>item.age==18)//  [3]
allFindIndex(jsonArr,item=>item.age==20)//  [1]
allFindIndex(jsonArr,item=>item.age==201)// []

Решение массива

все ли значения в массиве удовлетворяют заданному условию

every

let arr = [1,2,3,4,5]
//检测数组的每一项是否都大于0
arr.every(item=>item>0) //true

//检测数组的每一项是否都大于1
arr.every(item=>item>1) //false

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//未成年检测
userList.every(item=>item.age>=18)//true

находится в массивеВключатьзначение, удовлетворяющее заданному условию

includes(обычное значение)

let arr = [1,2,3,4,5]
//检测数组中是否包含 4
arr.includes(4) //true
arr.includes(6) //false

find(противjson数组)

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//用户列表中是否包含年龄20岁的
!!userList.find(item=>item.age===20) // true
//用户列表中是否包含年龄201岁的
!!userList.find(item=>item.age===201)// false

some(противjson数组):black_flag:рекомендуется

//用户列表
let userList = [
  {id:'1',name:'lisi',age:30},
  {id:'2',name:'zhangsan',age:20},
  {id:'3',name:'wangermazi',age:30},
  {id:'4',name:'xiaoming',age:18},
  {id:'5',name:'wuming',age:30},
]
//用户列表中是否包含年龄20岁的
userList.some(item=>item.age===20) // true
//用户列表中是否包含年龄201岁的
userList.some(item=>item.age===201)// false

обработка массивов

Общая обработка массива

конкатенация значений массива

join

let arr = [1,2,3,4,5]
arr.join('') //'12345'

reduce

let arr = [1,2,3,4,5]
arr.reduce((pre,cur)=>pre+=cur,'') //'12345'

слияние массивов

спред оператор...

let arr11 = [1,2,3]
let arr22 = [4,5,6]
let arr33 = [7,8,9]
let res = [...arr11,...arr22,...arr33]
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

concat

let arr11 = [1,2,3]
let arr22 = [4,5,6]
let arr33 = [7,8,9]
let res = arr11.concat(arr22,arr33)
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

push

let res = [1,2,3]
let arr11 = [4,5,6]
let arr22 = [7,8,9]
res.push(...arr11,...arr22)
res //[1, 2, 3, 4, 5, 6, 7, 8, 9]

Обработка значений массива

reduce

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

//数组值加工输出
list.reduce((pre,cur)=>pre.push(cur+'%')&&pre,[])//["1%", "2%", "3%", "4%", "5%"]

**reduceRight **

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

//数组值加工输出
list.reduceRight ((pre,cur)=>pre.push(cur+'%')&&pre,[])//["5%", "4%", "3%", "2%", "1%"]

reduceRight и reduce в обратном порядке

map

let list = [1,2,3,4,5] // => ["1%", "2%", "3%", "4%", "5%"]

list.map(item=>item +='%') //["1%", "2%", "3%", "4%", "5%"]

//自定义返回的每一项的值 为 [] json数组值加工 优先考虑map
list.map(item=>[]) //[[],[],[],[],[]]

Существует 3 параметра обратного вызова карты, которые можно настроить для каждого возвращаемого элемента: item (каждый элемент), index (индекс, соответствующий каждому элементу), arr (пройденный массив)

сортировка массива

обратный порядок массива

reverse

let arr = [9,7,4,5,6,11]
arr.reverse()// [11, 6, 5, 4, 7, 9]
arr// [11, 6, 5, 4, 7, 9]

Массив отсортирован по условию

sort

let arr = [9,7,4,5,6,11]

arr.sort((pre,next)=>pre-next) // [4, 5, 6, 7, 9, 11]

обход массива

forEach

let arr2 = [4,5,6]

arr2.forEach((item,index,arr)=>{
 console.log(`当前项:${item},对应的索引是:${index},遍历的数组：${JSON.stringify(arr)}`)
})

//当前项:4,对应的索引是:0,遍历的数组是：[4,5,6]
//当前项:5,对应的索引是:1,遍历的数组是：[4,5,6]
//当前项:6,对应的索引是:2,遍历的数组是：[4,5,6]

Метод обхода самого массива: forEach

for

let arr2 = [4,5,6]

for(let i=0;i<arr2.length;i++){
 console.log(`当前项:${arr2[i]},对应的索引是:${i},遍历的数组是：${JSON.stringify(arr2)}`)
}
//当前项:4,对应的索引是:0,遍历的数组是：[4,5,6]
//当前项:5,对应的索引是:1,遍历的数组是：[4,5,6]
//当前项:6,对应的索引是:2,遍历的数组是：[4,5,6]

Оценка типа массива

isArray

let arr = []
let str= ''
Array.isArray(arr)//true
Array.isArray(str)//false

Мелкая копия массива

slice

let lis = [1,2,3,4,5]
let cloneLis = lis.slice()

lis.push(6)

lis      //[1, 2, 3, 4, 5, 6]
cloneLis //[1,2,3,4,5]

concat

let lis = [1,2,3,4,5]
let cloneLis = [].concat(lis)

lis.push(6) 

lis      //[1, 2, 3, 4, 5, 6]
cloneLis //[1,2,3,4,5]

глубокая копия массива

JSON.parse(JSON.stringify( ))

let lis = [{a:1},{a:2}]
let cloneLis = JSON.parse(JSON.stringify(lis))

lis[0].a=10
lis      //[{a:10},{a:2}]
cloneLis //[{a:1},{a:2}]

Недостаток: если в объекте есть регулярка, напрямую разбирать регулярку на { }, преобразовывать время в строку и т. д.

Динамическое создание массивов (значение переменной)

generateArr(индивидуальный пакет)

//动态生成 一个长度 不定  值 不定的 数组
function generateArr(len,val){
    return Array(len).fill(val)
}
//需求1：生成长度为5的值都是[]的数组
generateArr(5,[])//[[],[],[],[],[]]

//需求2：生成长度为3的值都是{}的数组
generateArr(3,{})//[{},{},{}]

//需求3：生成长度为5的值都是0的数组
generateArr(5,0)//[0,0,0,0,0]

Эпилог

Все дороги ведут в Рим, но есть и долгосрочные точки.Вы можете помнить вышеизложенное, и это не настоящий короткий путь, но, по крайней мере, вы можете сократить ненужную трату времени, больше сосредоточиться на бизнесе и повысить свою эффективность. полный!

Если у вас есть лучшие идеи, пожалуйста, оставьте сообщение

Если в тексте есть неточности или ошибки, просьба указать

Прошлые статьи:

Практические статьи по оптимизации внешнего кода

Практические инструменты и методы во фронтенд-разработке

Распространенные сценарии применения интерфейсных промисов

В этой статье используетсяmdniceнабор текста

Категории