javascript 面试题

📌 相关文章

📜 javascript 面试题 - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:46.579000 🧑 作者: Mango

本篇文章整理了一些常见的 JavaScript 面试题，供程序员参考和学习。

1. 数据类型

1.1 常见的 JavaScript 数据类型有哪些？

JavaScript 中常见的数据类型有：

基本数据类型：number、string、boolean、null、undefined、Symbol。
引用数据类型：object、array、function、date、regexp 等。

1.2 如何判断一个变量的类型？

可以通过 typeof 操作符判断一个变量的类型：

console.log(typeof 123); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"

2. 变量声明

2.1 如何声明一个全局变量？

可以在全局作用域中使用 var、let 或 const 关键字声明一个全局变量。在浏览器环境中，全局变量会绑定到 window 对象上。

// 使用 var 关键字声明全局变量
var name = "John";
console.log(window.name); // "John"

// 使用 let 或 const 声明全局变量
let age = 25;
console.log(window.age); // undefined

2.2 如何声明一个常量？

可以使用 const 关键字声明一个常量。常量一旦被赋值，其值就不能再次被修改。

const PI = 3.14;
PI = 3; // 报错：Assignment to constant variable.

3. 函数

3.1 如何定义一个函数？

可以使用 function 关键字定义一个函数。

function add(x, y) {
  return x + y;
}

3.2 如何调用一个函数？

可以使用函数名和圆括号调用一个函数。

add(1, 2); // 3

3.3 函数有哪些参数传递方式？

函数可以通过以下方式接收参数：

位置参数：按照定义时的顺序传递参数。
默认参数：为参数定义默认值。
剩余参数：将剩余的参数组成数组。
命名参数：根据参数名来传递参数。

3.4 函数如何返回多个值？

函数可以通过返回一个对象、数组或 ES6 中的解构语法来返回多个值。

function foo() {
  return [1, 2, 3];
}

const [x, y, z] = foo();
console.log(x, y, z); // 1 2 3

4. this 指针

4.1 this 指针是什么？

在函数中，this 指针代表当前函数执行时的上下文对象。它的值取决于函数的调用方式。

4.2 this 指针有哪些应用场景？

this 指针可以应用于以下场景：

对象方法中：代表调用方法的对象。
构造函数中：代表 new 关键字创建出来的实例对象。
事件处理函数中：代表触发事件的 DOM 元素。
函数中：如果函数通过 call 或 apply 被调用，可以指定 this 指针的值。

4.3 如何改变 this 指针的值？

可以使用 call、apply 或 bind 方法来改变函数中 this 指针的值。

const obj = { name: "John" };

function foo() {
  console.log(this.name);
}

foo.call(obj); // "John"
foo.apply(obj); // "John"

const bar = foo.bind(obj);
bar(); // "John"

5. 作用域

5.1 JavaScript 有哪些作用域？

JavaScript 中有两种作用域：

全局作用域：定义在最外层的变量、函数等都属于全局作用域，它们可以被文件中任何部分访问。
函数作用域：定义在函数内部的变量、函数等都属于函数作用域，它们只能被自己和自己的子函数访问。

5.2 变量提升是什么？

变量提升指的是在代码执行前，JavaScript 引擎会将变量和函数声明在作用域的最前面。这意味着变量可以在声明前使用，但值为 undefined。

console.log(name); // undefined
var name = "John";

5.3 什么是闭包？

闭包是指函数能够访问定义在函数外部的变量。JavaScript 中，闭包是通过函数作用域和词法作用域实现的。

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter1 = makeCounter();
counter1(); // 1
counter1(); // 2

6. 事件

6.1 JavaScript 中如何处理事件？

JavaScript 中，可以通过给 DOM 元素添加事件监听器的方式处理事件。

const btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
  console.log("clicked");
});

6.2 事件冒泡和事件捕获有什么区别？

事件冒泡和事件捕获都是事件的传播方式，它们的区别在于传播的方向不同。

事件冒泡：事件从触发元素向上冒泡，直到传播到文档根节点。
事件捕获：事件从文档根节点向下捕获，直到传播到触发元素。

在事件监听器中，可以通过第三个参数来指定事件传播的方式，如：

btn.addEventListener("click", function() {
  console.log("clicked");
}, true); // 捕获方式
btn.addEventListener("click", function() {
  console.log("clicked");
}, false); // 冒泡方式

7. 异步编程

7.1 什么是异步编程？

异步编程是指不同于传统的同步编程方式，在代码执行时可以同时执行多个操作的编程方式。异步编程可以提高代码的性能和响应速度。

7.2 JavaScript 中有哪些异步编程方式？

JavaScript 中有以下几种异步编程方式：

回调函数
Promise 对象
async/await

8. 原型与原型链

8.1 什么是原型？

在 JavaScript 中，每个对象都有一个原型对象。原型对象是一个普通的 JavaScript 对象，它包含着该对象的方法和属性。当对象访问一个不存在的属性时，JavaScript 引擎会自动查找该对象的原型对象是否存在该属性。

8.2 什么是原型链？

如果对象的原型对象还存在原型对象，那么就会形成一个原型链。原型链是由多个对象的原型对象组成的链状结构。当对象需要访问一个属性时，JavaScript 引擎会在该对象的自身属性和原型链中查找该属性。

8.3 如何继承父类的属性和方法？

可以通过原型继承来继承父类的属性和方法。在子类的构造函数中，需要通过调用父类的构造函数来初始化自身属性。

function Parent() {
  this.name = "John";
}

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

function Child() {
  Parent.call(this); // 调用父类的构造函数
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child();
child.sayHello(); // "Hello, John"

9. 类与继承

9.1 JavaScript 中有哪些模拟类和继承的方式？

JavaScript 中可以通过以下方式来模拟类和继承：

构造函数和原型链
类和继承（ES6）

9.2 如何使用 ES6 的 class 声明类？

可以使用 ES6 的 class 关键字声明一个类。类中可以定义构造函数和成员方法，也可以继承其他类。

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log("My name is " + this.name);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Buddy");
dog.sayName(); // "My name is Buddy"
dog.bark(); // "Woof!"

10. ES6 新特性

10.1 ES6 中有哪些新特性？

ES6 中有以下一些新特性：

let 和 const 关键字
模板字符串
解构语法
箭头函数
默认参数
剩余参数
对象字面量简写
导入和导出模块
类和继承
Promise 对象
async/await

以上就是本篇文章整理的 JavaScript 面试题。这些问题涵盖了 JavaScript 的许多方面，希望对程序员们的学习和工作有所帮助。

JavaScript 面试题

目录