面试 JavaScript 框架八股文十问十答第三期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
1)let、const、var的区别
var
:- 具有函数作用域,而不是块级作用域。
- 可以在声明之前使用(变量提升)。
- 允许重复声明同一变量。
let
:- 具有块级作用域,不会发生变量提升。
- 不允许重复声明同一变量。
- 变量可以被修改。
const
:- 也具有块级作用域,不允许重复声明。
- 声明时必须进行初始化,而且之后不能再重新赋值(常量)。
- 对于对象类型,虽然不能重新赋值,但对象内部的属性是可以修改的。
2)const对象的属性可以修改吗
- 对于基本数据类型(如数字、字符串、布尔等):
- 不可以重新赋值,是常量。
- 对于对象类型:
- 对象本身不能被重新赋值。
- 但对象内部的属性是可以被修改的,因为
const
仅保证引用不变,而不是对象内容不变。
const myObject = { key: 'value' };
myObject.key = 'new value'; // 合法
myObject = { newKey: 'value' }; // 不合法,会导致 TypeError
3)如果new一个箭头函数的会怎么样
箭头函数不适合作为构造函数使用,因为箭头函数没有自己的 this
,它会捕获所在上下文的 this
。使用 new
关键字来创建箭头函数会导致 TypeError
,因为箭头函数没有 [[Construct]]
方法。
const MyArrowFunction = () => {
this.value = 42; // 'this' 指向外层作用域,通常是全局对象或者 undefined
};
const obj = new MyArrowFunction(); // TypeError: MyArrowFunction is not a constructor
总体而言,箭头函数主要用于保持函数内部的 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
6)扩展运算符的作用及使用场景
-
作用:
- 扩展运算符
...
用于展开可迭代对象(如数组、字符串、对象字面量)。 - 可以将数组转换为参数序列,对象转换为键值对。
- 扩展运算符
-
使用场景:
-
数组的合并和复制:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArr = [...arr1, ...arr2]; // 合并数组 const copyArr = [...arr1]; // 复制数组
-
函数参数:
function myFunction(...args) { console.log(args); // 使用剩余参数收集函数参数 } myFunction(1, 2, 3);
-
对象的合并和复制:
const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const mergedObj = { ...obj1, ...obj2 }; // 合并对象 const copyObj = { ...obj1 }; // 复制对象
-
扩展运算符在许多情况下简化了代码,并提供了一种方便的方式来操作数组和对象。
7)对对象与数组的解构的理解
-
数组解构:
const array = [1, 2, 3]; const [first, second, third] = array; console.log(first, second, third); // 1 2 3
-
对象解构:
const person = { name: 'John', age: 30 }; const { name, age } = person; console.log(name, age); // John 30
解构赋值可以快速提取数组或对象中的值,使代码更简洁。
8)如何提取高度嵌套的对象里的指定属性?
使用对象解构的嵌套形式,可以轻松提取嵌套对象的指定属性:
const nestedObject = {
outer: {
inner: {
target: 'value'
}
}
};
const { outer: { inner: { target } } } = nestedObject;
console.log(target); // value
9)对 rest 参数的理解
Rest 参数允许函数接受不定数量的参数,并将它们收集到一个数组中。
function myFunction(...args) {
console.log(args); // args 是一个包含所有传入参数的数组
}
myFunction(1, 2, 3, 4); // [1, 2, 3, 4]
Rest 参数使用 ...
来表示,可以放在参数列表的最后,收集剩余的参数。
10)ES6中模板语法与字符串处理
-
模板字符串:
const name = 'World'; const greeting = `Hello, ${name}!`; console.log(greeting); // Hello, World!
-
多行字符串:
const multiline = This is a multiline string. ; console.log(multiline);
-
字符串插值:
const value = 42; const interpolatedString = `The value is ${value}.`; console.log(interpolatedString); // The value is 42.
ES6 的模板字符串使得字符串的创建和处理更加简洁,支持插值和多行字符串,提高了可读性和灵活性
开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star!
⭐点赞⭐收藏⭐不迷路!⭐