了解如何使用JavaScript合併兩個或多個數組 假設你有兩個數組： const first = ['one', 'two'] const second = ['three', 'four'] 你想將它們合併為一個單一的數組，該怎麼辦？ 現代方法是使用解構運算符來創建一個全新的數組： const result = [...first, ...second] 這是我推薦的方法。請注意，這個運算符在ES6中引入，所以舊版本的瀏覽器（比如：Internet Explorer）可能不支持它。 如果你需要在舊版本的瀏覽器中也能運行的解決方案，你可以使用concat()方法，該方法可以在任何數組上調用： const result = first.concat(second) 這兩種方法都會生成一個新的數組，而不會修改現有的數組。
了解如何將兩個JavaScript物件合併並創建一個結合屬性的新物件。 2015年的ES6引入了展開運算符，這是將兩個簡單物件合併為一個的完美方式： const object1 = { name: 'Flavio' } const object2 = { age: 35 } const object3 = {...object1, ...object2 } 如果兩個物件都具有相同名稱的屬性，則第二個物件的屬性將覆蓋第一個。 在這種情況下，最好的解決方案是使用Lodash和其merge()方法，該方法將執行深層合併，遞歸合併物件屬性和數組。 在Lodash文檔中查看它的文檔。
使用字串實例的split()方法。我們可以使用一個參數來指定在空格處將字串進行分割： const text = "Hello World! Hey, hello!" text.split(" ") 結果是一個陣列。在這個例子中，是一個包含4個項目的陣列： [ 'Hello', 'World!', 'Hey,', 'hello!' ]
在JavaScript中，有多種方法可以將字符串的第一個字符轉換為大寫。學習這些方法，並找出哪一種方法是最好的，純粹使用JavaScript。 將字符串的第一個字符轉換為大寫是一個常見的字符串操作之一：將其第一個字母轉為大寫，保持字符串的其餘部分不變。 最好的方法是通過兩個函數的組合來實現。 一個函數用於將第一個字符轉為大寫，第二個函數用於切割字符串並從第二個字符開始返回。 像這樣： const name = 'flavio' const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1) 你可以將這個字符串轉換為大寫的方法提取到一個函數中，該函數還檢查傳入的參數是否為字符串，如果不是則返回空字符串： const capitalize = (s) => { if (typeof s !== 'string') return '' return s.charAt(0).toUpperCase() + s.slice(1) } capitalize('flavio') //'Flavio' capitalize('f') //'F' capitalize(0) //'' capitalize({}) //'' 你也可以使用字符串索引（在較舊的IE版本中不支持）來代替charAt(0)：s[0]。 在線上有一些解決方案也可以將字符串的第一個字母轉為大寫，它們將這個函數添加到String的原型上： String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1) } （我們使用常規函數來使用this - 箭頭函數在這種情況下會失敗，因為箭頭函數中的this不引用當前對象） 這個解決方案不是理想的，因為通常不建議編輯原型，而且這是一個比獨立函數慢得多的解決方案。 不要忘記，如果你只是想在Web頁面上以呈現的方式將第一個字母轉為大寫，CSS可能是一個更好的解決方案，只需將capitalize類添加到HTML段落中，並使用： p.capitalize { text-transform: capitalize; }
函數在JavaScript中只能返回一個值。那麼我們如何模擬從函數返回多個值呢？ 當我們調用JavaScript中的函數時，只能使用return語句返回一個值： const getAge = () => { return 37 } const getName = () => { return 'Flavio' } 我們如何從函數中返回多個值呢？ 一個簡單的技巧是返回一個數組： const getDetails = () => { return [37, 'Flavio'] } 這樣也是可以的，我們可以通過數組解構來獲取這些值： const [age, name] = getDetails() 現在我們擁有了包含這些值的age和name變量。 請注意，在const [age, name] = getDetails()中定義它們的順序是很重要的。 我們也可以返回一個對象並使用對象解構： const getDetails = () => { return { age: 37, name: 'Flavio' } } const { age, name } = getDetails() 在這種情況下，const { age, name } = getDetails()中的age和name的順序不再重要，因為它們是命名參數。
實用指南：如何在JavaScript中扁平化數組 ES2019在Array原型中引入了兩個新方法：flat和flatMap。它們對於我們想要的操作——將數組扁平化非常有用。 讓我們看看它們是如何工作的。 但首先，提醒一下：只有Firefox 62+、Chrome 69+、Edge 76+和Safari 12+已經支持這兩個方法，因為它們是比較新的。請查看當前瀏覽器支持情況，並記住，如果你需要支持較舊的瀏覽器，可以使用Babel將你的代碼回退到之前的ES版本。 如果你不想使用Babel，而且你還沒有構建步驟，你可以使用Lodash提供的flatten()、flattenDeep()和flattenDepth()函數，這可能更有意義。 Lodash的一個很酷的功能是你無需導入整個庫，你可以使用這些包來單獨使用這些函數： lodash.flatten lodash.flattendeep lodash.flattendepth 下面是使用lodash.flatten扁平化數組的方法： const flatten = require('lodash.flatten') const animals = ['Dog', ['Sheep', 'Wolf']] flatten(animals) //['Dog', 'Sheep', 'Wolf'] 現在讓我們來討論原生的flat()和flatMap() JavaScript方法。 flat()是一個新的數組實例方法，它可以從多維數組中創建一個一維數組。 例如： ['Dog', ['Sheep', 'Wolf']].flat() //[ 'Dog', 'Sheep', 'Wolf' ] 默認情況下，它只能“扁平化”一層。 你可以向flat()添加參數來設置要將數組扁平化到的層級。 將其設置為Infinity可以無限層級扁平化： ['Dog', ['Sheep', ['Wolf']]].flat() //[ 'Dog', 'Sheep', [ 'Wolf' ] ] ['Dog', ['Sheep', ['Wolf']]].flat(2) //[ 'Dog', 'Sheep', 'Wolf' ] ['Dog', ['Sheep', ['Wolf']]].flat(Infinity) //[ 'Dog', 'Sheep', 'Wolf' ] 如果你熟悉JavaScript數組的map()方法，你就知道可以使用它對數組的每個元素執行一個函數。...
在JavaScript中找出如何按日期值對數組中的項目進行排序 假設您有一個類似於以下的對象數組，其中包含一組date objects： const activities = [ { title: 'Hiking', date: new Date('2019-06-28') }, { title: 'Shopping', date: new Date('2019-06-10') }, { title: 'Trekking', date: new Date('2019-06-22') } ] 您想要按照date屬性對這些活動進行排序。 您可以使用Array的sort()方法，該方法接受一個回調函數，該函數將兩個對像作為參數（我們稱之為a和b）： const sortedActivities = activities.sort((a, b) => b.date - a.date) 當我們返回一個正值時，該函數向sort()表示對象b在排序中優先於對象a。返回負值則相反。 sort()方法返回一個新的排序數組，但它也在原地對原始數組進行排序。因此，sortedActivities和activities數組都已經排序。保護原始數組免於被修改的一種方法是在排序之前使用slice()方法創建數組的副本，如下所示： const sortedActivities = activities.slice().sort((a, b) => b.date - a.date)
讓我們來看看如何在JavaScript中按照屬性值對對象數組進行排序吧！ 假設你有一個對象數組。 你可能面臨這樣的問題：如何按照某個屬性的值對該數組進行排序？ 假設你有如下的對象數組： const list = [ { color: 'white', size: 'XXL' }, { color: 'red', size: 'XL' }, { color: 'black', size: 'M' } ] 你想要渲染這個列表，但首先你想要按照其中一個屬性的值對其進行排序。比如按照顏色名稱的字母順序排序：black, red, white。 你可以使用Array的sort()方法，該方法接受一個回調函數作為參數，該回調函數接受數組中的兩個對象（我們稱之為 a 和 b）作為參數： list.sort((a, b) => (a.color > b.color) ? 1 : -1) 當我們返回1時，該函數告訴sort()函數在排序中應該優先選擇對象b而不是對象a。返回-1則相反。 回調函數還可以計算其他屬性，以處理顏色相同的情況，同時根據第二個屬性進行排序： list.sort((a, b) => (a.color > b.color) ? 1 : (a.color === b.color) ? ((a.size > b.size) ? 1 : -1) : -1)
了解如何使用正則表達式在JavaScript中替換字符串中的所有空格。 替換字符串中的所有空格是非常常見的需求。例如，我最近在一個API端點中使用了這個功能，該端點接收圖像。我使用原始圖像名稱來存儲它，但如果它包含空格，會破壞我的功能（或其他特殊字符，但讓我們專注在空格上）。 所以我研究了如何實現我想要的目標的最佳方法。結果，我需要使用正則表達式！ 下面是完整的代碼： const name = 'Hi my name is Flavio'; name.replace(/\s/g, ''); // HimynameisFlavio 在JavaScript正則表達式中，\s 元字符匹配任何空白字符：空格，制表符，換行符和Unicode空格。g 标志告訴JavaScript進行多次替換。如果不加 g，它只會替換第一個出現的空格。 請記住，name 的值不會改變。如果需要，你需要將其賦值給一個新的變量： const name = 'Hi my name is Flavio'; const nameCleaned = name.replace(/\s/g, '');
這是一個非常常見的任務：如何在JavaScript中格式化日期? 假設有一個Date物件： const date = new Date('July 22, 2018 07:22:13'); 有許多方法可以生成表示該日期的字串。 一些內建的方法可以做到這一點。我列舉它們，並附上一個註釋，顯示出示例輸出： date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)" date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)" date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT" date.toDateString() //"Sun Jul 22 2018" date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601格式) date.toLocaleString() //"22/07/2018, 07:22:13" date.toLocaleTimeString() //"07:22:13" 當然你並不限於這些方法 - 你可以使用更底層的方法從日期中獲取值，並構建任何想要的結果： date.getDate() //22 date.getDay() //0 (0表示星期日，1表示星期一..) date.getFullYear() //2018 date.getMonth() //6 (從0開始) date.getHours() //7 date.getMinutes() //22 date.getSeconds() //13 date....