当前位置：首页 > news >正文

【JavaScript】入门详解

news 2025/1/16 7:44:59

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)); // 输出 5

5. 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 的基础知识和用法！下期见~

查看全文

http://www.mrgr.cn/news/61300.html