触及到的前端面试题null 表示变量已赋值，但是值为空。

JS 部分

数组去重 (去重不止这两种方法)

第一种方法 (ES5)

let arr = [1, 2, 2, 3, 4, 4]
function unique(array) {
    let res = []
    for(let i = 0, len = array.length; i < len; i++) {
        let temp = array[i]
        // 也可替换成 ES6 中的 includes()
        if (res.indexof(temp) === -1) {
            res.push(temp)
        }
    }
    return res
}

第二种方法 (ES6)

set()

let arr = [1, 2, 2, 3, 4, 4]
function unique(array) {
    return [...new Set(arrray)]
}

map()

let arr = [1, 2, 2, 3, 4, 4]
function unique(array) {
    const arrMap = new Map()
    return filter(i => !arrMap.has(i) && arrMap.set(i)) // 这里 set 的 value 可写可不写
}

截取 URL 并返回 URL 中的参数

let url = 'https://test/123?a=1&b=2'
function getParams(url) {
    const paramsStr = url.split('?')[1]
    const paramsArr = paramsStr.split('&')
    const params = {}
    for(let i = 0, len = paramsArr.length; i < len; i++) {
        let arg = paramsArr[i].split('=')
        params[arg[0]] = arg[1]
    }
    return params
}

typeof typeof 1 ('string')

typeof 1 ==> 'number'
typeof 'number' ==> 'string'

Cookie, LocalStorage, SessionStorage 的区别

Cookie
1. 一般由服务器端生成，可设置失效时间；浏览器生成默认是页面关闭失效
2. 存储数据大小为 4k 左右
3. 每次请求都会携带在请求头中，数据过多会带来性能问题
LocalStorage
1. 除非手动清除，否则永久保存
2. 存储数据大小为 5MB
3. 存在浏览器中，不参与接口请求
SessionStorage
1. 仅在当前会话或浏览器中有效，关闭页面或浏览器后即清除
2. 存储数据大小为 5MB
3. 存在浏览器中，不参与接口请求

原型链

每一个对象都会有一个 __proto__ 这个属性，__proto__ 指向了对象的原型，
原型中的 constructor 指向了构造函数，构造函数中的 prototype 又指向了 对象的原型。
但是不是每个函数都会有 prototype 这个属性 (Function.prototype.bind());
所有的对象都可以通过 __proto__ 找到 Object;
所有的函数都可以通过 __proto__ 找到 Function;
继承也是通过原型去继承;

null 和 undefined 的区别

null 表示变量已赋值，但是值为空。
null 在使用 typeof 进行判断显示 'object', 这是 js 中的一个 bug;
js 最初版本中使用的是 32 位系统, 000 开头表示对象，但 null 表示全是 0
undefined 表示变量未定义

var、let 和 const 的区别

var 会进行变量声明提升且在全局环境中使用 var 声明便令会将变量绑定到 window 上
let 和 const 不存在变量声明提升且不会绑定到 window 上，并且会有暂时性死区(作用域)
let 声明的变量可以多次改变，const 一旦声明则不能改变

严格模式下使用未用 var/let/const 声明的变量会报错

闭包 (函数 A 中有一个函数 B, 函数 B 可以访问函数 A 中的变量，函数 B 就是闭包)

使用闭包解决循环中 setTimeout 顺序输出的问题

for(var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i) // 5 5 5 5 5
    }, 1000)
}

1. 利用闭包
for(var i = 0; i < 5; i++) {
    (function(k) {
        setTimeout(() => {
            console.log(k) // 0 1 2 3 4
        }, 1000)
    })(i)
}

2. 利用 setTimeout() 的第三个参数
for(var i = 0; i < 5; i++) {
    setTimeout((k) => {
        console.log(k) // 0 1 2 3 4
    }, 1000, i)
}

2. 利用 let
for(let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i) // 0 1 2 3 4
    }, 1000)
}

Vue 部分

$nextTick() (异步更新队列)

为什么需要异步更新队列

为什么Vue使用异步更新队列？ #22

组件通信

父子通信
1. 父 ==> 子
  props
2. 子 ==> 父
  子($emit)
  父(v-on)
3. $parent / $children
4. $ref
兄弟通信
1. EventBus
2. Vuex
多级通信
1. Bus
2. Vuex
3. provide / inject (不是可响应的，如果传入一个可监听的对象，则是可响应的)
4. $attrs / $listeners (只传递数据，不做中间处理)
  4.1 $attr (父组件中绑定的非 props 属性)
  4.2 $listeners (父组件中绑定的非原生事件)

CSS 部分

div 居中、浮动的 div 居中、绝对定位的 div 居中

div 居中

1. 
<div class="other"></div>
.other {
    width: 100px;
    margin: 0 auto;
}
2. inner 居中
<div class="other">
    <div class="inner"></div>
</div>
.other {
    display: flex;
    justify-content: center
}

浮动的 div 居中

1. 
<div class="outer">
    <span class="inner-float" style="float: left;">浮动元素</span>
</div>
.outer {
    float: left;
    position: relative;
    left: 50%;
}
inner-float {
    position: relative;
    left: -50%;
}
2. 
<div class="outer">
    <div class="inner-float" style="float: left;">浮动元素</div>
</div>
</div>
.outer {
  display: flex;
  justify-content: center;
}

绝对定位的 div 居中

1. 
<div class="outer">
    <div class="inner-absolute" style="position: absolute;">浮动元素</div>
</div>
.outer {
    position: relative;
}
.inner-absolute {
    left: 50%;
    transform: translateX(-50%)
}
2. 
<div class="outer">
    <div style="position: absolute;">浮动元素</div>
</div>
.outer {
    display: flex;
    justify-content: center;
}

为什么要初始化 CSS 解决一些标签在不同浏览器下默认样式不同的问题

CSS3 中唯一新增的一个伪元素是什么 (::selection)

参考

备注

时不时就会更新点