iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 23

[Day 23] JS - 陣列 (Array) 常用方法介紹

前言

JS的基礎觀念介紹告一段落,接下來將會有一些JS的基礎語法介紹、還會有過去線上學習實作專案分享,今天來介紹JS 陣列的基礎與使用方式,以呼應明天的實作專案~

學習資源

  1. MDN - Array,從 MDN 可以查閱到很多陣列的基礎用法。

陣列

  • 陣列用 => 中括號 [ ]
  • 陣列的計算是從零開始(取陣列的索引)
    • 呼應for 迴圈,從0開始,從索引第一個
const arr = [111, 222, 333]
    console.log(arr);
    console.log(arr[1]); //222
    //呼應for 迴圈,從0開始,從索引第一個

陣列基本操作

  1. push():添加一個或多個元素至陣列的末端
const score = [1, 3, 4, 5, 100];
  score.push(1000) ;
console.log(score); //[1, 3, 4, 5, 100,1000]
  1. unshift(): 加入陣列最前面
  score.unshift(88) ;
console.log(score); //[88, 1, 3, 4, 5, 100,1000]
既然有加入陣列,就也會有去除陣列內的資料
  1. pop():從最末端抽走陣列值
 score.pop() ; 
console.log(score); //[88, 1, 3, 4, 5, 100]
console.log(score.pop()); //1000
  1. shift: 移除第一個陣列值
  score.shift() ; 
console.log(score); //[ 1, 3, 4, 5, 100]
console.log(score.shift()); //88
  1. slice:切完後,原本的陣列將不會被修改,會回傳新陣列
  • 複製開始與末點(最後一個不包含)中的內容
const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    //用索引
    console.log(arr.slice(2, 4));//不包含最後一個
    console.log(arr.slice(2, 5));

  • 也可使用slice()來複製原本的陣列
const arr2 = arr.slice();
const arr3 = arr.slice(0);

console.log(arr2); //['a', 'b', 'c', 'd', 'e', 'f', 'g']
console.log(arr3); //['a', 'b', 'c', 'd', 'e', 'f', 'g']
  1. splice():可以加入、刪除陣列中的元素
  • 注意此方法,會更改到原本的陣列
  • splice(索引位置, 數量, 要加入到陣列的元素)
const arr=['Ben', 'Kyle', 'May', 'Shin', 'Mikle'];
arr.splice(1, 0, 'Fan'); //從索引值1後面,插入
console.log(arr); //['Ben', 'Fan', 'Kyle', 'May', 'Shin', 'Mikle']
  • 索引值3 'May' 的後面1個值 'Shin',被取代為 'Eson'
arr.splice(3, 1, 'Eson'); 
console.log(arr); ['Ben', 'Fan', 'Kyle', 'May', 'Eson', 'Mikle']
  • 刪除索引位置為 2('Kyle'),並且刪除數量 2 的陣列值,因此結果就刪除了 'May', 'Eson'
array.splice(2, 2);
console.log(array); // ['Ben', 'Fan', 'Kyle', 'Mikle']

介紹陣列處理方法

  1. filter(): 用於搜尋符合條件的資料
const Name=['Ben', 'Patricia', 'May', 'Shin', 'Mikle'];

const result = words.filter( function(item, index, array){
  return item.length > 4;       // 取得長度大於4
});

console.log(result); // ['Patricia',  'Mikle']

  1. map(): 讓陣列中每個元素執行該函式的任務,最後將執行結果回傳新陣列
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function (item, index, array){
  return item * 2
});

console.log(map1);
//  [2, 8, 18, 32]
  1. forEach()
let data=[30, 40, 100];
let total=0;
data.forEach(function(item,index,arry){
    total+=item;
})

console.log(total); //170

注意:let宣告位置

  • let total=0;,放在回圈內會造成沒有累加的效果

forEach()map() 差異

forEach() 會修改原本的陣列,而map() 方法可以回傳一個新的陣列,並保有原本的舊陣列,另外 forEach() 並不會回傳任何東西,所以寫在 return 裡的東西不會有作用

參考資料
JavaScript 陣列處理方法


上一篇
[Day 22] JS - 事件委派 Delegation
下一篇
[Day 24] DOM Array Methods 實作練習
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言