DEV Community

SGsSY
SGsSY

Posted on

The Most Familiar Stranger - JavaScript - 陣列

分享記錄檔 YouTube

JS 的陣列是一種有序的數據集合,其內部存儲的元素可以是任意類型的數據。

它有以下的特點:

  1. 有序性:陣列中的每個元素都有一個索引,可以通過索引來訪問和修改其中的元素。
  2. 長度可變:陣列的長度是可變的,可以動態添加或刪除元素。
  3. 可存儲不同數據類型:JS 的陣列可以存儲任何數據類型,包括字串、數字、物件等。

創建陣列

直接創建:使用方括號[],在其中添加元素,每個元素之間用逗號隔開

const arr = [1, 2, 3, 'four', {name: 'John'}];
Enter fullscreen mode Exit fullscreen mode

使用Array()構造函數創建:

const arr = new Array(1, 2, 3, 'four', {name: 'John'});
Enter fullscreen mode Exit fullscreen mode

操作陣列

push():在陣列的末尾添加一個或多個元素

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

console.log(arr);   // [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

pop():從陣列的末尾刪除一個元素

const arr = [1, 2, 3];
arr.pop();

console.log(arr);   // [1, 2]
Enter fullscreen mode Exit fullscreen mode

shift():從陣列的開始刪除一個元素

const arr = [1, 2, 3];
arr.shift();

console.log(arr);   // [2, 3]
Enter fullscreen mode Exit fullscreen mode

unshift():在陣列的開始添加一個或多個元素

const arr = [1, 2, 3];
arr.unshift(0);

console.log(arr);   // [0, 1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

splice():在陣列的任意位置添加或刪除元素

const arr = [1, 2, 3];
arr.splice(1, 1, 4);

console.log(arr);   // [1, 4, 3]
Enter fullscreen mode Exit fullscreen mode

reverse():將陣列元素順序反轉

const arr = [1, 2, 3, 4, 5];
arr.reverse();

console.log(arr);   // output: [5, 4, 3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

⚠️ 以上的操作都會直接異動原始陣列

💡 在 forEach() 執行中異動 array 會怎樣呢?

  1. 減少陣列元素:部分元素將不會被遍歷到
  2. 增加陣列元素:在執行 forEach 前要執行的長度就已經被設定了,所以在陣列後面加入的元素將不會被遍歷到

slice():回傳一個新陣列,其中包含原陣列的指定部分,可傳入兩個參數,第一個為起始索引 ( 包含 ),第二個為結束索引 ( 不包含 )

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);

console.log(newArr);   // [2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

concat():回傳一個新陣列,其中包含原陣列和傳入的陣列或元素

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2, 5);

console.log(newArr);   // [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

map():回傳一個新陣列,其中包含將原陣列每個元素經過回調函式處理後的結果

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2);

console.log(newArr);   // [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

⚠️ 以上的操作都會回傳一個新陣列

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay