react學習手冊-chapter2函數語言程式設計筆記

Day10發表於2018-09-27
ReactAPT函數程式設計筆記

命令式和宣告式

  • 宣告式程式設計是一種程式設計風格
  • 採用宣告式程式設計風格，程式碼對執行結果的描述遠勝於執行過程；語法本身描述了將會發生什麼，相關的執行細節被隱藏。
  • 採用指令式程式設計風格，程式碼重點關注的是達成目標的具體過程

函數語言程式設計

  • 函數語言程式設計是宣告式程式設計的一部分
  • 一個函式被當作第一類成員時，他不僅可以被宣告為一個變數，而且可以被當成函式引數傳遞，甚至可以作為函式的執行結果被返回。函式就是資料，可以像變數一樣，被儲存、檢索或者在應用程式內部傳遞。
// 被宣告成一個變數
const log = message => console.log(message) ;
// 作為其他函式的引數
const insideFn = logger => logger('hello');
// 作為其他函式的執行結果被返回
const createScream = logger => message =>
    logger(message.toUpperCase()+'!!!')
// 一個箭頭以上，便是我們宣告的是高階函式
複製程式碼

函數語言程式設計的核心概念

  • 不可變性：在不修改原生資料結構的情況下，在這些資料結構的口碑上進行編輯，並使用他們取代原生資料；
// 改變原有資料
let color_lawn={
    title: 'lawn',
    color: '#00ff00',
    rating: 0
};
function rateColor(color, rating){
    color.rating = rating;
    return color;
};
// 不改變原生資料
var rateColor = function (color, rating){
    return Object.assign({}, color, {rating: rating});
}
// or
const rateColor = (color, rating) => 
    ({
        color,
        rating
    })
// 注意圓括號包裹返回物件式必須的，因為箭頭不能指向一個物件的花括號
複製程式碼
  • 純函式：
    1. 是一個返回結果只依賴於輸入引數的函式。
    2. 純函式至少需要接收一個引數並且總返回一個值或者其他函式。
    3. 不應該修改或者影響任何傳給他的引數
    4. 易於可測試
// 非純函式，沒有接受引數，沒有返回值或函式，而且修改了其作用域之外的變數frederick
var frederick = {
    name: 'Frederrick Douglass',
    canRead: false,
    canWrite: false
};
function selfEducate () {
    frederick.canRead = true;
    frederick.canWrite = true;
    return frederick;
};
// 純函式
const selfEducate = person => 
    ({
        ...person,
        canRead: true,
        canWrite: true
    })
// react 中，UI用純函式表示
const Header = props => <h1>{props.title}</h1>
複製程式碼
  • 資料轉換：將資料從一個型別轉換到另一個型別。介紹幾個不會改變原資料本身，而是在原資料基礎上，進行操作後，返回一個新資料。
    1. join();
    2. filter();
    3. map();
    4. Object.keys()
    5. reduce()
  • 高階函式：可以操作其他函式的函式。可以將函式當作引數傳遞，也可以返回一個函式，或者兩個兼而有之。
// 將其他函式當作引數傳遞的函式
Array.map、Array.filter、Array.reduce
// 柯里化(Curring):將某個操作中已經完成的結果保留，知道其餘部分後續也完成後可以一併提供的機制
const userLogs = userName => message =>
    console.log(`${userName}->${message}`);
const log = userLogs('world');
log('hello~'); // world->hello~

複製程式碼
  • 遞迴：使用者建立的函式呼叫自身的一種技術
const countDown = (value, fn) => {
    fn(value);
    return (value > 0) ? countDown(value-1, fn) : value
};
countDown(10, value => console.log(value))
複製程式碼
  • 合成:將小型的純函式整合到一起。合成他們，以串聯或並聯的方式對他們進行呼叫，或者可以使用點負好連線在一起，其作用是獲得上一個函式的返回值。合成的目標是通過整合若干簡單函式構成一個更高階的函式。

相關文章