JavaScript脚本语言的入门概念

// var（已不推荐）：函数作用域，存在变量提升
var name = "Alice";
// let（块级作用域，可重新赋值）
let age = 25;
age = 26;
// const（块级作用域，不可重新赋值）
const PI = 3.14159;
// PI = 3.14; // ❌ 报错

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

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

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

// 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) { ... }

// 声明（有提升）
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}

// 创建
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;

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, "");     // 聚合

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

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

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

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

// 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

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