首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 綜合教學

JavaScript 基礎入門:核心語法、數據類型與常用 API 全解析

     編輯:Java 綜合教學

前言

JavaScript 是 Web 開發的核心語言,掌握其基礎語法、數據類型、內置對象 API 是前端進階的基石。本文系統梳理 JS 基礎知識體系,適合初學者快速建立知識框架,也適合老手查漏補缺。

一、JavaScript 簡介與組成

1. 核心特點

  • 直譯執行:邊解析邊執行,無需預編譯
  • 基於原型的面向對象:無類概念,通過原型鏈繼承
  • 弱類型/動態類型:變量類型由值決定,運行時可變
  • 客戶端腳本:主要運行在瀏覽器端,減輕服務器壓力
  • 與 HTML/CSS 交互:操作 DOM/BOM 實現動態網頁

2. 三大組成部分

JavaScript 組成圖

組成全稱核心職責
ECMAScriptEuropean Computer Manufacturers Association Script語法、類型、語句、關鍵字、對象等核心語言標準
BOMBrowser Object Model瀏覽器窗口交互(window、navigator、screen、history、location)
DOMDocument Object ModelHTML 文檔操作(節點增刪改查、事件處理、樣式操作)

二、變量與數據類型

1. 變量聲明

var 變量名 = 值;  // ES5 語法,函數作用域
let 變量名 = 值;  // ES6 塊級作用域,可重新賦值
const 變量名 = 值;  // ES6 常量,引用類型內容仍可修改

2. 六大基本數據類型

類型說明示例
undefined聲明未賦值let a;
null空對象指針佔位符let b = null;
number整數/浮點數/NaN/Infinity10, 3.14, NaN
string字符串'hello', "world"
booleantrue/falsetrue, false
symbol (ES6)唯一標識符Symbol('id')

注意:null == undefined // true,但 null === undefined // false。

三、String 核心方法速查

方法作用示例
toLowerCase()轉小寫'ABC'.toLowerCase() // 'abc'
toUpperCase()轉大寫'abc'.toUpperCase() // 'ABC'
charAt(index)獲取指定位置字符'abc'.charAt(1) // 'b'
indexOf(str, fromIndex)查找子串首次出現索引'abab'.indexOf('b') // 1
substring(start, end)截取 [start, end) 子串'abcd'.substring(1,3) // 'bc'
split(separator)分割為數組'a,b,c'.split(',') // ['a','b','c']
trim()去除首尾空白' a '.trim() // 'a'

四、數組操作大全

1. 創建與訪問

// 創建
let arr = new Array(4);  // 長度 4
let arr2 = [1, 2, 3];    // 字面量(推薦)

// 訪問
arr[0] = 1;
arr[1] = 2;
console.log(arr[0]);  // 1

2. 常用屬性與方法

屬性/方法說明是否修改原數組
length元素個數,可寫入截斷/擴展是
push(...items)尾部添加,返回新長度是
pop()刪除尾部元素,返回該元素是
shift()刪除頭部元素,返回該元素是
unshift(...items)頭部添加,返回新長度是
splice(start, deleteCount, ...items)萬能增刪改,返回刪除的元素數組是
slice(start, end)截取 [start, end) 新數組否
concat(...arrays)合併數組,返回新數組否
join(separator)轉字符串,元素用分隔符連接否
sort(compareFn)排序(默認 Unicode 碼點)是
reverse()反轉數組是
forEach/map/filter/reduce函數式遍歷/轉換/過濾/聚合視具體方法

五、自定義函數

1. 聲明方式

// 函數聲明(提升)
function add(a, b) { return a + b; }

// 函數表達式(不提升)
const add = function(a, b) { return a + b; };

// 箭頭函數(ES6,無 this 綁定)
const add = (a, b) => a + b;

2. 參數與返回值

  • 參數默認值:function fn(a = 1) {}
  • 剩餘參數:function fn(...args) {}
  • 解構賦值:function fn({x, y}) {}
  • 返回值:return 表達式,無返回值默認 undefined

六、進階必知概念

  • 作用域鏈:變量查找規則(塊級 → 函數 → 全局)
  • 閉包:函數記住並訪問其詞法作用域外部變量
  • 原型鏈繼承:對象通過 __proto__ 尋找屬性/方法
  • 事件循環:微任務/宏任務隊列調度機制
  • this 綁定規則:默認/隱式/顯式/new/箭頭函數五種綁定

七、總結

JavaScript 基礎看似簡單,實則暗藏許多坑(類型轉換、this 指向、異步機制等)。建議:

  1. 精通 ES5 基礎,再系統學習 ES6+ 新特性
  2. 多實踐 DOM/BOM 操作,理解瀏覽器渲染原理
  3. 深入掌握閉包、原型、事件循環三大核心機制
  4. 養成使用 ESLint/Prettier 規範代碼風格
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved