JavaScript 简介

JavaScript（简称 JS） 是一种轻量级、解释型（或即时编译）的脚本语言，最初为网页添加交互而设计。现在它不仅能运行在浏览器端，也能通过 Node.js 运行在服务器端。

JavaScript是一种"脚本语言"，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的"脚本"。 JavaScript是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多。

1. 诞生

• 1995 年由 Brendan Eich 在 Netscape 公司仅用 10 天设计出来。
• 原名 LiveScript，后借 Java 热度更名为 JavaScript，但与 Java 完全不同。

2. 标准化：ECMAScript

• 由 ECMA 国际 维护，标准名为 ECMAScript（ES）。
• ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
• 常用版本：ES5（2009）、ES6/ES2015（大更新）、ES2016~ES2024 每年新增特性。

3. 引擎

JavaScript 通常运行在浏览器里的JavaScript 引擎 里，在浏览器里引擎也不一样

• FireFox：SpiderMonkey
• Chrome：V8 后来 Ryan Dahl 将 Chrome 的 V8 引擎嵌入 C++ 程序，形成了 Node.js，使 JavaScript 得以在服务器端运行。

变量 (let)

let age = 30;
age = 31;  // 可以重新赋值

let 用于声明可变的变量，可以重新赋值。

常量 (const)

const name = "ty";
// name = "other";  // 报错：const 不能重新赋值

const 用于声明不可变的常量，一旦赋值不能修改。

建议：默认使用 const，只有需要重新赋值时才用 let。

---

数据类型

类型	示例	说明
String	"hello"	字符串
Number	42, 3.14	数字（整数和浮点数，统一为 64 位浮点）
Boolean	true / false	布尔值
Null	null	空值（typeof null 返回 "object"，历史遗留 bug）
Undefined	undefined	未定义（变量声明但未赋值）
Object	{ name: "ty" }	对象（含数组、函数等）
Symbol	Symbol("id")	唯一值（ES6）
BigInt	9007199254740991n	大整数（ES2020）

查看数据类型

使用 typeof 操作符：

const name = "ty";
console.log(typeof name);  // "string"
console.log(typeof null);  // "object"（已知 bug）

条件语句

if / else if / else

let x = 10;
if (x > 10) {
    console.log("x > 10");
}
else if (x < 10) {
    console.log("x < 10");
}
else {
    console.log("x = 10");
}

三元运算符

let y = 10;
console.log(y > 10 ? "y > 10" : "y <= 10");

switch 语句

let z = 10;
switch (z) {
    case 10:
        console.log("z = 10");
        break;
    case 20:
        console.log("z = 20");
        break;
    default:
        console.log("z = other");
        break;
}

---

循环语句

for 循环

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

while 循环

let j = 0;
while (j < 10) {
    console.log(j);
    j++;
}

字符串方法

获取长度

const s = "hello world!";
console.log(s.length);  // 空格也算一个字符

大小写转换

console.log(s.toUpperCase());  // 转大写
console.log(s.toLowerCase());  // 转小写

截取

console.log(s.substring(0, 5));   // "hello"
console.log(s.slice(0, 5));       // "hello"（支持负数）
console.log(s.charAt(0));         // "h"

分割与合并

console.log(s.split(" "));             // ["hello", "world!"]
const arr = ["a", "b", "c"];
console.log(arr.join("-"));            // "a-b-c"

查找与替换

console.log(s.includes("hello"));      // true
console.log(s.indexOf("world"));       // 6
console.log(s.replace("world", "js")); // "hello js!"

去除空白

const raw = "  hello  ";
console.log(raw.trim());        // "hello"
console.log(raw.trimStart());   // "hello  "
console.log(raw.trimEnd());     // "  hello"

---

模板字符串

使用反引号（`）包裹字符串，用 ${} 来嵌入变量或表达式：

const name = "ty";
const age = 21;
console.log(`my name is ${name} and age is ${age}`);

相比传统的字符串拼接，模板字符串更简洁、可读性更强。

数组操作

基本操作

const fruits = ["apple", "banana", "orange"];
console.log(fruits);        // 访问所有元素
console.log(fruits[0]);     // 访问第一个元素
console.log(fruits.length); // 数组长度

添加 / 删除元素

// 末尾操作
fruits.push("pear");     // 末尾添加
fruits.pop();            // 末尾删除，返回被删元素

// 开头操作
fruits.unshift("grape"); // 开头添加
fruits.shift();          // 开头删除，返回被删元素

切片与拼接

fruits.slice(0, 2);          // 截取前两个，返回新数组（不修改原数组）
fruits.splice(1, 1, "kiwi"); // 从索引1删除1个，插入"kiwi"

工具方法

console.log(Array.isArray(fruits));     // 判断是否为数组
console.log(fruits.indexOf("banana"));  // 查找索引，找不到返回 -1
console.log(fruits.includes("apple"));  // 是否包含

遍历

fruits.forEach((item, index) => {
  console.log(index, item);
});

映射与过滤

const upper = fruits.map(item => item.toUpperCase());        // 转换每个元素
const filtered = fruits.filter(item => item.length > 5);     // 筛选符合条件
const found = fruits.find(item => item.startsWith("a"));     // 查找第一个匹配

对象

对象字面量

const person = {
    name: "ty",
    age: 21,
    gender: "male",
    fruits: ["apple", "banana", "orange"],
    address: {
        city: "beijing",
        street: "chaoyang"
    }
};

访问属性

console.log(person.name);           // 点号访问
console.log(person["age"]);         // 方括号访问
console.log(person.address.city);   // 链式访问
console.log(person.fruits[0]);      // 数组元素

添加 / 删除属性

person.email = "ty@example.com";    // 添加属性
delete person.gender;               // 删除属性

对象解构

const { gender, address: { city }, fruits: [fruit1, fruit2] } = person;
console.log(gender, city, fruit1, fruit2);

常用方法

console.log(Object.keys(person));      // ["name", "age", ...]
console.log(Object.values(person));    // ["ty", 21, ...]
console.log(Object.entries(person));   // [["name","ty"], ["age",21], ...]

扩展运算符

const copy = { ...person };                // 浅拷贝
const merged = { ...person, hobby: "code" }; // 合并属性