一年前写了一篇java script八张思维导图,主要是对前端java script知识点的一个系统的整理和总结。本篇文章用了近一个月时间,搜集整理了网上各种面试笔试题及本人针对前端的一些理解以及各路大神针对前端难点部分的详细介绍,可以作为以后面试或者考察面试人员的参考。
相信通过这两篇文章的学习,一定会让你对前端有一个更深的认识。
后续会持续更新......
java script基础
介绍JS的基本数据类型
string number boolean undefined null
介绍JS有哪些内置对象
- 数据封装类对象: String Number Boolean Array Object
- 其他对象: Function Math Date Error Arguments RegExp
宿主对象和原生对象的区别
- 原生对象(native object)是由ECMAScript规范定义的java script内置对象,如 String Number Boolean Array Object Function Math Date Error Arguments RegExp等。
- 宿主对象(host object)是由运行时的环境(浏览器或node)决定的,如window、XMLHTTPRequest等。
null、undefined及未声明变量之间的区别。如何区分?
- 未声明变量默认值为undefined
typeof null === 'object' // true
typeof undefined === 'undefined' // true
==和===的区别
==比较之前会先进行类型转换,即不会对类型进行比较。例如:
12 == '12' // true true == 1 // true false == '0' // true
===会比较数值和类型。例如:
12 === '12' // false 12 === 12 // true true === 1 // false false === '0' // false
JS隐式转换及应用场景
JS在使用运算符号或者对比符时,会自带隐式转换,规则如下:
- -、*、/、% :一律转换成数值后计算
+:
- 数字 + 字符串 = 字符串, 运算顺序是从左到右
- 数字 + 对象, 优先调用对象的valueOf -> toString
- 数字 + boolean/null -> 数字
- 数字 + undefined -> NaN
- [1].toString() === '1'
- {}.toString() === '[object object]'
NaN !== NaN 、+undefined 为 NaN
"Attribute"和"Property"的区别
"Attribute"是在HTML中定义的,而"property"是在DOM上定义的。为了说明区别,假设我们在HTML中有一个文本框:
<input type="text" value="Hello">
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello
但是在文本框中键入“ World!”后:
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!
NaN是什么?如何判断是否是NaN类型
- 定义: 全局属性 NaN 的值表示不是一个数字(Not-A-Number)
如何判断一个值是否是NaN: 等号运算符(== 和 ===) 不能被用来判断一个值是否是 NaN。必须使用 Number.isNaN() 或 isNaN() 函数。
NaN === NaN; // false Number.NaN === NaN; // false isNaN(NaN); // true isNaN(Number.NaN); // true
如何判断两个对象相等
需要考虑三个问题:
- 如果对象的属性值之一本身就是一个对象
- 如果属性值中的一个是NaN(在java script中,是不是等于自己唯一的价值?)
- 如果一个属性的值为undefined,而另一个对象没有这个属性(因而计算结果为不确定?)
检查对象的“值相等”的一个强大的方法,最好是依靠完善的测试库,涵盖了各种边界情况。Underscore和Lo-Dash有一个名为_.isEqual()方法,用来比较好的处理深度对象的比较。您可以使用它们像这样:
// Outputs: true
console.log(_.isEqual(obj1, obj2));
什么是'user strict',使用它有什么优缺点?
'use strict' 是用于对整个脚本或单个函数启用严格模式的语句。严格模式是可选择的一个限制 java script 的变体一种方式 。
优点:
- 无法再意外创建全局变量。
- 会使引起静默失败(silently fail,即:不报错也没有任何效果)的赋值操抛出异常。
- 试图删除不可删除的属性时会抛出异常(之前这种操作不会产生任何效果)。
- 要求函数的参数名唯一。
- 全局作用域下,this的值为undefined。
- 捕获了一些常见的编码错误,并抛出异常。
- 禁用令人困惑或欠佳的功能。
缺点:
- 缺失许多开发人员已经习惯的功能。
- 无法访问function.caller和function.arguments。
- 以不同严格模式编写的脚本合并后可能导致问题。
总的来说,我认为利大于弊,我从来不使用严格模式禁用的功能,因此我推荐使用严格模式。
call,apply和bind的作用是什么?两者区别是什么?
.call和.apply都用于调用函数,第一个参数将用作函数内 this 的值。然而,.call接受逗号分隔的参数作为后面的参数,而.apply接受一个参数数组作为后面的参数。一个简单的记忆方法是,从call中的 C 联想到逗号分隔(comma-separated),从apply中的 A 联想到数组(array)。
function add(a, b) {
return a + b;
}
console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
.call和.apply是立即执行的, .bind 返回函数的副本,但带有绑定上下文!它不是立即执行的。
const person = { name: 'Lydia' }
function sayHi(age) {
console.log(`${this.name} is ${age}`)
}
sayHi.call(person, 21)
sayHi.bind(person, 21)
结果: Lydia is 21 function
请说明Function.prototype.bind的用法
摘自MDN:
bind()方法创建一个新的函数, 当被调用时,将其 this 关键字设置为提供的值,在