当前位置:   article > 正文

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

面试 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!

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/二进制舞者/article/detail/62167
推荐阅读
相关标签
  

闽ICP备14008679号