JavaScript 作为 Web 开发的基石，赋予了网页动态交互的能力。本文将深入浅出地讲解 JavaScript 的核心概念，并结合最新用法进行详细解释和示例。
1. JavaScript 简介
JavaScript 是一种解释型脚本语言，也称弱类型语言，最初设计用于在网页上添加交互性。如今，它已成为一门功能强大的多用途语言，可用于前端开发（例如使用 React、Angular 和 Vue 等框架）、后端开发（Node.js）、移动应用开发（React Native）、桌面应用开发（Electron）甚至游戏开发。
2. 引入 JavaScript
在 HTML 中引入 JavaScript 代码主要有两种方式：
-
内部脚本: 将 JavaScript 代码嵌入 HTML 文档内部的 <script> 标签中。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript example</title>
<script>
console.log("Hello from inline JavaScript!"); // 直接在 HTML 中编写 JavaScript
</script>
</head>
<body>
</body>
</html>-
外部脚本: 将 JavaScript 代码保存在独立的 .js 文件中，然后在 HTML 中使用 <script> 标签的 src 属性引入。推荐这种方式，因为它可以提高代码的可维护性和复用性。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript example</title>
<script src="script.js" defer></script> </head> <body>
</body>
</html>script.js 文件内容：
console.log("Hello JavaScript");注意: 使用 defer 属性可以确保脚本在 HTML 解析完成后再执行，避免阻塞页面渲染。
3. 基本语法
掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
-
大括号表示代码块
-
注释：
-
单行注释：// 注释内容
-
多行注释：/* 注释内容 */
-
我们需要借助js中3种输出语句，来演示书写语法
| api | 描述 |
|---|---|
| window.alert() | 警告框 |
| document.write() | 在HTML 输出内容 |
| console.log() | 写入浏览器控制台 |
编写3种输出语句的代码，并且添加注释，具体代码如下；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基本语法</title>
</head>
<body>
</body>
<script>
/* alert("JS"); */
//方式一: 弹出警告框
window.alert("hello js");
</script>
</html>浏览器打开如图所示效果：
-
语句: JavaScript 代码由一系列语句组成，通常以分号 ; 结尾（尽管不是强制性的，但强烈建议使用以提高代码可读性和避免潜在错误）。
-
变量: 使用 let 或 const 声明变量。let 用于声明可以重新赋值的变量，const 用于声明常量，其值一旦赋值就不能更改。避免使用 var，因为它具有函数作用域，容易造成混淆。
| 关键字 | 解释 |
|---|---|
| var | 早期ECMAScript5中用于变量声明的关键字 |
| let | ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效 |
| const | 声明常量的，常量一旦声明，不能修改 |
let age = 30; // 使用 let 声明变量
age = 31; // 可以重新赋值
const PI = 3.14159; // 使用 const 声明常量
// PI = 3.14; // 这会报错，因为不能重新赋值给 const-
数据类型: JavaScript 拥有多种数据类型：
| 数据类型 | 描述 |
|---|---|
| number | 数字（整数、小数、NaN(Not a Number)） |
| string | 字符串，单双引皆可 |
| boolean | 布尔。true，false |
| null | 对象为空 |
| undefined | 当声明的变量未初始化时，该变量的默认值是 undefined |
-
原始数据类型:
-
bigint: 任意精度的整数 (ES2020 新增)
-
symbol: 唯一的，不可变的值 (ES6 新增)
-
undefined: 表示未定义的值
-
null: 表示空值
-
boolean: 布尔值 (true 或 false)
-
string: 字符串 (例如 "Hello")
-
number: 数字 (例如 10, 3.14, Infinity, NaN)
-
对象类型:
-
object: 对象，包含键值对
-
array: 数组，一种特殊的对象，用于存储有序的数据集合
-
function: 函数，一种可调用的对象
-
let name = "Alice"; // string
let count = 10; // number
let isActive = true; // boolean
let user = null; // null
let city; // undefined (默认值)-
运算符: JavaScript 支持常见的算术、比较、逻辑、赋值、位运算符等。
let x = 10;
let y = 5;
let sum = x + y; // 加法
let isEqual = x === y; // 严格相等比较 (值和类型都相等)
let isNotEqual = x !== y; // 严格不相等比较
let logicalAnd = x > 5 && y < 10; // 逻辑与4. 函数
函数是可重复使用的代码块。可以使用函数声明或函数表达式定义函数。箭头函数是 ES6 引入的更简洁的函数定义方式。
-
函数声明:
function greet(name) {
console.log(`Hello, ${name}!`); // 使用模板字面量
}
greet("Bob");-
函数表达式:
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
greet("Alice");-
箭头函数:
const greet = (name) => console.log(`Hello, ${name}!`);
greet("Charlie");
const add = (x, y) => x + y;
console.log(add(2, 3)); // 输出 55. JavaScript 对象详解
-
数组 (Array):
const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 访问数组元素，输出 "apple"
fruits.push("grape"); // 添加元素到数组末尾
fruits.unshift("mango"); // 添加元素到数组开头
fruits.pop(); // 删除最后一个元素
fruits.shift();// 删除第一个元素
console.log(fruits.length); // 获取数组长度
// 迭代数组
fruits.forEach((fruit) => console.log(fruit));
// 数组映射
const fruitLengths = fruits.map((fruit) => fruit.length);
console.log(fruitLengths);
// 数组过滤
const shortFruits = fruits.filter((fruit) => fruit.length < 6);
console.log(shortFruits);-
字符串 (String):
let str = "Hello World";
console.log(str.length); // 获取字符串长度
console.log(str.toUpperCase()); // 转换为大写
console.log(str.toLowerCase()); // 转换为小写
console.log(str.indexOf("World")); // 查找子字符串的位置
console.log(str.slice(0, 5)); // 提取子字符串 "Hello"
console.log(str.includes("World")); // 检查是否包含子字符串，返回 true
// 模板字面量 (ES6)
let name = "John";
let message = `Hello, ${name}!`; // 使用反引号 `` 和 ${}
console.log(message); // 输出 "Hello, John!"-
JSON (JavaScript Object Notation): 一种轻量级的数据交换格式。
let person = {
name: "John", // 属性名可以不用引号
age: 30,
city: "New York",
greet: function() { // 方法
console.log(`Hello, my name is ${this.name}.`);
}
};
console.log(person.name); // 访问属性
person.greet(); // 调用方法
let jsonString = '{"name": "Alice", "age": 25}'; // JSON 字符串需要用双引号
let parsedJson = JSON.parse(jsonString); // 将 JSON 字符串解析为 JavaScript 对象
console.log(parsedJson.name); // 输出 "Alice"
console.log(JSON.stringify(person)); // 将 JavaScript 对象转换为 JSON 字符串希望这篇更详细的博客能帮助你更好地理解 JavaScript 的基础知识和用法！下期见~
