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基础核心知识点，适合初学者系统学习。