iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

每日攝取一點資料結構和演算法系列 第 4

Day4: [資料結構] Array —  陣列

https://ithelp.ithome.com.tw/upload/images/20210904/20128604yXojHnLUmG.jpg

Array是資料結構的一種,概念就像置物櫃一樣,每個櫃子都可以存放資料並且都有自己的編號稱為索引值index,Array為連續的記憶體位置,因此讀取資料非常快速,只要透過 array[index]就可以拿到資料了,時間複雜度為O(1),不過如果需要新增或刪除資料,就會有牽一髮動全身的問題,假如刪除了陣列的第一個資料,則後續的資料都需要向前遞補,時間複雜度為O(n),n為陣列的長度,以下就來介紹陣列常用的方法。

https://ithelp.ithome.com.tw/upload/images/20210904/20128604NgXU8YoSlC.png
array的索引值是從0開始

宣告一個空陣列

let arr = []

//在建立陣列時就先賦值
let memberList = ['Tom', 'Jack', 'Alice'];

Array[index]

取得特定位置的值

memberList[0]; //'Tom'

Array.length

獲取陣列的長度

memberList.length; //3

Array.pop()

移除陣列最後一個值,並回傳移除的項目

memberList.pop(); // 'Alice'

Array.push(value)

在陣列的最後面新增一個值

memberList.push("Rose");

Array.shift()

移除陣列的第一個值,並回傳移除的項目

memberList.shift();

Array.unshift(value)

在陣列的最前面新增一個值

memberList.unshift("Shane");

Array.indexOf(value)

尋找目標對象在陣列中的索引值,如果找不到的話就會回傳-1

memberList.indexOf("Jack"); //1

Array.lastIndexOf(value)

取指定對象最後一個出現的索引值,如果找不到的話就會回傳-1

let student = ['Tom', 'Marry', 'Waston', 'Tom']
let lastPosition = student.lastIndexOf('Tom')
console.log(lastPosition) // 3

Array.includes(value)

檢查該陣列是否有這個值,有的話回傳true,沒有的話回傳false

memberList.includes("Jack"); //true

Array.findIndex(value)

尋找目標對象在陣列中的索引值,如果找不到的話就會回傳-1

let student = [{id:1, name:'Tom'},{id:2, name:'Marry'},{id:3, name:'Waston'},{id:4, name:'Tina'}]
let res = student.findIndex((item) => {
 return item.name == 'Marry'
})
console.log(res) //1

Array.slice(begin, end)

用來切割陣列,不會改變原陣列

  • begin:起始的index ,若為-1則代表從倒數第一個開始算
  • end:結束的index ,若不填則代表選取到陣列最後一個元素
let memberList = ['Tom', 'Jack', 'Alice', 'Zora', 'Mike'];
memberList.slice(0, 2); //["Tom", "Jack"]
console.log(memberList) //['Tom', 'Jack', 'Alice', 'Zora', 'Mike'];

//如果想要用slice做淺拷貝可以這樣寫
memberList.slice()

Array.splice(begin, deleteCount, addItem)

用來切割陣列,會回傳切除的部位,當陣列經過splice的處理之後,原陣列也會跟著改變

  • begin:起始index 若為-1則代表從倒數第一個開始算
  • deleteCount:要刪除的個數
  • addItem:要添加的元素
let memberList = ['Tom', 'Jack', 'Alice', 'Zora', 'Mike'];
memberList.splice(0, 2) //["Tom", "Jack"] //回傳被切割出來的陣列
console.log(memberList) //["Alice", "Zora", "Mike"] // 原陣列被修改了

//帶入第三個參數addItem
let memberList = ['Tom', 'Jack', 'Alice', 'Zora', 'Mike'];
memberList.splice(0, 2, 'Dan') //["Tom", "Jack"] //回傳被切割出來的陣列
console.log(memberList) //["Dan", "Alice", "Zora", "Mike"]

Array.forEach(callback)

遍歷陣列除了傳統的for迴圈之外,也可以使用forEach或是for of

//forEach
memberList.forEach((item, index, array) => {
  console.log(`name${item}`, `index${index}`);
});

//for of
for (let value of memberList) {
  console.log("name", value);
}

Array.map(callback)

類似工廠的概念,陣列的元素會被逐一加工,最後會回傳一個處理過後陣列

let student = ['Tom', 'Marry', 'Waston', 'Petter']
let result = student.map(item => {
 return `**${item}**`
})
console.log(result) //['**Tom**', '**Marry**', '**Waston**', '**Petter**']

Array.filter(callback)

過濾符合條件想要篩選出來的對象,若沒有則回傳空陣列

let family =['Tom','Marry','Waston','Petter']
let res = family.filter(item => {
  return item.includes('o')//搜尋誰的名字裡含有"o"的
})

console.log(res) //['Tom', 'Waston']

Array.find(callback)

面試很喜歡問find跟filter的差異,filter會回傳一個陣列包含所有符合條件的對象,find則是只能回傳第一個符合條件的對象,沒有的話則return undefined

let family =['Tom','Marry','Waston','Petter']
let res = family.find(item => {
  return item.includes('o')//搜尋誰的名字裡含有"o"的
})

console.log(res) //'Tom' 只回傳第一個找到的

Array.every(callback)

檢查陣列的每一個項目是否符合條件,只要有一個對象不符合就return false

let list = ['tea','soda','water']
let res = list.every(item => {
  return item.length == 3 //是否每個項目的長度都大於3
})
console.log(res) //false

Array.some(callback)

陣列中只要有一個對象符合條件,就return true

let list = ['tea','soda','water']
let res = list.some(item => {
  return item.length >= 5 //是否項目的長度大於5
})
console.log(res) //true

Array.sort(callback)

將陣列由小到大排序,字母的話按照a-z,如果沒有帶入callback function,就會將陣列每個項目轉換成字串來比對,不過這裡就會發現一個問題,為甚麼300會排在55的前面?因為以比對字串來說,300的「3」小於55的「5」,因此才會出現300比55還小的這種詭異情形。

let family =['Tom','Marry','Waston','Petter']
family.sort() //['Marry', 'Tom', 'Tom', 'Waston']

let num = [12,25,55,300]
num.sort() //[12, 25, 300, 55]

num.sort((prev, next) => next - prev);
console.log(num);  //[300, 55, 25, 12] 由大到小排列
num.sort((prev, next) => prev - next);
console.log(num);  //[12, 25, 55, 300] 由小到大排列

Array.reverse()

反轉陣列的順序

let member = ['Tom','Marry','Waston','Petter']
let res = member.reverse()
console.log(res) //['Petter', 'Waston', 'Marry', 'Tom']

Array.concat()

將多個陣列串聯成同一個陣列

let teamA = ['Tom','Marry','Waston','Petter']
let teamB = ['Kevin','Joe','Vicky','Roy']
let teamAll = teamA.concat(teamB)
console.log(teamAll) 
//["Tom", "Marry", "Waston", "Petter", "Kevin", "Joe", "Vicky", "Roy"]

Array.reduce(callback)

將陣列的元素傳入callback處理,最後陣列會化作單一值(引用MDN的說明)
array.reduce(callback(accumulator, currentValue, currentIndex, arr), initialValue)

  • accumulator:用來累積回呼函式回傳值的累加器(accumulator)或 initialValue。累加器是上一次呼叫後,所回傳的累加數值
  • currentValue:原陣列目前所迭代處理中的元素。
  • currentIndex (非必填):原陣列目前所迭代處理中的元素之索引。若有傳入 initialValue,則由索引 0 之元素開始,若無則自索引值 1 之元素開始。
  • array(非必填):呼叫 reduce() 方法的陣列。
  • initialValue(非必填):於第一次呼叫 callback 時要傳入的累加器初始值。若沒有提供初始值,則原陣列的第一個元素將會被當作初始的累加器
let array = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;// 1 + 2 + 3 + 4
console.log(array.reduce(reducer));
// expected output: 10  // 5 + 1 + 2 + 3 + 4
console.log(array.reduce(reducer, 5));
// expected output: 15

因此用reduce來找陣列裡面最大或是最小的數字也是很方便的

let array = [1, 2, 3, 4];
let res = array.reduce((accumulator, currentValue)=>{
  return Math.max(accumulator, currentValue)
})
console.log(res)
//output: 5

Array.reduceRight(callback)

跟reduce差不多,不過順序變成由右至左,如果是做數字加總那結果是一樣的,如果是組字串那就可以看得出差異

let array = ['a', 'b', 'c', 'd', 'e']; 
let left  = array.reduce((prev, cur)=>{ return prev + cur; }); 
let right = array.reduceRight((prev, cur)=> { return prev + cur; }); 

console.log(left);  // "abcde"
console.log(right); // "edcba"

Array.from(target)

可以將類陣列轉換成陣列
Array.from(arrayLike, mapFn , this)

  • 類陣列(array-like)物件: 物件具有 length 屬性以及索引化(indexed)的元素
  • mapFn(非必填) :可以傳入map function來做進一步的處理
  • this(非必填): mapFn 函式執行時的 this 對象
Array.from('Hello')
 //output: ['H','e','l','l','o']

假如今天我想要建立一個數字1–99的陣列可以怎麼做?一個一個慢慢寫當然是可以,只是寫完可能就天黑了,使用Array from搭配map一行輕鬆搞定。

Array.from({length: 99}, (v, i) => i+1)

Array.flat()

函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列,會傳入參數來指定巢狀陣列展開的深度,沒有傳的話預設是1。

let arr1 = [1, 2, [3, 4]];
arr1.flat();  // [1, 2, 3, 4]
let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

Array.join()

將陣列裡的項目組成字串,可指定間隔字串

let family =['Tom','Marry','Waston','Petter']
let str = family.join('!')
console.log(str) //"Tom!Marry!Waston!Petter"

Array.fill()

填滿的概念,把大家通通變成指定的元素,會改變原本的陣列

let student = ['Tom','Marry','Waston','Tom']
var res = student.fill('shane')
console.log(res) 
//['shane', 'shane', 'shane', 'shane']

最後放上Tommy大大繪製的陣列操作大全,最常用陣列操作方法都列在上面了!
https://ithelp.ithome.com.tw/upload/images/20210904/20128604WFd4Ns5ICO.jpg
*圖片來源:*https://github.com/tooto1985/js-array-operations


上一篇
Day3: Big O — 時間複雜度與空間複雜度
下一篇
Day5: [資料結構] - Map
系列文
每日攝取一點資料結構和演算法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言