水滴筹笔试题

水滴筹笔试题，2019年，记录下来

一、http请求

一次完整的HTTP请求，期间一共需要 3 次握手。

二、js小数

在js中，0.1 + 0.2 > 0.3 （0.1 + 0.2 = 0.30000004）

三、测试文案的font-size是多少px（答案： 12px）

* {
    font-size: 12px !important;
}
#test {
    font-size: 14px;
}
div{
    font-size: 18px;
}
.test1 {
    font-size: 20px;
}
.test2 {
    font-size: 22px;
}
.test1.test2{
    font-size: 28px;
}

1	<div id='test' class='test1 test2' style="font-size: 17px;">测试</div>

解释：!important的优先级竟然高于内联样式。
优先级顺序：!important > 内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式

四、红色区域的大小是（160px * 160px）

.box{
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 20px solid black;
    margin: 20px;
    background: red;
    box-sizing: border-box;
}

知识延伸：

标准盒模型：元素的实际占位 = width + padding + border + margin
IE盒模型：元素实际占位 = width + margin （其中width包含了padding和border）
这里设置box-sizing为border-box，实际上就用了IE盒模型（也称怪异模式），其中width=200px包含了padding和border。但是border左右共40px为黑色，所以红色部分为200-40=160px；（如果去掉box-sizing属性，那么红色部分就是width加上左右padding，200+20*2=240px了）

五、以下代码输出结果为 8

console.log(foo())
function foo() {
    return bar();
    var bar = function() {return 5;};
    var bar = () => 6;
    var bar = (function() { return 7; })();
    function bar() {
        return 8;
    }
}

解析：主要知识点是变量提升和函数提升（），参照 https://www.cnblogs.com/kawask/p/6225317.html

变量提升即将变量声明提升到它所在作用域的最开始的部分
函数声明式和函数字面量式。只有函数声明才存在函数提升

六、控制台输出结果为 false

1 2	localStorage.setItem('show', false) console.log(localStorage.show)

解析：localStorage可以直接通过.的方式取值，同localStorage.getItem

七、控制台输出结果为 0 3 2 1

setTimeout(function(){
    console.log('1')
}, 0)
new Promise(function(resolve, reject) {
    resolve(2)
    console.log(0)
}).then(console.log)
console.log(3)

八、控制台输出结果为 5

var a = 5;
function todo() {
    var a = 9;
    return function() {
        a = 7;
    }
}
todo()();
console.log(a)

解析：因为todo函数内部定义的变量a是局部变量，外边访问不到

九、控制台输出结果为 [“S”, “h”, “u”, “i”, “d”, “i”]

(function(){
    var g = 'hello Shuidi';
    var t = [].filter.call(g, function(el, index){
       return index > 5
    });
    console.log(t);
}())

解析：字符串强制转成数组？

十、代码题：点击li元素的时候输出其索引值 0,1,2

<ul id="ul">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

// 答案
var ul = document.getElementById('ul');
var lis = ul.childNodes;
// 筛选出li
lis = [].filter.call(lis, function(item) {
    return item.nodeType == 1 && item.nodeName == 'LI';
});
lis.map(function(item, index) {
    item.addEventListener('click', function() {
        console.log(index);
    }, false);
});

十一、代码题：实现get函数

// 实现效果
let obj = {foo: {bar: {name: 'biz'}}};
get(obj, 'foo.bar.name'); // 输出 biz
obj = {};
get(obj, 'foo.bar.name'); // 输出 undefined
get(obj, 'foo.bar.name', 'biz'); // 输出 biz

// 代码
function get(obj, path, def){
    if(typeof path == 'string') {
        path = path.split('.');
    }
    let attr = path.splice(0, 1);
    obj = obj[attr[0]];
    if(path.length && obj) {
        return get(obj, path, def);
    }
    return obj || def;
}

十二、代码题：请解码被多次编码的 URL

例子： https%25253A%25252F%25252Fwww.baidu.com%25252F%25253Ftest%25253D1
条件：被编码次数未知
结果： https://www.baidu.com/?test=1

function dec(url) {
    let temp = decodeURIComponent(url);
    return temp == url ? temp : dec(temp);
}

十三、代码题

下面的数据结构中，不同层级的key可能会相同，实现一个方法，调用时更新上面数组的key值，是所有的key对应的值变更为新的随机数，并保证更新前相同的key更新为新值后也依然相同即可

var arr = [{
    key: 0.123123,
    child: {
        key: 0.3213313,
        child: {
            key: 0.123123,
            child: {
                key: 0.723793
            }
        }
    }
},{
    key: 0.788798,
    child: {
        key: 0.312308,
        child: {
            key: 0.123123,
            child: {
                key: 0.866668
            }
        }
    }
}];

// 答案
function updateKey(arr) {
    let temp = {};
    var updateObj = function(obj) {
        let key = obj['key'];
        temp[key] = temp[key] || Math.random();
        obj['key'] = temp[key];
        if(obj['child']) {
            updateObj(obj['child']);
        }
    }
    for(let i = 0; i < arr.length; i++) {
        updateObj(arr[i]);
    }
}