呼，庫存剩2篇，很多篇爛爛，只求完賽囉
還好已經倒數10篇了，
第30天寫心得不算的話，再10篇就完結了，ya~

終於到了第5季，上一系列的第3季實際認真看才發現大部分的大大都自己準備文章
等於是不用筆記，結果前幾天都草草收尾
如果RxJS還是這樣混的話，我會提早宣告，請大家看第6季那幾天就好了
(因為想要2020的娃娃，還是得寫30篇)

好在在各講者的說明下，讓我們對單元測試、整合測試、驗收測試有基礎了解
(再來要精進應該要看angular的testing那一篇了吧)
https://angular.tw/guide/testing
如果網友們有用evernote的習慣，再記得自己把大大們的文章整理進去
早日開始寫測試

其實我覺得技術面可以先寫單元測試(TDD)，等熟了sypOn…那些，
再找個小專案、使用者需求完整且已確認，再正式先寫測試案例(ATTD)

[S05E01][RxJS系列] JS Array 基本介紹
https://www.youtube.com/watch?v=5vxjNo7uDbo&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=21

RxJS系列的開頭第1集，是Kevin大大講解 JS Array 的基本操作
就算你不用RxJS，學會這集，對JavaScript有莫大的幫助(尤其像我這種沒認真學JavaScript的)

一開始導讀文件，順便實測
(中文的文件內容較舊)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array

建立Array的幾種方式

1. var a1=[1,2,3];
2. var a2=new Array(1,2,3);
a1.length // Array的元素個數
3. a2=new Array(3) // 建空間為3的空白Array(empty*3)

怎麼取得Array裡的元素

Array像一組collection，透過index取得元素
a1[0] // 1

迭代陣列

var fruits = ['Apple', 'Banana'];
fruits.forEach(function(item, index, array) {
  console.log(item, index);
});

在javascript裡面，array也是Object，而Object有entries()

console.log(Object.entries(fruits);
// 0:(2)["0","Apple"]
// 1:(2)["1","Banana"]
         ^^ key

console.log(Object.keys(fruits))
// (2) ["0","1"]   ^^^^
console.log(Object.values(fruits))
                    ^^^^
// (2) ["Apple","banana"]

加入元素到Array

• 加到後面

var newLength=fruits.push('Orange');
// ["Apple", "Banana", "Orange"]

• 移除後面

var last = fruits.pop(); // 移除 (最末端的) Orange
// ["Apple", "Banana"];

• 加到前面

var newLength = fruits.unshift('Strawberry') // 加到陣列前端
// ["Strawberry", "Banana"];

• 移除前面

var first = fruits.shift(); // 移除 (最前端的) Apple
// ["Banana"]; // first會取到第1個

a1=[1,2,3,4]
var c=a1.shift(); // c=1,a1=[2,3,4]

splice(針對原array 進行 操作)

array.splice(start[, deleteCount[, item[, item2[,...]]]])

var a1=[1,2,3,4]
        0 1 2 3 位置
a1.splice(1,     2) // [2, 3]
          ^起始  ^ 刪2個
// 不能往前刪
a1.splice(2,-1) // []

// 從後面往前數
[ 1, 2, 3, 4]
 -4 -3 -2 -1 位置
a1.splice(-2,1) // [3] 由後往前數2個，取1個
a1.splice(-4,1) // [1]

// 利用splice來加入元數，在4前面插入3
a1=[1,2,4]
    0 1 2 位置
a1.splice(2,        0,       3) // [1,2,3,4]
          在2的位置  刪除0個   在2的位置前插入3
          
// 把3換成5
a1=[1,2,3,4]
    0 1 2 3
a1.splice(2,1,5) // 位置2移除1個元素，並插入5，[1,2,5,4]

// 插入多個元素
a1=[1,2,5,4]
a1.splice(2,1,  5,6,7,8,9,10) // [1,2,5,6,7,8,9,10,   4]
                ^^^^^^^^^^^^要插入的元素，可以一直串下去，不需要加{}或()

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

複製陣列

複製一個全新的陣列

在javascript的資料型別裡，有些是By Value，有些是By Ref

• By Value(傳值)
  例如:文字、數字

var a1=1  // a1=1
var b2=a1 // a1=1 , a2=1
a2=2      // a1=1 , a2=2，當a2改變時，不會影響a1。不同的記憶體空間

• By Reference(傳址)

var a1=[1,2,3];
var a2=a1;
a2.push(4); // a1=[1,2,3,4] , a2=[1,2,3,4]，當a2改變時，a1也會改變
            // a1、a2指到同一個陣列

方法一
因為Array是By Reference
所以例用.slice()來創造全新的陣列

var shallowCopy = fruits.slice(); // 這就是複製陣列的方式
// ["Strawberry", "Mango"]

方法二
使用 [...Array] 的寫法

a2 = [...a1];
      ^^^

用array.slice(起使,結束)取Array中的值

slice()是pure function
每次呼叫結果都一樣，不會改變原陣列

var a1 = [1,2,3,4];
          0 1 2 3  //索引(位置)
              ^
var a2 = a1.slice(2, 3); // 取到[3]
                     ^到3結束，但不包含3 
var a3 = a1.slice(2, 4); // 取到[3, 4]

// 也可以用負號，代表由後往前數
var a1 = [1 , 2, 3, 4];
          0   1  2  3
          -4 -3 -2 -1 
var a4 = a1.slice(2,      -1)
                  ^第3個   ^^倒數第1個(不含倒數第1個，所以是取到倒數第2個)

Array也是Object

Array是類似list的物件(Object)，
可以使用它們的原型(Prototype)擁有的方法(methods)來執行遍歷和變異操作

清空Array，但唯持同一份

var fruits=[1,2,3,4];

// 方法一
fruits=[]

// 方法二
fruits.length=0; // []
       ^^^^^^^^

// 如果增加length，會變成empty
fruits.length=5; // [empty*10]

// 如果length變小，會刪除陣列
fruits.length=2; // [1,2]

判斷是不是Array的方法

Array.isArray([]); // true
Array.isArray(1); // false

Array.of()

可以用Array.of()建立Array
Array.of(1,2,3,4); // [1,2,3,4]

Array.from()

用類似陣列或可列舉物件，來建立新的Array
常用於DOM元素的操作

// NodeList(84)很像陣列，但不是陣列，雖可直接操作，但缺少一些功能，如map
// 有forEach()，但沒有map()、filter()
var a1 = document.querySelectorAll('div') // NodeList(84) [...]
var a2=Array.from(a1); // 轉成陣列

copyWithin()

複製元素到某個位置
用起來有點燒腦

var array1=[1,2,3,4,5];
            0 1 2 3 4
                  ^ 複製到位置0
array.copyWithin(0,3,4); // [4,2,3,4,5]
                   ^^^ 位置從3開始4束結(但不包含4)

var array1=[1,2,3,4,5];
            0 1 2 3 4
array1.copyWithin(1,3); // [1, 4,5, 4,5]
                    ^會把位置3以後，的元素4,5，複製到位置1

Array.concat() 串接2個Array，並回傳新的陣列

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

array1.concat(array2); // Array ["a", "b", "c", "d", "e", "f"]

# 也可用以[...]的寫法
var array3 = [...array1, ...array2];

entries()

用法較新，要開polyfill.ts

var a = ['a','b','c'];
var iterator = a.entries();

for (let e of iterator){
    console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
    ^ 會有key value

Array.every()

傳條件進去，判斷陣列中每個元素是否符合條件
全部符合，才會回傳true

Array.some() 則是只要有1個符合條件，就回傳true

// 1. 可以定義一個function
function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var a1 = [1, 30, 39, 29, 10, 13];

console.log(a1.every(isBelowThreshold));
                         ^^^^^^^^^^^^^^^^
// 2. 也可以寫arrow function
a1.every(x=> x<40);

// 3. 進階用法
//    arr.every(callback(element[, index[, array]])[, thisArg])
a1.every((currentValue, idx, arr) => {
    console.log(currentValue, idx, arr);
    return currentValue<5;
});

Array.fill()

填值

var array1 = [1, 2, 3, 4];
              0  1  2  3
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4)); // 位置2~4(不含位置4)填0
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5] // 從位置1以後全部填5

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6] // 全部填6

Array.find()

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
                        ^^^^^^^^^^^^^^^^^
  return element > 10; // 12
});

// arrow function
a1 = [{name:'Kev',{name:'John'}]
var user = a1.find(x => x.name === 'John'); // {name:"John"}
                   ^^^^
如果都沒找到，會回傳undefined

// findIndex
var userIdx = a1.findIndex(x => x.name === 'John'); // 1
                 ^^^^^^^^
// a1[userIndex] {name:"John"}
// 用途:移除陣列的元素，用findIndex找出index，再用splice()移除元素

// findIndex()類似indexOf()，找不到會回傳-1

// lastIndexOf() 取得符合條件的最後一個index

Array.forEach()

var array1 = ['a', 'b', 'c'];
// 以下3種寫法結果一樣
// 1.
array1.forEach(function(element) {
  console.log(element);
});
// 2.
array1.forEach(element => console.log(element));
// 3.
for(let i=0;i<array1.length;i++){
    console.log(array1[1]);
}

// 可以把callback function單獨抽出來，可重複使用
function forMathod(currentValue){
    console.log(currentValue);
}

array1.forEach(forMathod);

Array.includes()

是否有包含那個值or元素

// 1、數字
var array1 = [1, 2, 3];
console.log(array1.includes(2)); // true

// 2、字串
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false，要完全相同

Array.join()

串接所有元素，回傳字串

var a1=[1,2,3]
a1.join(); // "1,2,3"
a1.join(' '); // "1 2 3"
a1.join('-'); // "1-2-3"

Array.reduce()

• MDN的範例

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

• Kiven大大的範例

const array1=[1,2,3,4]
array1,reduce((lastValue, currentValue)=>{
    return accumulator + currentValue;
},0);
  ^ 初使值

Array.reduceRight()

從右邊開始算

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
                              <- ^^^^^    
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.reverse()，通常會跟排序搭配使用

就既有陣列，反轉陣列

a1=[1,2,3,4,5];
a1.reverse(); // [5,4,3,2,1]