spread operator

学习 JavaScript 函数参数的基础知识。 函数可以接受一个或多个参数。 const dosomething = () => { //做些事情 } const dosomethingElse = foo => { //做些事情 } const dosomethingElseAgain = (foo, bar) => { //做些事情 } 从 ES6/ES2015 开始，函数的参数可以有默认值： const dosomething = (foo = 1, bar = 'hey') => { //做些事情 } 这样你就可以在调用函数时不填充所有参数： dosomething(3) dosomething() ES2018 引入了参数的尾随逗号，这个特性有助于减少由于移动参数导致的缺少逗号而引起的 bug（例如，将最后一个参数移动到中间时）： const dosomething = (foo = 1, bar = 'hey',) => { //做些事情 } dosomething(2, 'ho!') 在最后一个参数后面加上逗号来调用函数也是可以的： dosomething(2, 'ho!',) 你可以将所有参数包装在数组中，并在调用函数时使用 扩展运算符：...

學習 JavaScript 的展開運算子基礎知識 你可以使用展開運算子 ... 來擴展陣列、物件或字串。 首先從陣列的例子開始。給定 const a = [1, 2, 3] 你可以使用以下方式來建立一個新陣列 const b = [...a, 4, 5, 6] 你也可以使用以下方式來複製一個陣列 const c = [...a] 這對物件也同樣適用。你可以使用以下方式來克隆一個物件 const newObj = { ...oldObj } 使用字串時，展開運算子會將字串中的每個字元創建一個陣列 const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 這個運算子有一些非常有用的應用。其中最重要的應用之一是能夠非常簡單地將陣列作為函式參數使用 const f = (foo, bar) => {} const a = [1, 2] f(...a) 在處理陣列解構賦值時，rest 元素非常有用 const numbers = [1, 2, 3, 4, 5] const [first, second, ....

如何在React中將從父組件獲得的所有props傳遞給子組件 假設您有一個組件層次結構，在其中您從頂級組件將props傳遞給下一級組件，並且您需要將這些props原封不動地傳遞給子組件。這種情況經常發生，您真的不想這樣做： const IntermediateComponent = (props) => { return ( <ChildComponent prop1={props.prop1} prop2={props.prop2} /> ) } 相反，您想要傳遞所有的props，無論其名稱如何。 您可以使用展開運算符來實現： const IntermediateComponent = (props) => { return ( <ChildComponent {...props} /> ) } 這種語法更容易閱讀，更少出錯，並且具有靈活性，因為在更改props時您無需更改中介組件中的props名稱或添加props。

學習在JavaScript中使用兩種現代技術來處理陣列和物件。 你可以使用spread運算子 ...來展開陣列、物件或字串。 讓我們從一個陣列的例子開始。給定 const a = [1, 2, 3] 你可以使用以下方式創建一個新的陣列 const b = [...a, 4, 5, 6] 你也可以使用以下方式創建一個陣列的複製 const c = [...a] 這對於物件也同樣適用。使用以下方式克隆一個物件： const newObj = { ...oldObj } 對於字串，spread運算子會創建一個包含字串中每個字符的陣列： const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 這個運算子有一些非常有用的應用。其中最重要的一個是在非常簡單的方式下將陣列用作函數參數： const f = (arg1, arg2) => {} const a = [1, 2] f(...a) （在過去，你可以使用 f.apply(null, a) 來實現這一點，但這不太好看和易讀） rest元素在處理陣列解構時非常有用： const numbers = [1, 2, 3, 4, 5] [first, second, ....

了解如何將兩個JavaScript物件合併並創建一個結合屬性的新物件。 2015年的ES6引入了展開運算符，這是將兩個簡單物件合併為一個的完美方式： const object1 = { name: 'Flavio' } const object2 = { age: 35 } const object3 = {...object1, ...object2 } 如果兩個物件都具有相同名稱的屬性，則第二個物件的屬性將覆蓋第一個。 在這種情況下，最好的解決方案是使用Lodash和其merge()方法，該方法將執行深層合併，遞歸合併物件屬性和數組。 在Lodash文檔中查看它的文檔。

如何實現一個接受無限參數的函式呢？ 假設我們有一個名為 join() 的函式，它的任務是將我們傳遞給它的所有字符串串接起來。 例如，我們撰寫一個接受兩個字符串的原型： const join = (string1, string2) => { return string1 + string2 } 當我們調用它時，我們得到一個由我們傳遞的兩個參數串接而成的字符串： join('hi', ' flavio') // 'hi flavio' 一個簡單的方法是添加其他默認值為空字符串的參數，像這樣： const join = (string1, string2, string3 = '') => { return string1 + string2 + string3 } 但這種方法並不適用於大量參數，並且會讓我們的代碼看起來很糟糕。 相反，我們可以使用展開運算符 (...) 後跟我們想要使用的參數名稱的語法。在函式內部，該參數是一個陣列，所以我們可以簡單地調用它的 .join() 方法來串接它包含的字符串，並傳遞一個空字符串作為參數（否則默認會在字符串之間加上逗號）： const join = (...strings) => { return strings.join('') } 在我們的例子中，我們還可以使用箭頭函式中提供的隱式返回語法進一步簡化： const join = (...strings) => strings.join('') 我們可以像之前一樣調用它： join('hi', ' flavio') // 'hi flavio' join('hi', ' flavio', ' it', ' is', ' a', ' beautiful day!...

了解一下在學習React之前是否需要學習一些東西 如果您想學習React，首先需要掌握一些基礎知識。特別是一些在React中會反覆使用的最新JavaScript功能。 有時候人們認為某個特定功能是React提供的，但實際上它只是現代JavaScript語法。 起初不需要成為這些主題的專家，但您深入研究React時，就需要更加熟練地掌握這些知識。 我將列出一些事項，並提供我撰寫的文章的連結，以幫助您快速掌握基礎知識： JavaScript類 ES模組 非同步編程的基礎知識：回調函數，Promise，async/await 箭頭函數 this關鍵字 展開運算符 解構賦值 物件字面量 JavaScript函數式編程