面试 JavaScript 框架八股文十问十答第三期

面试 JavaScript 框架八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）let、const、var的区别

• var:
  • 具有函数作用域，而不是块级作用域。
  • 可以在声明之前使用（变量提升）。
  • 允许重复声明同一变量。
• let:
  • 具有块级作用域，不会发生变量提升。
  • 不允许重复声明同一变量。
  • 变量可以被修改。
• const:
  • 也具有块级作用域，不允许重复声明。
  • 声明时必须进行初始化，而且之后不能再重新赋值（常量）。
  • 对于对象类型，虽然不能重新赋值，但对象内部的属性是可以修改的。

2）const对象的属性可以修改吗

• 对于基本数据类型（如数字、字符串、布尔等）：
  • 不可以重新赋值，是常量。
• 对于对象类型：
  • 对象本身不能被重新赋值。
  • 但对象内部的属性是可以被修改的，因为 const 仅保证引用不变，而不是对象内容不变。

const myObject = { key: 'value' };
myObject.key = 'new value'; // 合法
myObject = { newKey: 'value' }; // 不合法，会导致 TypeError
1
2
3

3）如果new一个箭头函数的会怎么样

箭头函数不适合作为构造函数使用，因为箭头函数没有自己的 this，它会捕获所在上下文的 this。使用 new 关键字来创建箭头函数会导致 TypeError，因为箭头函数没有 [[Construct]] 方法。

const MyArrowFunction = () => {
  this.value = 42; // 'this' 指向外层作用域，通常是全局对象或者 undefined
};

const obj = new MyArrowFunction(); // TypeError: MyArrowFunction is not a constructor
1
2
3
4
5

总体而言，箭头函数主要用于保持函数内部的 this 与其定义时的上下文一致，而不适合用于创建实例。

4）箭头函数与普通函数的区别

• 语法：
  • 箭头函数使用 => 语法，而普通函数使用 function 关键字。
• this 的绑定：
  • 箭头函数没有自己的 this，它继承自外围作用域的 this，保持了定义时的 this 值。
  • 普通函数的 this 取决于调用方式，可能是全局对象、调用者对象或者新创建的对象。
• arguments 对象：
  • 箭头函数没有 arguments 对象，可以使用剩余参数 ...args 来获取参数。
  • 普通函数有 arguments 对象，可以直接使用。
• 构造函数：
  • 箭头函数不能用作构造函数，不能使用 new 关键字。
  • 普通函数可以用作构造函数，通过 new 创建实例。

5）箭头函数的this指向哪⾥？

箭头函数的 this 指向外层作用域的 this，而不是箭头函数自身的 this。这样的特性使得箭头函数能够保持定义时的上下文，不受调用方式的影响。

function regularFunction() {
  console.log(this); // this 指向调用者或全局对象
}

const arrowFunction = () => {
  console.log(this); // this 指向外层作用域的 this
};

regularFunction.call({ customThis: true }); // 调用方式影响 this
arrowFunction.call({ customThis: true });   // 箭头函数保持外层作用域的 this
1
2
3
4
5
6
7
8
9
10

6）扩展运算符的作用及使用场景

• 作用：

  • 扩展运算符 ... 用于展开可迭代对象（如数组、字符串、对象字面量）。
  • 可以将数组转换为参数序列，对象转换为键值对。

• 使用场景：

  • 数组的合并和复制：

    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const mergedArr = [...arr1, ...arr2]; // 合并数组
    const copyArr = [...arr1]; // 复制数组
    1
    2
    3
    4

  • 函数参数：

    function myFunction(...args) {
      console.log(args); // 使用剩余参数收集函数参数
    }
    myFunction(1, 2, 3);
    1
    2
    3
    4

  • 对象的合并和复制：

    const obj1 = { a: 1, b: 2 };
    const obj2 = { c: 3, d: 4 };
    const mergedObj = { ...obj1, ...obj2 }; // 合并对象
    const copyObj = { ...obj1 }; // 复制对象
    1
    2
    3
    4

扩展运算符在许多情况下简化了代码，并提供了一种方便的方式来操作数组和对象。

7）对对象与数组的解构的理解

• 数组解构：

  const array = [1, 2, 3];
  const [first, second, third] = array;
  console.log(first, second, third); // 1 2 3
  1
  2
  3

• 对象解构：

  const person = { name: 'John', age: 30 };
  const { name, age } = person;
  console.log(name, age); // John 30
  1
  2
  3

解构赋值可以快速提取数组或对象中的值，使代码更简洁。

8）如何提取高度嵌套的对象里的指定属性？

使用对象解构的嵌套形式，可以轻松提取嵌套对象的指定属性：

const nestedObject = {
  outer: {
    inner: {
      target: 'value'
    }
  }
};

const { outer: { inner: { target } } } = nestedObject;
console.log(target); // value
1
2
3
4
5
6
7
8
9
10

9）对 rest 参数的理解

Rest 参数允许函数接受不定数量的参数，并将它们收集到一个数组中。

function myFunction(...args) {
  console.log(args); // args 是一个包含所有传入参数的数组
}

myFunction(1, 2, 3, 4); // [1, 2, 3, 4]
1
2
3
4
5

Rest 参数使用 ... 来表示，可以放在参数列表的最后，收集剩余的参数。

10）ES6中模板语法与字符串处理

• 模板字符串：

  const name = 'World';
  const greeting = `Hello, ${name}!`;
  console.log(greeting); // Hello, World!
  1
  2
  3

• 多行字符串：

  const multiline = 
    This is a
    multiline
    string.
  ;
  console.log(multiline);
  1
  2
  3
  4
  5
  6

• 字符串插值：

  const value = 42;
  const interpolatedString = `The value is ${value}.`;
  console.log(interpolatedString); // The value is 42.
  1
  2
  3

ES6 的模板字符串使得字符串的创建和处理更加简洁，支持插值和多行字符串，提高了可读性和灵活性

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐