[面试常见]Javascript基础知识

#1024程序员节|征文#

• Object.assign 和对象扩展运算符有什么区别?是深拷贝还是浅拷贝?

都进行浅拷贝，只赋值对象的第一层属性，而不会递归复制整个对象结构

**const mergedObj = Object.assign({},obj1,obj2)

• JavaScript 中 Map 和 Object 的区别是什么?

特性	Map	Object
构造方式	const map = new Map(); 或 const map = new Map([['key', 'value']]);	const obj = {}; 或 const obj = new Object(); 或 const obj = Object.create({});
键的类型	可以是任意类型，包括对象、数组、函数等，不会进行数据类型转换	必须是string或Symbol，如果非String类型，会进行数据类型转换
键的顺序	有序，按照插入的顺序返回	无序，不会按照添加顺序返回
键值对个数	直接通过size属性访问	只能手动计算，通过Object.keys()方法或for...in循环统计
键值对的访问	使用set(key, value)添加或修改，使用get(key)访问	使用点（.）或中括号（[]）的形式添加、修改或访问
判断键是否存在	使用has(key)方法	使用'key' in obj语法
删除键值对	使用delete(key)方法，或使用clear()方法清空所有键值对	使用delete obj.key语法删除
迭代器	keys()、values()、entries()方法返回的值都具有iterator特性，可以直接使用for...of进行遍历	本身不具有iterator特性，默认情况下不能使用for...of进行遍历，需要手动获取键后再迭代
JSON序列化	不支持直接进行JSON序列化，但可以使用Array.from(map)转换为二维数组后再进行序列化	支持JSON.stringify()和JSON.parse()操作
应用场景	适用于需要保持键值对插入顺序，或键为复杂数据类型（如对象、数组等）的场景	是JavaScript中最常用的引用类型数据，适用于存储键值对的集合

• JavaScript 中判断数据类型的方式有哪些?

typeof、instanceOf、Object.prototype.toString.call()、Array.isArray()、typeof&instanceof

• JavaScript 有哪些内置对象?

• JavaScript 中常用的正则表达式有哪些?

正则表达式-CSDN博客

匹配文本、验证输入、替换文本【不了解】Regex101

• 说说你对 JSON 的理解?

轻量级数据交换格式，先前后端通讯数据传递常用，配置文件，与JS对象表示相似

• Javascript 脚本延迟加载的方式有哪些?

• async属性:不堵塞HTML解析，多个执行顺序不确定

• defer属性：按照顺序执行，HTML解析完成后才执行，使用操作DOM的脚本

• 动态创建脚本元素

• 使用模块化加载工具

原生页面引入Webpack打包JS-CSDN博客

前端模块化CommonJS、AMD、CMD、ES6_ 模块化区别-CSDN博客

• JavaScript 脚本异步加载如何实现?各有什么区别?

• 什么是 JavaScript 的类数组对象?如何转化为数组?

有类似数组的特性，但并不是数组的对象，通常具备length属性和按索引存储的元素（argumments对象、DOM方法返回的集合NodeList)

• Array.prototype.slice.call(arrayLike)[slice返回原数组的一部分浅拷贝]
• Array.from(arrayLike)
• 扩展运算符[...arrayLike]

• Javascript 的数组有哪些原生方法?

Array数组常用方法汇总_array 方法-CSDN博客

Javascript中Object、Array、String_objectarray-CSDN博客

1.数组和字符串的转换方法：toString()、join()

2.push/pop、unshift/shift

3.数组连接方法contact

4.forEach、map

5.find、findIndex,some\every，flat、flatMap

• 为什么 JavaScript 函数的 arguments 参数是类数组而不是数组?如何遍历类数组?

Javascript剩余参数、arguments对象和柯里化函数-CSDN博客

**借用函数**，还可应用与继承

• 什么是 DOM 和 BOM?

DOM文档对象模型：HTML/XML->DOM述，将网页内容转换为JS可操作对象

BOM浏览器对象模型：浏览器提供的用于操作浏览器的接口

DOM（Document Object Model，文档对象模型）与BOM（Browser Object Model，浏览器对象模型）都是用于操作浏览器窗口和文档的对象，但它们之间存在明显的区别。以下是对两者的详细解释及对比表格：

DOM（文档对象模型）

1. 定义：DOM是一种编程接口，它将HTML或XML文档解析为一个由对象构成的模型，每个对象都有自己的属性和方法，允许JavaScript对文档进行动态的更改和交互。
2. 结构：DOM的结构是一个树状结构，文档中的元素被表示为节点，并按照树状结构进行组织。
3. 交互方式：DOM通过对象之间的嵌套和引用进行交互。例如，document.getElementById()可以获取指定ID的元素对象，然后通过该对象的方法和属性对元素进行操作。
4. 应用范围：DOM主要用于文档内容的操作和交互，例如修改元素内容、添加/删除节点、获取/设置属性等。
5. 发展趋势：DOM的发展相对活跃，随着Web技术的发展和标准的更新，DOM的功能也不断扩展和完善。

BOM（浏览器对象模型）

1. 定义：BOM提供了独立于任何特定文档的对象，包括浏览器窗口、框架、历史记录、位置、导航器、文档、脚本等。它允许JavaScript与浏览器窗口及其组件进行交互，例如打开/关闭窗口、移动窗口、改变窗口大小等。
2. 结构：BOM的结构主要是以浏览器窗口为中心，包括一些与浏览器窗口相关的对象，如窗口大小、滚动条、导航器等。它没有固定的结构，各个浏览器可能会有一些差异。
3. 交互方式：BOM主要通过Window对象与JavaScript进行交互。Window对象提供了许多全局函数和变量，用于访问浏览器窗口和与浏览器交互。例如，window.open()用于打开一个新的浏览器窗口，window.location用于获取当前窗口的URL等。
4. 应用范围：BOM主要用于浏览器窗口和浏览器的交互，例如窗口大小、滚动条、导航器等。它不依赖于任何特定文档，因此可以在任何网页中使用。
5. 发展趋势：BOM的发展相对稳定，主要集中在一些浏览器特性和Web API的实现上，例如WebSocket、Geolocation等。

DOM与BOM对比表格

	DOM（文档对象模型）	BOM（浏览器对象模型）
定义	一种编程接口，将HTML或XML文档解析为对象模型	提供独立于任何特定文档的对象，用于与浏览器交互
结构	树状结构，元素被表示为节点	以浏览器窗口为中心，无固定结构
交互方式	通过对象之间的嵌套和引用进行交互	主要通过Window对象与JavaScript交互
应用范围	文档内容的操作和交互	浏览器窗口和浏览器的交互
发展趋势	发展相对活跃，功能不断扩展和完善	发展相对稳定，主要集中在浏览器特性和Web API的实现上

综上所述，DOM和BOM是两个不同的概念，分别用于操作文档内容和浏览器窗口。在实际开发中，它们通常会结合使用，以实现更丰富的Web应用功能。

• escape、encodeURl、encodeURlcomponent的区别是什么?

• 什么是 AJAX?如何实现一个 AJAX 请求?

• 常见的 DOM 操作有哪些?

• use strict 是什么意思?使用它有什么区别?

严格模式，主要是捕获一些编程错误

• 必须声明再使用
• 禁止使用with语句[执行代码]
• 创建eval()作用域[字符串->JS代码]
• 禁止使用this指向全局对象
• 参数名不能重名
• 禁止设置只读属性
• 禁止删除不可删除的属性
• 禁止使用八进制数字语法

let obj = {  a: 1,  b: 2,  c: 3  
};  
-----------------------------------  
with (obj) {  console.log(a + b + c); // 输出: 6  
}let code = "2 + 2";  
let result = eval(code);  
console.log(result); // 输出: 4

• JavaScript 如何判断一个对象是否属于某个类?

instanceof:构造函数的prototype属性是否出现在对象的原型链上

constructor

        a.constructor===A()

Object.prototype.isPrototypeOf (原型链上)

        Dog.prototype.isPrototyprOf(dog)

        Animal.prototype.isPrototypeOf(dog)

Object.getPrototypeOf  返回对象的原型 

        Object.getPrototypeOf(dog)===Dog.prototype

• ajax、 axios、fetch 的区别是什么?

• JavaScript 数组的遍历方法有哪些?

for/forEach/map/filter/reduce/for in

• JavaScript 的 forEach 和 map 方法有什么区别?

• mouseover 和 mouseenter 事件的区别是什么?

mouseover会冒泡、mouseenter不会

一、事件冒泡定义

事件冒泡是指在浏览器中，当一个元素上发生某个事件时（如点击、鼠标移动等），这个事件会按照从内到外的顺序逐级传递给父元素，直到传递到文档根元素（如document对象或window对象）。这种传播的过程和气泡在水中冒升的过程类似，因此被称为事件冒泡。

二、工作机制

1. 事件触发：当一个元素上的事件被触发时，该事件首先在该元素上进行处理。
2. 逐级传递：如果事件没有被在该元素上阻止，它会继续向上冒泡，依次触发父元素的相同类型的事件处理程序。
3. 传播到根元素：这个过程会一直持续，直到事件到达文档根节点为止。

三、应用场景

1. 简化代码：通过事件冒泡，可以将事件监听器绑定到父元素上，而不需要为每个子元素分别绑定事件监听器。这样可以大大减少代码量，并且便于维护和扩展。
2. 事件委托：事件委托是利用事件冒泡机制，将事件处理程序绑定在父元素上，以代理处理子元素的事件。这样可以减少事件处理程序的数量，提高性能，并且能够动态处理新增的子元素，使得代码更加灵活和易于维护。

四、阻止事件冒泡

在某些情况下，可能不希望事件冒泡到父元素。这时可以使用stopPropagation()方法阻止事件继续冒泡。调用该方法后，事件将不会再传递给父元素。

 

• JavaScript 中 substring 和 substr 函数的区别是什么?

• JavaScript 数组的 map 和 forEach 函数中能否通过 break 等语法结束循环?

• JavaScript 中如何合并对象?

Object.assign()、扩展符{...,...}

• JavaScript 如何判断一个对象是不是空对象?

1.obj&&typeof obj==="object"&&Object.keys(obj).length===0

2.for in + Object.hasown(obj,pro)

3.JSON.stringify(obj)==='{}'

4.Object.getOwnPropertyNames(obj).length===0

• JavaScript 的 splice 和 slice 函数会改变原数组吗?

• JavaScript 中怎么删除数组最后一个元素?

• pop()
• splice(-1,1)从尾开始移除一个元素
• slice(0,-1)从头到倒数第一个
• 使用数组长度 arr.length=arr.length-1

• 如何判断网页元素是否到达可视区域?

判断网页元素是否到达可视区域是一个常见的需求，尤其在实现懒加载、无限滚动或者触发动画等场景中非常有用。有以下几种几种

Intersection Observer API

const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {console.log('元素进入可视区域');// 在这里执行你的逻辑}});
});const target = document.querySelector('#your-element');
observer.observe(target);

 getBoundingClientRect

function isElementInViewport(el) {const rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}// 使用
const element = document.querySelector('#your-element');
if (isElementInViewport(element)) {console.log('元素在可视区域内');
}

Element.checkVisibility() 兼容性

• JavaScript 操作数组元素的方法有哪些?

添加

修改

删除

查找

遍历

筛选

变换

• JavaScript 中 for...in 和 for..of 的区别是什么?

for...in(遍历对象的可枚举属性[包括原型上]、返回属性名)

for...of (遍历可迭代对象(数组、Map、Set和字符串等）、返回每次迭代值）

在使用这两种循环时，我还注意到一些其他的重要区别:

• 遍历顺序:for.in 不保证遍历顺序，而 for..of会按照迭代器定义的顺序进行遍历。
• 性能:通常来说，for..of的性能比 for..in 更好，特别是在遍历数组时。所以遍历优先选 for.of
• 继承属性: for...in 会遍历对象的原型链，而 for...of 不会。
• 使用场景:for...in 更适合用于遍历对象的属性，而 for..of 更适合用于遍历数组或其他可迭代对象的值。

// for...in 示例
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {console.log(key); // 输出: "a", "b", "c"
}// for...of 示例
const arr = [1, 2, 3];
for (const value of arr) {console.log(value); // 输出: 1, 2, 3
}

• Javascript中如何使用for...of遍历对象

• const对象的属性可以修改吗？