94道JavaScript笔试面试题（一）

1. continue和 break有什么区别？

continue跳出当前循环，继续下一次循环
break终止整个循环，不再继续

2.i++和++i的区别？

i++ 先运算，再自增
++i 先自增，再运算

3.JavaScript都有哪些数据类型？

6种原始数据类型：

• Boolean: 布尔表示一个逻辑实体，可以有两个值：true 和 false
• Number: 用于表示数字类型
• String: 用于表示文本数据
• Null: Null 类型只有一个值： null,特指对象的值未设置
• Undefined: 一个没有被赋值的变量会有个默认值 undefined
• Symbol: 符号(Symbols)是ECMAScript第6版新定义的。符号类型是唯一的并且是不可修改的 引用类型：array，object，函数，正则表达式

引用类型：array，object，函数，正则表达式

4.自调函数是什么？用于什么地方

(function(){})()
创建一个局部作用域，防止全局污染

5.slice和splice有什么区别？

slice(s,e)可以截取数组或字符串
splice(s,count,e1,e2...)可以删除或添加数组元素

slice -- “读取”数组指定的元素，不会对原数组进行修改

• 语法：arr.slice(start, end)
• start 指定选取开始位置（含）
• end 指定选取结束位置（不含）

splice - “操作”数组指定的元素，会修改原数组，返回被删除的元素 - 语法：arr.splice(index, count, [insert Elements]) - index 是操作的起始位置 - count = 0 插入元素，count > 0 删除元素 - [insert Elements] 向数组新插入的元素

6.typeof返回的类型有哪些（6个）？

number、string、boolean、undefined、object、function

7.取1~11之间的随机数（即不包括1不包括11）？

parseInt(Math.random()*10+1)
或
Math.floor(Math.random()*10+1)

8.什么是变量提前？

使用var关键字声明的变量，会将声明提升到所在作用域的最前面

9.push、pop、shift和unshift区别？

push和pop在数组的尾部（栈顶）添加/删除 栈---后进先出
unshift和shift在数组的头部（栈底）添加/删除

10.列举4种强制类型转换和3种隐式类型转换？

强制类型：
    Number()、parseInt()、parseFloat()、toString()
隐式类型：
    字符串+数字--->数字转换成字符串
    字符串+布尔--->布尔转成字符串
    数字+布尔----->布尔转数字

11.函数声明与函数表达式的区别？

相同点：两者都是创建函数
不同点：函数声明时存在函数声明提前，而函数表达式不存在声明提前

12.JS中有哪些内置函数（对象）？

11个：String、Number、Boolean、Array、Math、Date、Object、Function、Error、RegExp、Global

13.Math相关的函数（10个）？

1）Math.PI-----------取圆周率
2）Math.abs()--------取绝对值
3）Math.ceil()-------向上取整
4）Math.floor()------向下取整
5）Math.round()------四舍五入
6）Math.max()--------取一组数字的最大值
7）Math.min()--------取一组数字的最小值
8）Math.pow(x,y)-----取x的y次幂
9）Math.random()-----取随机数，范围[0.1)
10)Math.sqrt()-------取开方

14.null和undefined的区别？

undefined：声明变量但未初始化时，返回的值就是undefined
null：访问一个尚不存在的对象时所返回的值，可以把null看做空的对象，但本身不是对象

• null表示"没有对象"，即该处不应该有值

        典型用法：作为函数的参数，表示该函数的参数不是对象 作为对象原型链的终点

• undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义

         典型用法：变量被声明了，但没有赋值时，就等于undefined 调用函数时，应该提供的参数没有提供，该参数等于undefined 对象没有赋值的属性，该属性的值为undefined 函数没有返回值时，默认返回undefined

15.==和===有什么不同？

==：抽象相等，比较时，会先进行类型的转换，然后再比较值
===：数值和数据类型都必须相等

16.JavaScript 的组成

JavaScript 由以下三部分组成：

• ECMAScript（核心）：JavaScript 语言基础
• DOM（文档对象模型）：规定了访问 HTML 和 XML 的接口
• BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

17.检测浏览器版本版本有哪些方式？

• 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
• 根据 window 对象的成员 // 'ActiveXObject' in window

18.介绍 JS 有哪些内置对象？

• 数据封装类对象：Object、Array、Boolean、Number、String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error
• ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

19.说几条写 JavaScript 的基本规范？

• 代码缩进，建议使用“四个空格”缩进
• 代码段使用花括号{}包裹
• 语句结束使用分号;
• 变量和函数在使用前进行声明
• 以大写字母开头命名构造函数，全大写命名常量
• 规范定义 JSON 对象，补全双引号
• 用{}和[]声明对象和数组

20.如何编写高性能的 JavaScript？

• 遵循严格模式："use strict";
• 将 js 脚本放在页面底部，加快渲染页面
• 将 js 脚本将脚本成组打包，减少请求
• 使用非阻塞方式下载 js 脚本
• 尽量使用局部变量来保存全局变量
• 尽量减少使用闭包
• 使用 window 对象属性方法时，省略 window
• 尽量减少对象成员嵌套
• 缓存 DOM 节点的访问
• 通过避免使用 eval() 和 Function() 构造器
• 给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数
• 尽量使用直接量创建对象和数组
• 最小化重绘(repaint)和回流(reflow)

21.DOM 元素 e 的 e.getAttribute(propName)和 e.propName 有什么区别和联系

• e.getAttribute()，是标准 DOM 操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
• e.propName 通常是在 HTML 文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如 a 标签生成 HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用 getAttribute 进行访问
• e.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）
• e.propName 返回值可能是字符串、布尔值、对象、undefined 等
• 大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性
• 一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property
• 像<a href="../index.html">link</a>中 href 属性，转换成 property 的时候需要通过转换得到完整 URL
• 一些 attribute 和 property 不是一一对应如：form 控件中<input value="hello"/>对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property

22.offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别

• offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同
• clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

23.描述浏览器的渲染过程，DOM 树和渲染树的区别？

浏览器的渲染过程：

• 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
• CSS 文件下载完成，开始构建 CSSOM(CSS 树)
• CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
• 布局(Layout)：计算出每个节点在屏幕中的位置
• 显示(Painting)：通过显卡把页面画到屏幕上

DOM 树 和 渲染树 的区别：

• DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
• 渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

24.重绘和回流（重排）的区别和关系？

• 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
• 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
• 注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
• 回流必将引起重绘，而重绘不一定会引起回流

25.如何最小化重绘(repaint)和回流(reflow)？

• 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
• 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document
• 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
• 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
• 避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）

• 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color

  批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

26.script 的位置是否会影响首屏显示时间？

• 在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script 的位置不影响首屏显示的开始时间。
• 浏览器解析 HTML 是自上而下的线性过程，script 作为 HTML 的一部分同样遵循这个原则
• 因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间

27.解释 JavaScript 中的作用域与变量声明提升？

JavaScript 作用域：

• 在 Java、C 等语言中，作用域为 for 语句、if 语句或{}内的一块区域，称为作用域；
• 而在 JavaScript 中，作用域为 function(){}内的区域，称为函数作用域。

JavaScript 变量声明提升：

• 在 JavaScript 中，函数声明与变量声明经常被 JavaScript 引擎隐式地提升到当前作用域的顶部。
• 声明语句中的赋值部分并不会被提升，只有名称被提升
• 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
• 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数

28.介绍 JavaScript 的原型，原型链？有什么特点？

原型：

• JavaScript 的所有对象中都包含了一个 [proto] 内部