JavaScript常见面试难题：征服常见陷阱，掌握核心概念

2024-01-30 01:20:58

作为一名技术专家，我将深入探讨JavaScript面试中经常遇到的常见难题，并提供独到的见解和实用的示例，帮助您征服这些陷阱并掌握核心概念。

1. 深拷贝与浅拷贝

观点： 深度和浅度拷贝是JavaScript中至关重要的概念，理解它们的区别对于避免意外行为和数据完整性至关重要。

解释：

深拷贝 创建目标对象的完全独立副本，其中所有属性和嵌套对象都完全复制。修改目标对象的任何属性或嵌套对象都不会影响原始对象。
浅拷贝 仅复制目标对象的属性值，而嵌套对象只是引用原始对象的地址。修改目标对象的属性值不会影响原始对象，但修改嵌套对象会同时影响原始对象。

示例：

const obj1 = {
  name: 'John',
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};

const obj2 = {...obj1}; // 浅拷贝

obj2.name = 'Jane'; // 只修改obj2的name属性，不影响obj1
obj2.address.street = 'Park Avenue'; // 由于address是引用，修改obj2会影响obj1

const obj3 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

obj3.name = 'Bob'; // 只修改obj3的name属性，不影响obj1
obj3.address.street = 'Oak Street'; // 由于address是独立的副本，修改obj3不会影响obj1

2. 闭包

观点： 闭包是JavaScript中强大的工具，但理解它们的行为至关重要，以避免意外的内存泄漏和错误。

解释：

闭包是函数在定义后仍保留对外部作用域的引用，即使函数已执行完并超出了作用域。这意味着闭包可以访问外部作用域的变量，即使这些变量已超出作用域。

示例：

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

在上面的示例中，内部函数返回的闭包仍保留对外部变量count的引用，即使createCounter函数已执行完。

3. 数组方法

观点： 数组方法是JavaScript中处理数组数据的强大工具，掌握这些方法至关重要，以高效地操作和转换数组。

常见问题：

Array.map() ：映射数组中的每个元素，并返回一个新数组。
Array.filter() ：过滤数组中的元素，根据给定的条件返回一个新数组。
Array.reduce() ：将数组中的元素逐个累积，返回单个值。

示例：

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(number => number % 2 === 0); // [2, 4]
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0); // 15

4. 字符串方法

观点： 字符串方法是JavaScript中处理字符串数据的强大工具，掌握这些方法至关重要，以有效地操作和转换字符串。

常见问题：

String.split() ：根据给定的分隔符将字符串拆分为数组。
String.replace() ：用给定的新字符串替换字符串中的匹配文本。
String.includes() ：检查字符串是否包含给定的子字符串。

示例：

const str = 'Hello, JavaScript!';

const parts = str.split(' '); // ['Hello,', 'JavaScript!']
const newStr = str.replace('JavaScript', 'TypeScript'); // 'Hello, TypeScript!'
const hasExclamation = str.includes('!'); // true