JavaScript脚本语言的简单介绍

JavaScript（简称 JS）是一种轻量级、解释型、基于原型的动态脚本语言 ，最初用于网页交互，现已发展为全栈开发（前端 + 后端 + 移动 + 桌面）的核心语言。以下从基本概念、核心语法和常用操作三方面系统介绍。

---

一、基本概念

1. 运行环境

• 浏览器 ：最常见（通过 <script> 标签嵌入 HTML）；
• Node.js：服务端运行环境（2009年推出，使 JS 可写后端）；
• 其他：Electron（桌面应用）、React Native（移动 App）等。

2. 语言特性

特性	说明
动态类型	变量无需声明类型，运行时自动推断（let x = 5; x = "hello"; 合法）
弱类型	类型可自动转换（"5" + 3 → "53"，"5" - 3 → 2）
基于原型（Prototype）	对象继承通过原型链实现（非类继承）
单线程 + 事件循环	通过异步回调、Promise、async/await 处理并发
函数是一等公民	函数可赋值、传参、返回（支持高阶函数、闭包）

3. ECMAScript 标准

• JavaScript 遵循 ECMAScript（ES） 规范；
• 常见版本：ES5（2009）、ES6/ES2015（重大更新）、ES2022+（每年更新）；
• 现代开发推荐使用 ES6+ 语法。

---

二、核心语法

1. 变量声明

// var（已不推荐）：函数作用域，存在变量提升
var name = "Alice";

// let（块级作用域，可重新赋值）
let age = 25;
age = 26;

// const（块级作用域，不可重新赋值）
const PI = 3.14159;
// PI = 3.14; // ❌ 报错

✅ 最佳实践 ：优先用 const，需要重赋值时用 let，避免 var。

---

2. 数据类型（7种）

基本类型（Primitive）：

typeof 42          // "number"
typeof "hello"     // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof Symbol('id')// "symbol" (ES6)
typeof BigInt(123) // "bigint" (ES2020)

引用类型（Object）：

typeof {}          // "object"
typeof []          // "object"（数组是对象！）
typeof null        // "object"（历史 bug，实际是 null）
typeof function(){}// "function"

💡 判断数组：Array.isArray(arr)

判断 null：value === null

---

3. 运算符

• 算术：+ - * / % **（指数）
• 比较：==（宽松相等，会类型转换）、===（严格相等，推荐）
• 逻辑：&& || !
• 三元：condition ? expr1 : expr2
• 空值合并：??（a ?? b → a 为 null/undefined 时返回 b）

0 == false    // true（类型转换）
0 === false   // false（类型不同）
"" ?? "hi"    // ""（空字符串不是 null/undefined）
null ?? "hi"  // "hi"

---

4. 控制结构

// if-else
if (score > 90) {
  console.log("A");
} else if (score > 80) {
  console.log("B");
} else {
  console.log("C");
}

// switch
switch (day) {
  case 1: console.log("Mon"); break;
  default: console.log("Invalid");
}

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

// for...of（遍历可迭代对象：数组、字符串等）
for (const item of [1, 2, 3]) { ... }

// for...in（遍历对象键名）
for (const key in obj) { ... }

---

5. 函数

函数声明 vs 表达式

// 声明（有提升）
function greet(name) {
  return "Hello " + name;
}

// 表达式（无提升）
const add = function(a, b) {
  return a + b;
};

// 箭头函数（ES6，简洁，无 this 绑定）
const square = x => x * x;
const sum = (a, b) => { return a + b; };

默认参数 & 解构

function createUser({name, age = 18}) {
  return {name, age};
}
createUser({name: "Bob"}); // {name: "Bob", age: 18}

---

6. 对象（Object）

// 创建
const person = {
  name: "Alice",
  age: 30,
  // 方法
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

// 访问属性
person.name        // "Alice"
person["age"]      // 30

// 添加/修改
person.email = "a@example.com";

// 删除
delete person.age;

---

7. 数组（Array）

const fruits = ["apple", "banana"];

// 常用方法
fruits.push("orange");      // 末尾添加
fruits.pop();               // 末尾删除
fruits.unshift("grape");    // 开头添加
fruits.shift();             // 开头删除
fruits.slice(1, 3);         // 截取（不修改原数组）
fruits.splice(1, 1, "kiwi"); // 从索引1删1个，插入"kiwi"

// 高阶函数（函数式编程）
fruits.map(fruit => fruit.toUpperCase());    // 转换
fruits.filter(fruit => fruit.length > 5);   // 过滤
fruits.reduce((acc, f) => acc + f, "");     // 聚合

---

三、基本操作与实用技巧

1. DOM 操作（浏览器环境）

<button id="btn">Click</button>
<script>
  // 获取元素
  const btn = document.getElementById("btn");
  
  // 绑定事件
  btn.addEventListener("click", () => {
    alert("Button clicked!");
  });
  
  // 修改内容
  document.querySelector("h1").textContent = "New Title";
</script>

---

2. 异步编程

回调函数（Callback）

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

Promise（ES6）

fetch("/api/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

async/await（ES2017，推荐）

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

---

3. 模块化（ES6 Modules）

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }

// main.js
import { PI, add } from './math.js';
console.log(add(2, 3)); // 5

⚠️ 浏览器中需在 <script type="module"> 中使用。

---

4. 错误处理

try {
  // 可能出错的代码
  JSON.parse("{ bad json }");
} catch (error) {
  console.error("Error:", error.message);
} finally {
  console.log("Cleanup");
}

---

四、现代 JavaScript 开发要点

概念	说明
严格模式	"use strict"; → 报错更严格，避免隐式全局变量
解构赋值	const {name, age} = user;
模板字符串	Hello ${name}（支持多行）
扩展运算符	[...arr1, ...arr2], {...obj1, ...obj2}
可选链	user?.address?.city（避免 undefined 报错）
Promise.all	并发执行多个异步任务

---

五、总结：JavaScript 核心思想

"一切皆对象，函数是核心，异步是常态。"

• 灵活性：动态类型 + 原型继承 → 快速开发；
• 生态强大：NPM（全球最大包仓库）、React/Vue/Angular、Node.js；
• 全栈能力：一套语言打通前后端。

✅ 学习路径建议：

1. 掌握 ES6+ 语法（let/const、箭头函数、Promise）；
2. 理解异步与事件循环；
3. 熟悉 DOM 操作（前端）或 Express（后端）；
4. 学习现代框架（如 React）。

📌 记住：JavaScript 不是"玩具语言"，而是构建现代 Web 应用的工业级工具。