JS-объект в массив
Описание МДН:
Object.entries()Метод возвращает массив пар ключ-значение для собственных перечислимых свойств данного объекта в том же порядке, в котором он был бы возвращен при использовании цикла for...in для итерации по объекту (разница в том, что for-in loop также перечисляет свойства в цепочке прототипов (Attributes).
Array.prototype.mapСпособ создает новый массив, результатом является возвращаемое значение каждого элемента в массиве - это позвонить в функцию после предоставленной.
Предположим, у нас есть данные города, в которых записано определенное значение города, и серверная часть обычно возвращает данные в простом формате, например:
let cityObj = {
shenzhen: 31,
guangzhou: 29
}
Если нам нужно использовать его на круговой диаграмме, нам нужно поместить этоcityObjИзменить формат массиваcityArr,Такие как:
let cityArr = [
{cityName: 'shenzhen', value: 31},
{cityName: 'guangzhou', value: 29}
]
Если атрибутов мало, можно использовать.Присвоение значений вручную в формат массива, например:
let cityArr = [
{cityName: 'shenzhen', value: cityObj.shenzhen},
{cityName: 'guangzhou', value: cityObj.guangzhou}
]
Но если городов много, даже все города Китая, то вы используете.Метод присваивания значения будет выглядеть очень маггловским, поэтому здесь рекомендуется использовать метод обхода, либо вы также можете инкапсулировать эту штуку и добавить свою собственную инструментальную функцию.
Следующие два примера используются для завершения этого объекта в массив.
использоватьObject.entries + Array.prototype.mapобъект в массив
let cityObj = { // 对象数据
shenzhen: 31,
guangzhou: 29
}
// 封装
function objToArr(data, typeName, valueName) {
// Object.entries(data) 先把数据转成 [[key, value], ...]
// .map(([typeName, valueName]) => ({typeName, valueName})) 对 [key, value] 解构
// 然后返回 {typeName: typeName, valueName: valueName} 格式
return Object.entries(data).map(([typeName, valueName]) => ({typeName, valueName}))
}
// 执行
objToArr(cityObj, 'cityName', 'value')
использоватьObject.keys + Array.prototype.mapобъект в массив
let cityObj = { // 对象数据
shenzhen: 31,
guangzhou: 29
}
// 封装
function objToArr(data, typeName, valueName) {
// Object.keys(data) 先把数据转成 [key, key, key, ...]
// .map(key => ({typeName: key, valueName: data[key]}))
// 遍历 keys 取出 key 和 value data[key]，
// 然后返回 {typeName: typeName, valueName: valueName} 格式
return Object.keys(data).map(key => ({typeName: key, valueName: data[key]}))
}
objToArr(cityObj, 'cityName', 'value')
Массив JS для объекта
Описание МДН:
Object.fromEntriesМетод преобразует список пар ключ-значение в объект.
Array.prototype.mapМетод создает новый массив, результатом которого является то, что каждый элемент в массиве является возвращаемым значением одного вызова предоставленной функции.
Если нам нужно поместить данные на круговую диаграммуcityArrПередача его на серверную часть обычно упрощает данные и упрощает их вcityObj,Такие как:
let cityArr = [
{cityName: 'shenzhen', value: 31},
{cityName: 'guangzhou', value: 29}
]
let cityObj = {
shenzhen: 31,
guangzhou: 29
}
С тех порObject.entries, Также естьObject.fromEntriesЧто можно использовать напрямуюObject.fromEntries + Array.prototype.map
использоватьObject.fromEntries + Array.prototype.mapПередача массива объекта
let cityArr = [ // 数组数据
{ cityName: 'shenzhen', value: 31 },
{ cityName: 'guangzhou', value: 29 }
]
// 封装
function arrToObj(data, typeName, valueName) {
// data.map(item => ([item.typeName, item.valueName])) 先把数据转成 [[key, value], ...]
// Object.fromEntries() 相当于 Object.entries() 逆方法
// 然后返回 {typeName: valueName} 格式
return Object.fromEntries(data.map(item => ([item[typeName], item[valueName]])))
}
arrToObj(cityArr, 'cityName', 'value')
Преобразование одномерного массива JS, преобразование древовидного массива
Если дерево разрешений или файловый модуль полезны, обычно необходимо преобразовать данные из бэкэнда в одномерный массив в древовидную структуру, или при передаче в бэкэнд древовидную структуру нужно преобразовать в одномерную. массив цифр для выравнивания, если только вы и серверная часть не связаны тесными отношениями, в противном случае они должны обрабатываться самим интерфейсом.
Например, нам нужноdataArrПревратиться вdataTree
let dataArr = [
{ id: 1, pid: 0 },
{ id: 2, pid: 1 }
]
let dataTree = [
{
id: 1,
pid: 0,
children: [
{
id: 2,
pid: 1
children: []
}
]
}
]
Рекурсивный метод поворотные данные древовидной структуры деревьев
- Большой объем расчета
- не изменит исходные данные
let data = [ // 如果后端跟你没有亲密关系，你拿到的数据就是列表
{ id: 1, pid: 0 },
{ id: 2, pid: 0 },
{ id: 3, pid: 1 },
{ id: 4, pid: 2 },
{ id: 5, pid: 3 },
{ id: 6, pid: 4 },
{ id: 7, pid: 5 },
{ id: 8, pid: 6 },
]
function arrToTreeData(data, pidVal = 0, pidName = 'pid', childName = 'children') {
// 一般 pid 就是 parentId，指的是父级 id，这里默认是 pid
// 一般 pidVal 的值为 0 时，默认是根节点
// childName 在大多数表格，多级嵌套等组件里通常都是用 children 命名，这里默认是 children
let result = [] // 初始化
// 递归匹配，计算量较大
data.forEach(item => {
if (item[pidName] === pidVal) {
result.push({
...item,
[childName]: arrToTreeData(data, item.id)
})
}
})
return result
}
arrToTreeData(data)
Метод ссылки объекта на данные древовидной структуры
- Небольшой объем расчета
- Если не использовать глубокую копию, исходные данные будут изменены.
let data = [ // 如果后端跟你没有亲密关系，你拿到的数据就是列表
{ id: 1, pid: 0 },
{ id: 2, pid: 0 },
{ id: 3, pid: 1 },
{ id: 4, pid: 2 },
{ id: 5, pid: 3 },
{ id: 6, pid: 4 },
{ id: 7, pid: 5 },
{ id: 8, pid: 6 },
]
function arrToTreeData(data, pidName = 'pid', childName = 'children') {
// 一般 pid 就是 parentId，指的是父级 id，这里默认是 pid
// childName 在大多数表格，多级嵌套等组件里通常都是用 children 命名，这里默认是 children
let obj = {} // 初始化
let result = [] // 初始化
// 将数据以对象的格式先存起来
data.forEach(item => {
obj[item.id] = item
})
for (let i = 0; i < data.length; i++) {
let item = data[i]
// 这里去 obj 里找，如果没有找到那就是 undefined，说明这个当前 item 是根节点
let parent = obj[item[pidName]]
if (parent) {
(parent[childName] || (parent[childName] = [])).push(item)
} else {
result.push(item)
}
}
return result
}
arrToTreeData(data)
Выравнивание данных древовидной структуры методом ширины
- Если не использовать глубокую копию, исходные данные будут изменены.
function cutTree(data, childName = 'children') {
let result = [];
while (data.length != 0) {
let shift = data.shift();
let children = shift[childName]
delete shift[childName]
result.push(shift)
if (children) {
children.forEach(item => {
data.push(item)
})
}
}
return result
}