前端面试题总结

JavaScript分为ECMAScript，DOM，BOM

BOM：浏览器对象模型，它使得js有能力与浏览器进行‘对话’，如alert（）就是它提供的
DOM：文档对象模型，通过它可以访问HTML文档的所有元素，如document.getelementByid()就是它提供的

变量提升

将js中的变量或者函数提高到作用域的顶部，如先把var和function声明的变量前置，再去顺序执行代码

阻止冒泡

什么是冒泡：如果一个按钮绑定了一个‘click’事件，那么click事件会依次在它的父元素中触发

w3c的方法是 e.stopPropagation()
ie是e.cancelBubble=true

取消默认事件

什么是默认事件：比如a的链接，input的submit这都属于默认行为，就是不设置方法，自带的方法行为

w3c的方法是：e.preventDefault()
ie是：e.returnValue=false

js的类型

undefined，null，boolean，number,string，Symbol,array,object
ES6新增了一种原始数据类型：Symbol，表示一种独一无二的值

var 和let，const

var声明的变量会挂载在window上，let和const不会
var生命的变量可以状态提升，let和const不能
let和const声明形成块级作用域
同一作用域下，let和const不能声明同名变量，但是var可以
const 声明时不能不赋值 一旦声明不能修改，但是复合型数据，可以修改属性

JS截取字符串

三种：
.substr(下标值，截取个数)
从输入下标向后面截取几个字符串，默认不写截取全部
注意：下标值可以是负数，长度也可以是负数（结果显示为空）
如果所截选长度超过字符串长度，将显示应有的数据，不会报错
.substring()
参数必须为非负整数，否则返回整个字符串
.slice(开始下标，结束下标-1)

我比较喜欢用slice，因为数组也用slice来截取

闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
实现方式，就是在一个方法内再创建一个方法来对需要修改的数据进行操作

js排序

冒泡排序：

思想：第一个和第二个比，谁小谁放在前面，然后第二个再和第三个比，还是谁小谁放在前面，依次类推（注意，已经排过的不再考虑，如，第二次不考虑第一个，第三次不考虑前两个）

sort排序:

sort是数组的一个方法，所以可以自定义排序方式
使用其需要定义两个参数：如n1，n2
如果n1-n2，则升序，反则降序

var arr=[1,11,2,22,5,4,0];
            arr.sort(
                function(n1,n2){
                    return n1-n2;
                });
alert(arr);//[0,1,2,4,5,11,22]
升序

var arr=[1,11,2,22,5,4,0];
            arr.sort(
                function(n1,n2){
                    return n2-n1;
                });
alert(arr);
降序

JS操作数据

join（） 将数组中所有元素转化为字符串并连接在一起
reverse（） 将数组中的元素颠倒顺序
concat（） 数组拼接，返回新数组，且原数组不受影响
slice（开始下标，结束下标-1） 截取数组形成新数组，且原数组不受影响
splice(开始下标,要删除的个数,插入的元素) 删除元素，插入元素
push（）在数组末尾添加一个或多个元素
pop（）从数组末尾删除一个元素
indexOf和lastIndexOf 查找指定元素的下标值，indexOf是从左到右，lastIndexOf反之，如果没有找到返回-1

map() 返回由原数组中每个元素的平方组成的新数组：
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
return item * item;
})

console.log(newArray) // [1, 4, 9, 16, 25]

cookie、localStorage和SessionStorage的区别和特点

LocalStorage特点：
只保留在客户端
本地永久存储，关闭浏览器不会清除，除非用户从浏览器清除
每个域可以最多存储5MB

SessionStorage特点：
只保留在客户端
本地临时存储，在页面会话结束时会被清除
存储大小与localStorage相同

Cookie特点：
服务端和客户端都可以访问
可以设置有效期，过期后将会自动删除。如果不设置则是关闭浏览器后失效
存储大小只有4kb
有存储个数限制。每个浏览器限制不一样。建议20个以内。最多的浏览器可以支持50个

this的指向

常规函数 谁调用就指向谁
箭头函数的this指向是继承父级的this指向

async/await 和 promise 的区别

async/await 是建立在 Promise上的，不能被使用在普通回调以及节点回调
async/await 和 Promises 很像，不阻塞
async/await 代码看起来像同步代码。
Promise代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来

在js中0.1+0.2等于多少？如何让它得到正确答案？

等于0.30000000000000004。原因是因为浮点数运算中产生的误差。

性能优化有哪些？

1. 减少http请求
2. 使用cdn加速
3. 压缩静态资源（css，js，图片之类）
4. 图标使用iconfont管理 ( 阿里图标库 ) 或者 精灵图
5. 开启gzip加速
6. vue的话 开启路由懒加载（优化首屏加载）
7. vue的话 代码上要合理运用v-if和v-show、v-if和v-for不要出现在同标签上，高耦合的要解偶减少重复的代码