[javascript] javascript array methods practice VI

• 可累加 Array 的元素，也可以用來操作元素的值然後回傳 Array.prototype.reduce()
• 與 Array.prototype.reduce() 相似，差別在於是從右邊開始執行 Array.prototype.reduceRight()
• 反向 Array 本身的值 Array.prototype.reverse()
• 移除 Array 的第一個元素 Array.prototype.shift()

Array.prototype.reduce()

可累加 Array 的元素，累加元素的方式

參數說明

• initialValue : 給 accumulator 的初始值，如果沒有給此參數的話，accumulator 會取 Array 第一個元素的值，且會少跑 index = 0 的第一個迴圈
• accumulator : 累加過後的值
• currentValue : 現在的 value
• array : 整個 Array 的值

reduce int

• js

var initialValue = 10;
    var result = [0, 1, 2, 3, 4].reduce(
  (accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue;
  },
  initialValue
);
  // result = 20

用來攤平 Array

Flatten an array of arrays

• js

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( acc, cur ) => acc.concat(cur),
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

用來計算 Array 裡面相同元素有幾個

Counting instances of values in an object

• js

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

與 spread operator 混用，取得某一個欄位的所有值

Bonding arrays contained in an array

• js

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// 如果 initialValue 沒有傳會造成 undefined is not a function 的 Exception
// allbooks - list which will contain all friends' books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, []);

// allbooks = [
//   'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

Array.prototype.reduceRight()

• 與 Array.prototype.reduce() 的差別，是從右邊開始執行。

reduceRight

• js

var a = ['1', '2', '3', '4', '5']; 
var left  = a.reduce(function(prev, cur)      { return prev + cur; }); 
var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 

console.log(left);  // "12345"
console.log(right); // "54321"

Array.prototype.reverse()

反向 Array 的值

reverse

• js

var a = ['one', 'two', 'three'];
var reversed = a.reverse(); 

console.log(a);        // ['three', 'two', 'one']
console.log(reversed); // ['three', 'two', 'one']

Array.prototype.shift()

pop() 是移除 Array 最後一個元素，而 shift 是移除 Array 的第一個元素，

shift

• js

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before:', myFish);
// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']

var shifted = myFish.shift(); 

console.log('myFish after:', myFish); 
// myFish after: ['clown', 'mandarin', 'surgeon']

console.log('Removed this element:', shifted); 
// Removed this element: angel

參考

參考連結