# Javascript學什麼？

### Array.forEach()
若我需要針對一個陣列內的所有資料逐一更改，可以用此方法來免於重複手段，範例如下：

let student = ["大雄","靜香","胖虎","小夫"];

student.forEach(function(item,index){
    student[index] += "同學";
});

console.log(student);    //['大雄同學','靜香同學','胖虎同學','小夫同學']

---
# 學習筆記

let ordered = ["牛肉串","雞皮","羊肉串","花椰菜"];

let bills = ordered.map(function(item,index){
    switch(ordered[index]){
        case "牛肉串":
        case "雞肉串":
        case "豬肉串":
        case "羊肉串":
            return 50;
        
        case "雞屁股":
        case "雞心":
        case "雞皮":
            return 45;
        
        case "花椰菜":
        case "節瓜":
        case "青椒":
            return 40;
        
    }
    
});
let sum = 0;
for (let i = 0; i < bills.length; i++) {
    sum += bills[i];
}


console.log(sum);

物件的屬性宣告在function之中要記得寫完整!

friends                    (x
facebookProfile.friends    (o

let facebookProfile = {
    name : "Wilson",
    friends : 20,
    messages : ["Hello!","Hi"],
    
    postMessage : function(message){
        facebookProfile.messages.push(message);
    },
    deleteMessage : function(index){
        facebookProfile.messages.splice(index,1);
    },
    addFriend : function(){
        facebookProfile.friends++;
    },
    removeFriend : function(){
        facebookProfile.friends--;
    }
}

### Advanced array
有空來寫一下關於array常用的方法
array.splice(index,1)
array.reduce()
array.filter()
關於pass by reference

let array1 = [1,2,3];
let array2 = array1;

array2 = [].concat(array1);    // 

> 忘記Array有什麼用法？參考這篇
> https://sdras.github.io/array-explorer/
### Advenced object
關於pass by reference

let obj1 = {
    name: 'ONE',
    weapon: {
        name: '單手劍'
    }
};
let obj2 = obj1;                                //將obj1的記憶體位址指向obj2
let obj3 = {...obj1};                           //clone一份obj1打包給obj3，僅複製第一層
let obj4 = JSON.parse(JSON.stringify(obj1));    //clone一份obj1打包給obj4，完全複製

obj2.name = 'TWO';       //變更obj2的屬性及obj2中物件的屬性
obj2.weapon.name = '鐵斧';

console.log(obj1,obj2,obj3,obj4)
obj1                    //因為obj2指向obj1的記憶體位址，故變更也會影響obj1
{name :'TWO'
 weapon {name :'鐵斧'}
}
obj2                    
{name :'TWO'
 weapon {name :'鐵斧'}
}
obj3                    //因為是clone的物件，故不會被obj1的改變受影響，但是物件中的物件還是會被影響
{name :'ONE'
 weapon {name :'鐵斧'}
}
obj4                    //他是完全獨立的物件，故不會被obj1影響
{name :'ONE'
 weapon {name :'單手劍'}
}

### Advanced function

#### closures
What doe's `addToTenAndThree` return?

const addTo = x => y => x + y;
const addToTen = addTo(10);
const addToTenAndThree = addToTen(3);

:::spoiler solution

addTo = x => y => x + y    //看作addTo(x) => y => x + y
addTo(x) => y => x + y     //看作addTo(x)(y) => x + y

> 關於colsures參考這篇
> https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Closures

:::
#### currying
#### compose

### DOM

### 前、後端的資料傳遞
query string （不安全的
body form data （不安全的

JSON (JavaScript Object Notation)
是種適用於client & server之間傳遞的文字格式，可以被各種語言閱讀，轉換成前後端各自的語言來運行

JSON.stringify()    /將Javasvript物件或值轉換成JSON格式
JSON.parse()        /將JSON格式轉換成Javascript物件或值

// 暫存
const temp = 'string';

{
    
}

> 關於箭頭函數表示？參考這篇
> https://www.casper.tw/javascript/2017/12/21/javascript-es6-arrow-function/

### AJAX
AJAX 的全名是：Asynchronous JavaScript and XML，有沒有看到開頭那個 A 的全名是：Asynchronous，就代表是非同步送出 Request 的意思。

Promise

> 討論關於synchronous,asynchronous,blocking,non-blocking
> 參考這篇
> https://github.com/aszx87410/blog/issues/49

# React學什麼？
透過NPM下載create-react-app套件，以實現快速建構開發環境（此套件是基於webpack + ES6）
使用以下指令

npx create-react-app my-app
cd my-app
npm start

下載完成切換該目錄後執行它即可！

> React v18以後,不再使用ReactDOM.render,使用ReactDOM.createRoot取代