数组转树形结构, 数组转对象 , 对象转数组

1.数组转树形结构

source = [{
                id: 1,
                pid: 0,
                name: 'body'
            }, {
                id: 2,
                pid: 1,
                name: 'title'
            }, {
                id: 3,
                pid: 2,
                name: 'div'
            }]
            转换为: [{
                        id: 1,
                        pid: 0,
                        name: 'body',
                        children: [{
                                id: 2,
                                pid: 1,
                                name: 'title',
                                children: [{
                                    id: 3,
                                    pid: 1,
                                    name: 'div'
                                }]
                            }
                        }]
复制代码

代码实现：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=`, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>toTree</title>
    </head>

    <body>
        <script>
            var source = [{
                id: 1,
                pid: 0,
                name: 'body'
            }, {
                id: 2,
                pid: 1,
                name: 'title'
            }, {
                id: 3,
                pid: 1,
                name: 'div'
            }, {
                id: 4,
                pid: 3,
                name: 'span'
            }, {
                id: 5,
                pid: 3,
                name: 'icon'
            }, {
                id: 6,
                pid: 4,
                name: 'subspan'
            }]

            function toTree(data) {
                let result = []
                if(!Array.isArray(data)) {
                    return result
                }
                data.forEach(item => {
                    delete item.children;
                });
                let map = {};
                data.forEach(item => {
                    map[item.id] = item;
                });
                data.forEach(item => {
                    let parent = map[item.pid];
                    if(parent) {
                        (parent.children || (parent.children = [])).push(item);
                    } else {
                        result.push(item);
                    }
                });
                return result;
            }
            console.log(toTree(source))
        </script>
    </body>

</html>

2.数组转对象
新手

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

老手


let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

3.对象转数组
新手

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in number) {
  if (number.hasOwnProperty(numbers)) {
     keys.push(numbers);
    }
}
// key = [ 'one', 'two' ]

老手

let numbers = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

数组转树形结构, 数组转对象 , 对象转数组

HZM_无止境

引用和评论

Vue动态绑定背景图片及三元运算操作

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号