2019届阿里巴巴模拟题在线编程题一

题目

实现一个 css选择器

示例：

// 参考规则
const rules = {
    'a': {
        height: 0,
        width: 10
    },
    '#page .content a': {
        height: 5
    },
    '#page a': {
        height: 10,
        display: 'block'
    }
}

// 权重定义，#element(100) > .element(10) > element(1)
const WEIGHT = {
    '#': 100,
    '.': 10,
    _default: 1,
}

const getRules = path => {
   // your code here
  }

console.log(getRules('a'));
//输出：{height: 0, width: 10}

console.log(getRules('#page a'));
//输出：{height: 10, width: 10, display: "block"}

console.log(getRules('#page .content a'));
//输出：{height: 5, width: 10, display: "block"}

分析

在看到题目的时候有点懵逼， 比较混乱不会到从何下手， 所以我提出了一下问题：

1. 该rules对象的属性都是指向的同一个元素吗？
2. 只存在后带选择器吗？

经过反复思考， 得出一下结论：

1. 应该是指向的同一个元素，

   因为： 如果不指向同一个元素， 那么 #root  a 和#page .content a怎么处理？
   这两个选择器从可能性上讲， 是有可能选中了同一个， 也有可能选中不同客， 那么具体的返回值是要加上#root a 的值呢还是不加呢？ 为了避免出现这样的歧义， 应该是指向的同一个元素。
   

2. 只存在后代的关系吗？ 是不是存在>子代的关系呢？

   应该是只存在后代选择器的， 否则也会出现歧义。 
   

分析到这里总结下， relus里面的选择器都指向同一个元素， 并且只有后代关系， 这种情况下就只需要判断他们的权值大小， 并且从最小的权值开始添加属性， 后面的可以覆盖前面权值较小的属性的属性值。 有点绕!!!!需要多理解一下！

我的答案

const getRules = path => {
    // your code here
    const getWeights = path => {//这是一个获取选择器权值的函数
        let arr =  path.split(' ')
        let q = arr.reduce(function (a, b) {
            if(b[0] === '#'){
                a += 100
            }else if (b[0] === '.'){
                a += 10
            }else {
                a += 1
            }
            return a
        }, 0)
        return q
    }
    let weights = getWeights(path)//得到目标选择器的权值
    let arr = []
    for(let key of Object.keys(rules)) {//遍历relus里的key，得到权值小于等于目标选择器权值的key
        if( weights >= getWeights(key)){
            arr.push({key: key, weights: getWeights(key)})
        }
    }
    return arr.sort( (a, b) =>  a.weights - b.weights).reduce((a, b) => Object.assign(a, rules[b.key]), {})//从小的权值开始向{}上赋值并返回最终的对象
}

结尾

代码中使用了sort排序， reduce合并 ，Object.asign浅赋值。如果感觉不好理解需要多补补相关知识。 最后， 如果有错， 谢谢指正！