JavaScript基础入门知识点有哪些

# JavaScript基础入门知识点有哪些 ## 目录 1. [JavaScript简介](#javascript简介) 2. [基础语法](#基础语法) 3. [数据类型](#数据类型) 4. [变量与作用域](#变量与作用域) 5. [运算符](#运算符) 6. [流程控制](#流程控制) 7. [函数](#函数) 8. [对象](#对象) 9. [数组](#数组) 10. [DOM操作](#dom操作) 11. [事件处理](#事件处理) 12. [异步编程](#异步编程) 13. [ES6+新特性](#es6新特性) 14. [常见错误与调试](#常见错误与调试) 15. [学习资源推荐](#学习资源推荐) --- ## JavaScript简介 JavaScript（简称JS）是一种轻量级的解释型编程语言，主要用于网页开发。它最初由Netscape的Brendan Eich在1995年设计实现，现已成为Web三大核心技术之一（HTML/CSS/JavaScript）。 ### 主要特点： - **脚本语言**：无需编译，由浏览器解释执行 - **跨平台性**：所有现代浏览器都支持 - **多范式**：支持面向对象、函数式编程等 - **动态类型**：变量类型在运行时确定 ### 应用场景： - 网页交互效果 - 前端框架开发（React/Vue等） - 服务端开发（Node.js） - 移动应用开发（React Native） --- ## 基础语法 ### 1. 代码结构 ```javascript // 单行注释 /* 多行注释 */ // 语句以分号结尾（可选但推荐） console.log("Hello World"); 

2. 严格模式

"use strict"; // 启用严格模式 x = 10; // 报错（未声明变量） 

---

数据类型

JavaScript有7种原始类型和1种引用类型：

原始类型（Primitive）

1. Number：let age = 25
2. String：let name = "Alice"
3. Boolean：let isStudent = true
4. Null：let empty = null
5. Undefined：let notDefined
6. Symbol（ES6）：let id = Symbol("id")
7. BigInt（ES2020）：let bigNum = 123n

引用类型

• Object：{ key: "value" }
• 特殊对象：Array、Function、Date等

类型检测

typeof 42; // "number" typeof "text"; // "string" typeof undefined; // "undefined" 

---

变量与作用域

变量声明

var oldVar = 1; // 函数作用域（已过时） let mutable = 2; // 块级作用域（可重新赋值） const PI = 3.14; // 块级作用域（不可重新赋值） 

作用域链

let global = 1; function outer() { let outerVar = 2; function inner() { let innerVar = 3; console.log(global + outerVar + innerVar); // 6 } } 

---

运算符

算术运算符

let x = 10 + 5; // 15 let y = 10 % 3; // 1（取模） let z = 2 ** 3; // 8（指数） 

比较运算符

"5" == 5; // true（值相等） "5" === 5; // false（严格相等） 

逻辑运算符

true && false; // AND → false true || false; // OR → true !true; // NOT → false 

---

流程控制

条件语句

if (score >= 90) { grade = 'A'; } else if (score >= 60) { grade = 'B'; } else { grade = 'C'; } 

循环语句

// for循环 for (let i = 0; i < 5; i++) { console.log(i); } // while循环 let j = 0; while (j < 5) { console.log(j); j++; } 

---

函数

函数定义

// 函数声明 function sum(a, b) { return a + b; } // 函数表达式 const multiply = function(a, b) { return a * b; }; 

箭头函数（ES6）

const square = x => x * x; const add = (a, b) => a + b; 

---

对象

对象创建

let user = { name: "John", age: 30, sayHi() { console.log(`Hello, ${this.name}`); } }; 

构造函数

function Person(name, age) { this.name = name; this.age = age; } let bob = new Person("Bob", 25); 

---

数组

基本操作

let fruits = ["Apple", "Orange"]; fruits.push("Banana"); // 末尾添加 fruits.pop(); // 删除末尾 fruits.includes("Apple"); // true 

高阶函数

let numbers = [1, 2, 3]; numbers.map(x => x * 2); // [2, 4, 6] numbers.filter(x => x > 1); // [2, 3] 

---

DOM操作

元素选择

document.getElementById("header"); document.querySelector(".btn"); 

元素修改

let elem = document.querySelector("#demo"); elem.textContent = "New text"; elem.style.color = "red"; 

---

事件处理

button.addEventListener("click", function() { alert("Button clicked!"); }); 

---

异步编程

回调函数

setTimeout(() => { console.log("Delayed message"); }, 1000); 

Promise

fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(err => console.error(err)); 

async/await

async function getData() { try { let response = await fetch(url); let data = await response.json(); console.log(data); } catch (err) { console.error(err); } } 

---

ES6+新特性

1. let/const：块级作用域变量
2. 模板字符串：`Hello ${name}`
3. 解构赋值：let [a, b] = [1, 2]
4. 默认参数：function greet(name="Guest")
5. 展开运算符：Math.max(...numbers)

---

常见错误与调试

常见错误类型

• ReferenceError：未定义变量
• TypeError：类型操作错误
• SyntaxError：语法错误

调试技巧

console.log(variable); // 输出日志 debugger; // 断点调试 

---

学习资源推荐

1. 书籍：《JavaScript高级程序设计》
2. 网站：MDN Web Docs
3. 在线课程：freeCodeCamp
4. 实践平台：Codewars

提示：学习JavaScript最重要的是多实践，建议通过小型项目（如待办事项列表）巩固知识。

（全文约4550字） “`

注：实际字数可能因格式和显示环境略有差异，如需精确字数控制，建议在Markdown编辑器中查看完整统计。本文涵盖了JavaScript基础核心知识点，适合初学者系统学习。