记2018前端面试之旅

持续更新直到找到合适工作为止！-_-!

面试一

日期：20180420

前端性能优化？

前端性能优化这个问题可以回答的比较多，我自己的答案：
前端性能优化可以从：

• 减少HTTP请求的数量
• 减少HTTP请求的大小
• 缓存
• 内容分发网络
• 脚本放置在底部，样式表放置在顶部
• ...

减少HTTP请求的数量：

• 将公用的js、css文件合并
• CSS雪碧图
• 图片地图
• 内联图片

不详细赘述了

标题文字

图片预加载方式？

图片预加载的主要思路： 图片预加载的主要思路就是把稍后需要用到的图片悄悄的提前加载到本地，因为浏览器有缓存的原因，如果稍后用到这个url的图片了，浏览器会优先从本地缓存找该url对应的图片，如果图片没过期的话，就使用这个图片。

图片预加载实现的方法：

• 适用js的image对象也有onload和onerror事件，分别是加载完后和加载失败时执行。

Image对象是专门用于处理图片加载的，就相当于内存中的img标签。

• css实现图片预加载：写一个CSS样式设置一批背景图片，然后将其隐藏，这样你就看不到那些图片了。那些背景图片就是你想预载的图片
• 使用Ajax实现预加载：该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
• 使用jQuery图片预加载(延迟加载)插件Lazy Load：Lazy Load也叫惰性加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片

参考： 图片预加载的方法

手写http请求？（XMLHttpRequest）

使用XMLHttpRequest对象：创建XHR对象、配置header、发送请求！通过设置回调来接受服务器响应！

谈谈promise?

Promise的优点：

• 最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
• 串行执行异步任务，不用Promise需要写一层一层的嵌套代码，任何任务失败则不再继续并执行错误处理函数
• Promise还可以并行执行异步任务

如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

ES5作用域和ES6作用域？

ES5: 函数作用域（局部）和全局作用域
ES6: 多出了一个块级作用域，也就是{}花括号里声明的单独的作用域

ES5怎么实现类？

使用原型继承的方式实现类！

对象的深拷贝？ES6、ES5

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的情况）：

• 循环遍历对象的属性赋值
• ES6的Object.assign: (用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target)
• ES6扩展运算符:扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
• JSON.parse(JSON.stringify(obj)): 上面三种方法不能拷贝所有层级，该方法可以拷贝对象所有层级
• 手动些递归（-_-!）

参考：https://www.cnblogs.com/pengh...

字符串的截取两个方法（subString subStr）的区别？

stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符

使用过less、sass么？

没用过，从预编译语言的优点回答的
使用的优点：

• 方便CSS的维护，成本和编写成本
• 为 CSS 加入程序式语言的特性

缺点：

• 提高了门槛

跨域？

同源指的是：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略：浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性（但是允许当前源执行其他源的脚本）

前端跨域实现方式：

• JSONP：<script> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。
• 修改document.domain： 浏览器脚本修改document.domain。域名只允许往上升，例如a.git.com到git.com，这样脚本就可以访问git.com上的资源了。还有种用法是假设浏览器访问了a.git.com和b.git.com，如果它们的脚本都把域名设为git.com，那么浏览器本地的资源可以共享。
• window.postMessage：Html5的新方法，两个域下的脚本可以跨window通信。
• 利用表单：浏览器里不禁止表单跨域，所以可以用Javascript + iframe + 表单实现跨域调用

服务端跨域实现方式：

• 反向代理服务器： 将你的服务器配置成 需要跨域获取的资源的 反向代理服务器。也就是说，将其他域名的资源映射到你自己的域名之下，这样浏览器就认为他们是同源的。
• Cross-Origin Resource Sharing： 是 W3C 推出的一种跨站资源获取的机制。服务器 在响应头中设置相应的选项，浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法，进而获取资源。

this 值？

this值在四种情况下：

• 全局调用函数时，在ES5中为指向window对象，但在ES6中this的值为undefined
• 对象调用方法时，this的值为指向该对象
• 构造函数创建对象时，this指向新创建的对象
• call/apply/bind 方法时this值被更改为它们三的第一个参数

谈谈CommonJs、AMD、CMD？

CommonJs: 模块的加载方式是同步的（服务器端模块加载）
AMD: 异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。（浏览器端模块加载） AMD的方式比较适合浏览器（require.js 遵循的是AMD规范实现的模块加载）
CMD: CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入factory中

AMD 与 CMD 的区别：

• AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
• CMD推崇就近依赖，只有在用到某个模块的时候再去require

同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因

require.js 遵循AMD规范，主要为了解决下面两个问题：

• 实现js文件的异步加载，避免网页失去响应
• 管理模块之间的依赖性，便于代码的编写和维护

参考： http://www.ruanyifeng.com/blo... https://www.jianshu.com/p/042...

vue 中的 data为什么是函数而不是属性值？

面试二

看代码说出打印值？

这道题的代码具体不清了，考查的是数组类似下面这样

var a = [,1],
    b = [,1,,1],
    c = [1,];
    console.log(a.length); 
    console.log(b.length);
    console.log(c.length);
    

打印： 2 2 1

以下哪些方法属于全局函数？在window对象下

A eval
B parseFloat
C setTimeout
D alert
E enscape

答案： ABCDE

下面哪段代码会报错？

A var a = ()
B var b = {}
C var c = []
D var d = 

答案： A

以下哪些方法可以在前端跨域？

A JSONP
B script 标签
C iframe 和 location.hash
D flash
E postMessage

答案： ABCDE
参考：http://www.cnblogs.com/rainma...

看下列代码，将会输出什么?（考查变量声明提升）

var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}

输出undefined 和 2

以下代码输出什么？(考查逻辑表达式）

console.log(1 && 2);

输出： 2

以下代码输出什么？（javascript）

console.log(1+"2"+"2"); 
console.log(1+ +"2"+"2");
console.log(1+ -"1"+2);
console.log(1+ -"1"+"2");
console.log(+"1"+2);
console.log(1+ "2");
console.log("A"-"B"+"2");
console.log("A"-"B"+2);

输出： 122 32 2 02 3 12 NaN2 NaN

在body中插入“<ul><li>第一行...</li><li>...</li>...</ul>”,ul中有10个li，要求插入时考虑性能

页面插入DOM会引起回流和重绘。尽量减少回流和重绘的次数为主要思路。

参考： http://developer.51cto.com/ar...

谈谈cookies、sessionStorage、localStorage之间的区别？

主要从四个方面来回答：

• 作用域
• 大小
• 生存周期
• 存储位置 sessionstorage和localstorage都是html5提供的客户端存储方式（都保存在客户端）

区别：

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

对象的深拷贝、浅拷贝？为什么需要深拷贝？

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的情况）：

• 循环遍历对象的属性赋值
• ES6的Object.assign: (用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target)
• ES6扩展运算符:扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
• JSON.parse(JSON.stringify(obj)): 上面三种方法不能拷贝所有层级，该方法可以拷贝对象所有层级
• 手动些递归（-_-!）

为什么需要深拷贝： 我的回答是 我们拷贝的初衷是，创建一个新对象，该新对象拥有原有对象的所有属性和方法。如果浅拷贝，那原对象改变，表面上看就是我们拷贝的对象也变了。

数组去重方法有哪些？

方法：

• 双层循环去重（新数组保存，遍历新数组查找有无已重复元素）
• 排序后相邻去除法

/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

• 数组下标法

/*
*
* 还是得调用“indexOf”性能跟方法1差不多，
* 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。否则存入结果数组。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

• 优化遍历数组法

    // 思路：获取没重复的最右一值放入新数组
    /*
    * 推荐的方法
    *
    * 方法的实现代码相当酷炫，
    * 实现思路：获取没重复的最右一值放入新数组。
    * （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
    function uniq(array){
        var temp = [];
        var index = [];
        var l = array.length;
        for(var i = 0; i < l; i++) {
            for(var j = i + 1; j < l; j++){
                if (array[i] === array[j]){
                    i++;
                    j = i;
                }
            }
            temp.push(array[i]);
            index.push(i);
        }
        console.log(index);
        return temp;
    }
    
    var aa = [1,2,2,3,5,3,6,5];
    console.log(uniq(aa));
    

• 对象键值法去重

    /*
    * 速度最快， 占空间最多（空间换时间）
    *
    * 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。
    * 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，
    * 不是的话给对象新增该键并放入新数组。
    * 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，
    * 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；
    * 解决上述问题还是得调用“indexOf”。*/
    function uniq(array){
        var temp = {}, r = [], len = array.length, val, type;
        for (var i = 0; i < len; i++) {
            val = array[i];
            type = typeof val;
            if (!temp[val]) {
                temp[val] = [type];
                r.push(val);
            } else if (temp[val].indexOf(type) < 0) {
                temp[val].push(type);
                r.push(val);
            }
        }
        return r;
    }
    
    var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
    console.log(uniq(aa));
    

• ES6

// ES6
function unique (arr) {
  const seen = new Map()
  return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

谈谈react/vue/angular之间的差异、区别？