JavaScript-函式與箭頭函式

    AllenLi
    Coding

    JavaScript的函式「function」：
    我們可以透過包裝的行為，將程式碼進行整合，並透過呼叫的方式來執行。

    function square(number) {
  return number * number;
};

console.log(square(5));  //25

    亦或是將指定的變數帶入函式中進行計算。

    function add(x, y = 2) {
  return x + y
}
const a = add(10)
console.log(a)  // 12

    JavaScript的箭頭函式運算式「arrow function expression」：
    我們可以將匿名(不需具名)的函式透過簡化的箭頭寫法，讓程式表達的更直觀，比如：

    const fruits = [
  'apple',
  'banana',
  'cherry',
  'pineapple'
];

console.log(fruits.map(fruit => fruit.length)); //[5, 6, 5, 9]

寫法一：
fruits.map(function(fruits) {
  return fruit.length;
}); //[5, 6, 5, 9]

寫法二(取消function，改成箭頭)：
fruits.map((fruit) => {
  return fruit.length;
}); //[5, 6, 5, 9]

寫法三(將fruits中代表每個元素fruit的括弧拿掉)：
fruits.map(fruit => {
  return fruit.length;
}); //[5, 6, 5, 9]

寫法四(當函式中只有執行一項return時，可以省略return與大括號)：
fruits.map(fruit => fruit.length); //[5, 6, 5, 9]

寫法五(透過map建立新的陣列，同時使用解構賦值來取出每個陣列的長度)：
fruits.map(({ length: fruitLength }) => fruitLength); //[5, 6, 5, 9]

寫法六(透過map建立新的陣列，同時使用解構賦值與將原先的 fruitLength 進行省略)：
fruits.map(({ length }) => length); //[5, 6, 5, 9]

    參考資料來源：JavaScript mdn

    Related Posts