JavaScript腳本語言的入門概念
更新時間：2026年01月13日 10:22:13 作者：阿坤帶你走近大數(shù)據(jù)
本文介紹了JavaScript的基本概念、核心語法和常用操作,涵蓋了變量聲明、數(shù)據(jù)類型、運(yùn)算符、控制結(jié)構(gòu)、函數(shù)、對象、數(shù)組、DOM操作、異步編程、模塊化、錯誤處理等,感興趣的朋友跟隨小編一起看看吧
JavaScript（簡稱 JS）是一種輕量級、解釋型、基于原型的動態(tài)腳本語言，最初用于網(wǎng)頁交互，現(xiàn)已發(fā)展為全棧開發(fā)（前端 + 后端 + 移動 + 桌面）的核心語言。以下從基本概念、核心語法和常用操作三方面系統(tǒng)介紹。
一、基本概念
1.運(yùn)行環(huán)境
- 瀏覽器：最常見（通過
<script>標(biāo)簽嵌入 HTML）； - Node.js：服務(wù)端運(yùn)行環(huán)境（2009年推出，使 JS 可寫后端）；
- 其他：Electron（桌面應(yīng)用）、React Native（移動 App）等。
2.語言特性
| 特性 | 說明 |
|---|---|
| 動態(tài)類型 | 變量無需聲明類型，運(yùn)行時自動推斷（let x = 5; x = "hello"; 合法） |
| 弱類型 | 類型可自動轉(zhuǎn)換（"5" + 3 → "53"，"5" - 3 → 2） |
| 基于原型（Prototype） | 對象繼承通過原型鏈實(shí)現(xiàn)（非類繼承） |
| 單線程 + 事件循環(huán) | 通過異步回調(diào)、Promise、async/await 處理并發(fā) |
| 函數(shù)是一等公民 | 函數(shù)可賦值、傳參、返回（支持高階函數(shù)、閉包） |
3.ECMAScript 標(biāo)準(zhǔn)
- JavaScript 遵循 ECMAScript（ES） 規(guī)范；
- 常見版本：ES5（2009）、ES6/ES2015（重大更新）、ES2022+（每年更新）；
- 現(xiàn)代開發(fā)推薦使用 ES6+ 語法。
二、核心語法
1.變量聲明
// var（已不推薦）：函數(shù)作用域，存在變量提升 var name = "Alice"; // let（塊級作用域，可重新賦值） let age = 25; age = 26; // const（塊級作用域，不可重新賦值） const PI = 3.14159; // PI = 3.14; // ? 報錯
? 最佳實(shí)踐：優(yōu)先用
const，需要重賦值時用let，避免var。
2.數(shù)據(jù)類型（7種）
基本類型（Primitive）：
typeof 42 // "number"
typeof "hello" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol('id')// "symbol" (ES6)
typeof BigInt(123) // "bigint" (ES2020)
引用類型（Object）：
typeof {} // "object"
typeof [] // "object"（數(shù)組是對象！）
typeof null // "object"（歷史 bug，實(shí)際是 null）
typeof function(){}// "function"
?? 判斷數(shù)組：
Array.isArray(arr)
判斷 null：value === null
3.運(yùn)算符
- 算術(shù)：
+ - * / % **（指數(shù)） - 比較：
==（寬松相等，會類型轉(zhuǎn)換）、===（嚴(yán)格相等，推薦） - 邏輯：
&& || ! - 三元：
condition ? expr1 : expr2 - 空值合并：
??（a ?? b→ a 為 null/undefined 時返回 b）
0 == false // true（類型轉(zhuǎn)換） 0 === false // false（類型不同） "" ?? "hi" // ""（空字符串不是 null/undefined） null ?? "hi" // "hi"
4.控制結(jié)構(gòu)
// 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 循環(huán)
for (let i = 0; i < 5; i++) { ... }
// for...of（遍歷可迭代對象：數(shù)組、字符串等）
for (const item of [1, 2, 3]) { ... }
// for...in（遍歷對象鍵名）
for (const key in obj) { ... }5.函數(shù)
函數(shù)聲明 vs 表達(dá)式
// 聲明（有提升）
function greet(name) {
return "Hello " + name;
}
// 表達(dá)式（無提升）
const add = function(a, b) {
return a + b;
};
// 箭頭函數(shù)（ES6，簡潔，無 this 綁定）
const square = x => x * x;
const sum = (a, b) => { return a + b; };默認(rèn)參數(shù) & 解構(gòu)
function createUser({name, age = 18}) {
return {name, age};
}
createUser({name: "Bob"}); // {name: "Bob", age: 18}
6.對象（Object）
// 創(chuàng)建
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;7.數(shù)組（Array）
const fruits = ["apple", "banana"];
// 常用方法
fruits.push("orange"); // 末尾添加
fruits.pop(); // 末尾刪除
fruits.unshift("grape"); // 開頭添加
fruits.shift(); // 開頭刪除
fruits.slice(1, 3); // 截取（不修改原數(shù)組）
fruits.splice(1, 1, "kiwi"); // 從索引1刪1個，插入"kiwi"
// 高階函數(shù)（函數(shù)式編程）
fruits.map(fruit => fruit.toUpperCase()); // 轉(zhuǎn)換
fruits.filter(fruit => fruit.length > 5); // 過濾
fruits.reduce((acc, f) => acc + f, ""); // 聚合三、基本操作與實(shí)用技巧
1.DOM 操作（瀏覽器環(huán)境）
<button id="btn">Click</button>
<script>
// 獲取元素
const btn = document.getElementById("btn");
// 綁定事件
btn.addEventListener("click", () => {
alert("Button clicked!");
});
// 修改內(nèi)容
document.querySelector("h1").textContent = "New Title";
</script>2.異步編程
回調(diào)函數(shù)（Callback）
setTimeout(() => {
console.log("Delayed");
}, 1000);
Promise（ES6）
fetch("/api/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
async/await（ES2017，推薦）
async function fetchData() {
try {
const response = await fetch("/api/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
3.模塊化（ES6 Modules）
// 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?? 瀏覽器中需在
<script type="module">中使用。
4.錯誤處理
try {
// 可能出錯的代碼
JSON.parse("{ bad json }");
} catch (error) {
console.error("Error:", error.message);
} finally {
console.log("Cleanup");
}
四、現(xiàn)代 JavaScript 開發(fā)要點(diǎn)
| 概念 | 說明 |
|---|---|
| 嚴(yán)格模式 | "use strict"; → 報錯更嚴(yán)格，避免隱式全局變量 |
| 解構(gòu)賦值 | const {name, age} = user; |
| 模板字符串 | `Hello ${name}`（支持多行） |
| 擴(kuò)展運(yùn)算符 | [...arr1, ...arr2], {...obj1, ...obj2} |
| 可選鏈 | user?.address?.city（避免 undefined 報錯） |
| Promise.all | 并發(fā)執(zhí)行多個異步任務(wù) |
五、總結(jié)：JavaScript 核心思想
“一切皆對象，函數(shù)是核心，異步是常態(tài)。”
- 靈活性：動態(tài)類型 + 原型繼承 → 快速開發(fā)；
- 生態(tài)強(qiáng)大：NPM（全球最大包倉庫）、React/Vue/Angular、Node.js；
- 全棧能力：一套語言打通前后端。
? 學(xué)習(xí)路徑建議：
- 掌握 ES6+ 語法（let/const、箭頭函數(shù)、Promise）；
- 理解異步與事件循環(huán)；
- 熟悉 DOM 操作（前端）或 Express（后端）；
- 學(xué)習(xí)現(xiàn)代框架（如 React）。
?? 記住：JavaScript 不是“玩具語言”，而是構(gòu)建現(xiàn)代 Web 應(yīng)用的工業(yè)級工具。
到此這篇關(guān)于JavaScript腳本語言的簡單介紹的文章就介紹到這了,更多相關(guān)js腳本語言內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在ECAMScript3給Function的原型定義了兩個方法，它們是Function.prototype.call和Function.prototype.apply。本文詳細(xì)介紹了apply與call的用法，有需要的可以參考下。2016-07-07
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡單瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法
這篇文章主要介紹了深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法,結(jié)合實(shí)例形式詳細(xì)分析了3D標(biāo)簽云原理、實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
showModalDialog模態(tài)對話框的使用詳解以及瀏覽器兼容
showModalDialog是jswindow對象的一個方法，和window.open一樣都是打開一個新的頁面。區(qū)別是：showModalDialog打開子窗口后，父窗口就不能獲取焦點(diǎn)了（也就是無法操作了）2014-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語言實(shí)現(xiàn)判斷兩個日期不能跨年和跨月，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-04-04
uniapp開發(fā)小程序?qū)崿F(xiàn)全局懸浮按鈕的代碼
這篇文章主要介紹了uniapp開發(fā)小程序如何實(shí)現(xiàn)全局懸浮按鈕,但是在uniapp中式?jīng)]有window對象，和dom元素的，需要獲取頁面上節(jié)點(diǎn)的幾何信息，具體實(shí)例代碼詳細(xì)跟隨小編一起看看吧2022-03-03
使用Three.js實(shí)現(xiàn)太陽系八大行星的自轉(zhuǎn)公轉(zhuǎn)示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Three.js實(shí)現(xiàn)太陽系八大行星的自轉(zhuǎn)公轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)橫向拉伸動感伸縮菜單效果,涉及javascript基于定時函數(shù)及鼠標(biāo)事件操作頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
對JavaScript 放大鏡來說, 計算倍率必不可少.一個完整的放大鏡結(jié)構(gòu)里, 與倍率扯上關(guān)系的一共有 4 個對象, 原圖, 縮略圖, 鏡片和視窗.2011-05-05
Bootstrap每天必學(xué)之導(dǎo)航條，本文向大家講解了多種多樣的導(dǎo)航條，以及導(dǎo)航條中元素的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-11-11