- A+
01,如何开启JS严格模式?JS严格模式有什么特点?
两种方式
全局开启在js开头加上
'use strict'
局部开启,在作用域开头加上
function fn(){ 'use strict' }
特点:
1,全局变量必须先声明
2,禁止使用with
3,创建eval作用域
有单独的作用域
4,禁止this指向window
5,函数参数不能重名
02、offsetHeight、scrollHeight、clientHeight有什么区别?
offsetHeight = boder + padding + content
clientWidth = padding + content
scrollWidth = padding + 实际内容大小
注意:不要频繁的去获取offsetHeight等值,所有DOM操作都很费性能
scrollLeft 左边滚动距离 scrollTop 距离顶部的距离
offsetParent 找距离自己定位过的父级
获取元素距离页面顶部的距离?
offsetParent.scrollTop + xx.scrollTop 定位过得父级top 加上 自身距离父级的top
obj.getBoundingClientRect().top
03、HTMLCollection与NodeList区别?
HTMLCollection 是 Element 集合
obj.children,只包含⼦元素
NodeList 是 Node 集合
obj.childNodes,包含⽂本、注释、空格、换⾏
DOM是⼀棵树,所有节点都是Node
04、箭头函数有什么缺点?什么时候不能使⽤箭头函数?
** 箭头函数的this指向⽗作⽤域 **
箭头函数有什么缺点?
一,没有 arguments
二,⽆法通过 call、apply、bind 改变 this
1、相同点
三个都是用于改变this指向;
接收的第一个参数都是this要指向的对象;
都可以利用后续参数传参。
2、不同点
call和bind传参相同,多个参数依次传入的;
apply只有两个参数,第二个参数为数组;
call和apply都是对函数进行直接调用,而bind方法不会立即调用函数,而是返回一个修改this后的函数。
不能使⽤箭头函数的场景:
1.对象的⽅法,不能使⽤ -> this 指向不正确
2.原型⽅法 __proto__,不能使⽤ -> this 指向不正确
3.构造函数,不能使⽤ -> this 指向不正确
4.动态上下⽂中使⽤this,不能使⽤ -> this 指向不正确
5.Vue的⽣命周期和method,不能使⽤ -> this 指向不正确
05、for..in 与 for..of 有什么区别?
for..in 遍历得到key,可以遍历对象,不可以遍历 Set 和 Map
for..of 遍历得到value,不可以遍历对象,可以遍历 Set 和 Map
Set 和 Map
Set
- 集合是由一组无序且唯一的项组成的,可以想象成集合是一个既没有重复元素,也没有顺序概念的数组
- ES6提供了新的数据结构Set,类似于数组,但是成员的值都是唯一的,没有重复的值
- Set本身是一个构造函数,用来生成Set数据结构的
Map
- 类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当作键,是一种更完善的Hash结构实现,如果你需要键值对的数据结构,Map 比 Object更合适
- 集合和字典的区别:
— 共同点:集合,字典可以存储不重复的值
— 不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储
06、typeOf 可以判断哪些类型?
基本数据类型,判断 {} 或 【】会返回 object
undefined
string
number
boolean
function
object
symbol 是ES6 引入了一种新的基本数据类型(原始数据类型) Symbol ,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是: undefined 、 null 、布尔值(Boolean)、字符串 (String)、数值(Number)、对象(Object)。
每个从 Symbol() 返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符
07、阅读代码,填写结果
console.log('我的年龄是' + 18 + 1) 我的年龄是181
console.log(100 == '100') true
console.log(0 == '') true
console.log(0 == false) true
console.log(false == '') true
console.log(null == undefined) true
08、何时使⽤ == ?何时使⽤ === ?
除了 if (obj.a == null) 使⽤ == 之外,全部⽤ ===
扩展
falsely 变量,除此之外都是 truly 变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false
!! 取反之后还是 false 的就是 falsely 变量
09、阅读代码,填写结果
let a1=10; let b1=a1; b1=100; console.log(a1); // 此时 a1 的值是多少? let a2={age: 18}; let b2=a2; b2.age=20; console.log(a2); // 此时 a2.age 的值是多少?
【值类型】
赋值后,⼊栈,不会互相⼲扰
常⻅值类型:undefined、string、bumber、boolean、symbol
【引⽤类型】
会互相⼲扰
常⻅引⽤类型:对象{a:10}、数组[1, 2, 3]、null
一个是传值,一个是传址
10. ⼿写深拷⻉函数
const obj={ name: '张三', 学⽣反馈 age: 18, address: { city: 'beijing' }, hobby: ['篮球', '台球'] } function deepClone(obj = {}) { if (typeof obj !== "object" || obj == null) { return obj; } let result; if (obj instanceof Array) { result = []; } else { result = {}; } for (let key in obj) { if (obj.hasOwnProperty(key)) { result[key] = deepClone(obj[key]); // 递归 } } return result; }
个人博客原文地址:http://blog.qianbaiyv.cn/get/my/blog/details/2311887075%40qq.com/118