让前端面试不在难（一）

从今天开始，我从面试题切入开始做一些详解和记录。

const obj = {
            a: 1,
            b: 3,
            c: -3,
            f: 5,
            d: 8
        }

要求以对象value的大小排序返回[c,a,b,f,d]

问题解析：

    1、对象是无序的，我们需要转为有序数据结构，其实也就是转为数组然后后再去排序。
    2.按value排序简单，但要求是输入key对应的排序，我们需要想办法做对应关系

        function sortObj(obj) {
            //先转为数组
            let arr = []
                // 遍历json 方法有 Object.keys() for in  用keys以后还得继续遍历key数组，在这我们选用for in
            for (let item in obj) {
                // 这一步很关键，我们需要能按照value排序，有需要做key的对应关系，我的做法是这样的
               // 把json的每一项push到数组里，并拆分原对象key和value分别对应
                arr.push({
                    key: item,
                    value: obj[item]
                })
            }
            console.log(arr)
        }
        sortObj(obj)

打印数组：

image.png

接下来就简单多了，多于的数组排序方法我就不一一写了，本次只为解决问题

function sortObj(obj) {
            //先转为数组
            let arr = []
                // 遍历json 方法有 Object.keys() for in  用keys以后还得继续遍历key数组，在这我们选用for in
            for (let item in obj) {
                // 这一步很关键，我们需要能按照value排序，有需要做key的对应关系，我的做法是这样的
                // 把json的每一项push到数组里，并拆分原对象key和value分别对应
                arr.push({
                    key: item,
                    value: obj[item]
                })
            }
            arr = arr.sort((a, b) => {
                return a.value - b.value
            })
            console.log(arr)
        }
        sortObj(obj)

image.png
此时结果为以value有序的数组了
接下来遍历数组生成结果

function sortObj(obj) {
            //先转为数组
            let arr = []
                // 遍历json 方法有 Object.keys() for in  用keys以后还得继续遍历key数组，在这我们选用for in
            for (let item in obj) {
                // 这一步很关键，我们需要能按照value排序，有需要做key的对应关系，我的做法是这样的
                // 把json的每一项push到数组里，并拆分原对象key和value分别对应
                arr.push({
                    key: item,
                    value: obj[item]
                })
            }
            arr = arr.sort((a, b) => {
                return a.value - b.value
            })
            console.log(arr)
            return arr.map((item) => {
                return item.key
            })
        }
        console.log(sortObj(obj))

image.png

测试ok！

在来个es6的方法

        let newArr = Object.entries(obj).sort((a, b) => {
            return a[1] - b[1]
        }).map((item) => {
            return item[0]
        })
        console.log(newArr)

image.png

这个方法看起来很骚，其实原理和最开始的解析类似，Object.entries(obj) 会输入一个数组，数组的每一项是一个数组，内容每一项是原对象每一项的key和value,看下图：

image.png

解析完毕！