JavaScript 程式札記 : Array 陣列的操作方法 (上)

更新於 發佈於 閱讀時間約 3 分鐘

本文將介紹陣列的基本操作方法,包括建立陣列、存取元素、陣列遍歷和修改陣列等,接下來將逐一介紹這些操作,並附上程式碼範例,讓你更易於理解和運用。

1.push()

push()可以將值加入到陣列的最後一個位置 。

let array = [1, 2, 3];
array.push(4, 5);
console.log(array); // [1, 2, 3, 4, 5]

2.pop()

pop()會移除(取出)陣列的最後一個元素。

let array = [1, 2, 3];
let array2 = array.pop();
console.log(array); // [1, 2]
console.log(array2); // 3

3.shift()、unshift()

shift() 會移除陣列的第一個元素,unshift() 則會將指定的元素添加到第一個位置。

let array = [1, 2, 3];
array.shift();
console.log(array); // [2, 3]
array.unshift(0);
console.log(array); // [0, 2, 3]

4.reverse()

reverse()會將陣列反轉。

let array = [1, 2, 3];
array.reverse();
console.log(array); // [3, 2, 1]

5.splice()

splice()有三個參數,依序是要移除或添加的陣列索引、要移除的長度(填0則不會移除陣列的任何元素)、要添加的內容。

let array = [7, 6, 5];
array.splice(1, 1, 4);
console.log(array); // [7,4,5]

let array2 = [7, 6, 5];
array2.splice(1, 0, 4);
console.log(array2); // [7,4,6,5]

6.sort()

sort()可以針對陣列的元素進行排序。

let array = [3, 1, 2];
array.sort();
console.log(array); // [1, 2, 3]

7.copyWithin()

copyWithin()有三個參數,依序是要替換的位置 (必填)、開始複製的起始點 (選填,預設 0),最後一個是停止複製的元素的結束點 (選填,預設等於陣列長度)。

let array = [10, 20, 30, 40, 50];
array.copyWithin(2, 0, 3);
console.log(array); // [10,20,10,20,30]

8.fill()

fill()有三個參數,第一個是準備要替換的值 (必填),第二個是開始替換的起始點 (選填,不設定就全部替換),第三個是停止替換的元素的的結束點 (選填,預設是陣列的長度)。

let array = [0, 0, 0, 0, 0];
array.fill(9, 0, 3)
console.log(array) // [9,9,9,0,0]

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性,position是用於控制網頁元素在頁面上的排列,接下來將逐一介紹position屬性的五種不同值:static, relative, absolute, fixed, 和 sticky,以及它們如何影響元素的排列。
本文將介紹 CSS Flexbox,CSS Flexbox 是網頁設計的佈局工具,Flexbox 能使元素的排列和對齊變得更加靈活和直觀,從而大大簡化了響應式網頁設計的過程,通過了解 Flexbox 的概念和屬性,你將能夠利用 Flexbox 創建靈活且響應性強的網頁佈局。
在網頁中,每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子,要做到這點,我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起,讓你了解如何使用 CSS 選擇器。
JavaScript 的命名規則相當重要,它有些特定的慣例和限制。例如,變數和函式通常使用小駝峰式(firstName)命名。然後 JavaScript 對大小寫敏感,所以lastName和lastname是不同的變數。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁,在現今多裝置的網頁設計中,可以透過 CSS Media Queries 來讓我們根據不同的裝置特性,如螢幕尺寸、解析度等,來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念:margin(外邊距)、padding(內邊距)、border(邊框)和 box-sizing(盒模型),接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性,position是用於控制網頁元素在頁面上的排列,接下來將逐一介紹position屬性的五種不同值:static, relative, absolute, fixed, 和 sticky,以及它們如何影響元素的排列。
本文將介紹 CSS Flexbox,CSS Flexbox 是網頁設計的佈局工具,Flexbox 能使元素的排列和對齊變得更加靈活和直觀,從而大大簡化了響應式網頁設計的過程,通過了解 Flexbox 的概念和屬性,你將能夠利用 Flexbox 創建靈活且響應性強的網頁佈局。
在網頁中,每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子,要做到這點,我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起,讓你了解如何使用 CSS 選擇器。
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
介紹如何使用 JavaScript 中的陣列基本增刪元素方法,包括新增、刪除和替換元素的詳細說明。介紹的主要方法有 unshift、push、shift、pop、splice 和 slice,並解釋它們的使用場景和返回值。
Thumbnail
陣列(Array)是 JavaScript 中用來儲存一組有序資料的集合。 陣列可以包含各種資料型別的值,例如數字、字串、布林值,甚至其他陣列或物件。了解陣列的基本操作是編寫高效 JavaScript 程式碼的重要基礎。
Thumbnail
這篇內容,將會講解什麼是陣列,以及與陣列相關的知識。包括陣列的簡介、陣列的資料限制、陣列的維度、一維陣列、二維陣列。
Thumbnail
Array可以說是各種語言除了基本型別之外,最常用的資料型別與容器之一了。 Array 這種連續格子狀的資料結構,在Python要怎麼表達呢? 建立一個空的陣列 最簡單也最直接的寫法就是 array = [] # Python list [] 就對應到大家熟知的array 陣列型態的資料結
※ 好用的陣列迭代器:forEach forEach 的使用時機: 需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法。 forEach 的必要參數是一個函式: forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。 語法:
※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
Thumbnail
分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
今天要來嘗試的是,如何不用好用的Array.map 方法,來實現 Array.map 的功能。 What is Array.map map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。 簡單來說就是把陣列內的每一個值,個別跑函式,把新的值回傳出成
(略),array 是用來將陣列的值進行累加,我們來看看怎麼怎麼達成吧: Given an integer array nums, a reducer function fn, and an initial value init, return the final result obtained
Thumbnail
題目敘述 題目給定我們一個輸入陣列nums 要求我們以正、負交叉排列的方式重組陣列,並且必須保持原本的相對順序。 並且以陣列的形式輸出返回答案。 例[5, 1, -2, -3] 重排後為 [5, -2, 1, -3] 題目的原文敘述 測試範例 Example 1: Input:
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
介紹如何使用 JavaScript 中的陣列基本增刪元素方法,包括新增、刪除和替換元素的詳細說明。介紹的主要方法有 unshift、push、shift、pop、splice 和 slice,並解釋它們的使用場景和返回值。
Thumbnail
陣列(Array)是 JavaScript 中用來儲存一組有序資料的集合。 陣列可以包含各種資料型別的值,例如數字、字串、布林值,甚至其他陣列或物件。了解陣列的基本操作是編寫高效 JavaScript 程式碼的重要基礎。
Thumbnail
這篇內容,將會講解什麼是陣列,以及與陣列相關的知識。包括陣列的簡介、陣列的資料限制、陣列的維度、一維陣列、二維陣列。
Thumbnail
Array可以說是各種語言除了基本型別之外,最常用的資料型別與容器之一了。 Array 這種連續格子狀的資料結構,在Python要怎麼表達呢? 建立一個空的陣列 最簡單也最直接的寫法就是 array = [] # Python list [] 就對應到大家熟知的array 陣列型態的資料結
※ 好用的陣列迭代器:forEach forEach 的使用時機: 需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法。 forEach 的必要參數是一個函式: forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。 語法:
※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
Thumbnail
分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
今天要來嘗試的是,如何不用好用的Array.map 方法,來實現 Array.map 的功能。 What is Array.map map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。 簡單來說就是把陣列內的每一個值,個別跑函式,把新的值回傳出成
(略),array 是用來將陣列的值進行累加,我們來看看怎麼怎麼達成吧: Given an integer array nums, a reducer function fn, and an initial value init, return the final result obtained
Thumbnail
題目敘述 題目給定我們一個輸入陣列nums 要求我們以正、負交叉排列的方式重組陣列,並且必須保持原本的相對順序。 並且以陣列的形式輸出返回答案。 例[5, 1, -2, -3] 重排後為 [5, -2, 1, -3] 題目的原文敘述 測試範例 Example 1: Input: