前端面试02-JavaScript
1.null，undefined的区别？
- Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
- Null类型也只有一个值，即null。
- null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其他语言一样都代表“空值”，不过undefined却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
- javascript权威指南：null 和 undefined 都表示 “值的空缺”，你可以认为 undefined 是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
- javascript高级程序设计：在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。null值则是表示空对象指针。
2.逻辑运算符：或、与、非
|| : 只要其中有一个为true，整体结果是true； && : 只要有一个是false，整体结果是false； !：取反 （比较：转布尔，在取反）
3."=="和"==="的不同
答案：前者会自动转换类型,再判断是否相等 后者不会自动类型转换，直接去比较
4.总结String 对象操作方法
方法 | 描述 |
|---|---|
charAt() | 返回在指定位置的字符。 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
concat() | 连接两个或更多字符串，并返回新的字符串。 |
fromCharCode() | 将 Unicode 编码转为字符。 |
indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
includes() | 查找字符串中是否包含指定的子字符串。 |
lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
search() | 查找与正则表达式相匹配的值。 |
slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引 |
split() | 把字符串分割为字符串数组。 |
substr() | 从起始索引号提取字符串中指定数目的字符。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
trim() | 去除字符串两边的空白 |
toString() | 返回一个字符串。 |
5.函数声明与函数表达式的区别？
在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
6.javascript的typeof返回哪些数据类型.
答案：string,boolean,number,undefined,function,object
7.什么是作用域和作用域链，js有几种作用域分别是？
作用域（scope）
作用域是指程序源代码中定义变量的区域，简单来说，一段程序代码中所用到的变量并不总是有效的，而限定这个变量的可用性的代码范围就是这个变量的作用域。
js有三种:
- 全局作用域 全局作用域是最外围的一个作用域。根据 ECMAScript 实现所在的宿主环境不同，表示全局作用域的对象也不一样。在浏览器中，全局作用域就是window对象，node则是global对象。
- 局部作用域 和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的是函数内部。
- 块级作用域 ES5本身是没有块级作用域，ES6 引入了块级作用域，让变量的生命周期更加可控，使用let和const声明的变量在指定块（简单理解就是一对花括号）的作用域外无法被访问。
作用域链（scope chain）
一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
8.new操作符具体干了什么呢?
- 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
- 属性和方法被加入到 this 引用的对象中。
- 新创建的对象由 this 所引用，并且最后隐式的返回 this 。
9.请说出你熟悉的数组的操作方法并说出如何使用?
//改变原数组方法:
var arr = []
arr.push() //数组末尾添加
arr.pop() //数组末尾删除
arr.unshift() //数组头部添加
arr.shift() //数组头部删除
arr.splice() //方法向/从数组中添加/删除项目，然后返回被删除的项目。
arr.reverse() //方法用于颠倒数组中元素的顺序。
arr.sort() //方法用于对数组的元素进行排序。
//不改变原数组方法:
var arr = []
arr.includes(); // 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。
arr.indexOf(); //方法可返回某个指定的字符串值在字符串中首次出现的位置。
arr.lastIndexOf(); //方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
arr.slice(); //方法可从已有的数组中返回选定的元素。
arr.join(); //方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arr.toString();
arr.concat(); //方法用于连接两个或多个数组。10.讲几个常见的js内置对象？
Object 是 JavaScript 中所有对象的父对象 数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、Arguments、Math、Date、RegExp
11.请说出至少三种减低页面加载时间的方法？
- 压缩css、js文件
- 合并js、css文件，减少http请求
- 外部js、css文件放在最底下
- 减少dom操作，尽可能用变量替代不必要的dom操作
12.简单数据类型和复杂数据类型
简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括String ，Number，Boolean，Undefined，Null 复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；
13.添加 删除 替换 插入到某个接点的方法？
1.创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2.添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
remove()//删除所有的子元素
3.查找
getElementsByTagName() //通过标签名称
getElementsByClassName() //通过元素的class属性的值
getElementById() //通过元素Id，唯一性14.DOM 事件流是什么?如何阻止事件冒泡？
- 事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。 事件流包括三个阶段事件捕获,目标阶段,事件冒泡。
- 事件捕获 目标阶段 事件冒泡
- 阻止事件冒泡:event.stopPropagation()
15.Javascript的事件流模型都有什么?
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。
JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。
16.什么是事件委托?说一说事件代理,优缺点是什么?
事件委托又叫事件代理,利用事件冒泡的原理，原本绑定在子元素身上的事件，现在绑定在父元素身上，由父元素监听事件的行为。 优点: 1.可以减少事件注册,节省大量内存占用 2.可以将事件应用于动态添加的子元素上 缺点: 使用不当会造成事件在不应该触发时触发
17.说一下你对this的理解？
this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同
- 普通函数this在非严格模式下指向window，严格模式下指向undefined
- 构造函数this指向实例对象，原型对象里面的方法也指向实例对象
- 对象方法中的this指向该方法所属的对象
- 事件绑定方法中的this指向绑定该事件的对象
- 定时器函数的this指向window
- 立即执行函数中的this指向window
18.BOM 和 DOM 的关系
BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。
DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
19.如何编写高性能的JavaScript,(前端如何优化)
- 将js脚本放在页面底部，加快渲染页面;
- 将js脚本成组打包，减少请求;
- 使用非阻塞方式下载js脚本;
- 尽量使用局部变量来保存全局变量;
- 尽量减少使用闭包;
- 使用window对象属性方法时省略window;
- 尽量减少对象成员嵌套;
- 缓存DOM节点的访问;
- 通过避免使用eval和function()构造器;
- 给setTimeout()和setInterval()传递函数而不是字符作为参数;
- 尽量使用直接量创建对象和数组;
- 最小化重绘(repaint)和回流(reflow);
20.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
21.简述window对象除 document以外的一些常用子对象，并描述其作用？
window对象有很多子对象，除了 document以外，还有如下常用子对象：
- screen对象：此对象包含有关客户端显示屏幕的信息
- history对象：此对象包含用户访问过的 URL；
- location对象：此对象包含有关当前 URL的信息
- navigator对象：此对象包含有关浏览器的信息
- event对象：任何事件触发后将会产生一个 event对象