常见面试题解 @于志程

1.打包部署出现空白或404

/\*
@于志程
1.空白页面多半是资源路径请求不成功

  

解决办法：vue.config.js下的assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和 static在同一级目录下面。 所以要改为 ‘./ ’;

2\. 页面刷新404问题

这是因为 使用的是history模式 所以vue用路由跳转完之后 再次刷新 所以这个模式会默认的请求一次资源 请求不成功 就会返回404 所以要在服务器配置 原理是让所有请求的路径全部重定向到 根目录/index.html 这样就不会出现问题了

但是这么做的话 需要自己创造一个404页面 给用户观看。。

3\. 如果没有部署在根目录

解决办法：vue.config.js下的assetsPublicPath默认的是 ‘/’ 在那个目录就修改这个路径就可以

\*/

2. 调用摄像头

/*注   只能在移动端执行   */
   /*调用相机*/
 /*调用视频*/
 /*调用录音功能*/

3.封装一个简单的ajax，返回promise

        /**
         * @function {Promise}
         * @params {Object} params
         * @params {String} params.type 请求方式
         * @params {String} params.url 请求地址
         * @return {Promise}
         */
        function promise(params) {
            return new Promise((reslove, reject) => {
                console.log(params)
                xhr = null;
                if (window.XMLHttpRequest) {
                    var xhr = new XMLHttpRequest()
                } else {
                    xhr = new ActiveXObject('Microsoft.XMlHTTP')
                }
                xhr.open('get', params.url, true)
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.status === 200 && xhr.readyState === 4) {
                        reslove(xhr.responseText)
                    }
                }
            })
        }

        console.log(promise({
            url: 'js/defer.json'
        }).then(res => {
            console.log(res)
        }))

4.解决回调地狱

       // 1. 方法一 
       setTimeout(() => {
           console.log('1')
           setTimeout(() => {
               console.log('2')
               setTimeout(() => {
                   console.log('3')
                   setTimeout(() => {
                       console.log('4')
                       setTimeout(() => {
                           console.log('5')
                           setTimeout(() => {
                               console.log('6')
                               setTimeout(() => {
                                   console.log('7')
                                   setTimeout(() => {
                                       console.log('8')
                                   }, 2000);
                               }, 2000);
                           }, 2000);
                       }, 2000);
                   }, 2000);
               }, 2000);
           }, 2000);
       }, 2000);

• 解决方法其一

        ///  promise 解决
        let prom = new Promise((reslove, reject) => {
            setTimeout(() => {
                console.log('1')
                reslove();
            }, 4000);
        })

        function p2() {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    console.log('2')
                    reslove();
                }, 4000);
            })
        }

        function p3() {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    console.log('3')
                    reslove();
                }, 4000);
            })
        }
        prom.then(() => {
            return p2()
        }).then(() => {
            return p3()
        })

• 后续代码待补充

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

• 使用函数柯里化方法

        //普通方法
        function fun(a, b, c, d) {
            return a + b + c + d;
        }
        //运用函数柯里化方法实现：
        // 把第一种函数的形式变成第二种的形式，这个就叫做函数柯里化的过程
        function fn(a) {
            return function (b) {
                return function (c) {
                    return function (d) {
                        return a + b + c + d
                    }
                }
            }
        }
        console.log(fn(1)(2)(3)(6))

6.什么是Polyfill

/* Polyfill你可以理解为“ 腻子”， 就是装修的时候， 可以把缺损的地方填充抹平。
举个例子， html5的storage(session, local),
不同浏览器， 不同版本， 有些支持， 有些不支持。 我们又想使用这个特性， 
怎么办？ 有些人就写对应的Polyfill（ Polyfill有很多）， 
帮你把这些差异化抹平， 不支持的变得支持了（ 简单来讲
， 写些代码判断当前浏览器有没有这个功能， 没有的话，
就写一些支持的补丁代码）。
你只需要把需要的Polyfill引入到你的程序里， 就可以了。
*/
/*
自己的理解 就是说Polyfill 是一种解决兼容的一种规范 
他不是一个方法也不是一个属性 知识一个解决兼容规范的 命名
*/

7.随机选取10-50之间数字

        let arr = []
        //定义一个空数组
        for (var i = 0; i < 100; i++) {
            // 循环创建随机数放进去
            let math = parseInt(Math.random() * (50 - 10 + 1) + 10);
            //数组最大数量 10个
            if (arr.length < 10) {
                if (arr.indexOf(math) === -1) {
                    //数组没有相同的再添加进去
                    arr.push(math)
                    arr.sort(function (a, b) {
                        return a - b;
                    })
                }
            }
        }
        console.log(arr)

8.写一个闭包的应用例子

        //在javascript里，在函数里声明的函数都是局部的，函数运行完后就释放了
        function add() {
            //函数内部定义函数，连接函数内部和外部的桥梁
            // 闭包的作用有2个:
            //    一是读取函数内部的变量，
            //  二是让这些变量的值保存在内存中， 实现数据共享
            //闭包 执行过的函数 不会被释放 这样就形成了闭包
            // 每一个函数经过执行形成闭包  都是一个全新的闭包
            // 每个闭包都是独立的。
            //好处: 1.缓存
            //      2. 面向对象中的对象
            ///     3. 实现封装， 防止变量跑到外层作用域中， 发生命名冲突
            //      4. 匿名自执行函数， 匿名自执行函数可以减小内存消耗
            //缺点： 
            //      1.无法及时释放内存
            //      2. 内存泄漏
            //      3. 内存泄漏

            let count = 0;

            function a() {
                count++;
                return count;
            }
            return a
        }
        var addcount = add()
        console.log(addcount())
        console.log(addcount())
        console.log(addcount())

9. 异步加载js方式有哪些

10.在js中什么是伪数组和转真实数组

11.promise封装axios

        //  import Axios from 'axios';
        function axios(params) {
            return new Promise((reslove, reject) => {
                Axios({
                    method: params.type || 'get',
                    url: params.url || '',
                    data: params.data,
                    baseURL: params.base,
                    headers: params.headers || {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    }
                }).then(res => {
                    switch (expression) {
                        case expression:
                            reslove(res)
                            break;
                        default:

                    }
                }).catch(err => {
                    reject(err)
                })
            })
        }

12.axios

        // 1. axios 是什么
        // 是一个基于用于操作请求发送数据的模块
        // 是一个基于promise 把 ajax 封装 的一个模块

        // 2. 如何使用
        //  yarn add axios|| npm install  -save axios 
        // import Axios from 'axios'

        // 3. 描述用其实现注册功能
        //    -  先下载axios
        //    -  引入axios
        //    -  实现布局
        //    -  请求后台接口  把需要的参数传递上去
        //    -  注册成功

结言

这只是本人解决的方法，还有待补充，也许会有更好的方法，虚心受教，学无止境，谢谢

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

点个关注把 咻咻咻