免费CDN服务|前端面经笔记

1.ES6中的let，const，var的区别是什么？

var：声明全局常量；
let：声明块级常量，即局部常量，定以后可以修改；
const：用于声明常量，定义后不能再修改值或者引用值的常量，也具有块级作用域；

2.对数组进行去重，es5或者es6方法

//es5四种方式:

//方式一:
Array.prototype.unique1 = function() {
    // 1. 定义数组
    var temp = [];
    // 2. 遍历当前数组
    for(var i = 0; i < this.length; i++) {
        // 3.如果当前数组的第i已经保存进了临时数组，
        // 那么跳过,否则把当前项push到临时数组里面
        if (-1 === temp.indexOf(this[i])) {
            temp.push(this[i]);
        }
    }
    return temp;
};

//方式二:
Array.prototype.unique2 = function() {
    //1. hash为hash表，r为临时数组
    var hash = {}, temp=[];
    // 2.遍历当前数组
    for(var i = 0; i < this.length; i++)
    {
        // 3. 如果hash表中没有当前项
        if (!hash[this[i]])
        {
            // 4.存入hash表
            hash[this[i]] = true;
            // 5.把当前数组的当前项
            // push到临时数组里面
            temp.push(this[i]);
        }
    }
    return temp;
};

//方式三:
Array.prototype.unique3 = function() {
    var n = [this[0]];
    for(var i = 1; i < this.length; i++){
        if (this.indexOf(this[i]) === i) {
            n.push(this[i]);
        }
    }
    return n;
};

//方式四:
Array.prototype.unique4 = function() {
    this.sort();
    var re=[this[0]];
    for(var i = 1; i < this.length; i++)
    {
        if( this[i] !== re[re.length-1])
        {
            re.push(this[i]);
        }
    }
    return re;
};

//es6实现方式:

Array.prototype.unique =
Array.prototype.unique 
|| function () {
    return [...new Set(this)];
};

3.页面加载过程中可能触发哪些事件？它们的顺序是？

页面加载时，大致可以分为以下几个步骤：
1）开始解析HTML文档结构
2）加载外部样式表及JavaScript脚本
3）解析执行JavaScript脚本
4）DOM树渲染完成
5）加载未完成的外部资源（如 图片）
6）页面加载成功
执行顺序：
1）document readystatechange事件
2）document DOMContentLoaded事件
3）window load事件

4.什么是CDN，CDN对于网络有什么意义，它有什么的缺点？推荐阅读：《免费CDN加速助力抖音亮相央视春晚》

CDN又称为内容分发网络；本意在于尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
主要目的：解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点的加速、点播、直播等场景。使用户就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。
缺点：1）实施复杂，投资大
2）目前大部分的CDN还只是对静态的内容加速，对动态加速效果不好；而双线对动态加速的效果跟静态是一样的。

5.vue-router中$route和$router的区别？

1）$route为当前router跳转对象里面可以获取name、path、query、params等
2）$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
返回上一个history也是使用$router.go方法

6.vue路由传参query与params两种方式的区别

query要用path来引入,例如ths.$router.push({ path:"detail",query:{id:"00"}})，接收参数为this.$route.query.id，params要用name来引入，例如ths.$router.push({ name:"detail",params:{id:"00"}})，接收参数为this.$route.params.id。以query传输的参数会在类似于get传参，在浏览器地址栏中显示参数。