JavaScript核心语法

一、什么是JavaScript

JavaScript的本质

JavaScript（简称JS） 是一种高级的、解释型的编程语言，它主要运行在浏览器中，为网页添加交互性、动态效果和逻辑处理能力。如果说HTML是网页的骨架，CSS是皮肤，那么JavaScript就是肌肉和神经系统。

JavaScript能做什么？

动态内容更新：不刷新页面就能更新内容
交互响应：响应用户点击、滚动、输入等操作
数据验证：在提交前检查表单数据
动画效果：创建复杂的动画和过渡
API通信：与服务器交换数据
状态管理：记住用户的操作和偏好

JavaScript的三大组成部分

javascript 复制代码

// 1. ECMAScript - 语言核心（语法、类型、语句等）
let x = 10;  // 变量声明

// 2. DOM（文档对象模型） - 操作HTML和CSS
document.getElementById("myDiv").style.color = "red";

// 3. BOM（浏览器对象模型） - 操作浏览器
window.alert("Hello!");  // 弹出警告框

二、核心语法

1、引入方式

在HTML页面中如何引入JavaScript代码

内部JavaScript

直接在HTML文件中使用<script>标签：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>JS示例</title>
    <!-- 在head中引入（不推荐，会阻塞页面渲染） -->
    <script>
        // 页面加载前执行的代码
        console.log("head中的脚本");
    </script>
</head>
<body>
    <!-- 在body结束前引入（推荐位置） -->
    <script>
        // 页面加载后执行的代码
        console.log("body中的脚本");
        
        // DOM操作示例
        document.addEventListener("DOMContentLoaded", function() {
            console.log("DOM加载完成");
        });
    </script>
</body>
</html>

外部JavaScript（推荐）

将JavaScript代码保存在单独的.js文件中：

html 复制代码

<!-- 在HTML中引入外部JS文件 -->
<script src="js/main.js" defer></script>
<!-- 或 -->
<script src="js/main.js" async></script>

main.js 文件内容：

javascript 复制代码

// 外部JS文件中的所有代码
function sayHello() {
    console.log("Hello from external JS!");
}

方式	优点	缺点	适用场景
内部脚本	简单直接	代码与HTML混合，难以维护	小型测试、简单功能
外部脚本	代码分离、可缓存、易维护	需要额外HTTP请求	生产环境推荐

2、变量&数据类型

1. 变量声明

JavaScript有三种变量声明方式：

javascript 复制代码

// 1. var (传统方式，存在变量提升问题)
var name = "小明";  // 函数作用域
var name = "小红";   // 可以重复声明（容易出错）

// 2. let (ES6引入，推荐使用)
let age = 25;       // 块级作用域
// let age = 30;     // 错误！不能重复声明

// 3. const (ES6引入，声明常量)
const PI = 3.14159; // 必须初始化，不能重新赋值
// PI = 3.14;       // 错误！常量不能修改

// 对象和数组使用const声明，内容可以修改
const person = { name: "小明" };
person.name = "小红";  // 允许：修改对象属性
// person = {};        // 错误：不能重新赋值

javascript 复制代码

  <script>
  // 1、声明变量,弱类型
  let a = 1;  
  a = "Hello World"
  a = true;
  alert(a); // 弹出框

  // 2、声明常量
  const PI = 3.14;
  console.log(PI); // 控制台输出
  document.write(PI); // 页面输出到body区域，不常用
  </script>

2. 数据类型

JavaScript有7种原始数据类型和1种引用类型：

原始类型（基本类型）

javascript 复制代码

  <script>
    //1. 数据类型
    alert(typeof 10); // number
    alert(typeof 1.5); // number
    
    alert(typeof true); // boolean
    alert(typeof false); // boolean

    alert(typeof "Hello"); // string
    alert(typeof 'JS'); // string
    alert(typeof `JavaScript`); // string

    alert(typeof null); // object

    let a ;
    alert(typeof a); // undefined 

// 6. Symbol 唯一标识符 (ES6)
let id = Symbol("id");
let id2 = Symbol("id");
console.log(id === id2);  // false，每个Symbol都是唯一的

// 7. BigInt 大整数 (ES2020)
let bigNumber = 9007199254740991n;
let hugeNumber = BigInt("123456789012345678901234567890");
    
    
  </script>

引用类型

javascript 复制代码

// 1. Object 对象
let person = {
    name: "小明",
    age: 25,
    isStudent: true,
    greet: function() {
        console.log("Hello!");
    }
};

// 2. Array 数组
let colors = ["red", "green", "blue"];
let mixedArray = [1, "text", true, {name: "test"}];

// 3. Function 函数
function sayHello() {
    console.log("Hello!");
}

// 4. Date 日期
let now = new Date();
let birthday = new Date("1995-12-17");

// 5. RegExp 正则表达式
let pattern = /hello/i;

3、函数

1. 函数声明与表达式

javascript 复制代码

// 1. 函数声明（会被提升）
function add(a, b) {
    return a + b;
}

// 2. 函数表达式
const multiply = function(a, b) {
    return a * b;
};

// 3. 箭头函数（ES6）
const divide = (a, b) => {
    return a / b;
};

// 简化箭头函数
const square = x => x * x;
const sayHello = () => console.log("Hello!");

2. 函数参数

javascript 复制代码

// 默认参数（ES6）
function greet(name = "访客", greeting = "你好") {
    return `${greeting}, ${name}!`;
}

// 剩余参数
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4));  // 10

// 解构参数
function printPerson({name, age}) {
    console.log(`${name}今年${age}岁`);
}
printPerson({name: "小明", age: 25});

3. 高阶函数

javascript 复制代码

// 函数作为参数
function operate(a, b, operation) {
    return operation(a, b);
}

const result = operate(10, 5, (x, y) => x * y);  // 50

// 函数作为返回值
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5));  // 10

4. 作用域与闭包

javascript 复制代码

// 作用域
let globalVar = "全局变量";  // 全局作用域

function outer() {
    let outerVar = "外部变量";  // 函数作用域
    
    function inner() {
        let innerVar = "内部变量";  // 函数作用域
        console.log(outerVar);  // 可以访问外部变量
    }
    
    // console.log(innerVar);  // 错误！不能访问内部变量
}

// 闭包：函数记住并访问其词法作用域
function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter();  // 1
counter();  // 2 - count变量被记住了

4、自定义对象

javascript 复制代码

// 创建对象
const person = {
    // 属性
    firstName: "张",
    lastName: "小明",
    age: 25,
    
    // 方法
    getFullName: function() {
        return this.firstName + this.lastName;
    },
    
    // ES6简写方法
    greet() {
        return `你好，我是${this.getFullName()}`;
    },
    
    // 计算属性名
    ["id" + Date.now()]: "unique-id",
    
    // Getter和Setter
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    
    set fullName(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
};

// 访问属性
console.log(person.firstName);  // 点表示法
console.log(person["lastName"]); // 括号表示法

// 调用方法
console.log(person.getFullName());
person.fullName = "李 小红";  // 使用setter

5、Json

1. 什么是JSON？

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，基于JavaScript对象的语法，但独立于语言。

javascript 复制代码

// JSON格式示例
{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "hobbies": ["篮球", "阅读", "编程"],
  "address": {
    "city": "北京",
    "street": "中关村大街"
  }
}

JSON与JavaScript对象的区别

复制代码

// JSON只能包含：
// - 字符串（必须使用双引号）
// - 数字
// - 布尔值
// - 数组
// - 对象
// - null

// JSON不允许：
// - 函数
// - undefined
// - Date对象
// - 单引号字符串

6、DOM操作

1. DOM是什么？

DOM（文档对象模型） 是HTML和XML文档的编程接口，它将文档表示为一个树形结构，每个节点都是一个对象，可以通过JavaScript操作。

w3school：手册

总结：JavaScript的核心要点

JavaScript是动态语言：类型灵活，运行时确定
函数是一等公民：可以作为参数、返回值
基于原型的面向对象：不同于传统的类继承
异步编程模型：事件循环、Promise、async/await
DOM操作是核心：使网页具有交互性
JSON是数据交换标准：轻量、易读、跨语言