新文大师的藏经阁 - JavaScript基础语法完全指南

在HTML中引入JavaScript

在HTML页面中使用JavaScript主要有两种方式：

1. 内联脚本（Inline Script）

直接在HTML文件中使用<script>标签包裹JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>使用JavaScript</title>
</head>
<body>
  <h1>欢迎使用JavaScript</h1>
  
  <script>
    // 在这里编写JavaScript代码
    console.log("Hello, World!");
  </script>
</body>
</html>

2. 外部脚本（External Script）

将JavaScript代码保存在独立的.js文件中，通过<script>标签的src属性引入：

创建 script.js 文件：

// script.js
console.log("Hello, World!");

在HTML中引入：

<!DOCTYPE html>
<html>
<head>
  <title>使用JavaScript</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎使用JavaScript</h1>
</body>
</html>

注意：<script>标签通常放置在<head>或<body>部分中。外部脚本的src属性需包含正确的文件路径。

如何声明变量

JavaScript中有三种声明变量的关键字：var、let和const。

关键字	作用域	可变性	特点
`var`	函数作用域	可变	旧版语法，存在变量提升
`let`	块级作用域	可变	ES6引入，不允许重复声明
`const`	块级作用域	不可变	声明时必须赋值

变量声明示例

var x = 10;           // var声明
let y = 20;           // let声明
const PI = 3.14;      // const声明常量

命名规则

必须以字母、下划线（_）或美元符号（$）开头
可以包含字母、数字、下划线或美元符号
区分大小写
不能使用保留关键字

字符串的使用

JavaScript提供了多种获取子字符串的方法：

1. substring(startIndex, endIndex)

let str = "Hello, World!";
let subStr = str.substring(7, 12);
console.log(subStr); // 输出 "World"

2. slice(startIndex, endIndex)

let str = "Hello, World!";
let subStr = str.slice(7, 12);
console.log(subStr); // 输出 "World"

3. substr(startIndex, length)

let str = "Hello, World!";
let subStr = str.substr(7, 5);
console.log(subStr); // 输出 "World"

提示：这些方法都不会修改原始字符串，而是返回一个新的字符串。

判断语句

if…else 语句

let num = 10;

if (num > 0) {
  console.log("数字是正数");
} else if (num < 0) {
  console.log("数字是负数");
} else {
  console.log("数字是零");
}

switch 语句

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三";
    break;
  default:
    dayName = "未知";
    break;
}

console.log("今天是" + dayName);

数组

数组是一种用于存储多个值的有序数据结构，可容纳任何类型的值。

基本操作

// 创建数组
let fruits = ["apple", "banana", "orange"];

// 访问元素（索引从0开始）
console.log(fruits[0]); // "apple"

// 修改元素
fruits[2] = "grape";

// 获取长度
console.log(fruits.length); // 3

添加和删除元素

方法	说明	示例
`push()`	在末尾添加	`fruits.push("pear")`
`pop()`	删除末尾	`fruits.pop()`
`unshift()`	在开头添加	`fruits.unshift("grape")`
`shift()`	删除开头	`fruits.shift()`

遍历数组

let fruits = ["apple", "banana", "orange"];

// for循环
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// forEach方法
fruits.forEach(function(fruit) {
  console.log(fruit);
});

对象

对象是存储键值对的复合数据类型，对象的属性可以是字符串或符号，值可以是任何数据类型。

创建和访问对象

let person = {
  name: "John",
  age: 30,
  email: "[email protected]"
};

// 点号访问
console.log(person.name);        // "John"

// 方括号访问
console.log(person["age"]);      // 30

添加、修改和删除属性

person.age = 35;                   // 修改属性
person.gender = "male";            // 添加属性
delete person.email;               // 删除属性

对象方法

let person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, I'm " + this.name);
  }
};

person.sayHello(); // "Hello, I'm John"

遍历对象

for (let key in person) {
  console.log(key + ": " + person[key]);
}

常用默认方法

方法	说明
`toString()`	转换为字符串
`valueOf()`	返回原始值
`hasOwnProperty()`	检查自身属性

Map和Set

Map（映射）

键值对的集合，键可以是任意数据类型。

let map = new Map();

map.set("name", "John");
map.set("age", 30);

console.log(map.get("name"));      // "John"
console.log(map.has("age"));       // true
console.log(map.size);             // 2

map.delete("age");

Set（集合）

值的集合，每个值唯一不重复。

let set = new Set();

set.add("apple");
set.add("banana");
set.add("apple");   // 重复元素被忽略

console.log(set.has("banana"));    // true
console.log(set.size);              // 2

set.delete("apple");

函数

函数是封装可复用代码块的机制，接受输入参数并返回输出值。

定义函数

// 函数声明
function greet(name) {
  return "Hello, " + name + "!";
}

// 函数表达式
const add = function(a, b) {
  return a + b;
};

// 箭头函数（ES6）
const multiply = (a, b) => a * b;

函数调用

console.log(greet("World"));      // "Hello, World!"
console.log(add(5, 3));           // 8
console.log(multiply(4, 2));      // 8

参数默认值

function greet(name = "Guest") {
  return "Hello, " + name;
}

console.log(greet());             // "Hello, Guest"
console.log(greet("John"));       // "Hello, John"

总结

本文涵盖了JavaScript的核心基础语法：

HTML集成：内联脚本与外部脚本两种引入方式
变量声明：var、let、const的区别与使用
字符串操作：substring()、slice()、substr()方法
条件判断：if...else和switch语句
数组：创建、访问、遍历及增删改操作
对象：属性访问、方法定义、遍历技巧
数据结构：Map的键值对与Set的唯一值集合
函数：定义方式与参数处理

掌握这些基础知识，将为深入学习JavaScript高级特性打下坚实基础。