面试 个人摸底监测 考察JavaScript基础 （第三天）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

01，如何开启JS严格模式？JS严格模式有什么特点？02、offsetHeight、scrollHeight、clientHeight有什么区别？03、HTMLCollection与NodeList区别？04、箭头函数有什么缺点？什么时候不能使⽤箭头函数？05、for..in 与 for..of 有什么区别？06、typeOf 可以判断哪些类型？07、阅读代码，填写结果08、何时使⽤ == ？何时使⽤ === ？09、阅读代码，填写结果10. ⼿写深拷⻉函数

两种方式

全局开启在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/%40qq.com/118

offsetHeight = boder + padding + content

clientWidth = padding + content

scrollWidth = padding + 实际内容大小

注意：不要频繁的去获取offsetHeight等值，所有DOM操作都很费性能

scrollLeft 左边滚动距离 scrollTop 距离顶部的距离

offsetParent 找距离自己定位过的父级

获取元素距离页面顶部的距离？

offsetParent.scrollTop + xx.scrollTop 定位过得父级top 加上 自身距离父级的top

obj.getBoundingClientRect().top

HTMLCollection 是 Element 集合

obj.children，只包含⼦元素

NodeList 是 Node 集合

obj.childNodes，包含⽂本、注释、空格、换⾏

DOM是⼀棵树，所有节点都是Node

04、箭头函数有什么缺点？什么时候不能使⽤箭头函数？

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 的值是多少？

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;
}

** 箭头函数的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 指向不正确

for..in 遍历得到key，可以遍历对象，不可以遍历 Set 和 Map

for..of 遍历得到value，不可以遍历对象，可以遍历 Set 和 Map

Set 和 Map

Set

• 集合是由一组无序且唯一的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
• ES6提供了新的数据结构Set，类似于数组，但是成员的值都是唯一的，没有重复的值
• Set本身是一个构造函数，用来生成Set数据结构的

Map

• 类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键，是一种更完善的Hash结构实现，如果你需要键值对的数据结构，Map 比 Object更合适
• 集合和字典的区别：
  — 共同点：集合，字典可以存储不重复的值
  — 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储

基本数据类型，判断 {} 或 【】会返回object

undefined

string

number

boolean

function

object

symbol 是ES6 引入了一种新的基本数据类型（原始数据类型） Symbol ，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（Boolean）、字符串 （String）、数值（Number）、对象（Object）。

每个从 Symbol() 返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符

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

除了 if (obj.a == null) 使⽤ == 之外，全部⽤ ===

扩展

falsely 变量，除此之外都是 truly 变量

!!0 === false

!!NaN === false

!!'' === false

!!null === false

!!undefined === false

!!false === false

！！ 取反之后还是false 的就是 falsely变量

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

一个是传值，一个是传址

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/%40qq.com/118

相关问答

Q1: 03、HTMLCollection与NodeList区别？04、箭头函数有什么缺点？什么时候不能使⽤箭头函数？05、for..in 与 for..of 有什么区别？06、typeOf 可以判断哪些类型？07、阅读代码，填写结果08、何时使⽤ == ？何时使⽤ === ？09、阅读代码，填写结果10. ⼿写深拷⻉函数

HTMLCollection 是 Element 集合

obj.children，只包含⼦元素

NodeList 是 Node 集合

obj.childNodes，包含⽂本、注释、空格、换⾏

DOM是⼀棵树，所有节点都是Node

04、箭头函数有什么缺点？什么时候不能使⽤箭头函数？

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 的值是多少？

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;
}

** 箭头函数的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 指向不正确

for..in 遍历得到key，可以遍历对象，不可以遍历 Set 和 Map

for..of 遍历得到value，不可以遍历对象，可以遍历 Set 和 Map

Set 和 Map

Set

• 集合是由一组无序且唯一的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
• ES6提供了新的数据结构Set，类似于数组，但是成员的值都是唯一的，没有重复的值
• Set本身是一个构造函数，用来生成Set数据结构的

Map

• 类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键，是一种更完善的Hash结构实现，如果你需要键值对的数据结构，Map 比 Object更合适
• 集合和字典的区别：
  — 共同点：集合，字典可以存储不重复的值
  — 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储

基本数据类型，判断 {} 或 【】会返回object

undefined

string

number

boolean

function

object

symbol 是ES6 引入了一种新的基本数据类型（原始数据类型） Symbol ，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（Boolean）、字符串 （String）、数值（Number）、对象（Object）。

每个从 Symbol() 返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符

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

除了 if (obj.a == null) 使⽤ == 之外，全部⽤ ===

扩展

falsely 变量，除此之外都是 truly 变量

!!0 === false

!!NaN === false

!!'' === false

!!null === false

!!undefined === false

!!false === false

！！ 取反之后还是false 的就是 falsely变量

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

一个是传值，一个是传址

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/%40qq.com/118

Q2: 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更合适
• 集合和字典的区别：
  — 共同点：集合，字典可以存储不重复的值
  — 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储

Q3: 06、typeOf 可以判断哪些类型？

基本数据类型，判断 {} 或 【】会返回object

undefined

string

number

boolean

function

object

symbol 是ES6 引入了一种新的基本数据类型（原始数据类型） Symbol ，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是： undefined 、 null 、布尔值（Boolean）、字符串 （String）、数值（Number）、对象（Object）。

每个从 Symbol() 返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符

Q4: 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

Q5: 08、何时使⽤ == ？何时使⽤ === ？

除了 if (obj.a == null) 使⽤ == 之外，全部⽤ ===

扩展

falsely 变量，除此之外都是 truly 变量

!!0 === false

!!NaN === false

!!'' === false

!!null === false

!!undefined === false

!!false === false

！！ 取反之后还是false 的就是 falsely变量

Q6: 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

一个是传值，一个是传址

Q7: 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/%40qq.com/118