陣列的各種操作方法

操作陣列可以先區分為兩大類:
會改變原始陣列長相與複製一個原始陣列來更改

陣列圖片來源：[偷米騎巴哥]操作JS陣列的20種方式

不改變原始陣列，產生新的陣列

.map .filter .slice concat

➤ `.map(function(item, index, array) {return }` 產生一個新陣列

與 forEach 非常類似
map 會 return 一個值，並且新產生一個陣列

map 跟 filter 不同的是: map 可以去做處理並返回








any = ['A', 'B', 'C', 'D', 'E']; 
let any2 = any.map(function(item, index, array) {
  return item + item;
})
console.log(any2);
// ["AA", "BB", "CC", "DD", "EE"]
console.log(any);
// ["A", "B", "C", "D", "E"]

Map 不會對原有的陣列受到任何影響

範例三：組合人名第一個字與最後一個字

字串空格

或是用 eslint

console

➤ `.filter(function(item 當前的值, index, array) {return }` 篩選

.filter(function(item, index, array) {return }
- item 物件值
- index 陣列索引
- array 陣列本身
原有的陣列 any 不會受到影響
map 跟 filter 不同的是: filter
作法與 forEach 類似
- ex: 挑出偶數







any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
let newAny = any.filter(function(item) {
  return item % 2 === 0;  
  // 可以被2整除並等於0的就代表偶數。
})
console.log(newAny)
// [2, 4, 6, 8, 10]

挑出基數






any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
any.filter(function(item) {
  return item % 2 !== 0;  
  // 不能被2整除並不等於0的就代表基數。
})
// [1, 3, 5, 7, 9]









[1, 2, 3].filter((item, index, arr) => {
  arr[i + 1] > 2;
});

// arr[0+1] => arr[1]取出陣列第一位 2 > 2 ? false 
// arr[1+1] => arr[2]取出陣列第二位 3 > 2 ? true
// arr[2+1] => arr[3]取出陣列第三位 undefined > 2 ? false
// 丟出 true 的結果 
// 回傳 2

範例三：找出 1500 年代的人

tips:console.table

➤ `.slice(begin, end)` 取得範圍

與 splice 有點類似
取得範圍，但是 slice 可以從特定範圍變成一個新陣列
原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。
- begin 選擇性 自哪一個索引（起始為 0）開始提取拷貝
  - 可以使用負數索引
  - begin 為 undefined，則 slice 會從索引 0 開始提取
- end 選擇性
  - 至哪一個索引（起始為 0）之前停止提取。
  - 不包含 end
  - 可使用負數索引，表示由陣列的最末項開始提取
  - 省略 end，則 slice 會提取至陣列的最後一個元素
  - end 大於陣列的長度，slice 也會提取至陣列的最後一個元素




any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
any.slice(4, 9);
// [5, 6, 7, 8, 9]
// 從 [4]~[9] 不包含第九的索引值，所以沒有 10

範例：複製一份原有的







any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
let a = any.slice(0);
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a.push("9");
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "9"]

MDN: Array.prototype.slice()

➤ `.concat([連接陣列])` 相連

兩個陣列要串接再一起就要使用 concat
對原有的陣列不影響



any = ['A', 'B']; 
any.concat(['C', 'D', 'E']);
// ['A', 'B', 'C', 'D', 'E']

會改變原始陣列

➤ `.shift()` 拿取出第一個

拿出陣列中第一筆資料

.shift() 是不用帶參數




ary = [1, 2, 3, 4];

console.log(ary.shift()); // 1
console.log(ary); // [2, 3, 4]

➤ `.unshift(parameter)` 放回去第一個

放回去陣列中第一筆資料




ary = [2, 3, 4];

console.log(ary.unshift(1)); // 現在有 4 筆資料
console.log(ary); // [1, 2, 3, 4]

➤ `.pop()` 拿取出最後一個

拿出陣列中最後一筆資料

.pop() 是不用帶參數




ary = [1, 2, 3, 4];

console.log(ary.pop()); // 4
console.log(ary); // [1, 2, 3]

➤ `.push(parameter)` 放回去最後一個

放回去陣列中最後一筆資料




ary = [1, 2, 3];

console.log(ary.push(4)); // 現在有 4 筆資料
console.log(ary); // [1, 2, 3, 4]

➤ `.splice()` 刪除與塞入資料特定位置

取出(刪除)陣列特定位置

splice(start,deleteContent) 可以帶入2個參數
- start 索引位置（從 0 開始）
- deleteContent 刪除幾筆資料量或取出幾筆資料量






ary = ['A', 'B', 'C', 'D', 'E', 'F'];
console.log(ary.splice(2,1)); 
// 索引值第二、刪除一筆
// ['C']
console.log(ary);
// ['A', 'B', 'D', 'E', 'F']

splice(start) 從索引值開始刪到最後





ary = ['A', 'B', 'C', 'D', 'E', 'F'];
console.log(ary.splice(2)); 
// ['C', 'D', 'E', 'F']
console.log(ary);
// ['A', 'B']

塞回陣列特定位置

splice(start,0 , 要加入的值)

第二個參數帶入 0 ，這樣就不會刪掉陣列中的值





var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish 為 ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed 為 [], 沒有元素被刪除

➤ `sort` 針對陣列去做排序

透過 function return 帶入兩個參數

sort 可以做排序，但是是使用字串去做排序，
所以如果要針對數字排序，就要記得帶入 function，







any = [14, 30, 35, 42, 5, 16, 70, 98, 19, 100]; 
any.sort(function(a, b) {
  return a > b ? 1 : -1;
  // return a < b ? 1 : -1; 可得到由大到小排序
});
console.log(any);
// [5, 14, 16, 19, 30, 35, 42, 70, 98, 100]







any = [14, 30, 35, 42, 5, 16, 70, 98, 19, 100]; 
any.sort(function(a, b) {
  return a - b;
  // return b - a; 可得到由大到小排序
});
console.log(any);
// [5, 14, 16, 19, 30, 35, 42, 70, 98, 100]

排列生日，從大到小

帶入兩個人去比較 a b
return 1
return -1
排列上與下的順序

➤ `.reverse()` 倒序




any = ['A', 'B', 'C', 'D', 'E']; 
any.reverse();
console.log(any);
// ['E', 'D', 'C', 'B', 'A']

➤ `.length`

讀取陣列資料、了解陣列長度



any = ['A', 'B', 'C', 'D', 'E'];
console.log(any.length);
// 5

改變陣列

ex: 將陣列給清空




any = ['A', 'B', 'C', 'D', 'E']; 
any.length = 0;
console.log(any);   
// []

ex: 只保留陣列 2 筆資料




any = ['A', 'B', 'C', 'D', 'E']; 
any.length = 2;
console.log(any);  
// ['A', 'B']

➤ `.toString()` 陣列轉字串

陣列轉換成字串，中間會加上 , 隔開



ary = [2, 3, 4, 3,2];
ary.toString(); 
// "2,3,4,3,2"

➤ `.join('可自定符號')` 陣列轉字串

陣列轉換成字串，預設中間會加上 , 隔開



any = ['A', 'B', 'C', 'D', 'E']; 
any.join();  
// "A,B,C,D,E"

可自定除了逗號以外的符號



any = ['A', 'B', 'C', 'D', 'E']; 
any.join('_');  
// "A_B_C_D_E"

帶入空字串



any = ['A', 'B', 'C', 'D', 'E']; 
any.join(''); 
// "ABCDE"

➤ `.reduce(function(prev, next){ return}, 初始值)` 累加

第一累加到最後一筆

reduce 是必須帶入 function，而這 function 通常會帶入兩個參數，通常會叫 prev (前一個), next (後一個)
reduce 必須回傳 (return)，否則會出現 undefined





any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
any.reduce(function(prev, next){
  return prev + next;
});
// 55

帶入的是字串會變成字串組合





any = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; 
any.reduce(function(prev, next){
  return prev + next;
});
// "12345678910"

範例：年份加起來總共幾年

這個 array 可以看到一個 inventor 是從 year 到 passed ，所以想要知道經過多久時間，可以 passed - year(ex: 1955-1879)

0 是累加的初始值，一開始這個 total 是自己設定的，所以要給一個初始才會繼續往上加

➤ `.reduceRight(function(prev, next){ return})`

最後一筆累加到第一筆

通常若使用數字來累積是看不出差異的






any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
any.reduceRight(function(prev, next){
  return prev + next;
});
// 55
// 跟 reduse 得到的答案是一樣的

字串可以看出差異性





any = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; 
any.reduceRight(function(prev, next){
  return prev + next;
});
// "10987654321"

➤ `.indexOf('搜尋的值')` 搜尋陣列的索引位置

一找到資料就會立刻回傳
indexOf索引是從 0 開始

陣列裡若無該值，會回傳 -1







any = ['A', 'B', 'C', 'D', 'E']; 
any.indexOf('B');  
// 1
// A位子代表 0，B則為 1

any.indexOf('J');  
// -1

➤ `.lastIndexOf('搜尋的值')` 搜尋陣列的索引位置

全部陣列找完，再回傳最後一筆資料索引位子







any = ['A', 'B', 'A', 'D', 'A']; 
any.indexOf('A');  
// 0
// 此時會發現indexOf會回傳他第一個找到的A
any.lastIndexOf('A');
// 4
// lastIndexOf他會找到最後一筆，所以最後一筆A在陣列索引4

➤ `findIndex()` 檢查陣列

比對陣列元素，回傳 索引值



const arr=[1,2,3,4,5]
console.log(arr.findIndex(function(e){return e===1}))  
// 0

findIndex()括號裡面是放函式

查找範圍



const arr=[1,2,3,4,5]
console.log(arr.findIndex(function(e){return e>1}))  
//找到2這個元素，並回傳2的索引號1

findIndex()裡面放元素的話，會無法執行

➤ `.some(function(){})` 一個滿足條件，即回傳 true

檢查陣列中的結果是否相同
有一個符合結果相同就會回傳 ture
function … return





any = ['C', 'B', 'C', 'C', 'C']; 
any.some(function(val) {
  return val === 'C'
});
// true

➤ `.every(function(){})` 全部都要滿足條件，才會回傳 true

陣列每一個都符合時就會回傳 true





any = ['C', 'B', 'C', 'C', 'C']; 
any.every(function(val) {
  return val === 'C'
});
// false

檢查每一個字串裡的長度











any = ['A', 'B', 'C', 'D', 'E']; 
any.every(function(val) {
  return val.length === 1;
});
// true

any = ['A1', 'Bw', 'aC', 'dD', 'aE']; 
any.every(function(val) {
  return val.length === 2;
});
// true

➤ `.forEach(function(item, index, array){})` 迴圈

ES6
.forEach(function(item, index, array){} 可以帶入三個參數(參數名稱可自定義)：
- item 物件值
- index 陣列索引
- array 陣列本身









any = ['A', 'B', 'C', 'D', 'E']; 
any.forEach(function(item, index, array) {
  console.log(item, index, array);
})
// A 0 (5)&nbsp;["A", "B", "C", "D", "E"]
// B 1 (5)&nbsp;["A", "B", "C", "D", "E"]
// C 2 (5)&nbsp;["A", "B", "C", "D", "E"]
// D 3 (5)&nbsp;["A", "B", "C", "D", "E"]
// E 4 (5)&nbsp;["A", "B", "C", "D", "E"]

範例：陣列判斷取出，並放入另一個物件中。且透過 forEach 與 innerHTML 整合，一次渲染多筆資料在網頁上

範例二： forEach 與整合 innerHTML 資料

➤ for loop

forEach 簡化了 for loop










any = ['A', 'B', 'C', 'D', 'E']; 

for (let i = 0; i < any.length; i++){
  console.log(any[i],i); // i 代表索引值
}
// A 0
// B 1
// C 2
// D 3
// E 4

tags: `JS`

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我

參考：
[偷米騎巴哥]操作JS陣列的20種方式
 Ray 的操作陣列的20種方式

總彙整：陣列與物件整合運用

tags: `JS`

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我

陣列的各種操作方法

不改變原始陣列，產生新的陣列

➤ .map(function(item, index, array) {return } 產生一個新陣列

➤ .filter(function(item 當前的值, index, array) {return } 篩選

➤ .slice(begin, end) 取得範圍

➤ .concat([連接陣列]) 相連

會改變原始陣列

➤ .shift() 拿取出第一個

➤ .unshift(parameter) 放回去第一個

➤ .pop() 拿取出最後一個

➤ .push(parameter) 放回去最後一個

➤ .splice() 刪除與塞入資料特定位置

➤ sort 針對陣列去做排序

➤ .reverse() 倒序

➤ .length

➤ .toString() 陣列轉字串

➤ .join('可自定符號') 陣列轉字串

➤ .reduce(function(prev, next){ return}, 初始值) 累加

➤ .reduceRight(function(prev, next){ return})

➤ .indexOf('搜尋的值') 搜尋陣列的索引位置

➤ .lastIndexOf('搜尋的值') 搜尋陣列的索引位置

➤ findIndex() 檢查陣列

➤ .some(function(){}) 一個滿足條件，即回傳 true

➤ .every(function(){}) 全部都要滿足條件，才會回傳 true

➤ .forEach(function(item, index, array){}) 迴圈

➤ for loop

tags: JS

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

tags: JS

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

➤ `.map(function(item, index, array) {return }` 產生一個新陣列

➤ `.filter(function(item 當前的值, index, array) {return }` 篩選

➤ `.slice(begin, end)` 取得範圍

➤ `.concat([連接陣列])` 相連

➤ `.shift()` 拿取出第一個

➤ `.unshift(parameter)` 放回去第一個

➤ `.pop()` 拿取出最後一個

➤ `.push(parameter)` 放回去最後一個

➤ `.splice()` 刪除與塞入資料特定位置

➤ `sort` 針對陣列去做排序

➤ `.reverse()` 倒序

➤ `.length`

➤ `.toString()` 陣列轉字串

➤ `.join('可自定符號')` 陣列轉字串

➤ `.reduce(function(prev, next){ return}, 初始值)` 累加

➤ `.reduceRight(function(prev, next){ return})`

➤ `.indexOf('搜尋的值')` 搜尋陣列的索引位置

➤ `.lastIndexOf('搜尋的值')` 搜尋陣列的索引位置

➤ `findIndex()` 檢查陣列

➤ `.some(function(){})` 一個滿足條件，即回傳 true

➤ `.every(function(){})` 全部都要滿足條件，才會回傳 true

➤ `.forEach(function(item, index, array){})` 迴圈

tags: `JS`

tags: `JS`