JavaScript作为前端开发的核心技术之一，掌握其基础是每个开发者必备的技能。本文将为你提供一个JavaScript基础题库，帮助你巩固编程技巧，轻松应对面试挑战。

1. 数据类型

1.1 数据类型概述

JavaScript中的数据类型分为两大类：基本数据类型和引用数据类型。

  • 基本数据类型：number、string、boolean、undefined、null、symbol、BigInt
  • 引用数据类型：Object（包括Array、Function等）

1.2 基本数据类型

1.2.1 Number

let num = 10; // 整数
let num2 = 3.14; // 浮点数
let num3 = Number.MAX_VALUE; // 最大值
let num4 = Number.MIN_VALUE; // 最小值

1.2.2 String

let str = "Hello, world!"; // 字符串
let str2 = `这是一个模板字符串`; // 模板字符串

1.2.3 Boolean

let bool = true; // 布尔值
let bool2 = false;

1.2.4 Undefined

let u; // 未定义

1.2.5 Null

let n = null; // 空值

1.2.6 Symbol

let sym = Symbol("unique"); // 唯一标识符

1.2.7 BigInt

let bigInt = BigInt(123456789012345678901234567890); // 大整数

1.3 引用数据类型

1.3.1 Object

let obj = {}; // 空对象
let arr = []; // 空数组
let func = function() {}; // 空函数

2. 运算符

2.1 算术运算符

let a = 5;
let b = 3;
let sum = a + b; // 加法
let sub = a - b; // 减法
let mul = a * b; // 乘法
let div = a / b; // 除法
let mod = a % b; // 取模

2.2 关系运算符

let a = 5;
let b = 3;
let isGreaterThan = a > b; // 大于
let isLessThan = a < b; // 小于
let isGreaterThanOrEqualTo = a >= b; // 大于等于
let isLessThanOrEqualTo = a <= b; // 小于等于
let isStrictlyEqual = a === b; // 严格等于
let isNotEqual = a !== b; // 不等于

2.3 逻辑运算符

let a = true;
let b = false;
let and = a && b; // 与
let or = a || b; // 或
let not = !a; // 非

2.4 赋值运算符

let a = 5;
let b = 3;
a += b; // a = a + b
a -= b; // a = a - b
a *= b; // a = a * b
a /= b; // a = a / b
a %= b; // a = a % b

3. 控制结构

3.1 条件语句

let a = 5;
if (a > 3) {
  console.log("a大于3");
} else {
  console.log("a不大于3");
}

3.2 循环语句

3.2.1 for循环

for (let i = 0; i < 5; i++) {
  console.log(i);
}

3.2.2 while循环

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

3.2.3 do…while循环

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

4. 函数

4.1 函数定义

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

4.2 函数调用

sayHello("Alice"); // 输出：Hello, Alice!

4.3 递归函数

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
console.log(factorial(5)); // 输出：120

5. 数组

5.1 数组定义

let arr = [1, 2, 3, 4, 5];

5.2 数组方法

let arr = [1, 2, 3, 4, 5];
arr.push(6); // 添加元素
arr.pop(); // 删除元素
arr.shift(); // 删除第一个元素
arr.unshift(0); // 添加到第一个元素
arr.splice(1, 2); // 删除第二个和第三个元素
arr.slice(1, 3); // 截取数组
arr.sort(); // 排序
arr.reverse(); // 反转

6. 对象

6.1 对象定义

let obj = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

6.2 对象方法

let obj = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
obj.sayHello(); // 输出：Hello, my name is Alice

7. 事件处理

7.1 事件监听

document.getElementById("btn").addEventListener("click", function() {
  console.log("按钮被点击了");
});

7.2 事件冒泡

document.getElementById("parent").addEventListener("click", function() {
  console.log("父元素被点击了");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("子元素被点击了");
});

8. 异步编程

8.1 回调函数

function fetchData(callback) {
  setTimeout(() => {
    callback("数据");
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // 输出：数据
});

8.2 Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据");
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // 输出：数据
});

8.3 async/await

async function fetchData() {
  let data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据");
    }, 1000);
  });
  console.log(data); // 输出：数据
}

fetchData();

总结

通过以上题库的学习，相信你已经对JavaScript基础有了更深入的了解。在面试中，掌握这些基础知识和编程技巧，将有助于你更好地应对挑战。祝你面试顺利！