巨人之戰(zhàn)：GitHub Copilot vs ChatGPT ????
微信搜索關(guān)注《Java學(xué)研大本營》，加入讀者群，分享更多精彩
ChatGPT的發(fā)布在編程社區(qū)引起了波瀾，因?yàn)樗梢援a(chǎn)生令人難以置信的代碼片段。
它與去年發(fā)布的GitHub Copilot相比如何？人工智能會(huì)追隨你的工作嗎？讓我們找出來。
測試 ChatGPT
讓我們簡要回顧一下我們對GitHub Copilot進(jìn)行的相同測試。https://dev.to/ruppysuppy/github-copilot-my-experience-after-one-week-usage-eie
測試 1：股票價(jià)格獲取
可悲的是，它第一次生成了錯(cuò)誤的代碼。
該函數(shù)未定義為async，并且promises未正確處理。
下一次嘗試更好
奇怪的是，它在沒有API 密鑰的情況下也能工作（只要查詢參數(shù)包含apikey具有任何隨機(jī)值的密鑰）。
結(jié)果：GitHub Copilot讓ChatGPT望塵莫及。
測試 2：BFS 遍歷
這一次，ChatGPT一口氣搞定了，遺憾的是太長了，截圖放不下，所以生成的代碼如下：
class?Node:
??def?__init__(self,?value):
????self.value?=?value
????self.left?=?None
????self.right?=?None
class?BinarySearchTree:
??def?__init__(self):
????self.root?=?None
??def?insert(self,?value):
????new_node?=?Node(value)
????if?self.root?is?None:
??????self.root?=?new_node
??????return
????current_node?=?self.root
????while?True:
??????if?value?<?current_node.value:
????????if?current_node.left?is?None:
??????????current_node.left?=?new_node
??????????return
????????current_node?=?current_node.left
??????else:
????????if?current_node.right?is?None:
??????????current_node.right?=?new_node
??????????return
????????current_node?=?current_node.right
??def?inorder_traversal(self,?node,?numbers):
????if?node?is?None:
??????return
????self.inorder_traversal(node.left,?numbers)
????numbers.append(node.value)
????self.inorder_traversal(node.right,?numbers)
??def?get_numbers(self):
????numbers?=?[]
????self.inorder_traversal(self.root,?numbers)
????return?numbers
bst?=?BinarySearchTree()
bst.insert(10)
bst.insert(5)
bst.insert(15)
bst.insert(3)
bst.insert(7)
bst.insert(13)
bst.insert(17)
numbers?=?bst.get_numbers()
print(numbers)??#?[3,?5,?7,?10,?13,?15,?17]
整個(gè)代碼由ChatGPT生成，并附有對其工作原理的評(píng)論。
結(jié)果：ChatGPT勝出。
測試 3：100 個(gè)的數(shù)組
ChatGPT為這個(gè)生成了多個(gè)建議
當(dāng)GitHub Copilot啟動(dòng)時(shí)，它生成了一個(gè)有點(diǎn)靠不住的建議，但現(xiàn)在它生成了與ChatGPT相同的代碼。
結(jié)果：并列（取決于您比較的軟件版本）
創(chuàng)建一個(gè)完整的 TODO 項(xiàng)目
為了進(jìn)一步推進(jìn)測試，我決定使用這兩個(gè)軟件創(chuàng)建一個(gè)完整的TODO項(xiàng)目。
ChatGPT
-
如何創(chuàng)建TODO項(xiàng)目？
ChatGPT提到的步驟是相當(dāng)全面的
-
如何創(chuàng)建React項(xiàng)目？
-
創(chuàng)建一個(gè)Todo組件
這是我不喜歡的部分。生成的代碼使用的是遺留類組件語法。它也沒有處理 todos 的添加
-
優(yōu)化Todo組件處理todos的增刪并標(biāo)記為已完成。
這是它生成的代碼（截圖太長了）
import?React?from?"react";
//?TodoItem?component
const?TodoItem?=?({
?item,
?onDelete,
?onComplete,
})?=>?(
?<li>
???{item.text}
???<button?onClick={onDelete}>Delete</button>
???<button?onClick={onComplete}>
?????{item.isComplete???"Undo"?:?"Complete"}
???</button>
?</li>
);
//?TodoApp?component
class?TodoApp?extends?React.Component?{
?//?Define?the?initial?state?of?the?component
?state?=?{
???todoItems:?[],
?};
?//?Method?to?handle?adding?new?items?to?the?todo?list
?addTodo?=?(text)?=>?{
???//?Add?the?new?item?to?the?todo?list
???this.setState({
?????todoItems:?[
???????...this.state.todoItems,
???????{?text,?isComplete:?false?},
?????],
???});
?};
?//?Method?to?handle?deleting?items?from?the?todo?list
?deleteTodo?=?(index)?=>?{
???//?Delete?the?item?at?the?given?index
???this.setState({
?????todoItems:?this.state.todoItems.filter(
???????(_,?i)?=>?i?!==?index
?????),
???});
?};
?//?Method?to?handle?completing/undoing?a?todo?item
?completeTodo?=?(index)?=>?{
???//?Update?the?"isComplete"?property?of?the?item?at?the?given?index
???this.setState((state)?=>?{
?????const?todoItems?=?[...state.todoItems];
?????todoItems[index].isComplete?=
???????!todoItems[index].isComplete;
?????return?{?todoItems?};
???});
?};
?//?Method?to?render?the?component
?render()?{
???return?(
?????<div>
???????{/*?Form?to?add?new?items?to?the?todo?list?*/}
???????<form>
?????????<input
???????????type="text"
???????????placeholder="Add?a?todo?item"
?????????/>
?????????<button?type="submit">Add</button>
???????</form>
???????{/*?List?of?todo?items?*/}
???????<ul>
?????????{this.state.todoItems.map(
???????????(item,?index)?=>?(
?????????????<TodoItem
???????????????key={index}
???????????????item={item}
???????????????onDelete={()?=>
?????????????????this.deleteTodo(index)
???????????????}
???????????????onComplete={()?=>
?????????????????this.completeTodo(index)
???????????????}
?????????????/>
???????????)
?????????)}
???????</ul>
?????</div>
???);
?}
}
這次生成的代碼更好一些，可以將code splitting待辦事項(xiàng)標(biāo)記為已完成。它仍在使用遺留類組件，即使在明確要求之后也沒有處理待辦事項(xiàng)的添加。
-
最后嘗試提及創(chuàng)建功能組件并處理待辦事項(xiàng)的添加、刪除和完成。
import?React?from?"react";
//?TodoItem?component
const?TodoItem?=?({?item,?onDelete,?onComplete?})?=>?(
??<li>
????{item.text}
????<button?onClick={onDelete}>Delete</button>
????<button?onClick={onComplete}>
??????{item.isComplete???"Undo"?:?"Complete"}
????</button>
??</li>
);
//?TodoApp?component
const?TodoApp?=?()?=>?{
??//?Define?the?initial?state?of?the?component
??const?[todoItems,?setTodoItems]?=?React.useState([]);
??//?Method?to?handle?adding?new?items?to?the?todo?list
??const?addTodo?=?(text)?=>?{
????//?Add?the?new?item?to?the?todo?list
????setTodoItems([
??????...todoItems,
??????{?text,?isComplete:?false?},
????]);
??};
??//?Method?to?handle?deleting?items?from?the?todo?list
??const?deleteTodo?=?(index)?=>?{
????//?Delete?the?item?at?the?given?index
????setTodoItems(
??????todoItems.filter((_,?i)?=>?i?!==?index)
????);
??};
??//?Method?to?handle?completing/undoing?a?todo?item
??const?completeTodo?=?(index)?=>?{
????//?Update?the?"isComplete"?property?of?the?item?at?the?given?index
????setTodoItems((state)?=>?{
??????const?todoItems?=?[...state];
??????todoItems[index].isComplete?=
????????!todoItems[index].isComplete;
??????return?todoItems;
????});
??};
??//?Return?the?component
??return?(
????<div>
??????{/*?Form?to?add?new?items?to?the?todo?list?*/}
??????<form>
????????<input
??????????type="text"
??????????placeholder="Add?a?todo?item"
????????/>
????????<button?type="submit">Add</button>
??????</form>
??????{/*?List?of?todo?items?*/}
??????<ul>
????????{todoItems.map((item,?index)?=>?(
??????????<TodoItem
????????????key={index}
????????????item={item}
????????????onDelete={()?=>?deleteTodo(index)}
????????????onComplete={()?=>?completeTodo(index)}
??????????/>
????????))}
??????</ul>
????</div>
??);
};
即使這次添加也沒有處理。從好的方面來說，使用了功能組件
GitHub Copilot
遺憾的是Copilot無法生成 React 項(xiàng)目。它只能在給定的上下文中建議代碼片段，所以讓我們從自己創(chuàng)建一個(gè)React 應(yīng)用程序開始
-
創(chuàng)建一個(gè)React項(xiàng)目
npx?create-react-app?react-copilot
-
刪除多余的文件并創(chuàng)建TodoApp.js，TodoItem.js
-
終于到了Copilot施展魔法的時(shí)候了，我們坐下來喝一杯莫吉托。
在文件頂部添加了關(guān)于要完成的任務(wù)的評(píng)論
Todo Item
//?Functional?TodoItem?component?which?takes?onDelete,
//?onComplete,?and?item?({?todo:?string;?completed:?boolean?})
//?as?props
Todo App
//?Functional?TodoApp?component?which?handles?addition,
//?deletion?&?completion?of?todos.?The?TodoItem?component
//?is?used?to?render?each?todo?item
-
生成TodoItem
export?default?function?TodoItem({
?onDelete,
?onComplete,
?item,
})?{
?return?(
???<div>
?????<input
???????type="checkbox"
???????checked={item.completed}
???????onChange={()?=>?onComplete(item)}
?????/>
?????<span
???????style={{
?????????textDecoration:?item.completed
?????????????"line-through"
???????????:?"none",
???????}}
?????>
???????{item.todo}
?????</span>
?????<button?onClick={()?=>?onDelete(item)}>
???????Delete
?????</button>
???</div>
?);
}
生成的代碼使用功能組件和視覺指示器來完成帶有附加樣式的待辦事項(xiàng)（它還使用了checkbox，這是我的個(gè)人偏好）
-
生成TodoApp
export?default?function?TodoItem({
?onDelete,
?onComplete,
?item,
})?{
?return?(
???<div>
?????<input
???????type="checkbox"
???????checked={item.completed}
???????onChange={()?=>?onComplete(item)}
?????/>
?????<span
???????style={{
?????????textDecoration:?item.completed
?????????????"line-through"
???????????:?"none",
???????}}
?????>
???????{item.todo}
?????</span>
?????<button?onClick={()?=>?onDelete(item)}>
???????Delete
?????</button>
???</div>
?);
}
結(jié)果
盡管我們需要做額外的工作來設(shè)置項(xiàng)目，但與ChatGPT相比， Copilot能夠?yàn)門odo 應(yīng)用程序生成更好的代碼。
歸根結(jié)底，Copilot應(yīng)該是一個(gè)幫助開發(fā)人員更快地編寫代碼的工具，而ChatGPT是一個(gè)通用的工具chatbot，但它仍然可以簡化開發(fā)過程，但是當(dāng)任務(wù)以編碼為中心時(shí)， GitHub Copilot無疑勝出！這給我們帶來了問題......
誰會(huì)搶走你的工作？
（在你的腦海里）人工智能的開發(fā)者：邪惡的笑聲
在你燒掉GitHub HQ之前，讓我們退后一步，看看大局。這些是簡化開發(fā)過程的工具，并不是要取代開發(fā)人員。
我們?nèi)匀恍枰_發(fā)人員編寫代碼。當(dāng)然，這些工具可以幫助我們更快地編寫代碼，但如果沒有人工輸入，它們?nèi)匀粺o法自行完成所有工作。
經(jīng)濟(jì)不景氣裁員如火如荼，聽上去很嚇人，但只要你不斷更新和磨練自己的技能，你就會(huì)沒事的！
推薦書單
《項(xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》
《項(xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》共分 13 章，圍繞 6 個(gè)項(xiàng)目和 258 個(gè)代碼示例，分別介紹了走進(jìn)Java 的世界、變量與數(shù)據(jù)類型、運(yùn)算符、流程控制、方法、數(shù)組、面向?qū)ο蟆惓?、常用類、集合、I/O流、多線程、網(wǎng)絡(luò)編程相關(guān)內(nèi)容?！俄?xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》總結(jié)了馬士兵老師從事Java培訓(xùn)十余年來經(jīng)受了市場檢驗(yàn)的教研成果，通過6 個(gè)項(xiàng)目以及每章的示例和習(xí)題，可以幫助讀者快速掌握J(rèn)ava 編程的語法以及算法實(shí)現(xiàn)。掃描每章提供的二維碼可觀看相應(yīng)章節(jié)內(nèi)容的視頻講解。
《項(xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》貫穿6個(gè)完整項(xiàng)目，經(jīng)過作者多年教學(xué)經(jīng)驗(yàn)提煉而得，項(xiàng)目從小到大、從短到長，可以讓讀者在練習(xí)項(xiàng)目的過程中，快速掌握一系列知識(shí)點(diǎn)。
馬士兵，馬士兵教育創(chuàng)始人，畢業(yè)于清華大學(xué)，著名IT講師，所講課程廣受歡迎，學(xué)生遍布全球大廠，擅長用簡單的語言講授復(fù)雜的問題，擅長項(xiàng)目驅(qū)動(dòng)知識(shí)的綜合學(xué)習(xí)。馬士兵教育獲得在線教育“名課堂”獎(jiǎng)、“最受歡迎機(jī)構(gòu)”獎(jiǎng)。
趙珊珊，從事多年一線開發(fā)，曾為國稅、地稅稅務(wù)系統(tǒng)工作。擁有7年一線教學(xué)經(jīng)驗(yàn)，多年線上、線下教育的積累沉淀，培養(yǎng)學(xué)員數(shù)萬名，講解細(xì)致，脈絡(luò)清晰。
《項(xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》(馬士兵，趙珊珊)【摘要 書評(píng) 試讀】- 京東圖書京東JD.COM圖書頻道為您提供《項(xiàng)目驅(qū)動(dòng)零起點(diǎn)學(xué)Java》在線選購，本書作者：，出版社：清華大學(xué)出版社。買圖書，到京東。網(wǎng)購圖書，享受最低優(yōu)惠折扣!https://item.jd.com/13607758.html
精彩回顧
數(shù)據(jù)架構(gòu)演進(jìn)史（上）
數(shù)據(jù)架構(gòu)演進(jìn)史（下）
如何選擇適合的后端框架
微信搜索關(guān)注《Java學(xué)研大本營》文章來源：http://www.zghlxwxcb.cn/news/detail-638170.html
訪問【IT今日熱榜】，發(fā)現(xiàn)每日技術(shù)熱點(diǎn)文章來源地址http://www.zghlxwxcb.cn/news/detail-638170.html
到了這里，關(guān)于ChatGPT大戰(zhàn)Copilot，誰才是最強(qiáng)王者的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
