Zi 字媒體

Array prototype Introduction – 佛祖球球

2021/12/25

blogjohnsonluorg

Array prototype Introduction

ECMAScript：6

在 Javascript 中，Array instances 是繼承自 Array.prototype。

以下就介紹幾個常見的，由 Array.prototype 提供的陣列操作方法。

find()、findIndex()

find() 與 findIndex() 通常用在尋找陣列中的值。

範例

let itemArr = [
  {
    item: 'Pork',
    price: '100'
  },
  {
    item: 'Beef',
    price: '200'
  },
  {
    item: 'Apple',
    price: '10'
  }
];

// Find array Index
let index = itemArr.findIndex(function (element) {
  return element.price == 10;
});

// Find array Index with ES6
let indexES6 = itemArr.findIndex(element => element.price == 10);

// Find array value with ES6
// 若條件不符，會回傳 undefined
let item = itemArr.find(element => element.price == 10);

sort()、reverse()

sort() 是用來進行陣列的排序。

Notice： sort() 的排序順序是根據字串的 Unicode 編碼位置。

範例

// Sort array
let nameArr = ['Mag', 'Johnson', 'Febr'];
// [ 'Febr', 'Johnson', 'Mag' ]
nameArr.sort();

// 排序順序是根據字串的 Unicode 編碼位置
let numArr = [12, 3, 5, 53, 12, 53, 47];
// [ 12, 12, 3, 47, 5, 53, 53 ]
numArr.sort();

// 透過Compare function 設定條件(ascending sort)
// [ 3, 5, 12, 12, 47, 53, 53 ]
numArr.sort(function (a, b) {
  // 設定條件，當 a > b 時才會進行交換
  return a - b;
});

// ES6 (descending sort)
numArr.sort((a, b) => b - a);

let itemArr = [
  {
    item: 'Pork',
    price: '100'
  },
  {
    item: 'Beef',
    price: '200'
  },
  {
    item: 'Apple',
    price: '10'
  }
];

// 針對 Object 排序
itemArr.sort((a, b) => a.price > b.price ? 1 : -1);

// Reverse
numArr.reverse();

splice()

splice() 是用來控制陣列元素的去留。

範例

let months = ['Jan', 'March', 'April', 'June'];
// 加入 Feb 在 1 的位置
// [ 'Jan', 'Feb', 'March', 'April', 'June' ]
months.splice(1, 0, 'Feb');

// 把 June 取代成 May
// [ 'Jan', 'Feb', 'March', 'April', 'May' ]
months.splice(4, 1, 'May');

// 從 1 開始往後刪除 4 筆資料
// [ 'Jan' ]
months.splice(1, 4);

filter()

filter() 方法是直接根據條件產生一個新的陣列。

範例

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
let result = words.filter(function (word) {
  return word.length > 6;
});

// ES6
let resultES6 = words.filter(word => word.length > 6);

map()、reduce()

map() 會走訪陣列中每一個元素，將元素根據你的條件進行處理再回傳新的集合。

reduce() 會代入一個計數器和陣列的每個元素，根據你的條件進行處理再回傳最後結果。

範例

// Map
let arr = [1, 4, 9, 16];
// 所有數值乘以 2
let map1 = arr.map(item => item * 2);

// 只有 index 0 的數字乘以 2
let map2 = arr.map((item, index) => {
  return index === 0 ? item * 2 : item;
});

// Reduce
let arr2 = [1, 2, 3, 4];
let result = arr2.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

Categories: JavaScript

Tags: javascript