在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中為多個元素添加事件監聽器，該如何實現呢？ 在JavaScript中，你可以使用以下語法為單個元素添加事件監聽器： document.querySelector('.my-element').addEventListener('click', event => { // 處理點擊事件 }) 但是，如果你想將相同的事件附加到多個元素上，該怎麼辦呢？ 也就是說，如何同時在多個元素上調用addEventListener()？ 你可以通過2種方式實現這一目標。一種是使用循環，另一種是使用事件冒泡。 使用循環 循環概念上是最簡單的。 你可以使用querySelectorAll()獲取具有特定類名的所有元素，然後使用forEach()對它們進行迭代： document.querySelectorAll('.some-class').forEach(item => { item.addEventListener('click', event => { // 處理點擊事件 }) }) 如果你的元素沒有共同的類名，你可以即時構建一個數組： [document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => { item.addEventListener('click', event => { // 處理點擊事件 }) }) 使用事件冒泡 另一個選項是依賴於事件冒泡，並將事件監聽器附加到body元素上。 事件總是由最特定的元素來處理，因此你可以立即檢查是否是應該處理事件的元素之一： const element1 = document.querySelector('.a-class') const element2 = document.querySelector('.another-class') body.addEventListener('click', event => { if (event.target !== element1 && event.target !== element2) { return } // 處理點擊事件 })

我遇到了這個問題：如何計算兩個日期之間的天數？ 具體來說，我想要計算一個人租房並在其中入住的夜晚數量，根據入住日期和退房日期。 我查看了不同的解決方案，並找到了一個在考慮到日期的所有問題（包括夏令時間）後給我帶來最少問題的解決方案：從開始日期開始，我們一直添加一天，直到日期表示的日期在結束日期之後為止。 以下是程式碼： const numberOfNightsBetweenDates = (startDate, endDate) => { const start = new Date(startDate) //複製日期對象 const end = new Date(endDate) //複製日期對象 let dayCount = 0 while (end > start) { dayCount++ start.setDate(start.getDate() + 1) } return dayCount } 我首先複製了我們給定的日期，因為日期是對象，我們得到對該對象的引用。這意味著在函數中使用setDate()也會影響到函數外的變量，這是我們不希望看到的！ 就這樣。 如果您只是想獲取兩個日期之間的天數（例如，從今天到明天是2天），只需將 while (end > start) 更改為 while (end >= start) 即可。這樣就可以了。或者將dayCount的起始點增加為1。

這是一個非常常見的任務：如何在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....

使用字串實例的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為您提供的將項目追加到數組的方法，以及您應該使用的規範方法。 追加單個項目 要將單個項目追加到數組中，可以使用由Array對象提供的push()方法： const fruits = ['香蕉', '梨子', '蘋果'] fruits.push('芒果') push()會修改原數組。 如果要創建一個新的數組，可以使用concat()數組方法： const fruits = ['香蕉', '梨子', '蘋果'] const allfruits = fruits.concat('芒果') 請注意，concat()實際上並不會將項目添加到數組中，而是創建一個新的數組，您可以將其分配給另一個變量，或者重新指定給原始數組（以let聲明，因為您無法重新指定const）： let fruits = ['香蕉', '梨子', '蘋果'] fruits = fruits.concat('芒果') 追加多個項目 要將多個項目追加到數組中，可以使用push()，通過將多個參數作為參數調用它： const fruits = ['香蕉', '梨子', '蘋果'] fruits.push('芒果', '西瓜', '酪梨') 您還可以使用前面看到的concat()方法，通過逗號分隔的項目列表來傳遞： const fruits = ['香蕉', '梨子', '蘋果'] const allfruits = fruits.concat('芒果', '西瓜', '酪梨') 或者一個數組： const fruits = ['香蕉', '梨子', '蘋果'] const allfruits = fruits.concat(['芒果', '西瓜', '酪梨']) 請記住，正如之前所述，這種方法不會修改原數組，而是返回一個新的數組。

函數在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中，如何使用日期对象来表示10天后、一周后、一个月后的日期？ 在JavaScript中处理日期总是有趣的。我无数次地写过关于这个主题的文章，但总有更多的东西需要学习。 请务必查看我的JavaScript日期指南 今天，我有解决这个问题的方法：你有一个JavaScript中的日期对象，你想要在它上面添加一些天数。 你应该如何做到这一点呢？ 这是一个代表今天的日期： const my_date = new Date() 假设我们想要获取“30天后”的日期。 我们可以使用setDate()和getDate()方法，像这样： my_date.setDate(my_date.getDate() + 30)