認識 JavaScript (十五)

※ 函式進階介紹：

• 箭頭函式：

箭頭函式相比於一般函式，語法相當簡潔。除了少去 function 關鍵字，如果只有一個參數，箭頭函式可以省略括號；只有一行程式碼，就是直接簡單返回一個變數或簡單的表達式，可以省略大括號和 return。例子如下：

//一般函式計算平方用的寫法
const square = function (n)  {
  return n*n
}

//用箭頭函示取代function寫法
const square = (n) => {
  return n*n
}

//用箭頭函示更精簡寫法，可以省略花括號和 return 關鍵字
const square = n => n * n

//結果​
console.log(square(10))

※ Javascript已經定義好的函示：

1. Arrary(陣列)常用函式：

• push：會修改原始陣列，將指定的元素添加到陣列的尾部

//確認長度和陣列的新內容
const arrary = [1,2,3,4,5]
console.log(arrary.push(6)) // 輸出陣列的新長度，即 6
console.log(arrary)// 輸出陣列的新內容 [1, 2, 3, 4, 5, 6]

//確認數組中添加了元素
const arrary = [1, 2, 3, 4, 5]
arrary.push(6)  // 將 6 加入到陣列末尾
console.log(arrary)// 輸出陣列的新內容 [1, 2, 3, 4, 5, 6]

• reverse：用於顛倒一個陣列中元素的順序。這個方法會直接修改原始陣列。

//手動實現陣列反轉的方法
const arrary = [1, 2, 3, 4, 5]
const reverse = function (a) {
  const temp = [] //建立一個空的arrary用來存儲反轉後的元素。
  //使用一個 for 迴圈遍歷陣列
  for (let i = a.length - 1; i >=0; i--) {
    temp.push(a[i])//將當前元素 a[i] 加入到 temp中。temp 陣就會按照 a 的逆順序來存儲元素。
  }
   return temp //函數最後返回 temp 陣列，它現在包含了 a 的所有元素的逆順序
}
//調用 reverse 函數並印出傳入的 arrary 結果。
console.log(reverse(arrary) ) // 輸出將會是 [5, 4, 3, 2, 1]

//使用內建函式 .reverse()​
const arrary = [1, 2, 3, 4, 5]

console.log(arrary.reverse() ) // 輸出將會是 [5, 4, 3, 2, 1]

• map：讓陣列中每個元素執行完該函式後，結果回傳到一個新的陣列。

const arrary = [1, 2, 3, 4, 5]

const squareArrary = arrary.map((n)=> n*n)

console.log(squareArrary) //輸出將會是[1, 4, 9, 16, 25]

• find()：用於從一個數據中查找符合特定條件的元素，結果只會回傳第一個符合條件的值。

const array = [1, 2, 3, 4, 5]

// 尋找第一個大於3的數字
const found = array.find(function(item) {
  return item > 3
})

console.log(found)//輸出: 4

//用箭頭函示更精簡寫法，可以省略花括號和 return 關鍵字
const found = array.find(item => item > 3)

console.log(found) //輸出: 4

• filter()：經過迭代過濾完資料後 filter 會回傳一個新的陣列不會影響到原來的陣列資料。

const array = [1, 2, 3, 4, 5]
// 過濾出大於3的數字
const filtered = array.filter(function(item) {
  return item > 3
})
console.log(filtered)//輸出: [4, 5]

//用箭頭函示更精簡寫法，可以省略花括號和 return 關鍵字
const filtered = array.filter(item => item > 3)
console.log(filtered)//輸出: [4, 5]

2. String(字串)常用函式：

• split()：當我們輸入的文字檔時，可以利用split()切割字串。

const string = 'Hello World!'
//切割
console.log(string.split(" "))//輸出: ["Hello", "World!"]

• slice()：當我們輸入的文字檔時，可以利用slice()切片或擷取字串中特定部分。
• 說明：只有一個參數時，該參數代表切割的起始點（包含該位置），切割將從該位置一直進行到字符串的末尾。

const string = 'Hello World!'
//切片
//從索引 5 開始切片，一直到字符串的結束
console.log(string.slice(5))//輸出: [" World!"]

※ 函示範例：字串顛倒(一)

條件："abcdef" => "fedcba"

使用到的函示：

• string.split():切割字串
• array.reverse():顛倒陣列
• array.join():array內的東西連起來變成string

const stringReverse = function (s)  {
  return s.split("").reverse().join("")
}
console.log(stringReverse("abcdef"))

//用箭頭函示更精簡寫法，可以省略花括號和 return 關鍵字
const stringReverse = s => s.split("").reverse().join("")

console.log(stringReverse("abcdef"))

※ 函示範例：找出最長的單字(二)

條件："Save time and money with the cloud platform loved by developers"

=> "developers"

使用到的函示：

• string.split():切割字串
• .length:單字長度

const s = "Save time and money with the cloud platform loved by developers"
const findLongestWord = function (s) {
 const words = s.split(" ")//用空白鍵來做分割
 let longestWord = words[0]//假設第一個是最長的字，使用 let 來宣告
  //用for迴圈來跑遍整個字串
 for (let i = 1; i < words.length; i++) {
   //比大小
   if (words[i].length > longestWord.length) {
     longestWord = words[i]
   }
 }
  return longestWord
}


console.log(findLongestWord(s))// 輸出最長的單詞

• Array.reduce() : 陣列累加，比大小 妙招。
• 說明：可以讓陣列中的每個元素，透過提供的函數進行累計處理，將陣列化為單一值，常常拿來應用於陣列中每個元素的「累加」或是「比較」。

const s = "Save time and money with the cloud platform loved by developers"
const findLongestWord = function (s) {
  return s.split(" ").reduce((longest, words) => {
    return words.length > longest.length ? words : longest
  }, "");
}
console.log(findLongestWord(s))// 輸出最長的單詞