JavaScript脚本语言的入门概念
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、基本概念</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">1.运行环境</a></li><li><a href="#_lab2_0_1">2.语言特性</a></li><li><a href="#_lab2_0_2">3.ECMAScript 标准</a></li></ul><li><a href="#_label1">二、核心语法</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_3">1.变量声明</a></li><li><a href="#_lab2_1_4">2.数据类型（7种）</a></li><ul class="third_class_ul"><li><a href="#_label3_1_4_0">基本类型（Primitive）：</a></li><li><a href="#_label3_1_4_1">引用类型（Object）：</a></li></ul><li><a href="#_lab2_1_5">3.运算符</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_1_6">4.控制结构</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_1_7">5.函数</a></li><ul class="third_class_ul"><li><a href="#_label3_1_7_2">函数声明 vs 表达式</a></li><li><a href="#_label3_1_7_3">默认参数 & 解构</a></li></ul><li><a href="#_lab2_1_8">6.对象（Object）</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_1_9">7.数组（Array）</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label2">三、基本操作与实用技巧</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_10">1.DOM 操作（浏览器环境）</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_2_11">2.异步编程</a></li><ul class="third_class_ul"><li><a href="#_label3_2_11_4">回调函数（Callback）</a></li><li><a href="#_label3_2_11_5">Promise（ES6）</a></li><li><a href="#_label3_2_11_6">async/await（ES2017，推荐）</a></li></ul><li><a href="#_lab2_2_12">3.模块化（ES6 Modules）</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_2_13">4.错误处理</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label3">四、现代 JavaScript 开发要点</a></li><ul class="second_class_ul"></ul><li><a href="#_label4">五、总结：JavaScript 核心思想</a></li><ul class="second_class_ul"></ul></ul></div><p>JavaScript（简称 JS）是一种<strong>轻量级、解释型、基于原型的动态脚本语言</strong>，最初用于网页交互，现已发展为全栈开发（前端 + 后端 + 移动 + 桌面）的核心语言。以下从<strong>基本概念、核心语法和常用操作</strong>三方面系统介绍。</p><p class="maodian"><a name="_label0"></a></p><h2>一、基本概念</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>1.运行环境</h3>
<ul><li><strong>浏览器</strong>：最常见（通过 <code><script></code> 标签嵌入 HTML）；</li><li><strong>Node.js</strong>：服务端运行环境（2009年推出，使 JS 可写后端）；</li><li><strong>其他</strong>：Electron（桌面应用）、React Native（移动 App）等。</li></ul>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>2.语言特性</h3>
<table><thead><tr><th>特性</th><th>说明</th></tr></thead><tbody><tr><td><strong>动态类型</strong></td><td>变量无需声明类型，运行时自动推断（<code>let x = 5; x = "hello";</code> 合法）</td></tr><tr><td><strong>弱类型</strong></td><td>类型可自动转换（<code>"5" + 3 → "53"</code>，<code>"5" - 3 → 2</code>）</td></tr><tr><td><strong>基于原型（Prototype）</strong></td><td>对象继承通过原型链实现（非类继承）</td></tr><tr><td><strong>单线程 + 事件循环</strong></td><td>通过异步回调、Promise、async/await 处理并发</td></tr><tr><td><strong>函数是一等公民</strong></td><td>函数可赋值、传参、返回（支持高阶函数、闭包）</td></tr></tbody></table>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>3.ECMAScript 标准</h3>
<ul><li>JavaScript 遵循 <strong>ECMAScript（ES）</strong> 规范；</li><li>常见版本：ES5（2009）、ES6/ES2015（重大更新）、ES2022+（每年更新）；</li><li>现代开发推荐使用 <strong>ES6+ 语法</strong>。</li></ul>
<p class="maodian"><a name="_label1"></a></p><h2>二、核心语法</h2>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>1.变量声明</h3>
<div class="jb51code"><pre class="brush:js;">// var（已不推荐）：函数作用域，存在变量提升
var name = "Alice";
// let（块级作用域，可重新赋值）
let age = 25;
age = 26;
// const（块级作用域，不可重新赋值）
const PI = 3.14159;
// PI = 3.14; // ❌ 报错</pre></div>
<blockquote><p>✅ <strong>最佳实践</strong>：优先用 <code>const</code>，需要重赋值时用 <code>let</code>，避免 <code>var</code>。</p></blockquote>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>2.数据类型（7种）</h3>
<p class="maodian"><a name="_label3_1_4_0"></a></p><h4>基本类型（Primitive）：</h4>
<div class="jb51code"><pre class="brush:js;">typeof 42 // "number"
typeof "hello" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol('id')// "symbol" (ES6)
typeof BigInt(123) // "bigint" (ES2020)
</pre></div>
<p class="maodian"><a name="_label3_1_4_1"></a></p><h4>引用类型（Object）：</h4>
<div class="jb51code"><pre class="brush:js;">typeof {} // "object"
typeof [] // "object"（数组是对象！）
typeof null // "object"（历史 bug，实际是 null）
typeof function(){}// "function"
</pre></div>
<blockquote><p>💡 判断数组：<code>Array.isArray(arr)</code><br />判断 null：<code>value === null</code></p></blockquote>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>3.运算符</h3>
<ul><li>算术：<code>+ - * / % **</code>（指数）</li><li>比较：<code>==</code>（宽松相等，会类型转换）、<code>===</code>（严格相等，推荐）</li><li>逻辑：<code>&& || !</code></li><li>三元：<code>condition ? expr1 : expr2</code></li><li>空值合并：<code>??</code>（<code>a ?? b</code> → a 为 null/undefined 时返回 b）</li></ul>
<div class="jb51code"><pre class="brush:js;">0 == false // true（类型转换）
0 === false // false（类型不同）
"" ?? "hi" // ""（空字符串不是 null/undefined）
null ?? "hi"// "hi"
</pre></div>
<p class="maodian"><a name="_lab2_1_6"></a></p><h3>4.控制结构</h3>
<div class="jb51code"><pre class="brush:js;">// 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 ) { ... }
// for...in（遍历对象键名）
for (const key in obj) { ... }</pre></div>
<p class="maodian"><a name="_lab2_1_7"></a></p><h3>5.函数</h3>
<p class="maodian"><a name="_label3_1_7_2"></a></p><h4>函数声明 vs 表达式</h4>
<div class="jb51code"><pre class="brush:js;">// 声明（有提升）
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; };</pre></div>
<p class="maodian"><a name="_label3_1_7_3"></a></p><h4>默认参数 & 解构</h4>
<div class="jb51code"><pre class="brush:js;">function createUser({name, age = 18}) {
return {name, age};
}
createUser({name: "Bob"}); // {name: "Bob", age: 18}
</pre></div>
<p class="maodian"><a name="_lab2_1_8"></a></p><h3>6.对象（Object）</h3>
<div class="jb51code"><pre class="brush:js;">// 创建
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;</pre></div>
<p class="maodian"><a name="_lab2_1_9"></a></p><h3>7.数组（Array）</h3>
<div class="jb51code"><pre class="brush:js;">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, ""); // 聚合</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>三、基本操作与实用技巧</h2>
<p class="maodian"><a name="_lab2_2_10"></a></p><h3>1.DOM 操作（浏览器环境）</h3>
<div class="jb51code"><pre class="brush:js;"><button id="btn">Click</button>
<script>
// 获取元素
const btn = document.getElementById("btn");
// 绑定事件
btn.addEventListener("click", () => {
alert("Button clicked!");
});
// 修改内容
document.querySelector("h1").textContent = "New Title";
</script></pre></div>
<p class="maodian"><a name="_lab2_2_11"></a></p><h3>2.异步编程</h3>
<p class="maodian"><a name="_label3_2_11_4"></a></p><h4>回调函数（Callback）</h4>
<div class="jb51code"><pre class="brush:js;">setTimeout(() => {
console.log("Delayed");
}, 1000);
</pre></div>
<p class="maodian"><a name="_label3_2_11_5"></a></p><h4>Promise（ES6）</h4>
<div class="jb51code"><pre class="brush:js;">fetch("/api/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
</pre></div>
<p class="maodian"><a name="_label3_2_11_6"></a></p><h4>async/await（ES2017，推荐）</h4>
<div class="jb51code"><pre class="brush:js;">async function fetchData() {
try {
const response = await fetch("/api/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
</pre></div>
<p class="maodian"><a name="_lab2_2_12"></a></p><h3>3.模块化（ES6 Modules）</h3>
<div class="jb51code"><pre class="brush:js;">// 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</pre></div>
<blockquote><p>⚠️ 浏览器中需在 <code><script type="module"></code> 中使用。</p></blockquote>
<p class="maodian"><a name="_lab2_2_13"></a></p><h3>4.错误处理</h3>
<div class="jb51code"><pre class="brush:js;">try {
// 可能出错的代码
JSON.parse("{ bad json }");
} catch (error) {
console.error("Error:", error.message);
} finally {
console.log("Cleanup");
}
</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>四、现代 JavaScript 开发要点</h2>
<table><thead><tr><th>概念</th><th>说明</th></tr></thead><tbody><tr><td><strong>严格模式</strong></td><td><code>"use strict";</code> → 报错更严格，避免隐式全局变量</td></tr><tr><td><strong>解构赋值</strong></td><td><code>const {name, age} = user;</code></td></tr><tr><td><strong>模板字符串</strong></td><td><code>`Hello ${name}`</code>（支持多行）</td></tr><tr><td><strong>扩展运算符</strong></td><td><code>[...arr1, ...arr2]</code>, <code>{...obj1, ...obj2}</code></td></tr><tr><td><strong>可选链</strong></td><td><code>user?.address?.city</code>（避免 undefined 报错）</td></tr><tr><td><strong>Promise.all</strong></td><td>并发执行多个异步任务</td></tr></tbody></table>
<p class="maodian"><a name="_label4"></a></p><h2>五、总结：JavaScript 核心思想</h2>
<blockquote><p><strong>“一切皆对象，函数是核心，异步是常态。”</strong></p></blockquote>
<ul><li><strong>灵活性</strong>：动态类型 + 原型继承 → 快速开发；</li><li><strong>生态强大</strong>：NPM（全球最大包仓库）、React/Vue/Angular、Node.js；</li><li><strong>全栈能力</strong>：一套语言打通前后端。</li></ul>
<p>✅ <strong>学习路径建议</strong>：</p>
<ol><li>掌握 ES6+ 语法（let/const、箭头函数、Promise）；</li><li>理解异步与事件循环；</li><li>熟悉 DOM 操作（前端）或 Express（后端）；</li><li>学习现代框架（如 React）。</li></ol>
<blockquote><p>📌 <strong>记住</strong>：JavaScript 不是“玩具语言”，而是构建现代 Web 应用的工业级工具。</p></blockquote>
頁:
[1]