」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 陣列

JavaScript 陣列

發佈於2024-08-28
瀏覽:821

JavaScript Arrays

什么是数组?

数组是一种存储有序元素集合的数据结构。在 JavaScript 中,数组被归类为一种特殊类型的对象,可以存储数字、字符串、对象或其他数组。数组中的元素括在方括号 [ ] 中并使用从零开始的索引。从零开始的索引意味着数组的第一个元素的索引为 0,第二个元素的索引为 1,依此类推。

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

如何修改或操作数组?

数组中元素的索引

可以通过将值分配给空索引来将新元素添加到数组中。

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

可以通过将新值重新分配给现有索引来修改数组中的元素。

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

数组方法

数组还可以使用数组方法进行修改或操作,例如“push”、“pop”、“unshift”、“shift”、“slice”和“splice”。

'推()'

'push'方法接受一个或多个元素作为参数,将这些元素添加到数组末尾,并返回修改后的数组的长度。

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'流行音乐()'

“pop”方法不带参数,删除数组的最后一个元素,并返回删除的元素。

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'取消移位()'

'unshift'方法接受一个或多个元素作为参数,将这些元素添加到数组的开头,并返回修改后的数组的长度。

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'转移()'

“shift”方法不带参数,删除数组的第一个元素,并返回删除的元素。

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'片()'

“slice”方法采用两个可选参数(startIndex、endIndex),并返回一个新数组,其中包含从 startIndex 到(但不包括)原始数组的 endIndex 的元素。
如果省略 startIndex,则使用 0。
如果省略 endIndex,则使用数组长度。负索引号可用于从数组末尾开始倒数。

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'拼接()'

“splice”方法接受一个或多个参数(startIndex、deleteCount、element1、element2...)并返回一个包含所有删除元素的新数组。从startIndex 开始,删除deleteCount 个元素,并将以下元素参数添加到从startIndex 开始的数组中。如果省略deleteCount,则删除从startIndex 到数组末尾的所有元素。如果省略元素参数,则不添加任何元素。

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

由于“push”、“pop”、“unshift”、“shift”和“splice”修改了原始数组,因此它们被归类为破坏性方法。 “切片”方法使原始数组保持完整,因此它被归类为非破坏性。

扩展运算符 '...'

要以非破坏性方式向数组添加元素或复制数组,可以使用扩展运算符。扩展运算符将数组扩展为其元素。

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

如果没有扩展运算符,原始数组将嵌套在新数组中。

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

迭代数组方法

迭代数组方法对数组中的每个元素调用提供的函数并返回一个值或新数组。使用三个参数调用提供的函数:当前元素、当前元素的索引以及调用该方法的原始数组。

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

迭代数组方法的一些示例包括:“find”、“filter”、“map”和“reduce”。

'寻找()'

'find'方法接受一个函数作为参数,并返回数组中满足该函数条件的第一个元素。

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'筛选()'

“filter”方法与“find”方法类似,但返回满足给定函数条件的所有元素的数组。

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'地图()'

“map”方法返回一个新数组,其中包含对原始数组中每个元素调用该函数的结果。

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'减少()'

“reduce”方法接受一个函数和一个初始值作为参数。提供的函数接收四个参数:累加器、当前值、当前索引和原始数组。提供的初始值是数组第一个元素的累加器的值。每个元素的函数结果用作数组中下一个元素的累加器的值。如果未提供初始值,则累加器设置为数组的第一个元素,并从第二个元素开始调用回调函数。

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc   number), 0);
// returns 15
版本聲明 本文轉載於:https://dev.to/jae_jeong_56b53bffb105974/javascript-arrays-3hhp?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • PHP 設計模式:轉接器
    PHP 設計模式:轉接器
    適配器設計模式是一種結構模式,允許具有不相容介面的物件一起工作。它充當兩個物件之間的中介(或適配​​器),將一個物件的介面轉換為另一個物件期望的介面。這允許那些因為具有不同介面而不相容的類別在不修改其原始程式碼的情況下進行協作。 適配器結構 適配器模式一般由三個主要元素組成: 客戶端:期望與特定介...
    程式設計 發佈於2024-11-06
  • 了解 PHP 中的 WebSocket
    了解 PHP 中的 WebSocket
    WebSockets 通过单个 TCP 连接提供实时、全双工通信通道。与 HTTP 不同,HTTP 中客户端向服务器发送请求并等待响应,WebSocket 允许客户端和服务器之间进行连续通信,而无需多次请求。这非常适合需要实时更新的应用程序,例如聊天应用程序、实时通知和在线游戏。 在本指南中,我们将...
    程式設計 發佈於2024-11-06
  • Visual Studio 2012 支援哪些 C++11 功能?
    Visual Studio 2012 支援哪些 C++11 功能?
    Visual Studio 2012 中的 C 11 功能隨著最近發布的 Visual Studio 2012 預覽版,許多開發人員對 C 11 功能的支援感到好奇。雖然 Visual Studio 2010 已提供部分 C 11 支持,但新版本提供了擴充的功能。 Visual Studio 201...
    程式設計 發佈於2024-11-06
  • 如何在Windows啟動時自動執行Python腳本?
    如何在Windows啟動時自動執行Python腳本?
    在 Windows 啟動時運行 Python 腳本每次 Windows 啟動時執行 Python 腳本對於自動化任務或啟動基本程式至關重要。多種方法提供不同等級的自訂和使用者控制。 自動執行腳本的選項:1。打包為服務:建立 Windows 服務並安裝它。此方法在電腦上運行腳本,無論使用者是否登入。需...
    程式設計 發佈於2024-11-06
  • 探索 Astral.CSS:徹底改變網頁設計的 CSS 框架。
    探索 Astral.CSS:徹底改變網頁設計的 CSS 框架。
    在快節奏的 Web 開發世界中,框架在幫助開發人員高效創建具有視覺吸引力和功能性的網站方面發揮著關鍵作用。在當今可用的各種框架中,Astral CSS 因其獨特的設計理念和易用性而脫穎而出。本文深入探討了 Astral CSS 的功能、優點和整體影響。 什麼是星界? Astral 是一個現代 C...
    程式設計 發佈於2024-11-06
  • ESnd 箭頭函數綜合指南
    ESnd 箭頭函數綜合指南
    ES6简介 ECMAScript 2015,也称为 ES6 (ECMAScript 6),是对 JavaScript 的重大更新,引入了新的语法和功能,使编码更高效、更易于管理。 JavaScript 是用于 Web 开发的最流行的编程语言之一,ES6 的改进大大增强了其功能。 本...
    程式設計 發佈於2024-11-06
  • 揭示演算法和資料結構:高效程式設計的基礎
    揭示演算法和資料結構:高效程式設計的基礎
    在這一系列文章中,我將分享我的學習歷程,涉及在學術環境和大型科技公司中廣泛討論的兩個主題:演算法和資料結構。儘管這些主題乍看之下似乎令人畏懼,特別是對於像我這樣由於其他職業挑戰而在整個職業生涯中沒有機會深入研究這些主題的人,但我的目標是讓它們易於理解。 我將從最基本的概念開始,然後轉向更高級的主題...
    程式設計 發佈於2024-11-06
  • 如何使用 pprof 來分析 Go 程式中的 goroutine 數量?
    如何使用 pprof 來分析 Go 程式中的 goroutine 數量?
    使用 pprof 分析 Goroutine 數量使用 pprof 分析 Goroutine 數量檢測 Go 程式中潛在的 Goroutine 洩漏需要監控一段時間內活動的 Goroutine 數量。雖然標準 go 工具 pprof 命令提供了對阻塞的深入了解,但它並不直接解決 goroutine 計...
    程式設計 發佈於2024-11-06
  • 如何將類別方法作為回調傳遞:了解機制和技術
    如何將類別方法作為回調傳遞:了解機制和技術
    如何將類別方法作為回調傳遞後台在某些場景下,您可能需要將類別方法作為回調傳遞給其他函數以提高效率具體任務的執行。本文將引導您完成實現此目的的各種機制。 使用可調用語法要將函數作為回調傳遞,您可以直接將其名稱作為字串提供。但是,此方法不適用於類別方法。 傳遞實例方法類別實例方法可以使用陣列作為回調傳遞...
    程式設計 發佈於2024-11-06
  • 網頁抓取 - 有趣!
    網頁抓取 - 有趣!
    一個很酷的術語: CRON = 依指定時間間隔自動安排任務的程式設計技術 網路什麼? 在研究專案等時,我們通常會從各個網站編寫資訊 - 無論是日記/Excel/文件等。 我們正在抓取網路並手動提取資料。 網路抓取正在自動化這個過程。 例子 當在網路上搜尋運動鞋時...
    程式設計 發佈於2024-11-06
  • 感言網格部分
    感言網格部分
    ?在學習 CSS 網格時剛剛完成了這個推薦網格部分的建立! ?網格非常適合建立結構化佈局。 ?現場示範:https://courageous-chebakia-b55f43.netlify.app/ ? GitHub:https://github.com/khanimran17/Testimoni...
    程式設計 發佈於2024-11-06
  • 為什麼 REGISTER_GLOBALS 被認為是 PHP 中的主要安全風險?
    為什麼 REGISTER_GLOBALS 被認為是 PHP 中的主要安全風險?
    REGISTER_GLOBALS 的危險REGISTER_GLOBALS 是一個 PHP 設定,它允許所有 GET 和 POST 變數在 PHP 腳本中用作全域變數。此功能可能看起來很方便,但由於潛在的安全漏洞和編碼實踐,強烈建議不要使用它。 為什麼 REGISTER_GLOBALS 不好? REG...
    程式設計 發佈於2024-11-06
  • Nodemailer 概述:在 Node.js 中輕鬆發送電子郵件
    Nodemailer 概述:在 Node.js 中輕鬆發送電子郵件
    Nodemailer 是用於發送電子郵件的 Node.js 模組。以下是快速概述: Transporter:定義電子郵件的傳送方式(透過 Gmail、自訂 SMTP 等)。 const transporter = nodemailer.createTransport({ ... }); 訊息物...
    程式設計 發佈於2024-11-06
  • JavaScript 中的輕鬆錯誤處理:安全賦值運算子如何簡化您的程式碼
    JavaScript 中的輕鬆錯誤處理:安全賦值運算子如何簡化您的程式碼
    JavaScript 中的錯誤處理可能很混亂。將大塊程式碼包裝在 try/catch 語句中是可行的,但隨著專案的成長,調試就變成了一場噩夢。幸運的是,有更好的方法。輸入 安全賦值運算子 (?=) - 一種更乾淨、更有效的錯誤處理方法,可將程式碼保持可讀性並簡化偵錯。 什麼是安全賦...
    程式設計 發佈於2024-11-06
  • Javascript 很難(有悲傷)
    Javascript 很難(有悲傷)
    这将是一个很长的阅读,但让我再说一遍。 JAVASCRIPT很难。上次我们见面时,我正在踏入 Javascript 的世界,一个眼睛明亮、充满希望的程序员踏入野生丛林,说“这能有多难?”。我错得有多离谱??事情变得更难了,我(勉强)活了下来,这是关于我的旅程的一个小混乱的故事。 变量:疯狂的开始 ...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3