• 使 Array 填滿指定的值 Array.prototype.fill()
  • 過濾 Array 的資料，用起來跟 LINQ 的 where 一樣 Array.prototype.filter()
  • 找到第一筆相符的資料 Array.prototype.find()
  • 找到第一筆相符資料的 index Array.prototype.findIndex()

Array.prototype.fill()

可讓 Array 填滿指定的值，更改是原本的 Array

參數說明 arr.fill(value, start, end)

  • value : 要填入的值
  • start : 從哪一個元素開始填，預設第0個 (optional)
  • end : 填到哪一個元素，預設是此陣列的長度 (optional)

Note : start 跟 end 若填負數，則是從右邊開始算

fill
  • js
1
2
3
4
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]

Array.prototype.filter()

過濾 Array 的內容，且回傳的 Array 是一個全新的 Array

filter
  • js
1
2
3
4
5
6
7
8
9
10
11
12
function isBigEnough(value,index,array) {
	
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

//arrow function
[12, 5, 8, 130, 44].filter( (value,index,array) =>{
	  
  return value >= 10;

});

Array.prototype.find()

找到第一筆相符的元素，如果都找不到，則回傳 undefiend

參數說明 arr.find(value, index, array)

  • element : 當下元素的 value
  • index : 當下元素的 index ，從 0 開始 (optional)
  • array : array 本身 (optional)
find
  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); 

// arrow function
var result =inventory.find((x) => x.name === 'cherries');

在每一個元素的訪問過程裡面，做了刪除元素的動作，該元素並不會因為被刪除而沒被訪問到。 只是因為該元素已經被刪除，所以訪問到該元素時 value = undefined。

-
  • js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a = [0,1,5,6];

// Shows all indexes, including deleted
a.find(function(value, index) {

  // Delete element 5 on first iteration
  if (index == 0) {
    console.log('Deleting a[2] with value ' + a[2]);
    delete a[2];    
  }
  // Element 5 is still visited even though deleted. value = undefined
  console.log('Visited index ' + index + ' with value ' + value); 
});

console.log(a);
//[0,1,undefined,6]

Array.prototype.findIndex()

回傳第一筆符合條件的 index，若都沒有符合條件或者是 Empty Array 則回傳 -1 。

參數說明 arr.findIndex(value, index, array)

  • element : 當下元素的 value
  • index : 當下元素的 index ，從 0 開始 (optional)
  • array : array 本身 (optional)
findIndex
  • js
1
2
3
4
5
6
7
8
9
function isBigEnough(element) {
      return element >= 15;
    }

  var result = [12, 5, 8, 130, 44].findIndex(isBigEnough); 
  console.log(result); // 3

// arrow function
var result = [12, 5, 8, 130, 44].findIndex((x) => x >= 15);

參考

參考連結