JavaScript函數介紹：5分鐘了解JavaSc

JavaScript函數介紹：5分鐘了解JavaScript

么是函數?

把一段相對獨立的具有特定功能的代碼塊封裝起來，形成一個獨立實體，就是函數，起個名字(函數名)，在后續開發中可以反復調用。函數的作用就是封裝一段代碼，將來可以重復使用。推薦了解黑馬程序員web前端課程。

為什么要使用函數?為了解決代碼的重用!減少代碼量。

函數的分類

系統內置函數和程序員自定義函數

定義函數

function 函數名([參數列表]){
    函數體
}

結構說明：

·function它是定義函數的關鍵字不可以省略。

·函數名它的命名規則與變量名是一樣的

（1）可以使用大小寫英文字母、下劃線(_)、美元符號($)、數字組成
（2）不能使用數字開頭
（3）不能使用JS中的關鍵字和保留字作為函數名
（4）如果函數是由多個單詞組成的，那么可以使用下劃線連接法和駝峰法
（5）嚴格區分大小寫

·函數名后面緊跟著一對小括號這一對小括號不能省略

·小括號里面可能有參數，我們將其稱之為形參

·小括號后面緊跟著一對大括號這一對大括號不能省略

·大括號里面是函數體

注意：函數定義了一定要調用函數

調用函數

格式：

    函數名([實參列表])

注意：在定義函數時如果有形參反過來說在調用的時候也要有實參但是這個不是絕對的！

同名函數后面的會將前面的覆蓋

函數一定是先定義后再調用

函數的參數

函數的參數分為兩種：

形式參數和實際參數

形式參數：在定義函數的時候的參數就稱之為形式參數，簡稱“形參”。在定義函數的時候在函數名的后面的小括號里面給的變量名。

實際參數：在調用函數的時候的參數就稱之為實際參數，簡稱“實參”。

在一個函數中，參數的多少是根據功能來定義的！

使用函數來動態的輸出M行N列的表格

一般在函數體里面不會有輸出語句，只會有一個return關鍵字，將我們要輸出的內容返回給函數的調用者。

·return在英文中表示“返回”的意思

·return關鍵字是在函數體里面使用。

它在函數體使用有兩層含義：

當函數體里面遇到了return關鍵字以后，當前的這個函數就不會再往下進行執行了。

2.它會向函數的調用者返回數據(重點)返回值

格式：return數據;

在調用函數時可以定義一個變量要接收到這個函數的返回值

注意：

我們在以后的工作中，函數體里面盡量不要有輸出語句(document.write alert console.log )，盡量的使用return關鍵字將數據返回給函數的調用者。

特別強調：

·在一個函數里面，return關鍵字可以有多個，但是return只會執行一次；

·return關鍵字它只能返回一個數據，如果需要返回多個數據，我們可以將多個數據使用數組的方式來保存，然后再將數組返回。

匿名函數

什么是匿名函數？

沒有名字的函數稱之為匿名函數！注意：匿名函數在JS中使用最多。

匿名函數也是需要調用的！

將匿名函數賦值給變量或者是事件

a)將匿名函數賦值給變量，然后通過變量名加上小括號來調用匿名函數

b)將匿名函數賦值給事件 *****

將匿名函數賦值給事件，那么匿名函數什么時候才會執行？它要等到事件觸發了以后，匿名函數才會執行。

什么是變量的作用域？

指變量在什么地方可以使用，什么地方不可以使用。

變量作用域的分類

變量作用域分為：全局作用域和局部作用域。

變量的作用域是通過函數來進行劃分的。

在函數外面定義的變量我們將其稱為全局變量，它的作用域是全局的。

全局作用域：在任何地方都可以訪問到的變量就是全局變量，對應全局作用域

局部作用域：在固定的代碼片段內可訪問到的變量，最常見的例如函數內部。對應局部作用域(函數作用域)

問：是否能夠提升局部變量的作用域呢？將局部變量的作用域提升至全局作用域。在函數里面定義的變量也能夠在函數外面訪問到。

只需要將函數里面定義的變量的var關鍵字給去掉就可以實現將局部變量的作用域提升至全局作用域。

但是：并不建議直接就var 關鍵字給省略，我們建議在函數的外面定義一個同名的全局變量。

avaScript是一種發展迅速的語言。這篇文章，我想展示一些有關如何在JavaScript中應用函數式編程的示例。

JavaScript中的函數式編程

即使函數式編程可以極大地改善應用程序的代碼，但其原理在開始時可能會有些挑戰。由于詳細解釋所有這些都將花費大量時間，因此我們決定使用兩個實際的代碼示例來介紹這些概念

1.Maybe Monad

在第一個示例中，我們找到一種避免驗證變量是否為Null的方法。假設在我們的應用程序中，我們可以找到具有以下格式的用戶：

const someUser={
 name: 'some_name',
 email: 'some@email.com',
 settings: {
  language: 'sp'
 }
};

有一個功能，可以以用戶設置的語言返回歡迎消息。

const allGreetings={
 'en': '嗨',
 'sp': '你好',
 'fr': '歡迎你'
};
const getGreetingForUser=(user)=> {
 //將要執行
}

來看一個遵循命令式模型的“ getGreetingForUser”函??數的實現：

const getGreetingForUser=(user)=> {
 if (!user) {
   return allGreetings.en;
 }
 if (user.settings && user.settings.language) {
   if (allGreetings[user.settings.language]) {
     return allGreetings[user.settings.language]
   } else {
     return allGreetings.en;
   }
 } else {
   return allGreetings.en;
 }
};
console.log(getGreetingForUser(someUser));

如上面所看到的，必須檢查用戶是否已經存在，是否已設置語言，以及是否已準備好歡迎消息。如果出現問題，我們將以默認語言返回一條消息。

現在，讓我們看一下相同的函數，但是這次我們將在其實現中使用函數式編程：

const getGreetingForUser=(user)=> {
  return RamdaFantasy.Maybe(user)
    .map(Ramda.path(['settings', 'language']))
    .chain(maybeGreeting);
};
const maybeGreeting=Ramda.curry((greetingsList, userLanguage)=> {
  return RamdaFantasy.Maybe(greetingsList[userLanguage]);
})(allGreetings);
console.log(getGreetingForUser(someUser).getOrElse(allGreetings.en));

為了處理可能為null或未定義的情況，我們將使用Maybe Monad。這使我們可以在對象周圍創建包裝器，并為空對象分配默認行為。

讓我們比較兩種解決方案：

//代替驗證用戶是否為空
if (!user) {
  return allGreetings.en;
}
//我們將用：
RamdaFantasy.Maybe(user) //我們將用戶添加到包裝器中

//代替：
 if (user.settings && user.settings.language) {
   if (allGreetings[user.settings.language]) {
//我們將用：
 <userMaybe>.map(Ramda.path(['settings', 'language'])) //如果存在數據，映射將會用它

//不是在else中返回默認值：
 return indexURLs['en'];
.getOrElse（allGreetings。EN）
// 指定的默認值。

2 Either Monad

當我們知道存在空錯誤時的默認行為時，Maybe Monad非常有用。

但是，如果我們有一個引發錯誤的函數，或者我們將各種引發錯誤的函數鏈接在一起，并且我們想知道哪個發生了故障，則可以改用Either Monad。

現在，讓我們假設我們要計算產品的價格，同時考慮增值稅和可能的折扣。我們已經有了以下代碼：


const withTaxes=(tax, price)=> {
2
 if (!_.isNumber(price)) {
3
 return new Error("Price is not numeric");
4
 }
5
 return price + (tax * price);
6
};
7
const withDiscount=(dis, price)=> { 
8
  if (!_.isNumber(price)) { 
9
    return new Error("Price is not numeric"); 
10
  } 
11
  if (price < 5) 
12
    return new Error("Discounts not available for low-priced items"); 
13
  } 
14
  return price - (price * dis);5
}; 
const isError=(e)=> e && e.name==='Error';
const calculatePrice(price, tax, discount)=> { 
//將要執行
}

讓我們來看一個遵循命令式模型的“ calculatePrice”函數的實現：

const calculatePrice=(price, tax, discount)=> {
  const priceWithTaxes=withTaxes(tax, price);
  if (isError(priceWithTaxes)) {
    return console.log('Error: ' + priceWithTaxes.message);
  }
  const priceWithTaxesAndDiscount=withDiscount(discount, priceWithTaxes);
  if (isError(priceWithTaxesAndDiscount)) {
    return console.log('Error: ' + priceWithTaxesAndDiscount.message);
  }
  console.log('Total Price: ' + priceWithTaxesAndDiscount);
}
//我們計算出價值25的產品（含21％的增值稅和10％的折扣）的最終價格。
 calculatePrice(25, 0.21, 0.10)

現在，讓我們了解如何使用Either Monad重寫此函數。

都有兩個構造函數，Left和Right。我們要實現的是將異常存儲到Left構造函數，并將正常結果（快樂路徑）存儲到Right構造函數。

首先，將更改已經存在的withTaxes和withDiscount函數，以便在出現錯誤時它們返回Left，在一切正常的情況下返回Right：

const withTaxes=Ramda.curry((tax, price)=> {
  if (!_.isNumber(price)) {
    return RamdaFantasy.Either.Left(new Error("Price is not numeric"));
  }
  return RamdaFantasy.Either.Right(price + (tax * price)); 
});
const withDiscount=Ramda.curry((dis, price)=> {
  if (!_.isNumber(price)) {
    return RamdaFantasy.Either.Left(new Error("Price is not numeric")); 
  }
  if (price < 5) { 
    return RamdaFantasy.Either.Left(new Error("Discounts not available for low-priced items")); 
  } 
  return RamdaFantasy.Either.Right(price - (price * dis)); 
});

然后，我們為Right案例創建一個函數（顯示價格），為Left案例創建另一個函數（顯示錯誤），然后使用它們創建Either Monad：

const showPrice=(total)=> { console.log('Price: ' + total) }; 
const showError=(error)=> { console.log('Error: ' + error.message); }; 
const eitherErrorOrPrice=RamdaFantasy.Either.either(showError, showPrice);

最后，只需要執行Monad來計算最終價格：

//計算出價值25的產品（含21％的增值稅和10％的折扣）的最終價格。
 eitherErrorOrPrice(
   RamdaFantasy.Either.Right(25)
     .chain(withTaxes(0.21))
     .chain(withDiscount(0.1))
)

結論：JavaScript中的函數式編程

正如我們所看到的，一旦用Maybe和Either單子分解了代碼，就沒有那么復雜了。如果使用得當，它們可以使我們的代碼更易于閱讀和維護。

唯一的不便是我們需要克服的初始障礙，但這可以通過在網上一些示例并進行一些測試來完成。

喜歡可以關注一下哦。

半夜的一次斜眸，我發現了支付寶灰色產業的一角

得知開源會削弱對中國的技術封鎖，特朗普氣炸了

用漫畫讓你清楚了解linux內核，看懂了么？

你用大量 if else，而不用switch的原因，if真香啊

能在996公司久呆的人，到底有多會劃水？

、生成隨機顏色

當網站需要生成隨機顏色時，我們可以通過以下代碼來執行此操作。

2、數組重新排序

對數組元素重新排序是一個非常重要的技巧，但它在原生數組中不可用。

3、復制到剪貼板

復制到剪貼板是一項非常有用且用戶友好的功能。

4、檢測深色主題

深色主題越來越流行，很多用戶會在設備上啟用暗模式。我們將應用程序切換到深色主題以改善用戶體驗。

5、滾動到頂部

將元素滾動到頂部的最簡單方法是使用 scrollIntoView。設置塊開始滾動到頂部；將行為設置為平滑以啟用平滑滾動。

6、滾動到底部

就像滾動到頂部一樣，滾動到底部只是將塊設置為結束。

7、檢測元素是否在屏幕上

檢查元素是否在窗口中的最佳方法是使用 IntersectionObserver。

8、檢測設備

使用 navigator.userAgent 檢測網站在哪個平臺設備上運行。

9、隱藏元素

我們可以將元素的 style.visibility 設置為 hidden 來隱藏元素的可見性，但是，元素的空間還是會被占用。將元素的 style.display 設置為 none 將從渲染流中刪除該元素。

10、從 URL 獲取參數

JavaScript中有一個URL對象，可以很方便的獲取URL中的參數。

11、深拷貝對象

深度復制對象非常簡單。首先，將對象轉換為字符串，然后將其轉換為對象。

除了使用 JSON 的 API 之外，還有一個更新的結構化克隆 API，用于深度復制對象，并非所有瀏覽器都支持該 API。

12、等待功能

JavaScript 提供了 setTimeout 函數，但是，它沒有返回 Promise 對象，所以我們不能在這個函數上使用 async，但是，我們可以封裝等待函數。

13、有條件地在對象中添加屬性

14、檢查對象中是否存在屬性

15、使用動態鍵破壞對象

16、循環訪問對象以訪問鍵和值

17、防止在使用可選鏈(?.)訪問對象中不存在的任何鍵時拋出錯誤

警告:warning:：當你不確定他們的屬性是否存在或不在數據中時使用可選鏈接。如果您確定密鑰必須傳入數據，并且如果沒有出現，那么，最好是拋出錯誤而不是阻止它們。

18、檢查數組中的 falsy值

19、刪除數組中的重復值

20、校驗值是數組類型

21、字符串到數字和數字到字符串的轉換使用'+'操作符

22、當值為 null 且 undefined 時，使用空值合并 (??) 運算符有條件地分配其他值

將與 OR (||) 運算符混淆？？

如果值不真實（0，''，null，undefined，false，NaN），當您想要有條件地分配其他值時使用 OR 運算符。

23、使用 !! 進行布爾轉換操作符

寫在最后

以上就是我今天與你分享的全部內容，如果你覺得有用的話，請記得點贊我，關注我，并將它分享給你身邊的朋友，也許能夠幫助到他。

最后，謝謝你的閱讀，祝編程愉快！

來源：https://www.51cto.com/article/717001.html

在線咨詢

上一篇：WordPress網站怎樣做偽靜態
下一篇：8款必備的免費移動Web開發框架

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商