基礎(chǔ)概念

JavaScript 是一種廣泛使用的高級編程語言，主要用于實(shí)現(xiàn)網(wǎng)頁和 Web 應(yīng)用程序的交互功能。它是一種解釋型、基于原型（prototype-based）、多范式（支持面向?qū)ο?、命令式和函?shù)式編程風(fēng)格）的語言。JavaScript 最初由 Netscape 的 Brendan Eich 于 1995 年創(chuàng)建，旨在為網(wǎng)頁添加動態(tài)行為。

起源與發(fā)展

  • 起源：JavaScript 由網(wǎng)景公司（Netscape）的布蘭登·艾奇（Brendan Eich）于 1995 年創(chuàng)建，最初是為了在網(wǎng)頁中添加動態(tài)交互功能。

  • 標(biāo)準(zhǔn)化：1997 年，JavaScript 被提交給歐洲計(jì)算機(jī)制造商協(xié)會（ECMA），并成為國際標(biāo)準(zhǔn)（ECMAScript）。目前，JavaScript 的最新版本是 ECMAScript 2024。

  • 發(fā)展：隨著互聯(lián)網(wǎng)的發(fā)展，JavaScript 的功能不斷擴(kuò)展，從最初的簡單網(wǎng)頁特效，到如今可以用于開發(fā)復(fù)雜的前端框架（如 React、Vue、Angular）、服務(wù)器端應(yīng)用（Node.js）、移動應(yīng)用（React Native）等。

主要用途

  • 網(wǎng)頁交互：JavaScript 可以操作 HTML 和 CSS，實(shí)現(xiàn)動態(tài)效果，例如響應(yīng)用戶點(diǎn)擊、鼠標(biāo)懸停、表單驗(yàn)證等。

  • 前端框架開發(fā)：現(xiàn)代前端開發(fā)中，JavaScript 是構(gòu)建單頁面應(yīng)用（SPA）的核心技術(shù)。例如：

  • React：由 Facebook 開發(fā)，用于構(gòu)建用戶界面。

  • Vue.js：輕量級的前端框架，易于上手。

  • Angular：由 Google 維護(hù)，功能強(qiáng)大，適合大型應(yīng)用。

  • 服務(wù)器端開發(fā)：通過 Node.js，JavaScript 可以在服務(wù)器端運(yùn)行，用于構(gòu)建高性能的后端服務(wù)。

  • 移動應(yīng)用開發(fā)：使用 React Native 或其他框架，JavaScript 可以開發(fā)跨平臺的移動應(yīng)用。

  • 游戲開發(fā)：結(jié)合 HTML5 和 Canvas，JavaScript 可以開發(fā)簡單的網(wǎng)頁游戲。

核心特點(diǎn)

  • 解釋型語言：JavaScript 代碼在運(yùn)行時(shí)由瀏覽器或其他環(huán)境（如 Node.js）解釋執(zhí)行，不需要編譯。

  • 基于事件驅(qū)動：JavaScript 可以響應(yīng)用戶操作（如點(diǎn)擊按鈕、提交表單等），并根據(jù)這些事件執(zhí)行相應(yīng)的代碼。

  • 跨平臺：可以在多種操作系統(tǒng)和設(shè)備上運(yùn)行，包括 Windows、macOS、Linux 和移動設(shè)備。

  • 客戶端與服務(wù)器端支持：最初用于瀏覽器中的客戶端腳本編寫，現(xiàn)在也通過 Node.js 實(shí)現(xiàn)了服務(wù)器端開發(fā)。

  • 非阻塞 I/O 操作：使用異步編程模型，允許高效的并發(fā)處理，避免長時(shí)間等待資源（如網(wǎng)絡(luò)請求或文件讀?。┒枞骶€程。

  • 豐富的生態(tài)系統(tǒng)：擁有龐大的庫和框架（如 React、Vue、Angular 等），以及 npm（Node Package Manager）提供的海量第三方包。

運(yùn)行環(huán)境

  • 瀏覽器：JavaScript 最初的運(yùn)行環(huán)境是瀏覽器，通過瀏覽器內(nèi)置的 JavaScript 引擎（如 Chrome 的 V8、Firefox 的 SpiderMonkey）執(zhí)行代碼。

  • Node.js：Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)環(huán)境，允許 JavaScript 在服務(wù)器端運(yùn)行。它提供了豐富的模塊和庫，用于構(gòu)建網(wǎng)絡(luò)應(yīng)用、服務(wù)器等。

javascript 的組成

  • ECMAScript 是 JavaScript 的核心語法，定義了語言的基本特性。

  • DOM 是用于操作 HTML 文檔的接口，允許 JavaScript 動態(tài)地修改文檔的內(nèi)容和樣式。

  • BOM 是用于操作瀏覽器窗口和環(huán)境的接口，提供了與瀏覽器交互的功能。

ECMAScript 是 JavaScript 的核心語法部分，是 JavaScript 的標(biāo)準(zhǔn)化實(shí)現(xiàn)。它定義了語言的基本語法、數(shù)據(jù)類型、運(yùn)算符、控制流、函數(shù)、對象等基本特性

DOM 是一個(gè)與平臺和語言無關(guān)的接口，用于操作 HTML 和 XML 文檔。DOM 將文檔表示為一個(gè)由節(jié)點(diǎn)和對象組成的樹形結(jié)構(gòu)，允許 JavaScript 動態(tài)地訪問和修改文檔的內(nèi)容、結(jié)構(gòu)和樣式。

BOM 是瀏覽器提供的對象模型，用于操作瀏覽器窗口和瀏覽器環(huán)境。BOM 提供了一系列的全局對象和方法，用于處理瀏覽器窗口、位置、歷史記錄、定時(shí)器等。

JS注釋

在 JavaScript 中，注釋用于解釋代碼的功能和用途，幫助開發(fā)人員更好地理解代碼。以下是 JavaScript 中常見的注釋類型：

單行注釋

單行注釋以 // 開頭，該行后續(xù)的所有內(nèi)容都會被視為注釋，不會被解釋器執(zhí)行。

// 這是一個(gè)單行注釋
console.log("Hello, World!"); // 這也是一個(gè)單行注釋

多行注釋

多行注釋以 /*開頭，以 */ 結(jié)尾?？梢杂糜谧⑨尪嘈袃?nèi)容。

/*
這是一個(gè)多行注釋
可以跨越多行
*/

文檔注釋

文檔注釋用于生成代碼文檔，通常以 /** 開頭，以 */ 結(jié)尾。文檔注釋中可以添加特殊標(biāo)記，如 @param、@return 等，用于描述函數(shù)的參數(shù)、返回值等。

/**
 * 這是一個(gè)函數(shù)的文檔注釋
 * @param {number} a - 第一個(gè)參數(shù)
 * @param {number} b - 第二個(gè)參數(shù)
 * @returns {number} 返回 a 和 b 的和
 */
function add(a, b) {
    return a + b;
}

注釋的用途

  • 代碼解釋：幫助開發(fā)人員和其他人更好地理解代碼的功能和用途。

  • 調(diào)試：在調(diào)試代碼時(shí)，可以使用注釋臨時(shí)禁用某些代碼塊，以便快速定位問題。

  • 代碼維護(hù)：便于開發(fā)人員在日后的代碼維護(hù)過程中快速理解代碼的邏輯和功能。

注釋應(yīng)清晰、簡潔，避免冗長和無關(guān)的內(nèi)容

注釋應(yīng)與代碼保持一致，避免出現(xiàn)注釋與代碼不符的情況，導(dǎo)致誤解。
合理使用注釋，避免過度注釋，以免影響代碼的可讀性。

js的引入方式

在 JavaScript 中，有多種方式可以引入 JS 文件或代碼，具體選擇取決于項(xiàng)目需求和開發(fā)環(huán)境。以下是常見的幾種引入方式：

使用 <script> 標(biāo)簽引入外部 JS 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="path/to/your/script.js"></script>
</body>
</html>

這種方式簡單易用，但不適合大型項(xiàng)目，因?yàn)榇a的可維護(hù)性較差

使用 ES6 模塊

ES6 模塊是現(xiàn)代 JavaScript 開發(fā)中推薦的方式，通過 import 和 export 語法實(shí)現(xiàn)模塊化。

// file: module.js 導(dǎo)出模塊：
export const myFunction = () => {
    console.log('Hello, World!');
};

// file: main.js 導(dǎo)入模塊：
import { myFunction } from './module.js';
myFunction();

// 在 HTML 中引入模塊：
<script type="module" src="path/to/your/main.js"></script>

使用 CommonJS 模塊

CommonJS 是 Node.js 中常用的模塊化規(guī)范，通過 require 和 module.exports 實(shí)現(xiàn)模塊化。


// file: module.js
function myFunction() {
    console.log('Hello, World!');
}
module.exports = myFunction;

// file: main.js
const myFunction = require('./module.js');
myFunction();

這種方式主要用于 Node.js 環(huán)境

動態(tài)加載腳本

在某些情況下，需要在運(yùn)行時(shí)動態(tài)加載 JavaScript 文件，可以使用 document.createElement 方法。

const script = document.createElement('script');
script.src = 'path/to/your/script.js';
document.head.appendChild(script);

這種方式適用于按需加載或延遲加載的場景

使用第三方模塊加載器

在大型項(xiàng)目中，可以使用模塊加載器（如 RequireJS、SystemJS）來實(shí)現(xiàn)動態(tài)加載和依賴管理。

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
    require(['path/to/your/module'], function(module) {
        module.myFunction();
    });
</script>

使用構(gòu)建工具

在現(xiàn)代前端開發(fā)中，使用構(gòu)建工具（如 Webpack、Parcel）可以幫助進(jìn)行代碼打包、壓縮和優(yōu)化。

使用 Webpack：

# 安裝 Webpack：
npm install --save-dev webpack webpack-cli

// 創(chuàng)建配置文件 webpack.config.js：
const path = require('path');
module.exports = {
    entry: './scripts/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

# 運(yùn)行 Webpack 打包：
npx webpack --config webpack.config.js

這種方式適合大型項(xiàng)目，可以提升性能和開發(fā)效率

代碼分割和懶加載

在大型項(xiàng)目中，可以通過代碼分割和懶加載來優(yōu)化性能。

import(/* webpackChunkName: "module1" */ './module1')
    .then(module => {
        module.myFunction();
    })
    .catch(err => {
        console.error('Failed to load module:', err);
    });

這種方式可以顯著提升頁面加載速度

js的輸出

  • 在開發(fā)和調(diào)試過程中，console.log() 是最常用的輸出方式。

  • 如果需要將內(nèi)容顯示在頁面上，可以使用 document.write() 或操作 DOM。

  • alert() 適用于需要用戶確認(rèn)的場景。

  • debugger; 和其他 console 方法可以輔助調(diào)試。

console.log()

這是最常用的輸出方式，用于將內(nèi)容輸出到瀏覽器的控制臺。\

console.log("Hello, World!"); // 輸出字符串
console.log(123); // 輸出數(shù)字
console.log(true); // 輸出布爾值
console.log({ name: "Kimi", age: 25 }); // 輸出對象

document.write()

在頁面加載時(shí)，可以使用 document.write() 將內(nèi)容直接輸出到 HTML 頁面中。

document.write("Hello, World!"); // 將內(nèi)容輸出到頁面

注意： document.write() 只能在頁面加載時(shí)使用，頁面加載完成后使用會導(dǎo)致頁面內(nèi)容被清空。

操作 DOM

可以通過操作 DOM 將內(nèi)容輸出到 HTML 頁面的指定元素中。

// 獲取頁面中的某個(gè)元素
const element = document.getElementById("myElement");
element.innerHTML = "Hello, World!"; // 將內(nèi)容設(shè)置為元素的 HTML 內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <div id="myElement"></div>
    <script>
        const element = document.getElementById("myElement");
        element.innerHTML = "Hello, World!";
    </script>
</body>
</html>

alert()

可以使用 alert() 彈出一個(gè)警告框，顯示內(nèi)容。

alert("Hello, World!"); // 彈出警告框顯示內(nèi)容

alert() 是阻塞的，會暫停頁面的執(zhí)行，直到用戶點(diǎn)擊 “確定”。

  • debugger;：在代碼中插入調(diào)試斷點(diǎn)，可以在控制臺中查看變量的值和調(diào)試代碼。

  • console.error()：用于輸出錯(cuò)誤信息。

  • console.warn()：用于輸出警告信息。

console.error("這是一個(gè)錯(cuò)誤信息"); // 在控制臺輸出紅色的錯(cuò)誤信息

數(shù)據(jù)類型

JavaScript 是動態(tài)類型語言，變量是由值絕對，數(shù)據(jù)類型分為基礎(chǔ)類型和引用類型。

基本數(shù)據(jù)類型（Primitive Data Types）

基本數(shù)據(jù)類型是 JavaScript 中最簡單的數(shù)據(jù)類型，它們是不可變的，即直接存儲在變量訪問的位置。

String（字符串）

特點(diǎn)：字符串是由字符組成的序列，用單引號 '、雙引號 " 或反引號 ` 包裹。
常見操作：字符串長度：“hello”.length → 返回 5。
字符串拼接：“hello” + “world” → 返回 “helloworld”。

字符串方法：

.toUpperCase()： 將字符串轉(zhuǎn)化為大寫
.toLowerCase()：將字符串轉(zhuǎn)化為小寫
.includes()：判斷字符串中是否包含某個(gè)字符串
.charAt()：獲取到指定字符的索引位置
.substring()：截取字符串
.split()：將字符串分割為數(shù)組。

模板字符串：使用反引號 ` 和 ${} 插值，例如：

let name = 'John';
let gaessta =`Hello, ${name}!`

Number（數(shù)字）

特點(diǎn)：數(shù)字不分整數(shù)和小數(shù)，統(tǒng)一使用number表示
常見操作：四則運(yùn)算：加 +、減 -、乘 *、除 /。
特殊值：

  • Infinity：表示正無窮。

  • -Infinity：表示負(fù)無窮。

  • NaN（Not a Number）：表示非數(shù)字值。

數(shù)學(xué)方法：

  • Math.abs()：絕對值。

  • Math.round()：四舍五入。

  • Math.floor()：向下取整。

  • Math.ceil()：向上取整。

  • Math.random()：生成 0 到 1 之間的隨機(jī)數(shù)。

數(shù)據(jù)格式

.toFixed()：指定小數(shù)點(diǎn)后保留的位數(shù)。
.toPrecision()：指定數(shù)字的精度。

Boolean（布爾值）

特點(diǎn)：布爾值只有兩個(gè)值：true 和 false。
邏輯運(yùn)算符：

&&（邏輯與）：true && true → true
||（邏輯或）：true || false → true
!（邏輯非）：!true → false。

類型轉(zhuǎn)換：某些值在布爾上下文中會被轉(zhuǎn)換為布爾值：

真值：true、非空字符串、非零數(shù)字、對象等。
假值：false、null、undefined、0、-0、NaN、空字符串 “”。

Undefined

特點(diǎn)：表示變量已聲明，但尚未賦值。

let x;
console.log(x); // undefined

Null

特點(diǎn)：表示一個(gè)空值，表示一個(gè)空對象。

let x = null;
console.log(x); // null

Symbol（ES6 新增）

特點(diǎn)：用于創(chuàng)建唯一的、不可變的值，常用于對象屬性的鍵。

let mySymbol = Symbol("mySymbol");
console.log(mySymbol); // Symbol(mySymbol)

BigInt（ES2020 新增）

特點(diǎn)：用于表示大于 2^53 - 1 的整數(shù)。

let bigNumber = BigInt(1234567890123456789012345678901234567890n);
console.log(bigNumber); // 1234567890123456789012345678901234567890n

復(fù)合數(shù)據(jù)類型（Composite Data Types）

復(fù)合數(shù)據(jù)類型可以包含多個(gè)值，并且是可變的。

Object（對象）

特點(diǎn)： 對象是是由鍵值對組成的集合，用花括號 {} 包裹。
常見操作：

創(chuàng)建對象：


let person = {
  id:1,
  name:"John",
  arry:[1,2,3]
  arrbyor[{
    out: "數(shù)值值",
    tabis: "數(shù)值操作",
  }]
}

訪問屬性：

點(diǎn)符號：person.name。
方括號：person[“name”]。

let names = person.name;
let arry = person.["name"];
console.log(names);

添加/修改屬性：

person.job = "developer";
person.name = "Bob";

刪除屬性：

delete person.id;

遍歷對象：

for (let key in person) {
  console.log(key, person[key]);
}

Array（數(shù)組）

特點(diǎn)：數(shù)組是有序的值的集合，可以包含任意類型的數(shù)據(jù)。
常見操作：

創(chuàng)建數(shù)組：

let fruits = ["apple", "banana", "cherry"];

訪問元素：

console.log(fruits[1]); // "banana"

添加/修改元素：

fruits.push("orange"); // 添加到數(shù)組末尾
fruits[1] = "grape"; // 修改元素

刪除元素：

fruits.pop(); // 刪除數(shù)組末尾的元素
fruits.shift(); // 刪除數(shù)組開頭的元素

數(shù)組方法：

.length：獲取數(shù)組長度。
.slice()：截取數(shù)組。
.splice()：刪除、替換、添加元素。
.map(): 對數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù)，并返回一個(gè)新數(shù)組。
.filter()：根據(jù)條件過濾數(shù)組元素，并返回一個(gè)新數(shù)組。
.reduce()：對數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù)，并返回一個(gè)值。
.sort()：對數(shù)組進(jìn)行排序。

特殊數(shù)據(jù)類型

Function（函數(shù)）

特點(diǎn)：函數(shù)是一種特殊的數(shù)據(jù)類型，可以被賦值給變量，也可以作為參數(shù)傳遞或作為返回值。

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("John"));

類型檢測

typeof 運(yùn)算符：
基本數(shù)據(jù)類型：

  • typeof “hello” → “string”

  • typeof 42 → “number”

  • typeof true → “boolean”

  • typeof undefined → “undefined”

  • typeof Symbol() → “symbol”

  • typeof BigInt(123) → “bigint”

復(fù)合數(shù)據(jù)類型：

  • typeof {} → “object”

  • typeof [] → “object”（數(shù)組也是對象）

  • typeof null → “object”（這是 JavaScript 的一個(gè)歷史遺留問題）

  • typeof function () {} → “function”

instanceof 運(yùn)算符

用于檢測對象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例：

let arr = [];
console.log(arr instanceof Array); // true

類型轉(zhuǎn)換

隱式類型轉(zhuǎn)換：
在某些操作中，JavaScript 會自動將數(shù)據(jù)類型轉(zhuǎn)換為適合操作的類型，例如：

"123" + 456; // "123456"（字符串拼接）
"123" - 456; // -333（數(shù)字運(yùn)算）

顯式類型轉(zhuǎn)換：
字符串轉(zhuǎn)換：

String(value)：將值轉(zhuǎn)換為字符串。
value.toString()：對象或數(shù)組調(diào)用 toString() 方法。

數(shù)字轉(zhuǎn)換：
Number(value)：將值轉(zhuǎn)換為數(shù)字。
parseInt(value)：將字符串解析為整數(shù)。
parseFloat(value)：將字符串解析為浮點(diǎn)數(shù)。

布爾轉(zhuǎn)換：
Boolean(value)：將值轉(zhuǎn)換為布爾值。

變量

在 JavaScript 中，變量是用于存儲數(shù)據(jù)的容器，可以存儲不同類型的數(shù)據(jù)，如數(shù)字、字符串、布爾值、對象等。以下是關(guān)于 JavaScript 中變量的詳細(xì)知識點(diǎn)：

變量的聲明

var（es5）

作用域：函數(shù)作用域或全局作用域
在函數(shù)內(nèi)聲明：作用域?yàn)檎麄€(gè)函數(shù)
在塊（如 if、for）中聲明：變量會泄漏到塊外部。

if (true) {
  var x = 10;
}
console.log(x); // 輸出 10

變量提升：聲明會被提升到作用域頂部，但賦值不提升。

console.log(x); // 輸出 undefined
var x = 10;

重復(fù)申明：容許重復(fù)申明，但會覆蓋之前的值。

var a = 1;
var a = 2;

全局污染： 在全局作用域中聲明的變量會污染全局作用域，可能影響其他代碼。

var logdata = 'hello';
console.log(widow.logdata);

let（es6）

作用域：塊作用域，只能在塊中訪問，不能在函數(shù)外部訪問。{}

if (true) {
  let x = 10;
}

console.log(x); // ReferenceError: x is not defined

暫時(shí)性死區(qū)（TDZ）：聲明前訪問會報(bào)錯(cuò)。


console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 10;

不可重復(fù)聲明：同一作用域內(nèi)禁止重復(fù)聲明。

let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared

循環(huán)中的應(yīng)用：每次迭代創(chuàng)建新的綁定，解決 var 的閉包問題。

for (let i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 100); // 輸出 0, 1, 2
}

const（es6）

常用申明：申明后不可以重新賦值


const pi = 3.14;
pi = 3.14159; // TypeError: Assignment to constant variable.

必須初始化：申明時(shí)必須初始化。


const pi;  // SyntaxError: Missing initializer in const declaration

對象和數(shù)組的修改：允許修改屬性或元素，但不可重新賦值。

const obg = {name: 'John'}
obg.name = 'Jane'
obg = {} // TypeError: Assignment to constant variable.

const arr = [1, 2, 3]
arr.push(4)
arr=[4]  // TypeError

變量的賦值

變量的賦值是將數(shù)據(jù)存儲到變量中的過程。可以使用以下方式進(jìn)行賦值：

直接賦值

使用 = 運(yùn)算符將值賦給變量。

let a;
a = 100; // 為變量 a 賦值為 100
console.log(a); // 輸出: 100

解構(gòu)賦值

這是一種從數(shù)組或?qū)ο笾刑崛?shù)據(jù)并賦值給變量的方式。

// 數(shù)組解構(gòu)賦值
const [b, c] = [200, 300];
console.log(b, c); // 輸出: 200 300

// 對象解構(gòu)賦值
const { name, age } = { name: 'Alice', age: 25 };
console.log(name, age); // 輸出: Alice 25

流程控制

流程控制語句用于控制程序的執(zhí)行順序，包括條件語句、循環(huán)語句和跳轉(zhuǎn)語句等。

條件語句（Conditional Statements）

if 語句
if 語句用于根據(jù)條件執(zhí)行代碼塊。

if (condition) {
  //  condition 是條件
  //  condition 為 true 時(shí)執(zhí)行代碼塊
}

// 示例：
let age = 18;
if (age >= 18) {
console.log("成年人");
}

if...else 語句
if...else 語句用于根據(jù)條件選擇執(zhí)行不同的代碼塊。

if (condition) {
  // condition 條件為 true 時(shí)執(zhí)行代碼塊
} else {
  // condition 條件為 false 時(shí)執(zhí)行代碼塊
}

// 示例：
let age = 17;
if (age >= 18) {
  console.log("成年人");
}else {
  console.log("未成年人");
}

if...else if...else 語句
if...else if...else 語句用于處理多個(gè)條件。

if (條件1) {
  // 條件1 為 true 時(shí)執(zhí)行的代碼
} else if (條件2) {
  // 條件1 為 false 且條件2 為 true 時(shí)執(zhí)行的代碼
}else {
  // 所有條件都不滿足時(shí)執(zhí)行的代碼
}

// 示例：
let score = 85;
if (score >= 90) {
  console.log("優(yōu)秀");
} else if (score >= 70) {
  console.log("良好");
} else {
  console.log("不及格");
}

switch 語句
switch 語句用于根據(jù)變量的值選擇執(zhí)行不同的代碼塊。

switch (表達(dá)式) {
  case 值1:
    // 表達(dá)式等于值1時(shí)候執(zhí)行的代碼
  break;
  case 值2:
    // 表達(dá)式等于值2時(shí)候執(zhí)行的代碼
  break;
  default:
    // 所有條件都不滿足時(shí)執(zhí)行的代碼
}

// 示例：
let times = 3;
switch (times) {
  case 1:
    console.log("星期一");
  break;
  case 2:
    console.log("星期二");
  break;
  case 3:
    console.log("星期三");
  break;
  default:
    console.log("其他時(shí)間");
}

循環(huán)語句（Loop Statements）

for 循環(huán)
for 循環(huán)用于在指定的條件下重復(fù)執(zhí)行代碼塊。

for (初始化; 條件; 迭代) {
  // 循環(huán)體
}

// 示例：
for (let i = 0; i < 5; i++) {
  clonsole.log(i);
}

while 循環(huán)

while 循環(huán)用于在條件為 true 時(shí)重復(fù)執(zhí)行代碼塊。

while (條件) {
  // 循環(huán)體
}

// 示例：
let i = 4;
while (i < 5) {
  console.log(i);
  i++
}

do...while 循環(huán)

do...while 循環(huán)至少執(zhí)行一次循環(huán)體，然后根據(jù)條件決定是否繼續(xù)執(zhí)行。

do {
  // 循環(huán)體
} while (條件);

// 示例：
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for...of 循環(huán)（ES6 新增）

for...of 循環(huán)用于遍歷可迭代對象（如數(shù)組、字符串等）。

for (let value of 可迭代對象) {
  // 循環(huán)體
}

// 示例：
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

for...in 循環(huán)

for...in 循環(huán)用于遍歷對象的屬性名。

for (let key in 對象) {
  // 循環(huán)體
}

// 示例：
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(key + ": " + person[key]);
}

跳轉(zhuǎn)語句（Jump Statements）

break 語句
break 語句用于終止循環(huán)或 switch 語句。

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

continue 語句
continue 語句用于跳過當(dāng)前循環(huán)的剩余部分，繼續(xù)執(zhí)行下一次循環(huán)。

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 跳過偶數(shù)
  }
  console.log(i);
}

return 語句
return 語句用于從函數(shù)中返回值，并終止函數(shù)的執(zhí)行。

function add(a, b) {
  return a + b; // 返回結(jié)果
}
console.log(add(3, 5)); // 輸出 8

運(yùn)算符

JavaScript 中的運(yùn)算符是編程的基礎(chǔ)，用于執(zhí)行各種操作，如算術(shù)計(jì)算、比較、邏輯判斷等。以下是 JavaScript 中常見的運(yùn)算符及其用法，幫助你更好地復(fù)習(xí)：

算術(shù)運(yùn)算符（Arithmetic Operators）

運(yùn)算符

描述

示例

結(jié)果

+

加法

5 + 3

8

-

減法

5 - 3

2

*

乘法

5 * 3

15

/

除法

10 / 2

5

%

求余

10 % 3

1

++

自增（前置或后置）

let x = 5; ++x

6（前置結(jié)果為6，后置結(jié)果為原值后自增）

–

自減（前置或后置）

let x = 5; x–

5（此行為后置，結(jié)果為原值，之后x自減為4）

==?**

冪運(yùn)算（ES6 新增）

2 **?== 3

8

自增和自減運(yùn)算符的前置和后置區(qū)別：

let x = 5;
console.log(++x); // 6
console.log(x++); // 6，但 x 的值變?yōu)?7

賦值運(yùn)算符（Assignment Operators）

運(yùn)算符

描述

示例

等價(jià)于

=

簡單賦值

x = 5

x = 5

+=

加法賦值

x += 3

x = x + 3

-=

減法賦值

x -= 3

x = x - 3

*=

乘法賦值

x *= 3

x = x * 3

/=

除法賦值

x /= 3

x = x / 3

%=

求余賦值

x %= 3

x = x % 3

==?**=

冪運(yùn)算賦值（ES6 新增）

x **&zwnj;= 3

x = x **== 3

比較運(yùn)算符（Comparison Operators）

比較運(yùn)算符用于比較兩個(gè)值，返回布爾值 true 或 false。

運(yùn)算符

描述

示例

結(jié)果

==

等于（值相等）

5 == "5"

true

===

嚴(yán)格等于（值和類型都相等）

5 === "5"

false

!=

不等于

5 != "5"

false

!==

嚴(yán)格不等于（值和類型不相等）

5 !== "5"

true

>

大于

5 > 3

true

<

小于

5 < 3

false

>=

大于等于

5 >= 3

true

<=

小于等于

5 <= 3

false

== 和 === 的區(qū)別：
== 會進(jìn)行類型轉(zhuǎn)換，例如 5 == “5” 返回 true。
=== 不進(jìn)行類型轉(zhuǎn)換，類型不同直接返回 false，例如 5 === “5” 返回 false。

邏輯運(yùn)算符（Logical Operators）

運(yùn)算符

描述

示例

結(jié)果

&&

邏輯與

true && false

false

`

`

邏輯或

!

邏輯非

!true

false

&&：如果第一個(gè)操作數(shù)為 false，返回第一個(gè)操作數(shù)；否則返回第二個(gè)操作數(shù)

console.log(true && "hello"); // false
console.log(true && "hello");  // "hello"

||：如果第一個(gè)操作數(shù)為 true，返回第一個(gè)操作數(shù)；否則返回第二個(gè)操作數(shù)。

console.log(true || "hello");  // true
console.log(false || "hello"); // "hello"

三元運(yùn)算符（Ternary Operator）

三元運(yùn)算符是一種簡化的 if-else 結(jié)構(gòu)。

運(yùn)算符

描述

示例

結(jié)果

? :

條件運(yùn)算符

condition ? exprTrue : exprFalse

根據(jù)條件返回值

let age = 18;
let message = age >= 18 ? "Adult" : "Minor";
console.log(message); //  Adult

函數(shù)

函數(shù)是 JavaScript 中的一個(gè) fundamental building block，它允許我們封裝代碼，以便于重復(fù)使用和重用。

函數(shù)定義方式

函數(shù)申明：函數(shù)聲明（function declaration）是 JavaScript 中的一種函數(shù)定義方式，它使用 function 關(guān)鍵字來定義函數(shù)。

function add(參數(shù)1，參數(shù)2，參數(shù)3....... 參數(shù)n) {
  // 函數(shù)體
return 返回值;
}

// 實(shí)例
function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 輸出：3

函數(shù)表達(dá)式：函數(shù)表達(dá)式（function expression）是 JavaScript 中的一種函數(shù)定義方式，它使用 var, let, const關(guān)鍵字來定義函數(shù)。

let 函數(shù)名 = function(參數(shù)1，參數(shù)2，參數(shù)3....... 參數(shù)n) { retrun 返回值; }

// 示例：

let add = function(name) { return "Hello, " + name + "!"; }
console.log(greet("Alice")); // 輸出 "Hello, Alice!"

箭頭函數(shù)：箭頭函數(shù)（arrow function）是 JavaScript 中的一種函數(shù)定義方式，它使用 => 來定義函數(shù)。

let 函數(shù)名 = (參數(shù)1，參數(shù)2，參數(shù)3....... 參數(shù)n) => { retrun 返回值; }

// 示例：
let dious =(x) => x * x; 
console.log(dious(5)); // 25

let add = (name) => { "Hello, " + name + "!"; }
console.log(greet("Bob"));

函數(shù)參數(shù)

默認(rèn)參數(shù)（ES6 新增）:函數(shù)可以在定義時(shí)為參數(shù)指定默認(rèn)值，當(dāng)調(diào)用函數(shù)時(shí)，如果沒有為參數(shù)賦值，則使用默認(rèn)值。

function 函數(shù)名(參數(shù)1 = 默認(rèn)值1, 參數(shù)2 = 默認(rèn)值2, 參數(shù)3 = 默認(rèn)值3) {}

// 示例：

function greet(name = 'World') {
  return `Hello, ${name}!`;
}

function add(a, b = 1) {
  return a + b;
}
console.log(add(5));

剩余參數(shù)（ES6 新增）:在函數(shù)定義時(shí)，使用 … 表示一個(gè)參數(shù)可以接受一個(gè)數(shù)組作為參數(shù)。

function 函數(shù)名(...參數(shù)名) { 
  // 函數(shù)體
}

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

let data = sum(1, 2, 3, 4, 5);
console.log(data); // 輸出：15

arguments對象：在函數(shù)內(nèi)部，arguments對象是一個(gè)類數(shù)組對象，包含了函數(shù)的參數(shù)。

function sum() {

let sumtos = 0;
for (let i = 0; i < arguments.length; i++) {
  sumtos += arguments[i];
 }
return sumtos;
}
console.log(sum(1, 2, 3, 4, 5)); // 輸出：15

函數(shù)的調(diào)用方式

普通調(diào)用: 直接調(diào)用函數(shù)，如 functionName()

function getData() {
  retrurn "Hello World";
}

//直接調(diào)用函數(shù)
getData();

作為方法調(diào)用：在對象上調(diào)用函數(shù)，如 object.method()

let obj = {
  name: "John",
  getName: function() {
    return "你的名字" + this.name;
  }
}

// 作為方法調(diào)用
obj.getName();

作為構(gòu)造函數(shù)調(diào)用：使用 new 關(guān)鍵字調(diào)用函數(shù)，如 new FunctionName()


function Person(name) {
  this.name = name;
}

let person = new Person("John");

通過call/apply調(diào)用:
call 和 apply 方法可以改變函數(shù)的 this 綁定，并調(diào)用函數(shù)。


// call 方法接受一個(gè) this 值和一系列參數(shù)，并將函數(shù)的 this 綁定到指定的對象上，然后立即執(zhí)行該函數(shù)。

function greet(greeting,punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };
greet.call(person, 'Hello', '!');  // 輸出: Hello, Alice!

// apply 方法接受一個(gè) this 值和一個(gè)參數(shù)數(shù)組，并將函數(shù)的 this 綁定到指定的對象上，然后立即執(zhí)行該函數(shù)。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Bob' };

greet.apply(person, ['Hi', '.']); // 輸出: Hi, Bob.

函數(shù)的返回值

函數(shù)可以通過 return 語句返回值。如果沒有顯式返回值，默認(rèn)返回 undefined。

function add(a, b) {
  return a + b;
}
console.log(add(3, 5)); // 輸出 8

匿名函數(shù)與回調(diào)函數(shù)

匿名函數(shù):沒有名稱的函數(shù)稱為匿名函數(shù)，通常作為函數(shù)表達(dá)式或回調(diào)函數(shù)使用。

setTimeout(function() {
  console.log("Hello after 1 second!");
}, 1000);

回調(diào)函數(shù):回調(diào)函數(shù)是一個(gè)函數(shù)，它被傳遞給另一個(gè)函數(shù)作為參數(shù)，并在這個(gè)函數(shù)被調(diào)用后執(zhí)行。

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit) {
  console.log(fruit);
})

自定義回調(diào)函數(shù)：你可以創(chuàng)建一個(gè)自定義的回調(diào)函數(shù)，并在需要的時(shí)候使用它。

function delayedGreeting(name, callback) {
  setTimeout(function() {
    console.log(`Hello, ${name}!`);
    callback();
  }, 2000);
}

function sayGoodbye() {
  console.log('Goodbye!');
}

delayedGreeting('Bob', sayGoodbye);
// 輸出 (2秒后):
// Hello, Bob!
// Goodbye!

遞歸函數(shù) 遞歸函數(shù)是指在函數(shù)內(nèi)部調(diào)用自身的函數(shù)。遞歸函數(shù)需要有終止條件，否則會導(dǎo)致棧溢出。


function factorial(n) {
  if (n === 0) {
    return 1; // 終止條件
  }
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 輸出 120 (5! = 5 × 4 × 3 × 2 × 1)

箭頭函數(shù)與普通函數(shù)的區(qū)別

this 的綁定
this 在箭頭函數(shù)中指向外部函數(shù)的 this，而普通函數(shù)中的 this 指向函數(shù)定義時(shí)的上下文。

let obj = {
  name: 'John',
  regularFunction:function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
}

obj.regularFunction(); // 輸出 "Alice"
obj.arrowFunction(); // 輸出 undefined

不可作為構(gòu)造函數(shù)
箭頭函數(shù)不能用作構(gòu)造函數(shù)，即不能使用 new 關(guān)鍵字調(diào)用箭頭函數(shù)。

高階函數(shù)（Higher-Order Functions）

高階函數(shù)是接受函數(shù)作為參數(shù)或返回函數(shù)的函數(shù)

高階函數(shù)的特點(diǎn):

01接受函數(shù)作為參數(shù):這種函數(shù)可以將其他函數(shù)作為參數(shù)傳遞進(jìn)來，并在內(nèi)部調(diào)用這些函數(shù)。
02返回函數(shù)作為結(jié)果:這種函數(shù)可以返回一個(gè)新的函數(shù)，這個(gè)返回的函數(shù)可以在外部被調(diào)用。

高階函數(shù)的應(yīng)用場景

數(shù)組方法：map、filter、reduce

// map 方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，并返回一個(gè)新數(shù)組，其中每個(gè)元素都是回調(diào)函數(shù)處理后的結(jié)果。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
  return number * 2;
})
console.log(doubled); // [2, 4, 6, 8, 10]

// filter 方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，并返回一個(gè)新數(shù)組，其中包含所有通過回調(diào)函數(shù)測試的元素。

const nubers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
})
console.log(evenNumbers); // [2, 4]

// reduce 方法接受一個(gè)回調(diào)函數(shù)和一個(gè)初始值作為參數(shù)，并返回一個(gè)累積的結(jié)果。

const numbers = [1, 2, 3, 4, 5];

* const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
},0);
console.log(sum); // 15

函數(shù)的提升

函數(shù)聲明會被提升到作用域的頂部，而函數(shù)表達(dá)式和箭頭函數(shù)不會被提升。

console.log(add(3, 5)); // 輸出 8（函數(shù)聲明被提升）
function add(a, b) {
  return a + b;
}

// console.log(multiply(3, 5)); // 報(bào)錯(cuò)，函數(shù)表達(dá)式未被提升
let multiply = function(a, b) {
  return a * b;
};

JavaScript 作用域

作用域（Scope）是 JavaScript 中一個(gè)非常重要的概念，它決定了變量、函數(shù)和語句的可見性和生命周期

基本概念

作用域定義了變量、函數(shù)和語句的可訪問性和生命周期。簡單來說，它決定了哪些地方可以訪問到某個(gè)變量或函數(shù)。

動態(tài)作用域 vs 詞法作用域
JavaScript 使用詞法作用域（lexical scoping），也稱為靜態(tài)作用域。詞法作用域意味著在編寫代碼時(shí)（解析階段），變量的作用域就已經(jīng)確定了，而非在運(yùn)行時(shí)動態(tài)確定。

function outer() {
  let a = 10;
  function inner() {
    console.log(a);
  }
  return inner;
}

const fn = outer();
fn(); // 輸出 10

詞法作用域的好處

可預(yù)測性：變量的作用域在寫代碼時(shí)即可確定，便于理解和調(diào)試。
優(yōu)化空間：瀏覽器或引擎可以提前解析和優(yōu)化代碼。

作用域鏈（Scope Chain）

什么是作用域鏈？
當(dāng)訪問一個(gè)變量時(shí)，JavaScript 引擎會按照作用域鏈逐層查找，直到找到該變量或到達(dá)全局作用域。


let globalVar = "I'm global";
function outer() {
  let outerVar = "I'm outer";
  function inner() {
    let innerVar = "I'm inner";
    console.log(globalVar, outerVar, innerVar);
  }
  inner();
}
outer(); // 輸出 "I'm global I'm outer I'm inner"

作用域鏈的查找規(guī)則

  • 當(dāng)前作用域中查找變量。

  • 如果沒找到，向上一層作用域查找。

  • 直到全局作用域，如果仍未找到，則拋出錯(cuò)誤。

全局作用域（Global Scope）

全局作用域是最大的作用域，所有在函數(shù)外部定義的變量和函數(shù)都屬于全局作用域。

let globalVar = "I'm global";
function globalFunc() {
  console.log("I'm a global function");
}

避免濫用全局變量：全局變量可能會導(dǎo)致命名沖突和意外的副作用。
瀏覽器中全局對象：在瀏覽器中，全局作用域是 window 對象。

局部作用域（Local Scope）

函數(shù)作用域（Function Scope）在 JavaScript 中，函數(shù)內(nèi)部的代碼塊（例如 {}）會創(chuàng)建一個(gè)新的作用域。變量聲明（var、let、const）的規(guī)則如下：

  • var：具有函數(shù)作用域，會變量提升，但不會在塊級作用域中創(chuàng)建新的作用域。

  • let：具有塊級作用域（block scope），在塊級作用域（如 if、for、while 等）中聲明的變量不會泄露到外部作用域。

  • const：與 let 類似，但聲明的變量不可重新賦值。

function example() {
  if (true) {
    let a = 10;
    var b = 20;
  }
  console.log(a); // 報(bào)錯(cuò)：a is not defined
  console.log(b); // 輸出 20
}

example();

塊級作用域（Block Scope）

ES6 引入了 let 和 const，使得塊級作用域變得更為重要。

{
  let a = 10;
  var b = 20;
}
console.log(a); // 報(bào)錯(cuò)：a is not defined
console.log(b); // 輸出 20

作用域提升（Hoisting）變量聲明（var、let、const 和 function）會在代碼運(yùn)行前被提升到其作用域的頂部，但僅有聲明會被提升，賦值不會。


console.log(a); // 報(bào)錯(cuò)：ReferenceError
let a = 10;
console.log(b); // 輸出 undefined
var b = 20;
console.log(c); // 輸出 undefined
function c() {
  console.log("I'm a function");
}

閉包

數(shù)組的基本定義

JavaScript 數(shù)組是一種用于存儲?有序數(shù)據(jù)集合?的特殊對象，可包含任意類型的元素（如數(shù)字、字符串、對象、布爾值等），并通過從 0 開始的數(shù)字索引訪問元素?


核心特性

動態(tài)長度?：數(shù)組長度可動態(tài)增減，無需預(yù)先聲明固定大小?

元素類型靈活?：支持混合存儲不同類型的數(shù)據(jù)

const arr = [1, "text", true, { key: "value" }, [2, 3]];

其中包含數(shù)字、字符串、布爾值、對象和嵌套數(shù)組?

連續(xù)內(nèi)存結(jié)構(gòu)?：數(shù)組在內(nèi)存中表現(xiàn)為一段?連續(xù)的內(nèi)存地址?，數(shù)組名指向首地址?

與普通對象的區(qū)別與聯(lián)系

聯(lián)系?：數(shù)組本質(zhì)是由對象派生而來，可調(diào)用部分對象方法（如 toString）?
區(qū)別?：索引順序?：數(shù)組元素按嚴(yán)格數(shù)字順序排列，對象屬性無序?。操作方法?：數(shù)組提供專有方法（如 push、map）用于操作元素集合，對象無此類內(nèi)置方法?

使用場景

數(shù)據(jù)列表存儲?：適用于需保持順序的數(shù)據(jù)集合（如排行榜、表格行數(shù)據(jù)）?
批量操作?：通過循環(huán)或高階函數(shù)（如 forEach、filter）高效處理多元素?


注意事項(xiàng)

?性能優(yōu)化?：頻繁增刪元素時(shí)，優(yōu)先使用 push/pop（操作尾部）而非 unshift/shift（操作頭部），避免索引重排開銷?

基本概念

數(shù)據(jù)集合?：數(shù)組是?相同類型元素?的集合，所有元素存儲于?連續(xù)的內(nèi)存空間?中，元素類型可以是整型、字符型等任意一致的數(shù)據(jù)類型?
元素約束?：數(shù)組中的元素個(gè)數(shù)不能為0，且必須在定義時(shí)明確大?。–99標(biāo)準(zhǔn)前）或通過變長數(shù)組動態(tài)指定（C99標(biāo)準(zhǔn)后）?

數(shù)組的元素組成

元素標(biāo)識?：數(shù)組元素是?變量?，通過?數(shù)組名 + 下標(biāo)?唯一標(biāo)識。例如 arr 表示數(shù)組 arr 的第一個(gè)元素?
訪問規(guī)則?：元素需先通過數(shù)組定義分配內(nèi)存空間后，才能逐個(gè)通過下標(biāo)訪問，?不支持直接引用整個(gè)數(shù)組??
下標(biāo)范圍?：數(shù)組下標(biāo)從 0 開始，依次遞增至?數(shù)組長度減1?。例如長度為 n 的數(shù)組，最大有效下標(biāo)為 n-1?索引作用?：下標(biāo)用于定位元素在數(shù)組中的?順序位置?，類似于數(shù)學(xué)集合中的索引概念，確保數(shù)據(jù)的有序性和快速訪問?

數(shù)組操作

JavaScript 數(shù)組使用方括號 [] 表示，元素以逗號分隔，可包含任意類型的數(shù)據(jù)（如數(shù)值、字符串、對象、其他數(shù)組等）?

// 混合類型數(shù)組  
const mixedArr = [1, "text", true, { key: "value" }, [4, 5]];  
// 空數(shù)組  
const emptyArr = [];

數(shù)組的創(chuàng)建方式

字面量方式 直接使用方括號 [] 定義元素，是最簡潔、常用的方式?

const arr1 = [1, 2, 3];  
const arr2 = ["a", "b", "c"];

構(gòu)造函數(shù)方式 使用 new Array() 或 Array() 創(chuàng)建，但需注意參數(shù)特性

單一數(shù)值參數(shù)?：表示數(shù)組長度（生成空槽數(shù)組）?

多個(gè)參數(shù)或非數(shù)值參數(shù)?：作為數(shù)組元素?

const arr3 = new Array(3);       // [empty × 3]（稀疏數(shù)組）  
const arr4 = new Array(1, "a");  // [1, "a"]

?其他創(chuàng)建方式

?擴(kuò)展操作符?：復(fù)制或合并現(xiàn)有數(shù)組?

const arr5 = [...arr1, ...arr2];  // [1, 2, 3, "a", "b", "c"]

Array.of()?：明確將參數(shù)作為元素，避免構(gòu)造函數(shù)歧義?

const arr6 = Array.of(5);

Array.from()?：將可迭代對象（如字符串、Set）轉(zhuǎn)換為數(shù)組?

const arr7 = Array.from("abc");

元素訪問與長度獲取

索引訪問?：通過下標(biāo)（從 0 開始）直接獲取元素。

const fruits = ["apple", "banana"]; 
console.log(fruits); 
console.log(fruits.length);

首尾元素?：通過 arr 和 arr[arr.length-1] 獲取首尾元素

數(shù)組長度?：使用 length 屬性獲取元素?cái)?shù)量。

遍歷數(shù)組元素

for 循環(huán)?：通過索引遍歷。

for (let i = 0; i < fruits.length; i++) {  
  console.log(fruits[i]);  
}

forEach 方法?：遍歷元素并執(zhí)行回調(diào)。

fruits.forEach((item, index) => {  
  console.log(index, item);  
});

?高階函數(shù)?：如 map、filter、reduce 等。

onst lengths = fruits.map(fruit => fruit.length); // 計(jì)算長度 ?
const longFruits = fruits.filter(fruit => fruit.length > 5); // 篩選結(jié)果 ?

?元素查找與篩選

?按值查找?：

indexOf()：返回第一個(gè)匹配的索引（無匹配返回 -1）。

lastIndexOf()：返回最后一個(gè)匹配的索引 ?

const idx = fruits.indexOf("banana");

條件查找?：

find()：返回第一個(gè)符合條件的元素。

findIndex()：返回第一個(gè)符合條件的索引

const item = fruits.find(fruit => fruit.startsWith("b"));

批量篩選?：filter() 返回符合條件的新數(shù)組

嵌套數(shù)組的檢索

需在數(shù)組中查找子數(shù)組，可通過以下方式：

循環(huán)檢查?：使用 for 循環(huán)結(jié)合 Array.isArray() 判斷元素是否為數(shù)組。

const arr = [1, [2, 3], 4];  
for (let i = 0; i < arr.length; i++) {  
  if (Array.isArray(arr[i])) {  
    console.log("子數(shù)組:", arr[i]); // [2, 3] ?:ml-citation{ref="4,6" data="citationList"}  
  }  
}

?批量篩選?：通過 filter() 提取所有子數(shù)組。

const subArrays = arr.filter(item => Array.isArray(item));

數(shù)組的擴(kuò)展操作

ES6 擴(kuò)展運(yùn)算符

復(fù)制數(shù)組 用擴(kuò)展運(yùn)算符可快速創(chuàng)建數(shù)組的淺拷貝，避免引用傳遞問題?

const original = [1, 2, 3];  
const copy = [...original]; // 新數(shù)組，與原數(shù)組無引用關(guān)系

合并數(shù)組

合并多個(gè)數(shù)組時(shí)無需調(diào)用 concat，直接通過擴(kuò)展運(yùn)算符實(shí)現(xiàn)?

const arr1 = [1, 2], arr2 = [3, 4];  
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

函數(shù)參數(shù)傳遞

將數(shù)組元素展開為函數(shù)參數(shù)，替代 apply 方法?


function sum(a, b, c) { return a + b + c; }  
const nums = [1, 2, 3];  
sum(...nums); // 6

動態(tài)添加元素?
在現(xiàn)有數(shù)組中插入新元素，保持代碼簡潔性?

const base = [2, 3];  
const newArr = [1, ...base, 4]; // [1, 2, 3, 4]

實(shí)例方法的擴(kuò)展

數(shù)據(jù)操作基礎(chǔ)方法

增刪元素?：

push()/pop()：尾部操作元素?

unshift()/shift()：頭部操作元素?

splice()：任意位置增刪或替換元素?

let arr = [1, 2];  
arr.push(3); // [1, 2, 3]  
arr.splice(1, 1, 4); // [1, 4, 3]

高階函數(shù)處理數(shù)據(jù)

遍歷與轉(zhuǎn)換?：

map()：映射新數(shù)組?

filter()：篩選符合條件的元素?

reduce()：累計(jì)計(jì)算為單個(gè)值?

const nums = [1, 2, 3];  
const doubled = nums.map(x => x * 2); // [2, 4, 6]  
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 6

?查找與判斷?：

find()：返回首個(gè)匹配元素?

some()/every()：判斷元素是否滿足條件?

const users = [{id: 1}, {id: 2}];  
const user = users.find(u => u.id === 2); // {id: 2}

高級技巧

?解構(gòu)賦值結(jié)合擴(kuò)展運(yùn)算符?
提取數(shù)組首尾元素時(shí)，可配合擴(kuò)展運(yùn)算符快速實(shí)現(xiàn)?

const [first, ...rest] = [1, 2, 3];  
console.log(first); // 1  
console.log(rest);  // [2, 3]

與 Math 函數(shù)結(jié)合?
直接傳遞數(shù)組參數(shù)進(jìn)行數(shù)學(xué)計(jì)算?

const nums = [5, 2, 8];  
Math.max(...nums); // 8

數(shù)組的增刪改查

添加元素

末尾添加? push()：添加一個(gè)或多個(gè)元素到數(shù)組末尾，返回新數(shù)組長度。

const arr = [1, 2];  
arr.push(3); // 返回 3，數(shù)組變?yōu)?[1, 2, 3]

支持鏈?zhǔn)秸{(diào)用：arr.push(4).push(5)（需注意返回值變化）?


開頭添加? unshift()：添加一個(gè)或多個(gè)元素到數(shù)組開頭，返回新數(shù)組長度。

arr.unshift(0); // 返回 4，數(shù)組變?yōu)?[0, 1, 2, 3]

性能較低，需移動所有元素索引?

中間插入? splice(startIndex, 0, newElement)：從指定位置插入元素，不刪除原元素。

arr.splice(2, 0, "a", "b"); // 數(shù)組變?yōu)?[0, 1, "a", "b", 2, 3]

刪除元素

末尾刪除? pop()：刪除并返回最后一個(gè)元素。

const last = arr.pop(); // last = 3，數(shù)組變?yōu)?[0, 1, "a", "b", 2]

?開頭刪除? shift()：刪除并返回第一個(gè)元素。

const first = arr.shift(); // first = 0，數(shù)組變?yōu)?[1, "a", "b", 2]

指定位置刪除

splice(startIndex, deleteCount)：刪除指定數(shù)量元素，返回被刪除元素的數(shù)組

const deleted = arr.splice(1, 2); // deleted = ["a", "b"]，數(shù)組變?yōu)?[1, 2]

修改元素

?直接索引賦值 通過下標(biāo)直接修改元素

?使用 splice 替換元素 splice(startIndex, deleteCount, newElement)：刪除并插入新元素。

arr.splice(0, 1, "start"); // 刪除第一個(gè)元素并插入 "start"，數(shù)組變?yōu)?["start", "newValue"] ?

查詢元素

索引訪問? 通過下標(biāo)直接訪問元素：

const elem = arr[1];

條件查詢? includes()：判斷是否包含某元素，返回布爾值。

arr.includes("start"); // true

find()：返回第一個(gè)滿足條件的元素。

const result = arr.find(item => item === "start"); // "start" ?

遍歷查詢? forEach()、map() 等方法遍歷數(shù)組處理數(shù)據(jù)?