首页 前端知识 前端面试题(js篇)

前端面试题(js篇)

2024-07-27 22:07:10 前端知识 前端哥 377 862 我要收藏

1.JS由哪三部分组成?

JavaScript 主要由以下三部分组成:

核心(ECMAScript):

ECMAScript 是 JavaScript 语言的标准和核心。它定义了语言的语法、类型、语句、关键字、保留字、操作符、对象以及它们的行为。这部分是所有 JavaScript 实现的基础,无论在什么平台上。

文档对象模型(DOM):

文档对象模型(DOM)是一个跨平台和语言独立的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。在 Web 浏览器中,JavaScript 通过 DOM 提供的 API 与 HTML 文档进行交互,例如创建、添加或修改 HTML 元素和属性。

浏览器对象模型(BOM):

浏览器对象模型(BOM)允许 JavaScript 与浏览器进行交互,而不是文档的内容。例如,通过 BOM,开发者可以控制浏览器窗口、读取和设置浏览器的导航历史、进行异步通信等。BOM 提供了很多对象,用于访问浏览器功能,但这些功能并没有标准的规范,因此在不同浏览器中的实现可能会有所不同。

2.JS有哪些内置对象?

JavaScript 提供了许多内置对象,这些对象提供了基本的语言功能和工具,使得开发者可以执行各种常见的编程任务。这里是一些最常用的 JavaScript 内置对象:

全局对象:

Global:这不是一个真正的对象,而是全局命名空间的一个伪对象,它的属性和方法可以在代码的任何地方访问。

基本对象:

Object:所有 JavaScript 对象的基类。

Function:所有 JavaScript 函数的基类。

Boolean:表示布尔值(true 或 false)的对象。

Symbol:表示独一无二的标识符的数据类型。

错误对象:

Error:基本错误对象。

TypeError、RangeError、ReferenceError 等:具体的错误类型对象。

数字和日期对象:

Number:表示数值的对象。

Math:提供数学运算功能和常数的对象。

Date:提供日期和时间功能的对象。

字符串处理对象:

String:表示和操作字符串的对象。

RegExp:表示正则表达式的对象。

集合类型对象:

Array:表示数组的对象。

Map:表示键值对集合的对象。

Set:表示值的集合的对象。

WeakMap 和 WeakSet:分别为 Map 和 Set 的弱引用版本。

结构化数据对象:

JSON:用于解析和字符串化 JSON 数据的对象。

控制抽象对象:

Promise:用于异步编程的对象。

Generator:使得函数可以暂停执行和恢复执行的对象。

反射和代理对象:

Reflect:提供了操作对象的底层 API。

3.操作数组的方法有哪些?

JavaScript 提供了丰富的数组操作方法,使得处理和操作数组变得非常方便和高效。下面是一些最常用的数组方法:

添加或删除元素

push(): 在数组的末尾添加一个或多个元素,并返回新的长度。

pop(): 移除数组的最后一个元素,并返回那个元素。

shift(): 移除数组的第一个元素,并返回那个元素。

unshift(): 在数组的开始添加一个或多个元素,并返回新的长度。

splice(): 通过删除现有元素和/或添加新元素来更改数组的内容。

迭代元素

forEach(): 对数组的每个元素执行一次提供的函数。

map(): 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

filter(): 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

reduce(): 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

reduceRight(): 与 reduce() 类似,但是从数组的末尾向前工作。

查找元素

indexOf(): 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

lastIndexOf(): 返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,则返回-1。

find(): 返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined。

findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引,否则返回 -1。

测试元素

every(): 测试一个数组内的所有元素是否都能通过某个指定函数的测试。

some(): 测试数组中的某些元素是否通过由提供的函数实现的测试。

排序和反转

sort(): 对数组的元素进行排序,并返回数组。

reverse(): 颠倒数组中元素的顺序。

其他实用方法

concat(): 用于合并两个或多个数组。

join(): 将数组中的所有元素连接成一个字符串并返回这个字符串。

slice(): 返回一个新的数组对象,这一对象是一个由开始到结束(不包括结束)选择的数组的一部分浅拷贝。

flat(): 用于将嵌套的数组“拉平”,变成一维的数组。

flatMap(): 先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

这些方法可以单独使用或者结合使用,以实现复杂的数组操作和数据处理。

4.JS对数据类的检测方式有哪些?

在 JavaScript 中,检测数据类型主要涉及到各种数据,如基本数据类型(如字符串、数字等)和对象类型(如数组、函数等)。下面是一些常用的数据类型检测方法:

typeof 操作符

typeof 是一个一元操作符,用来返回一个表示操作数数据类型的字符串。它适用于基本类型的检测,但对于对象类型,特别是区分数组和对象,typeof 可能就不太适用了。

console.log(typeof "hello");  // "string"
console.log(typeof 42);       // "number"
console.log(typeof true);     // "boolean"
console.log(typeof undefined);// "undefined"
console.log(typeof Symbol()); // "symbol"
console.log(typeof function() {}); // "function"
console.log(typeof {});            // "object"
console.log(typeof []);            // "object"
console.log(typeof null);          // "object"

instanceof 操作符

instanceof 检测构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。这对于自定义类型或内置类型对象非常有用,但不适用于基本数据类型。

console.log([] instanceof Array);           // true
console.log({} instanceof Object);          // true
console.log(function() {} instanceof Function); // true

Object.prototype.toString.call()

Object.prototype.toString.call() 是一种更可靠的类型检测方法,能够区分不同的对象类型,如数组、日期等。

console.log(Object.prototype.toString.call([]));       // "[object Array]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"
console.log(Object.prototype.toString.call({}));       // "[object Object]"

Array.isArray()

特别为数组设计的检测方法,用来确定传递的值是否是一个数组。这是检测数组的最可靠方式。

console.log(Array.isArray([]));  // true
console.log(Array.isArray({}));  // false

构造函数名称 constructor

通过检查对象的 constructor 属性来确定对象的类型。但这种方法的可靠性取决于 constructor 属性没有被改变。

console.log(([]).constructor === Array);       // true
console.log(({}).constructor === Object);      // true
console.log((function() {}).constructor === Function); // true

5.说一下闭包,闭包有什么特点?

在JavaScript中,闭包是一个函数和其被创建时的词法环境的组合。这个特性使得一个函数即使在其外部作用域被执行时,仍然能访问到它定义时的作用域中的变量。闭包是JavaScript中非常强大的一个特性,可以用于多种用途,如数据隐藏和封装、创建模块或函数库等。

示例:使用闭包来封装数据

下面是一个利用闭包来封装数据,使其不能直接从外部被访问或修改的例子:

function createBankAccount(initialBalance) {
    let balance = initialBalance;  // balance是一个通过闭包保护的私有变量

    return {
        deposit: function(amount) {
            balance += amount;  // 内部函数可以访问外部函数的balance变量
            return balance;
        },
        withdraw: function(amount) {
            if (amount <= balance) {
                balance -= amount;
                return balance;
            } else {
                return 'Insufficient funds';
            }
        },
        getBalance: function() {
            return balance;  // 提供了一个公共的方法来查看余额
        }
    };
}

const account = createBankAccount(100);
console.log(account.getBalance());  // 输出: 100
account.deposit(50);
console.log(account.getBalance());  // 输出: 150
console.log(account.withdraw(20));  // 输出: 130

在这个例子中,函数createBankAccount创建了一个具有存款、取款和查询余额功能的对象。这个对象中的方法都可以访问定义它们的函数作用域中的balance变量。这个变量对于外部代码是不可见的,只能通过这三个方法进行操作,有效地隐藏了实现细节并防止了外部直接修改余额。

闭包的典型用途

  1. 数据封装:正如上面的银行账户示例所示,闭包可以用于封装私有数据,提供操作这些数据的公共方法。
  2. 模块化代码:闭包可以用来创建模块,封装一组具有共同功能的方法,只暴露必要的API给外部使用,其余细节保持私有。
  3. 函数工厂:闭包可以用来创建设置特定参数的特定功能的函数。
  4. 记忆功能:闭包可以用来缓存数据,例如在递归计算中缓存中间结果,提高效率。

6.前端的内存泄漏怎么理解?

前端的内存泄漏指的是在Web应用程序中,由于不正确的内存管理导致内存占用持续增加,直到达到浏览器或设备内存的极限,从而影响应用程序的性能甚至导致崩溃。内存泄漏通常是由于未正确释放不再需要的内存空间而导致的。

在前端开发中,常见的导致内存泄漏的情况包括:

  1. 未释放事件监听器:如果在DOM元素上绑定了事件监听器,但是在元素被移除或销毁之前没有及时移除这些监听器,就会导致内存泄漏。因为事件监听器仍然保留了对元素的引用,即使元素被移除,它也不会被垃圾回收。

  2. 循环引用:当对象之间存在相互引用,而且这些引用形成了一个循环,即使这些对象已经不再被应用程序所需要,它们也不会被垃圾回收。这种情况下,需要手动断开循环引用,或者使用弱引用(WeakMap、WeakSet)来避免内存泄漏。

  3. 定时器和异步操作:未清除的定时器或异步操作(如Promise、事件监听器等)会阻止相关的作用域被垃圾回收,导致内存泄漏。特别是在单页应用程序(SPA)中,定时器和异步操作的数量可能会快速增加,因此需要谨慎管理它们的生命周期。

  4. 闭包:当闭包中引用了外部作用域的变量,并且这些闭包长期存在,而且外部作用域中的变量无法被释放,就会导致内存泄漏。

为了避免内存泄漏,开发人员应该注意以下几点:

  • 及时释放不再需要的引用,包括事件监听器、定时器、异步操作等。
  • 避免创建不必要的全局变量,使用局部变量和合适的作用域来限制变量的生命周期。
  • 使用工具和性能分析器来检测和解决内存泄漏问题,如Chrome开发者工具的Memory面板。
  • 注意循环引用和闭包,避免它们导致的内存泄漏。

7.事件委托是什么?

事件委托是一种常见的前端开发技术,也称为事件代理。它利用事件冒泡的机制,将事件处理程序绑定到父元素上,而不是直接绑定到子元素。当子元素触发了特定类型的事件时,事件会冒泡到父元素,父元素上绑定的事件处理程序会被调用。

事件委托的基本原理是利用了DOM事件的冒泡机制。当子元素触发一个事件时,这个事件会一级一级地向上传播,直到传播到根元素(通常是<html><body>),期间每个祖先元素都有机会捕获并处理这个事件。

通过在父元素上绑定事件处理程序,可以利用这个冒泡机制来实现事件委托。父元素可以根据触发事件的子元素来决定如何处理事件,从而减少了事件处理程序的数量,提高了性能和代码的简洁性。

事件委托的优点包括:

  1. 减少事件处理程序的数量:只需要在父元素上绑定一个事件处理程序,而不是在每个子元素上都绑定一个,可以大大减少代码量。

  2. 动态添加或移除子元素时不需要重新绑定事件:由于事件是绑定在父元素上的,所以如果动态添加或移除了子元素,无需重新绑定事件,事件处理程序仍然会生效。

  3. 节省内存和提高性能:减少了事件处理程序的数量,可以降低内存占用,并提高页面的响应速度。

下面是一个简单的示例,演示了如何使用事件委托来处理子元素的点击事件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
<style>
    ul {
        list-style-type: none;
    }
    li {
        padding: 10px;
        border: 1px solid #ccc;
        margin-bottom: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>

<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
document.getElementById('parent-list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('You clicked on ' + event.target.textContent);
    }
});
</script>

</body>
</html>

在这个示例中,点击父元素<ul>中的任何一个子元素<li>,事件都会被委托到父元素上处理。通过判断event.target的标签名,可以确定点击的是哪个子元素,并作出相应的处理。

8.基本数据类型和引用数据类型的区别?

基本数据类型(Primitive Data Types)和引用数据类型(Reference Data Types)是编程语言中常见的两种数据类型,它们之间有一些重要的区别。

基本数据类型(Primitive Data Types):

  1. 存储方式:基本数据类型的值直接存储在变量所分配的内存空间中,每个变量都有一个固定大小的内存区域来存储其值。

  2. 拷贝方式:基本数据类型的赋值是值传递的,即将原始值直接复制到新的变量中。修改一个变量的值不会影响到另一个变量。

  3. 不可变性:基本数据类型的值是不可变的,一旦赋值后,其值无法被改变。

  4. 原始数据类型:JavaScript中的基本数据类型包括:numberstringbooleannullundefinedsymbol(ES6新增)。

引用数据类型(Reference Data Types):

  1. 存储方式:引用数据类型的值存储在内存中的堆内存中,变量存储的是一个引用(内存地址),指向实际的数据。

  2. 拷贝方式:引用数据类型的赋值是引用传递的,即将原始值的引用复制到新的变量中。因此,两个变量实际上引用了同一个对象,修改一个变量的值会影响到另一个变量。

  3. 可变性:引用数据类型的值是可变的,因为变量存储的是对象的引用,可以修改对象的属性或内容。

  4. 引用数据类型:JavaScript中的引用数据类型包括:objectarrayfunction等,以及ES6中的MapSet等。

总结区别:

  • 基本数据类型的值是存储在栈内存中的,而引用数据类型的值是存储在堆内存中的。
  • 基本数据类型的赋值是复制值,而引用数据类型的赋值是复制引用。
  • 基本数据类型的值是不可变的,而引用数据类型的值是可变的。

9.说一下原型链

原型链(Prototype Chain)是JavaScript中一个重要的概念,它描述了对象之间的继承关系和原型对象的链式结构。每个对象都有一个原型(prototype),并且可以通过原型链来访问其原型对象的属性和方法。

原型链的基本原理:

  1. 每个对象都有一个原型(prototype):除了基本数据类型的对象外,JavaScript中的每个对象(包括函数)都有一个原型对象。可以通过__proto__属性来访问对象的原型。

  2. 对象之间通过原型链连接:当访问对象的属性或方法时,如果当前对象没有找到对应的属性或方法,它会沿着原型链向上查找,直到找到或者到达原型链的顶端(Object.prototype)。

  3. 原型链的顶端是Object.prototype:所有对象的原型链的顶端都指向Object.prototypeObject.prototype是JavaScript中的基础对象,包含了一些通用的方法,如toString()valueOf()等。

  4. 继承和属性访问:当访问对象的属性或方法时,如果对象本身没有该属性或方法,则会沿着原型链向上查找,直到找到或者到达原型链的顶端。如果在原型链上的某个原型对象中找到了对应的属性或方法,那么就会返回该属性或方法,否则返回undefined

代码示例:

// 创建一个对象 obj,它的原型是 Object.prototype
const obj = {};

// obj 继承了 Object.prototype 中的属性和方法
obj.toString();  // 调用 Object.prototype 上的 toString 方法

// 创建一个函数 func,它的原型是 Function.prototype
function func() {}

// func 继承了 Function.prototype 中的属性和方法
func.call();  // 调用 Function.prototype 上的 call 方法

// 所有对象的原型链的顶端都指向 Object.prototype
console.log(obj.__proto__ === Object.prototype);  // 输出: true
console.log(func.__proto__ === Function.prototype);  // 输出: true

// Object.prototype 的原型是 null,表示原型链的顶端
console.log(Object.prototype.__proto__ === null);  // 输出: true

在这个示例中,obj对象和func函数都继承了它们各自原型对象中的属性和方法,如果在对象或函数自身找不到对应的属性或方法,就会沿着原型链向上查找,直到找到或者到达原型链的顶端。

10.new操作符具体做了什么?

new 操作符用于创建一个新的对象实例,它执行了以下几个步骤:

  1. 创建一个新的空对象new 操作符首先创建一个新的空对象,这个对象将成为新创建的实例。

  2. 将新对象的原型(__proto__)链接到构造函数的原型对象new 操作符将新创建的对象的原型属性(__proto__)链接到构造函数的原型对象上。这样,新创建的对象就可以访问构造函数原型对象上的属性和方法。

  3. 将构造函数的作用域赋给新对象(绑定 this:通过 applycall 方法或者 bind 方法,将构造函数的作用域绑定到新创建的对象上,使得构造函数中的 this 关键字指向新创建的对象。

  4. 执行构造函数的代码块:此时,新对象已经创建并且 this 指向了这个新对象,然后执行构造函数中的代码块。构造函数中的属性和方法可以被添加到新对象上。

  5. 返回新对象:如果构造函数没有显式地返回一个对象,则 new 操作符会隐式地返回新创建的对象实例。如果构造函数中显式地返回了一个对象,则 new 操作符返回该对象。

代码示例:

// 定义一个构造函数 Person
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 使用 new 操作符创建一个新的对象实例
const person1 = new Person('Alice', 30);

console.log(person1.name);  // 输出: Alice
console.log(person1.age);   // 输出: 30

在这个示例中,new Person('Alice', 30) 创建了一个新的对象实例 person1new 操作符创建了一个新的空对象,并将构造函数 Person 的作用域绑定到这个新对象上,然后执行构造函数中的代码块,将属性 nameage 添加到新对象上,最后返回这个新对象。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14370.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!