認識 JavaScript (十五)

閱讀時間約 9 分鐘

※ 函式進階介紹:

  • 箭頭函式:

箭頭函式相比於一般函式,語法相當簡潔。除了少去 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))
raw-image

※ 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]
  1. 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))// 輸出最長的單詞
    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    認識 JavaScript (九)
    閱讀時間約 3 分鐘
    認識 JavaScript (十)
    閱讀時間約 1 分鐘
    認識 JavaScript (十一)
    閱讀時間約 2 分鐘
    認識 JavaScript (十二)
    閱讀時間約 4 分鐘
    認識 JavaScript (十三)
    閱讀時間約 1 分鐘
    認識 JavaScript (十四)
    閱讀時間約 3 分鐘
    你可能也想看
    認識勃根地的頂級名莊 (4) 夜聖喬治村莊中的鷓鴣莊園以及費芙蕾酒莊夜聖喬治 (Nuits-St-Georges) 在行政劃分上,介於勃根地行政中心第戎市和伯恩市之間,是夜丘的第一大城鎮,有不少酒商以此為據點。這篇文章介紹德維拉家族旗下的鷓鴣莊園 (Domaine Des Perdrix),以及費芙蕾酒莊 (Domaine Faiveley)。
    Thumbnail
    avatar
    tengyuan
    2022-05-13
    認識勃根地的頂級名莊 (3) 位於勃根地白葡萄酒的心臟:多芙內酒莊以及樂弗雷酒莊勃根地白葡萄酒的心臟:兩個蒙哈榭村莊 夏山-蒙哈榭 (Chassagne-Montrachet) 村內有 55 個一級園,以及 3 個特級園,有四成的面積種植黑皮諾。生產的白葡萄酒風格通常偏圓潤,帶有熱帶水果的香氣,酒體結構柔和,會多幾分圓潤和飽滿的感覺。 特級園 (Grands Crus)
    Thumbnail
    avatar
    tengyuan
    2022-04-30
    認識勃根地的頂級名莊 (2) - 樂華酒莊 (Domaine Leroy) 與樂華商社 (Maison Leroy)如果提到全球最頂級的勃根地紅葡萄酒,除了前一篇文章提到的羅曼尼·康帝酒莊 (DRC) 以及亨利·賈葉 (Henri Jayer) 之外,當屬由樂華女士 (Lalou Bize-Leroy) 所創立的樂華酒莊 (Domaine Leroy) 可以和他們齊名。
    Thumbnail
    avatar
    tengyuan
    2022-04-24
    認識勃根地的頂級名莊 (1):羅曼尼·康帝酒莊 (DRC) 與酒神亨利·賈葉 (Henri Jayer)我們在上一篇文章介紹了勃根地產區的分級制度。加深對於一個產區印象最好的方式之一,就是認識這個產區的指標性酒莊,知道發生在這片土地上的故事。這篇文章就先來介紹勃根地最知名的兩個傳奇酒莊:人稱 DRC 的羅曼尼·康帝酒莊與「葡萄酒之神」亨利·賈葉 (Henri Jayer)。
    Thumbnail
    avatar
    tengyuan
    2022-04-17
    認識日本右翼思想家大川周明的歷史書寫,及其真假難辨的瘋狂酒田市日枝神社的碑文與略歷中,被譽為「アジア植民地解放の父」的大川,在二戰後,被關押在巢鴨監獄,是GHQ所列名,必須為戰爭罪行負責的甲級戰犯之一。
    Thumbnail
    avatar
    Cathy Tsai │ 蔡凱西
    2022-04-02
    認識為了更有機會認識榕,琳就選了很多堂藝術系二年級才能修的課 -----------在某堂早八課上---------- 老師:「那麼我們這堂課要你們分組進行,大家都找好組別了嗎?」 榕(傳訊息給他的同學):「小美,你會來上課嗎?」 小美(訊息):「不會哈哈哈哈,我準備要退選了」 琳:「我可以的!」
    avatar
    Lin
    2022-01-26
    認識「鋅」在皮膚上的妙用經研究發現,ZPT對於人類健康安全雖然沒有重大危害,但因為在化妝品中還有其他替代成分可用,於是歐盟近期就把 ZPT 列入化妝品禁用物質清單,預計在 2022 年 3 月 1 日起施行監管。但就這部分在台灣衛生法規尚未調整...
    Thumbnail
    avatar
    邱品齊皮膚科醫師
    2021-11-14
    認識常見的主要白葡萄酒品種一般來說,白葡萄品種可分為芳香型的和非芳香型兩個種類:芳香型的葡萄品種包含白蘇維濃 (Sauvignon Blanc)、麗絲玲 (Riesling)、麝香葡萄、格烏茲塔明娜以及特濃情。非芳香型的葡萄品種則有夏多內 (Chardonay) 與灰皮諾 (Pinot Gris/Pinot Grigio)
    Thumbnail
    avatar
    tengyuan
    2021-07-02
    認識常見的主要紅葡萄酒品種影響葡萄酒風味的最大因素,通常會是葡萄品種本身的特性,因為葡萄品種的特性也會影想到後續的採收,釀造和陳年的方式。所以認識葡萄酒的第一課,通常會是認識主要的葡萄品種。這篇文章試著介紹五種常見的紅葡萄:卡本內蘇維翁、梅洛、黑皮諾、希哈,以及格納希。
    Thumbnail
    avatar
    tengyuan
    2021-06-27
    認識腦膜腦炎:燒壞腦袋的罪魁禍首這篇文章想告訴你: ❶ 一名腦炎病童的診斷經過 ❷ 腦炎 v.s. 腦膜炎?病原體如何入侵人體的中樞神經系統? ❸ 孩童嘔吐就是得了腦膜腦炎嗎?中樞神經系統感染的病況解析
    Thumbnail
    avatar
    蒼藍鴿
    2020-12-07