---
title: 20200813 Astro camp Javascript
tags: Astro Camp, javascript,
---
# 20200813 Astro camp Javascript
### 請參考[PPT](https://reurl.cc/odDg1M)
## 函式

1. 不檢查參數數量
2. 無論如何會接收環境參數
3. destructive assgiment

> 額外補充
> addEventListener 鍵盤事件：
> `key down` 按下鍵盤後(持續)
> `key up` 離開鍵盤後
> `key press` 按下+離開算一次
>

函式有點像半透膜，外面的變數會進來，裡面的變數出不去！

### Destructive assignment
1. array with Destructive assignment
2. Object with Destructive assignment
(Ruby沒有Hash with Destructive assignment)

let ary = [1, 2, 3, 4, 5];

// 一般寫法
let first = ary[0]    //印出1
let second = ary[1]  //印出2

// Destructive assignment 寫法
let ary = [1, 2, 3, 4, 5];
let [first, second, third] = ary;
//會去比較左右兩邊有類似的結構，ary就會被拆開，指派給左邊的變數
console.log(third)  // 印出3

//也可以用...來變化
let [head, ...tails] = ary;
console.log(head);     //印出1
console.log(tails);    //印出5


//結合 Object (ruby的Hash)

let student = {name: 'john', age: 13, gender: 'M'};

//一般寫法
let studentName = student.name;
let studentAge = student.age;

// Destructive assignment 寫法
let {name: studentName, age: studentAge} = student;
// 當key跟我想要命名的變數同名時，可以在簡短成(省略key)
let {name, age} = student;

console.log(name);  //印出john
console.log(age);  //印出13

function baz({name, gender, age: studentAge}) { //變數順序無關
  // do somehting with name and gender
  console.log(name);
  console.log(gender);
  console.log(studentAge);
}

baz(student)  // <- 呼叫時傳參數進去，而function只要求name,gender,age等變數。

for of 語法(類似forEach或each)
of後面接類似array的東西

for(let el of document.querySelectorAll('.inputCol')) {
  el.addEventListener('keypress', (event) => {
    let {keyCode, srcElement} = event;
    if (keyCode === ENTER) {
      checkInputAndLogin(srcElement.id);
    }
      })
}	  

反向寫法，可以省略掉很多if
` if (srcElementId !== 'password') { return; }`

## 集合
1. Array
2. key-value
3. set
4. Tuple
### Array 簡報(10)
#### array.join()

let names = ['apple', 'banana', 'cherry'];
let joinedNames = names.join();
console.log(joinedNames);
//印出 apple,banana,cherry
let joinedNames = names.join('\n');
console.log(joinedNames);
//印出
//apple
//banana
//cherry

#### indexOf()

#### concat()

#### FIFO(queue)
first in first out

#### LIFO(stack)
last in first out

> 查文件時：
> Array開頭的，是要傳整包array的東西進去(ex.[1, 2, 3])
> array開頭的，是傳array裡的element進去(ex.[1,2,3]裡的1)
> static method 不會影響到本身的array
> mutation method會改變原本的array

> 同場加映：
> querySeletorAll選到的東西，是一包類似array卻非array的東西，有順序卻沒有map方法。
>

## Set
有點像array不過內容不能重複

## Tuple 簡報(30)

將Object轉成Tuple

// Object.entries
let pricesByCountry = {
  'tw': 300,
  'us': 10.2,
  'jp': 1250,
}
let result = Object.entries(pricesByCountry)
                   .map(tpl => [tpl[0], tpl[1] * 1.05])

let newPrice = Object.fromEntries(result)
console.log(newPrice)

能用計算出來的不要把它放在資料結構裡
如果物品價格跟成立訂單的價格不一樣

let products = [
  {
    id: 1, name: 'macbook', inventory: 100, price: 28000
  }
]

let order = {
  orderDateTime: '',
  items: [
    {id: 1, productId: 1, qty: 2,} //若這邊不放價格，之後產品價格改變時，資料庫裡已成立的清單價格會跟著一起改
  ]
}