前端常见面试题（十九）@郝晨光

---

实现三栏布局，左右两栏固定宽度100px，中间栏自适应宽度，实现三列自适应等高

1. 使用弹性盒子肯定是最简单的一种方法

<style>
    #box {
        height: 500px;
        display: flex;
        justify-content: space-between;
    }
    #box>div {
        height: 100%;
    }
    .left,.right {
        width: 100px;
        background: red;
    }
    .center {
        flex: 1;
        background: green;
    }
</style>

<div id="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

2. 使用position定位

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #app {
        padding: 0 100px;
        position: relative;
    }
    .left,.right {
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        background: red;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .container {
        width: 100%;
        height: 500px;
        background: green;
    }
</style>

<div id="app">
    <div class="container"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

---

随机选取 10 - 50 之间的 10 个数字，存入一个数组，并排序，并不能有重复

let arr = [];
for(let i = 0; i < 10; i ++) {
    let random = Number.parseInt(Math.random()*40+10);
    arr.includes(random) ? i-- : arr.push(random);
}
arr.sort();
console.log(arr); // 随机的正序数组，并不会有重复

---

写一个闭包的应用例子

// DOM操作
let li = document.querySelectorAll('li');
for(var i = 0; i < li.length; i++) {
    (function(i){
        li[i].onclick = function() {
            alert(i);
        }
    })(i)
}

---

如何把函数add(1,2,3,4)的调用方式改为add(1)(2)(3)(4);

// 利用函数柯里化
function carry(fn, args) {
    let len = fn.length;
    args = args || [];
    return function() {
        let _args = Array.prototype.slice.call(arguments);
        Array.prototype.unshift.apply(_args, args);
        if(_args.length < len) {
            return carry.call(null, fn, _args);
        }
        return fn.apply(this, _args);
    }
}

function es6Carry(fn, args = []) {
    let len = fn.length;
    return function(..._args) {
        _args.unshift(...args);
        if(_args.length < len) {
            return es6Carry.call(null, fn, _args);
        }
        return fn.apply(this, _args);
    }
}

// 调用方法
function add(a, b, c, d) {
    return a + b + c + d;
}

const carryAdd = carry(add);
console.log(carryAdd(1)(2)(3)(4)); // 10

const carryAdd2 = es6Carry(add);
console.log(carryAdd2(1)(2)(3)(4));  // 10

---

在javascript中什么是伪数组？如何把伪数组转换为真实数组？

拥有length属性，并且可以通过索引值获取内容的对象，都是伪数组，例如：arguments，NodeList，HTMLCollection等都是伪数组,

通过Array.prototype.slice.call(伪数组, 0)转化为真实数组
ES6的： Array.from(伪数组);

---

异步加载JS的方式有哪些？

1. 通过动态的创建script标签异步加载js；
2. 通过script标签的async属性可以实现异步加载js；
3. 通过script标签的defer属性可以实现异步加载js；
4. 通过ajax请求js文件并创建script来执行js；
5. 通过iframe

---

什么是Polyfill？

由于浏览器的不同以及浏览器版本的差异，有些时候我们在书写代码的时候会用到一些部分浏览器不是很兼容的API，比如Promise，以及ES6的一些新特性等。
但是为了我们能够正常使用，我们就选择使用Polyfill
在我的理解中，Polyfill其实就相当是一个补丁，它可以将我们需要的一部分，浏览器不支持的API注入到浏览器中，让我们可以正常的使用，代码可以正常的运行。

---

封装一个简单的ajax，返回Promise对象

function myAjax(options) {
    return new Promise((resolve, reject) => {
        let xhr;
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }else if(window.ActiveXObject) {
            xhr = new ActiveXObject();
        }
        xhr.open(options.method.toUpperCase() || 'GET', options.url, true);
        xhr.send(options.data);
        xhr.onreadstatechange = function() {
            if(xhr.status === 4 && xhr.readyState === 200) {
                resolve(xhr.responseText);
            }else {
                reject(xhr.responseText);
            }
        }
    })
}
myAjax({
    url: 'http://www.haochenguang.cn',
    method: 'GET'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

---

写一个简单的jsonp的实现。

/**
 * @function jsonp - jsonp函数
 * @desc 一个带参数的函数
 * @param {Object} options 配置参数
 * @param {String} options.url 请求路径
 * @param {String} options.jsonp="callback" 指定jsonp参数名称
 * @param {String} options.jsonpCallback="jsonpCallback" 指定jsonp回调函数名称
 * @param {Function} options.success 获取数据成功执行的函数
 * */
function jsonp(options) {
    options.jsonp = options.jsonp || 'callback';
    options.jsonpCallback = options.jsonpCallback || 'jsonpCallback';

    let script = document.createElement('script');
    script.src = options.url + '?' + options.jsonp + '=' + options.jsonpCallback;


    window[options.jsonpCallback] = function(data) {
        options.success && options.success(data)
    };

    document.body.appendChild(script);
}
jsonp({
    url: 'jsonp.js',
    success(data) {
        console.log(data);
    }
})

---

如果本文对您有帮助，可以看看本人的其他文章:
前端常见面试题（十八）@郝晨光
前端常见面试题（十七）@郝晨光
GitHub创建项目并添加协作者@郝晨光

结言

感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照