javaScript面试题

1. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

    1. 出现时间

        - cookie: 有 JS 的时候就存在了

        - storage: H5 出现以后才有

    2. 存储大小

        - cookie: 4k 左右

        - storage: 20M 左右

    3. 前后端交互

        - cookie: 会跟随页面的请求自动携带

        - storage: 不会跟随请求自动携带

    4. 过期时间

        - cookie: 默认是会话级别, 可以手动设置过期时间

        - storage: 不能手动设置

    5. 前后端操作

        - cookie: 前后端语言都能操作

        - storage: 只能由 JS 操作

    - localStorage 和 sessionStorage

        1. 过期时间

            - local: 永久存储, 除非手动删除

            - session: 临时存储

        2. 跨页面通讯

            - local: 直接跨页面通讯

            - session: 只能是当前窗口(页面) 跳转的页面才能通讯

        3. 共同点

            - 只能存储字符串, 不能存储复杂数据类型

2. 说说你对作用域链的理解

    - 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的

    - 简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

3. 上一题的延申: 那你在描述一下 JS 的原型链是什么

    - 每个对象都会在其内部初始化一个属性，就是**proto**，当我们访问一个对象的属性时

    - 如果这个对象内部不存在这个属性，那么他就会去**proto**里找这个属性，这个**proto**又会有自己的**proto**，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

4. 描述一下闭包

    - 闭包就是能够读取其他函数内部变量的函数

    - 闭包是指有权访问外层函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建一个内层函数，通过内层函数访问外层函数的局部变量,利用闭包可以突破作用链域

    - 闭包的特性：

        - 函数内再嵌套函数

        - 内部函数可以引用外层的参数和变量

        - 函数的执行空间不会被销毁

5. 上一题的延申: 那你觉得闭包有什么用

    - 闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

    - 闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中

    - 使用闭包的注意点

        - 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能导致内存泄露

        - 解决方法: 在退出函数之前，将不使用的局部变量全部删除

6. 请解释什么是事件代理

    - 事件代理，又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是 DOM 元素的事件冒泡。

    - 使用事件代理的好处是可以提高性能

        - 可以大量节省内存占用，减少事件注册，比如在 table 上代理所有 td 的 click 事件

        - 可以实现当新增子对象时无需再次对其绑定

7. 谈谈 This 对象的理解

    - this 总是指向函数的直接调用者

    - 如果有 new 关键字，this 指向 new 出来的那个对象

    - 在事件中，this 指向触发这个事件的对象

8. 上一题延申: new 操作符具体干了什么呢?

    - 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

    - 属性和方法被加入到 this 引用的对象中

    - 新创建的对象由 this 所引用，并且最后隐式的返回 this

9. Array.splice() 与 Array.slice() 的区别

    - splice

        - 语法 1: 数组.splice(开始索引, 多少个)

            - 作用: 截取数组部分内容

        - 语法 2: 数组.splice(开始索引, 多少个, 插入的数据 1, 插入的数据 2, 插入的数据 3...)

            - 作用: 截取数组部分内容, 并插入新的数据

        - 返回值: 截取出来的部分内容 组成的 数组

    - slice

        - 语法: 数组.slice(开始索引, 结束索引)

        - 参数:

            - 包前不包后: 包含开始索引位置的数据, 不包含结束索引位置的数据

            - 不写开始索引, 默认是 0; 不写 结束索引, 默认是 数组的 length

            - 参数支持写负数, 表示倒数第几个, 其实就是 length + 负数

        - 作用: 截取数组部分内容

        - 返回值: 截取出来的部分内容组成的新数组

    - 总结: splice 相当于剪切数组的部分内容, 所以会影响原数组, slice 相当于复制数组的部分内容, 所以不会影响原数组

10.正则的两大特性

1. 懒惰
    + 每次捕获 都是在 下标[0] 的位置开始捕获
    + 解决: 在正则后添加全局标识符 g
2. 贪婪
    + 每次捕获内容的时候, 尽可能的多去捕获内容
    + 解决: 使用非贪婪限定符    (在原有的限定符后添加一个?)
贪婪限定符  *   +   ?   {n,}    {n,m}
非贪婪限定符   *?    {n,}?

11. offsetWidth/offsetHeight, clientWidth/clientHeight 的区别

    - offsetWidth/offsetHeight 返回值包含 content + padding + border

    - clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条

12. 说几条写 JavaScript 的基本规范

    - 不要在同一行声明多个变量

    - 请使用 ===/!== 来比较 true/false 或者数值

    - 使用对象字面量替代 new Array 这种形式

    - 避免过多的全局变量或函数

13. null，undefined 的区别

null 表示一个空的引用，它表示引用一个不存在的对象。

undefined 是一个表示“无定义”的原始值，它表示变量被声明了，但是没有赋值。

14.  javascript 代码中的"use strict";是什么意思

    -   use strict 是一种 ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使 JS 编码更加规范化的模式,消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为

15.  上一题延申: 那严格模式有什么限制吗

    -   变量必须声明后再使用

    -   函数的参数不能有同名属性，否则报错

16.  谈谈你对 ES6 的理解

    -   新增模板字符串（为 JavaScript 提供了简单的字符串插值功能）

    -   箭头函数 (简化了函数的写法)

    -   增加了 let 和 const (用来声明变量)

    -   还有 模块化语法, 解构赋值等等...

17.  上一题延申: let const var 三者有什么区别

    -   和 var 的区别

        1. let 和 const 不允许重复声明变量

        2. let 和 const 声明变量的时候不会出现变量提升

        3. let 和 const 声明的变量会被所有的代码块 {} 限制作用范围

    -   let 与 const 的区别

        1. let 声明的变量的值可以改变, const 声明的变量的值不可以被改变, 所以我们也把 const 声明的变量叫做 "常量"

        2. let 定义的变量 可以不赋值, 但是 const 定义的变量必须赋值