JS-陣列(Array)

發表於 | 分類於

Array 複習 與 ES6 新語法

push、pop、shift、unshift 差異

  • push：加到陣列末端
  • pop：移除最末端
  • shift：移除最前端
  • unshift：加到陣列前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var home = ["爸爸", "媽媽"];

// push：加到陣列末端
var newLength = home.push("老大");
console.log(home); // ["爸爸", "媽媽", "老大"]

// pop：移除最末端
var last = home.pop();
console.log(home); // ["爸爸", "媽媽"]

// shift：移除最前端
var first = home.shift();
console.log(home); // ["媽媽"]

// unshift：加到陣列前端
var newLength = home.unshift("小花");
console.log(home); // ["小花", "媽媽"]

排序與反轉 sort 與 reverse

sort

arr.sort([compareFunction])

如果 compareFunction 沒有被應用, 元素將被轉換為字串並以Unicode碼位來比較並排序。
特別一提，在數值排序中，9 會在 80 前面，但因為數字被轉換成字串，在Unicode順序中 “80” 會在 “9” 前面。

字串比較
1
2
3
4
//大寫英文 Unicode 排在 小寫英文 前面
var stringArray = ["blue", "Humpback", "Beluga", "alice"];

console.log(stringArray.sort()); //["Beluga", "Humpback", "alice", "blue"]
數字比較
1
2
3
4
5
6
7
8
9
10
11
// 數字被轉換成字串
var numbers_01 = [1, 30, 4, 21];
numbers_01.sort();
console.log(numbers_01); // [1, 21, 30, 4]

// 用 compareFunction比較，就不會被轉成「字串」
var numbers_02 = [1, 30, 4, 21];
numbers_02.sort(function(a, b) {
  return a - b;
});
console.log(numbers_02); // [1, 4, 21, 30]

reverse

將整個陣列中的成員順序反轉。

1
2
3
4
const home = ["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"];
home.reverse();

console.log(home); // ["4.老么", "3.老二", "2.老大", "1.媽媽", "0.爸爸"]

另一個情況是字串中的字元，如果要進行反轉的話，並沒有字串中的 reverse 方法，要用這個陣列的 reverse 方法加上字串與陣列的互相轉換的split與join方法，可以使用以下的函式:

字串反轉
1
2
3
4
5
6
7
8
function reverseString(str) {
  return str
    .split("")
    .reverse()
    .join("");
}

console.log(reverseString("ABCDEFG")); // "GFEDCBA"

slice

arr.slice([begin[, end]])

回傳一個新陣列，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const home = ["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"];

// begin為空或0，就是全部複製
console.log(home.slice()); //["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"]
console.log(home.slice(0)); //["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"]

// 僅 begin 參數
console.log(home.slice(2)); //["2.老大", "3.老二", "4.老么"]

// 加 end 參數，擷取到 end 的 index「前」
console.log(home.slice(2, 3)); //["2.老大"]

// 加 end 參數，end index值 超過原陣列個數，沒有關係
console.log(home.slice(2, 9999)); //["2.老大", "3.老二", "4.老么"]

splice

array.splice(start[, deleteCount[, item1[, item2[, …]]]])

可刪除既有元素並／或加入新元素來改變一個陣列的內容(會改變原陣列值)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const home = ["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"];

// 會改變原陣例值
home.splice(2, 0, "小花"); //在索引 2 開始，插入新增字串 '小花'
console.log(home); // ["0.爸爸", "1.媽媽", "小花", "2.老大", "3.老二", "4.老么"]

home.splice(2, 1); //在索引 2 開始，刪除 1個 元素
console.log(home); // ["0.爸爸", "1.媽媽", "2.老大", "3.老二", "4.老么"]

home.splice(2, 3, "巧虎", "琪琪", "桃樂比"); //在索引 2 開始，刪除 3個 元素後，再新增 3個 新元素
console.log(home); // ["0.爸爸", "1.媽媽", "巧虎", "琪琪", "桃樂比"]

// ES6 展開運算子( Spread Operator )
const addArr = ["巧虎", "琪琪", "桃樂比"];
home.splice(2, 3, ...addArr); //在索引 2 開始，刪除 3個 元素後，再新增 3個 新元素
console.log(home); // ["0.爸爸", "1.媽媽", "巧虎", "琪琪", "桃樂比"]

淺拷貝作法

1. ES6 展開運算子( Spread Operator )

1
2
const aArray = [1, 2, 3];
const copyArray = [...aArray];

它也可以用來組合陣列

1
2
const aArray = [1, 2, 3];
const bArray = [5, 6, ...aArray, 8, 9]; // [5, 6, 1, 2, 3, 8, 9]

2. slice

1
2
3
4
const oldArray = [1, 2, 3];

const newArray = oldArray.slice(0); // [1, 2, 3]
const newArray = oldArray.slice();  // [1, 2, 3]

3. concat

1
2
const oldArray = [1, 2, 3];
const newArray = [].concat(oldArray); // [1, 2, 3]

ES6- find 與 findIndex

  • find => 回傳 value
  • findIndex => 回傳 index

基本寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const aArray = [1, 3, 5, 7, 10, 22];

// find
const bValue = aArray.find(function(value, index, array) {
  return value > 6;
});

console.log(bValue); //回傳第一個滿足條件的「value」：7

// findIndex
const cIndex = aArray.findIndex(function(value, index, array) {
  return value > 6;
});

console.log(cIndex); //回傳第一個滿足條件的「index」：3

進階應用

不過當會用到 find 或 findIndex 時，表示要尋找的條件通常比較複雜一點，才能顯現他們比 indexOf 強大之處。

範例 1

從陣列中找出符合條件的 物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 }
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

// find 回傳第一個滿足條件的「value」
console.log(inventory.find(isCherries)); // { name: 'cherries', quantity: 5 }

// findIndex 回傳第一個滿足條件的「index」
console.log(inventory.findIndex(isCherries)); // 2

範例 2

找出質數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

// find 回傳第一個滿足條件的「value」
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

// findIndex 回傳第一個滿足條件的「index」
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

ES6-includes

在陣列中尋找是否包含這個值，如果有就會回傳 true，沒有則會回傳 false。

1
2
3
4
5
6
7
8
// 數字
const numArr = [1, 2, 3];
console.log(numArr.includes(2)); // true

// 字串
const strArr = ["老大", "老二", "老么"];
console.log(strArr.includes("老二")); // true
console.log(strArr.includes("小花")); // false

參考來源

MDN-Array
ES6 陣列語法糖
ES6學習-陣列
数组的扩展