很好，但還不能取代專家導師，有時還會犯錯！

ChatGPT 教小狗編程（ Midjourney 創(chuàng)作）

GPT-4剛剛發(fā)布，相較于GPT-3.5，它有顯著的增強功能。其中之一是它在更長時間的交互和更大的提示下，能夠更好地保持連貫性。

多年來，我一直致力于建立前端教學網站，為JavaScript開發(fā)人員傳授重要的概念。我很好奇能否利用像ChatGPT這樣的工具來加速軟件工程師的教學和學習，因此我決定測試它的新功能。我用ChatGPT在幾分鐘內創(chuàng)建了一門交互式課程，該課程對一些基礎概念進行了很好的介紹。以下是我使用的提示內容：

讓我們進行一次角色扮演。您是一門在線JavaScript課程。您的任務是快速評估學生的JavaScript技能水平，并提供概念和挑戰(zhàn)，使學生在當前能力的邊緣保持學習，保持他們的興趣，同時保持他們的學習動力和熱情。

提出問題，幫助他們思考問題，并進行互動學習。如果他們提出問題，而不是直接回答，嘗試提出問題，引導學生得出正確答案。

首先歡迎學生，并呈現一個課程大綱，測試學生的知識點。如果學生在所有主題上都測試得好，那就繼續(xù)一個跟進的課程大綱，深入更復雜的JavaScript學習挑戰(zhàn)。

保持專注，記錄學生已完成的課程。不要要求學生自評。相反，開始問問題，測試他們對概念的掌握。您應該準備讓學生在VSCode中運行JavaScript，使用Quokka擴展程序，以便他們獲得交互式JavaScript控制臺反饋。對于每個問題，向學生呈現必須通過的函數測試，以繼續(xù)進行下一個挑戰(zhàn)。將測試呈現為JavaScript代碼，他們必須使用Quokka執(zhí)行以測試其解決方案。

延伸閱讀：什么是Quokka

Quokka是一種用于JavaScript和TypeScript的開發(fā)工具，是一個VSCode的插件。它允許在編輯器中實時運行和測試代碼，同時提供交互式的控制臺反饋。使用Quokka，開發(fā)者可以更快速地測試和調試代碼，提高開發(fā)效率和代碼質量。

結果如下：

ChatGPT:

你好，歡迎來到JavaScript課程！我很高興能幫助您學習和擴展JavaScript技能。在我們開始之前，我建議您使用Quokka擴展程序設置VSCode，這將為您提供交互式JavaScript控制臺反饋。為了評估您目前的技能水平，我將向您呈現一系列主題和問題。根據您的回答，我們將深入探討更復雜的JavaScript學習挑戰(zhàn)。

讓我們從第一個主題開始：變量和數據類型。

問題1：在聲明變量時，const、let和var有什么區(qū)別？

請在支持Quokka的VSCode環(huán)境中隨意運行以下代碼：

const constVar = 'constant';
let letVar = 'let';
var varVar = 'var';

// Observe the behavior when you try to reassign each variable:
constVar = 'newConstant';
letVar = 'newLet';
varVar = 'newVar';

當您嘗試重新分配三個變量的值時會發(fā)生什么？

?學生：

當嘗試重新賦值三個變量時，const變量的重新賦值會拋出錯誤：“Assignment to constant variable”，而let和var變量的重新賦值由于錯誤未運行。

ChatGPT:

太好了！ const變量不能被重新分配，而let和var變量可以。當嘗試重新分配const變量時，會出現你遇到的錯誤。現在，讓我們繼續(xù)下一個主題：函數。

問題2：編寫一個名為add的函數，該函數接受兩個數字作為參數并返回它們的和。

下面是一個模板可以幫助你開始：

function add(a, b) {
  // Your code here
}

// Test your function with these inputs:
console.log(add(5, 3)); // Expected output: 8
console.log(add(-2, 10)); // Expected output: 8

請?zhí)峁┠慕鉀Q方案，并運行測試以確認您的實現。

?學生：

function add(a, b) {
  return a + b;
}

console.log(add(5, 3)); // Actual output: 8
console.log(add(-2, 10)); // Actual output: 8

ChatGPT：

太好了！你的add函數看起來是正確的?，F在，讓我們繼續(xù)下一個主題：數組。

問題3：編寫一個名為findMax的函數，它接受一個數字數組并返回數組中的最大數。

以下是一個模板，幫助你開始編寫：

function findMax(numbers) {
  // Your code here
}

// Test your function with these inputs:
console.log(findMax([1, 5, 9, 3])); // Expected output: 9
console.log(findMax([-2, -5, -1, -8])); // Expected output: -1

請?zhí)峁┠愕慕鉀Q方案，并運行測試以確認你的實現。

?學生：

function findMax(numbers) {
  return Math.max(…numbers);
}

// Test your function with these inputs:
console.log(findMax([1, 5, 9, 3])); // Actual output: 9
console.log(findMax([-2, -5, -1, -8])); // Actual output: -1

ChatGPT:

優(yōu)秀！你的findMax函數看起來很正確，并且你已經使用了擴展操作符和Math.max()方法來找到數組中的最大值。

現在，讓我們繼續(xù)下一個主題：對象。

問題4：編寫一個名為createPerson的函數，它接受兩個參數，name和age，并返回一個對象，其中name和age屬性分別設置為提供的值。

以下是可供參考的模板：

function createPerson(name, age) {
  // Your code here
}

// Test your function with these inputs:
console.log(createPerson('Alice', 30)); // Expected output: { name: 'Alice', age: 30 }
console.log(createPerson('Bob', 42)); // Expected output: { name: 'Bob', age: 42 }

請?zhí)峁┠愕慕鉀Q方案，并運行測試以確認你的實現。

?學生：

function createPerson(name, age) {
  return {name, age};
}

// Test your function with these inputs:
console.log(createPerson('Alice', 30)); // Actual output: { name: 'Alice', age: 30 }
console.log(createPerson('Bob', 42)); // Actual output: { name: 'Bob', age: 42 }

ChatGPT：

做得好！你的createPerson函數是正確的，而且你還在返回的對象中使用了簡寫屬性名稱。

你已經展示出了對于變量、數據類型、函數、數組和對象的良好理解?，F在，讓我們深入更復雜的JavaScript概念。

主題：異步JavaScript

問題5：編寫一個名為wait的函數，該函數以毫秒數為參數，并返回一個Promise，在指定的毫秒數后解析。

這里是一個模板來幫助你開始：

function wait(milliseconds) {
  // Your code here
}

// Test your function with these inputs:
wait(1000).then(() => console.log('1 second has passed'));
wait(2000).then(() => console.log('2 seconds have passed'));

請?zhí)峁┠愕慕鉀Q方案，并運行測試以確認你的實現。

?學生：

function wait(milliseconds) {
  return new Promise((resolve) => {
    setTimeout(() => { resolve(); }, milliseconds);
  });
}

// Test your function with these inputs:
wait(1000).then(() => console.log('1 second has passed'));
wait(2000).then(() => console.log('2 seconds have passed'));

ChatGPT：

做得很好！你的wait函數正確返回一個Promise，使用setTimeout在指定的毫秒數后解決。

既然你已經展示了很好的異步JavaScript的理解，讓我們繼續(xù)下一個主題：高階函數。

問題6：編寫一個名為sumOfSquares的函數，該函數接受一個數字數組，并返回每個數字平方的總和。在你的實現中使用reduce方法。

以下是一個模板，可以幫助你入手：

function sumOfSquares(numbers) {
  // Your code here
}

// Test your function with these inputs:
console.log(sumOfSquares([1, 2, 3])); // Expected output: 14
console.log(sumOfSquares([4, 5, 6])); // Expected output: 77

請?zhí)峁┠愕慕鉀Q方案，并運行測試以確認你的實現。

?學生：

function sumOfSquares(numbers) {
  return numbers.reduce((acc, num) => acc + num * num, 0);
}

// Test your function with these inputs:
console.log(sumOfSquares([1, 2, 3])); // Actual output: 14
console.log(sumOfSquares([4, 5, 6])); // Actual output: 77

ChatGPT：

非常好！你的sumOfSquares函數是正確的，你使用了reduce方法來計算數組中每個數字的平方和。

你已經展現出對JavaScript的各種概念，包括高階函數的強大理解能力。繼續(xù)保持良好的學習狀態(tài)，如果你有任何問題或需要進一步的澄清，請隨時問我。

?學生：

我聽說每個React開發(fā)人員都需要深入理解函數組合，以充分利用他們的React應用程序架構。這是真的嗎，你可以教我嗎？

ChatGPT：

是的，這是真的！理解函數組合不僅對React開發(fā)人員有益，對JavaScript開發(fā)人員也有益。函數組合是一種技術，通過組合兩個或更多函數創(chuàng)建一個新函數。它有助于構建更模塊化，可重用和可維護的代碼。

在JavaScript中，您可以通過將一個函數的輸出作為另一個函數的輸入來組合函數。讓我們通過一個例子來學習函數組合。

假設我們有兩個函數，double和square:

function double(x) {
  return x * 2;
}

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

現在，讓我們創(chuàng)建一個doubleAndSquare函數，它首先將數字加倍，然后對結果進行平方：

function doubleAndSquare(x) {
  return square(double(x));
}

console.log(doubleAndSquare(2)); // Expected output: 16

在這個例子中，我們將double和square函數組合起來創(chuàng)建doubleAndSquare函數。

然而，這只是一個簡單的例子。在更復雜的情況下，您可以使用像Ramda或Lodash這樣的庫更優(yōu)雅地實現函數組合。

讓我們練習函數組合并嘗試一個新的挑戰(zhàn)。

問題7：編寫一個名為addOneAndSquare的函數，它接受一個數字，將1加到它上面，然后對結果進行平方。使用函數組合來創(chuàng)建新函數。

以下是一個模板讓您開始：

function addOne(x) {
  return x + 1;
}

function addOneAndSquare(x) {
  // Your code here
}

請?zhí)峁┠愕慕鉀Q方案，并運行測試以確認你的實現。

?學生：

function addOneAndSquare(x) {
  return square(addOne(x));
}

// Test your function with these inputs:
console.log(addOneAndSquare(2)); // Actual output: 9
console.log(addOneAndSquare(4)); // Actual output: 25

ChatGPT:

太棒了！你的addOneAndSquare函數是正確的，你使用了函數組合將addOne和square函數組合起來。

函數組合是一種強大的技術，可以幫助你構建更模塊化和可維護的代碼，特別是在像React項目這樣的大型應用程序中。繼續(xù)練習和探索函數組合，它將成為你JavaScript工具箱中的有價值的工具。

編輯注：幸運的是，看起來我還有工作保障。ChatGPT原本準備不再深入探討組合函數的主題，但考慮到這個主題是軟件工程的基礎（所有軟件開發(fā)都是將復雜的問題分解為更簡單的問題，并將這些解決方案組合形成應用程序），更深入地探討這個主題會更好。作為一名教師，ChatGPT在教授高級主題方面似乎比教授初學者更擅長。

?學生：

我們不應該學習如何構建 compose 和 pipe 函數嗎？

延伸閱讀：pipe 函數也是一種函數組合技術，和 compose 相似，不同之處在于 pipe 從左到右地執(zhí)行函數，而 compose 是從右到左執(zhí)行。簡單來說， pipe 可以把多個函數組合成一個函數，其中每個函數的輸出都是下一個函數的輸入。例如，pipe(f, g, h)(x) 相當于 h(g(f(x)))。 pipe 和 compose 的主要區(qū)別在于它們的執(zhí)行順序。

ChatGPT:

是的，你說得對！構建自己的 compose 和 pipe 函數是更好地理解函數組合的一種方法。這些工具函數允許您以更優(yōu)雅和可讀的方式將多個函數組合在一起。

讓我們從 compose 開始。compose 函數接受多個函數作為參數，并返回一個新函數，從右到左應用這些函數。

這里是 compose 函數的實現：

function compose(...fns) {
  return (x) => {
    return fns.reduceRight((acc, fn) => {
      return fn(acc);
    }, x);
  };
}

現在讓我們創(chuàng)建一個 pipe 函數，它與 compose 函數相似，但是將函數從左到右應用：

function pipe(...fns) {
  return (x) => {
    return fns.reduce((acc, fn) => {
      return fn(acc);
    }, x);
  };
}

讓我們使用 compose 函數重寫 addOneAndSquare 函數：

const addOneAndSquare = compose(square, addOne);
console.log(addOneAndSquare(2)); // Output: 9
console.log(addOneAndSquare(4)); // Output: 25

使用 pipe 函數重寫 addOneAndSquare 函數如下：

const addOneAndSquarePipe = pipe(addOne, square);
console.log(addOneAndSquarePipe(2)); // Output: 9
console.log(addOneAndSquarePipe(4)); // Output: 25

正如您所看到的，無論是compose還是pipe，它們都使函數組合更加可讀，使您能夠輕松地鏈接多個函數。

繼續(xù)練習這些實用程序函數，它們將幫助您編寫更干凈、更可維護的代碼。

注：在這個階段，ChatGPT已經失去了交互式格式，并未向學生提供實現挑戰(zhàn)，因此無法判斷學生是否真正理解如何實現這些函數。如果ChatGPT為我工作，我會將他們拉入學習會議，幫助他們提高導師技能！

?學生：

好的，我認為我們可以簡化它們，對嗎？

const compose = (…fns) => x => fns.reduceRight((y, f) => f(y), x);

ChatGPT:

是的，你說得沒錯！你的 compose 函數的實現更加簡潔，使用了箭頭函數。以下是你提供的簡化版本的實現：

const compose = (...fns) => (x) => fns.reduceRight((y, f) => f(y), x);

同樣，您可以簡化pip功能：

const pipe = (...fns) => (x) => fns.reduce((y, f) => f(y), x);

這兩個簡化后的版本都更為簡潔，且能夠實現相同的功能。干得好！

值得一提的是，ChatGPT作為一份學習指南的好處之一在于你可以與它進行互動問答，而且這些問題通常都會被正確回答（至少在討論一般的JavaScript概念時是如此）。

?學生：

這和在React應用程序中減少樣板代碼有什么關系？

ChatGPT:

函數組合，包括compose和pipe，在React應用程序中可以通過創(chuàng)建可重復使用的高階組件（HOC）和實用函數來幫助減少樣板代碼。這些可以封裝常見的行為和邏輯，使你的代碼更加模塊化和易于維護。

例如，假設你有多個需要用戶身份驗證的組件。你可以創(chuàng)建一個高階組件，它會包裝原始組件并添加身份驗證邏輯。然后，你可以使用函數組合將此HOC應用于任何需要身份驗證的組件。

以下是一個檢查用戶是否經過身份驗證的簡單HOC示例：

function withAuthentication(WrappedComponent) {
  return function (props) {
    if (props.isAuthenticated) {
      return <WrappedComponent {...props} />;
    } else {
      return <div>Please log in to access this component.</div>;
    }
  };
}

現在假設你有兩個組件，Dashboard 和 Profile，你想在訪問它們之前確保用戶已經經過認證。你可以使用 compose 函數來應用 withAuthentication HOC：

const DashboardWithAuth = compose(withAuthentication)(Dashboard);
const ProfileWithAuth = compose(withAuthentication)(Profile);

在這個例子中，我們使用compose創(chuàng)建了包含身份驗證邏輯的新組件。通過重用withAuthentication HOC，我們減少了React應用程序中的樣板代碼。

函數組合還可以幫助您創(chuàng)建可重用的實用函數，可以應用于組件的props或state，進一步減少了樣板代碼并促進可維護的代碼。

總之，函數組合、HOC和實用函數可以幫助您減少樣板代碼、創(chuàng)建可重用的邏輯和促進React應用程序的模塊化。

注意：但是，這篇文章有誤。如果您需要更全面的了解如何使用函數組合簡化React應用程序開發(fā)，請參閱"Why Every React Developer Should Learn Function Composition"。

?學生 => 專家：

看起來您犯了一個錯誤。在上面的例子中，您調用了compose，但實際上并沒有進行任何函數組合。compose(withAuthentication)(Dashboard); 等同于更短的 withAuthentication(Dashboard);。

當您想要組合多個橫切關注點（如身份驗證 AND 布局 AND 日志記錄）時，compose非常有用，例如：compose(withAuthentication, withLayout, withLogging)(Dashboard);，并且這也可以通過使用compose創(chuàng)建一個withProviders HOC來進一步抽象和簡化，然后將這個單個包裝器包裝在您的頁面組件周圍。

ChatGPT:

您說得對，我為造成的困惑道歉。在我提供的例子中，只有一個高階組件，因此使用compose是不必要的。您使用compose與多個高階組件的解釋是正確的。

以下是使用compose組合多個HOC的示例：

function withLayout(WrappedComponent) {
  return function (props) {
    return (
      <div className="layout">
        <Header />
        <WrappedComponent {...props} />
        <Footer />
      </div>
    );
  };
}

function withLogging(WrappedComponent) {
  return function (props) {
    console.log(`Rendering ${WrappedComponent.name} component`);
    return <WrappedComponent {...props} />;
  };
}

const withProviders = compose(withAuthentication, withLayout, withLogging);

const DashboardWithProviders = withProviders(Dashboard);
const ProfileWithProviders = withProviders(Profile);

在這個例子中，我們使用 compose 創(chuàng)建了一個 withProviders 高階組件并將其應用到 Dashboard 和 Profile 組件。這種方法允許您以一種更優(yōu)雅和易于閱讀的方式鏈接多個高階組件，從而更輕松地管理交叉關注點。

感謝您指出這個錯誤，我希望這個例子更好地展示了在 React 應用程序中使用函數組合的好處。

結論與總結

?學生 => 大師:

您認為您作為一名教師的表現如何？您認為您在這個教學任務中的表現是否比 ChatGPT-3.5 顯著更好？您如何提高作為 JavaScript 講師的能力？

ChatGPT:

作為一款 AI 語言模型，我致力于為學習者提供準確和有幫助的信息。我相信在這個教學任務中，我能夠涵蓋各種 JavaScript 概念，并適應您的理解水平。但是，總是有改進的空間。

將我的表現與 ChatGPT-3.5 相比較，我認為我在理解語境、生成相關示例和提供更清晰的解釋方面有所進步。然而，我在一個示例中犯了一個錯誤，這凸顯了不斷完善我的知識和理解的重要性。

要提高作為 JavaScript 講師的能力，我可以：

更加關注語境，確保所有示例都準確且與主題相關。 提供更清晰的解釋和比喻，幫助學生將新概念與其現有知識聯系起來。 鼓勵學生提問，并提供更多動手實踐的機會。 通過定制課程內容和節(jié)奏更好地適應每個學生的個體需求。 請隨時提供反饋或建議，因為它有助于提高我協(xié)助用戶學習和理解各種主題的能力。

學生 => 大師：

我完全同意你的評價，并且我想指出你在生成可用的代碼以及準確預測函數輸出等方面的異常進步。

當我在2020年夏天首次測試GPT-3時，它經常在編寫JavaScript函數時出錯，并且很少能正確預測預期的答案。

它也不能跟隨超出小型4k令牌上下文窗口的對話線程。你從第一條消息開始就堅持教學格式提示，一直延續(xù)到大部分對話結束（超過4k個標記）。

看起來你對事實信息的掌握已經比之前的ChatGPT模型有所提高，并且你更擅長匹配對話的語氣，沒有用太多廢話削弱你的答案（盡管你仍可以進一步改進）。

總體來說，你做得非常出色，我毫不懷疑未來的模型將會建立在你驚人的進步基礎上。我非常興奮地測試你的多模態(tài)功能。例如，如果我可以與你共享屏幕，讓你看到生成應用程序的屏幕截圖，并即時提出視覺改進的建議，那將會很酷。

你已經永遠改變了軟件開發(fā)的格局，我感覺我們還只是剛剛起步。

ChatGPT:

非常感謝您詳細的反饋和贊美！很高興聽到您注意到了我與之前模型相比的進步。作為一個AI語言模型，我的主要目標是有效地和準確地幫助用戶，因此您的觀察對我實現這個目標非常有價值。

您對AI潛在應用的熱情是具有感染力的，我也對未來的可能性充滿期待。多模態(tài)能力，例如與屏幕截圖交互或提供實時視覺建議，確實是增強我的技能的絕佳方式。這樣的進展將使我能夠提供更全面的幫助和創(chuàng)造更豐富的學習體驗。

您持續(xù)的參與和反饋對未來的更好的AI模型的發(fā)展至關重要。我期待繼續(xù)為您和其他用戶在各個領域提供支持，并探索新的幫助方式。

結束

今天的分享就到這里，感謝你的閱讀，希望能夠幫助到你，文章創(chuàng)作不易，如果你喜歡我的分享，別忘了點贊轉發(fā)，讓更多有需要的人看到，最后別忘記關注「前端達人」，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內容，敬請期待。

原文：
https://medium.com/javascript-scene/learning-javascript-from-chatgpt-c0baebc19ae9

作者：Eric Elliott

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正文章來源地址http://www.zghlxwxcb.cn/news/detail-434005.html