前端开发面试题-问答（四）

1、变量提升

定义：函数以及变量的声明被提升到函数的最顶部。即在js中，变量可以在使用后再声明。其中，函数声明式的提升，即将整个代码块提升到它所在的作用域的最开始执行。

function test () {
    console.log(a);  //undefined
    var a = 123; 
};
test();

只有声明的变量会提升，初始化的不会。

2、let和var的区别

ES6新增了let命令，用来声明局部变量。用法类似于vr，但是所声明的变量，只在let命令所在的代码块中有效，而且有暂时性死区的约束。

• 用let定义块级作用域变量
• let没有变量提升和暂时性死区（ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。）；
• let变量不能重复声明；

3、数组方法：

• join() ：将数组中所有元素根据设置的字符串拼接成一个字符串；
• reverse() ：数组翻转；
• concat() ：数组拼接，返回新数组；
• slice(start, end) ：截取数组，返回新数组；
• splice(start, lengtn, newValue) ：从数组中删除、插入元素,返回一个由删除元素组成的数组（返回新数组，并且修改了原数组）；
• push() ：数组末尾添加元素，返回数组新长度；
• pop() ：数组末尾删除元素，返回被删除的元素（删且删除1个）；
• shift() ：数组前添加元素，返回数组新长度；
• unshift() ：数组前删除元素，返回被删除的元素（删且删除1个）；
• toString() ：将数组的每个元素都转化为字符串并且用逗号拼接；
• indexOf(str, index) 和 lastIndexOf()：查找元素的想的索引位置；
• .sort(fun) ：默认按照字母升序排序（元素自动转化为字符串进行比较）；

var arr = [20,10,2,1,3];
arr.sort();// [1, 10, 2, 20, 3]
arr.sort(function(a,b){
  return a-b;    //升序
}); //[1, 2, 3, 10, 20]
arr.sort(function(a,b){
  return b-a;    //降序
}); //[20,10,3,2,1]

• forEach((str, index, arr)=>{}) ：从头至尾遍历数组，为每个元素调用指定的函数；
• filter() ：过滤功能，数组中每一项运行给定函数，返回满足条件的组成新的数组，可用数组去重；

var a = [1,2,3,4,5,6,3,1];
a.filter(function(v,i,self){
  return self.indexOf(v) == i;
});
//[1, 2, 3, 4, 5, 6]

• every(x=>x>0) 和 some(x=>x>0) ：判断是否满足给定条件，满足则返回true，否则为false;
• reduce(fun, 递归的初始值) 和 reduceRight() ：从数组的第一项开始，逐个遍历到最后；

//可以用reduce快速求数组之和
var arr=[1,2,3,4];
arr.reduce(function(a,b){
  return a+b;
}); //10

4、字符串方法：

• chartAt() ：返回给定位置的那个字符；
• charCodeAt() ：返回给定位置的那个字符的字符编码；
• concat() ：将一或多个字符串拼接起来，返回拼接得到的新的字符串；
• slice(start, end) ：返回被操作字符串的一个子字符串；
• substring(start, length) ： ：返回被操作字符串的一个子字符串；
• indexOf() ：从一个字符串搜索指定的子字符串，返回子字符串的位置(没有找到返回-1)；
• trim()：会创建一个字符串副本,删除前置以及后缀的所有空格[IE8及一下不支持]；
• .search() ： 返回字符串中第一个匹配项的索引;
• .replace() 、.match() ：

5、我们如何用HTML 5实现应用程序缓存？

6、什么是WebSQL？

7、HTML 5推出了10个重要的新的表单元素：

• Color.
• Date
• Datetime-local
• Email
• Time
• Url
• Range
• Telephone
• Number
• Search

8、svg是什么？

svg表示可缩放矢量图形。基于文本的图形语言，可以绘制使用文本、线、点灯图形，因此可以轻巧又快速的渲染。

9、canvas

画布是一个可以在其上绘制图形的HTML区域；

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');

10、webpack plugin 的原理是什么？plugin 中有异步请求会阻塞后面的 plugin 吗？

11、Javascript中callee和caller的作用？

• caller是返回一个对函数的引用，该函数调用了当前函数;
• callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

【讲一下你做的比较复杂的项目？以及你在项目中担当了什么角色？】

【怎么优化 H5 让它可以在 300ms 之内打开？怎么优化 h5 的加载速度？】

【你们 WebView 加载一般耗时多久？】

【做过离线包吗？H5 离线包的原理？客户端根据什么拦截静态资源请求？】

【怎么判断 webview 是否加载完成？】

【微前端子应用之间怎么通信？有没有了解过业界的一些方案？】

【实现 DOM 字符串转虚拟 DOM 对象（不能用 DOM 相关的 api）】

【管理系统都做了哪些业务？有没有做一些提高开发效率的东西？】

【常用的组件是哪个？解决了什么问题？】

【有用过代码规范相关的吗？Eslint 和 Prettier 冲突怎么解决？】

【有没有做过优化相关的？webpack 做了哪些优化？】

【webpack 构建流程是怎样的？】
【webpack loader 和 plugin 的原理和区别？】
【webpack 热更新原理？】
【webpack 怎么做分包？】
【做过 webpack 性能优化吗？有用过 rollup 吗？】
【讲一下重绘和回流】
【知道 BFC 吗？使用场景有哪些？】
【页面卡顿怎么去定位？】
【vue 双向绑定原理？】
【实现一个 bind 函数】
【离线包怎么更新？怎么知道需要打开哪个离线包？】
【服务发现为什么用 ip，而不用域名？】
【做过哪些公共组件？DatePicker 怎么实现的？难点在哪里？】
【组件封装有哪些原则？】
【组件数据和 UI 怎么分离？】
【有没有做过一些提高工作效率的东西？】
【有没有了解过拖拽？觉得它有哪些难点？】