JavaScript基础知识巩固：从入门到精通

JavaScript基础知识巩固：从入门到精通

作为前端开发者，JavaScript是我们必须掌握的核心技能。无论你是准备面试还是想巩固基础知识，这篇博客都将帮助你全面理解JavaScript的核心概念。我将用通俗易懂的方式，带你梳理100道常见的JavaScript基础知识。

一、基础语法与数据类型

1. JavaScript有哪几种基本数据类型？

JavaScript有7种基本数据类型：

• number(数字)
• string(字符串)
• boolean(布尔值)
• undefined(未定义)
• null(空值)
• Symbol(符号)
• bigint(大整数)

typeof 1          // 'number'
typeof 'abc'      // 'string'
typeof true       // 'boolean'
typeof undefined  // 'undefined'
typeof null       // 'object'(历史遗留问题)
typeof Symbol()   // 'symbol'
typeof 123n       // 'bigint'

2. typeof null为什么返回’object’？

这是一个JavaScript早期设计留下的bug，一直保留到现在。记住这个特殊情况就好。

3. 如何判断一个变量是否是数组？

使用Array.isArray()方法：

Array.isArray([1, 2, 3]); // true
Array.isArray('abc');     // false

4. 和=的区别？

• ==会进行类型转换后再比较
• ===严格相等，不会进行类型转换

'5' == 5    // true(字符串'5'转换为数字5再比较)
'5' === 5   // false(类型不同)

5. undefined和null有什么区别？

• undefined：变量声明了但未赋值
• null：值为空，通常用来清空对象或手动赋空

二、变量与作用域

6. var、let和const有什么区别？

• var：函数作用域，有变量提升
• let和const：块级作用域
• const声明的变量不能被重新赋值

var a = 1;
let b = 2;
const c = 3;

7. 什么是变量提升？

使用var声明的变量和函数会被提升到作用域顶部：

console.log(a); // undefined
var a = 10;

8. JavaScript有哪些作用域？

• 全局作用域
• 函数作用域
• 块级作用域(ES6引入)

9. 什么是块级作用域？

ES6引入的let和const实现的作用域：

{
  let a = 1;
  const b = 2;
}
console.log(a); // ReferenceError

10. 什么是IIFE(立即执行函数表达式)？

一种立即执行的函数，用于创建私有作用域：

(function() {
  console.log('执行了');
})();

三、函数与执行上下文

11. 函数声明与函数表达式有什么区别？

• 函数声明有提升
• 函数表达式不会提升

// 函数声明
function foo() {}

// 函数表达式
const bar = function() {};

12. 什么是箭头函数？

箭头函数没有自己的this，它的this来自外部作用域：

const sum = (a, b) => a + b;

13. 函数的默认参数值是什么？

function greet(name = 'guest') {
  console.log('Hello, ' + name);
}
greet(); // Hello, guest

14. 什么是函数柯里化？

把多个参数的函数转化为一系列单参数函数的技术：

function add(a) {
  return function(b) {
    return a + b;
  }
}
const add5 = add(5);
console.log(add5(3)); // 8

四、原型与继承

15. 什么是原型？什么是原型链？

每个对象都有一个内部属性[[Prototype]]，可以通过__proto__访问。原型链是对象访问属性时的查找机制。

const obj = {};
console.log(obj.__proto__ === Object.prototype); // true

16. 如何实现继承？

常见方式：

• 原型链继承
• 构造函数继承
• 组合继承
• ES6 class继承

class Animal {
  speak() {
    console.log('Animal speaks');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks');
  }
}

new Dog().speak(); // Dog barks

五、数组与对象操作

17. 如何克隆一个对象？

• 浅拷贝：{ ...obj }
• 深拷贝：JSON.parse(JSON.stringify(obj))或structuredClone(obj)

18. 如何合并两个对象？

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };

19. 数组去重的方法？

const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];

六、异步编程与Promise

20. 什么是回调函数？

回调函数是作为参数传递给另一个函数的函数：

function load(callback) {
  setTimeout(() => {
    callback('完成');
  }, 1000);
}

load((res) => console.log(res));

21. 什么是Promise？

Promise是异步操作的封装，有三种状态：

• pending(进行中)
• fulfilled(已完成)
• rejected(已失败)

const p = new Promise((resolve, reject) => {
  resolve('成功');
});

22. 什么是async/await？

async函数返回Promise，await用于等待异步结果：

async function fetchData() {
  const data = await fetch('/api');
  return data;
}

七、DOM操作与事件处理

23. 如何获取DOM元素？

document.getElementById('id');
document.querySelector('.class');
document.querySelectorAll('div');

24. 如何添加事件监听？

element.addEventListener('click', function() {
  console.log('点击了');
});

25. 什么是事件委托？

将事件绑定在父级元素，通过事件冒泡捕获子元素的事件：

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了 li');
  }
});

八、浏览器与BOM

26. 什么是BOM？

BOM(Browser Object Model)是浏览器提供的API，代表对象有：

• window
• navigator
• location
• screen
• history

27. 如何获取URL参数？

const params = new URLSearchParams(window.location.search);
console.log(params.get('id'));

结语

以上只是部分基础知识的简要总结。记住，理解原理比死记硬背更重要。建议结合实际项目多加练习，做到知其然，也知其所以然。

---

推荐更多阅读内容
JavaScript中的10种排序算法：从入门到精通
JavaScript里this的奇妙表现：对象方法调用VS独立调用
JavaScript 页面刷新：从传统到现代的全面解析
使用 react-org-tree 实现卡片模式组织架构图
一次性搞懂 JavaScript 数组方法：reduce、every、some
JavaScript中的对象字段过滤：只保留特定值的字段
JSON.parse(JSON.stringify()) 与 lodash 的 cloneDeep：深度拷贝的比较与基础知识
如何在 JavaScript 中优雅地移除对象字段？