web前端實例分析

這篇文章主要介紹了web前端實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇web前端實例分析文章都會有所收獲，下面我們一起來看看吧。

正文

這題的規則是這樣的

給定有一個 Add 函數，要支持以下形式的調用


Add(1)(2)(3).sumOf(); // 輸出 6
Add(1,2)(3)(4).sumOf(); // 輸出 10
Add(1,2,...)(3)(4)(...).sumOf();  // ...

拿到這種題目，我先來說說我自己的做題流程，一般會去找它最簡單的形態。我們一步一步來拆解。

先去掉 sumOf() 變成了以下形態

Add(1,2,...)(3)(4)(...)

嗯....有點熟悉...但是還是有點復雜，那我們再去掉無限調用這個限制。

Add(1,2,...)(3)(4)

唔，還是有點難呀...沒關系，再砍, 不要傳入多個參數。

Add(1)(2)(3)

有....有....有那味了....這....這不就是柯里化嗎....

有些小朋友可能沒有聽過，對于大朋友而言耳熟能詳，融會貫通。

我們還是來介紹一下。

在《javascript高級程序設計》這本書中有如下介紹:

與函數綁定緊密相關的主題是函數柯里化，它用于創建已經設置好的一個或者多個參數的函數。函數柯里化的基本方法和函數綁定是一樣的：使用一個閉包返回一個函數。兩者的區別在于，當函數被調用時，返回的函數還需要設置一些傳入的參數。

我們來寫寫看:

function Add(x) {
 return function (y) {
  return return functio (z) {
   return x + y + z;
  }
 }
}
// 簡潔寫法
const Add = x => y => z => x+y+z;

執行一下

Add(1)(2)(3) // 6

是我們要的那味~

那么我們既然已經寫出了這個形態，我們就一步一步反推。

這個時候千萬別緊張，我們從最低級的形態出發，寫出一個最基本的形態，能夠有效地幫助我們建立自信心，吃下定心丸，按照這種方式，哪怕我們最終沒有寫出完美的結果，讓面試官看到你思考解題的過程，也是一種加分。

好，接著說~

那我們接下來需要實現這個樣子。

Add(1,2,...)(3)(4)

傳入參數不止一個

我們知道，對于不確定參數個數，我們可以使用 arguments 這個對象來獲取到所有的入參，但是 arguments 不是一個 Array，但是我們可以使用 ES6 中的 Spread syntax （展開語法）去將他變成一個數組。表演繼續。

function Add() {
 const nums = [...arguments];
 return function() {
  nums.push(...arguments);
  return function() {
   nums.push(...arguments);
   return nums.reduce((a, b) => a + b);
  }
 }
}

nice！已經離我們最終的形態越來越近了。接下來是這個函數能夠無限的進行調用。

Add(1,2,...)(3)(4)(...)

那么怎么樣才能無限調用呢？沒錯，用遞歸。

function Add() {
 const nums = [...arguments];
 function AddPro() {
  nums.push(...arguments);
    return AddPro;
 }
 return AddPro;
}

嗯，其實我們寫到這里發現了... 由于是無限遞歸，我們沒辦法確定最后一次函數調用，因此我們需要最后顯式調用一個結束的方法來打印出最后的數據。

很自然地，我們可以在 AddPro 添加一個方法 sumOf 來解決這個問題。

學弟就是卡在這里地方，被函數添加上一個方法搞懵了。你是否知道呢？

function Add() {
 const nums = [...arguments];
 function AddPro() {
  nums.push(...arguments);
    return AddPro;
 }
 AddPro.sumOf = () => {
  return nums.reduce((a, b) => a + b);
 }
 return AddPro;
}

好啦好啦，結束啦。

等等

在最后，我再來補充一種方案，function 不僅可以繼續掛載 function ~ 還可以掛載變量哦~

function Add() {
 if (!Add.nums) {
   Add.nums = [];
  }
  Add.nums.push(...arguments);
  return Add;
}
Add.sumOf = () => {
 return Add.nums.reduce((a, b) => a + b);
}

我們總結一下，小小的面試題涉及到的基礎知識。

閉包、遞歸、作用域、函數與對象

基礎就是基礎，永遠是你爸爸，掌握好基礎，以不變應萬變。

關于“web前端實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“web前端實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。