Vue+ts 引用外部的js 檔案
阿新 • • 發佈：2021-07-17
“fool me once，shame on you. fool me twice, shame on me.”，翻譯過來的意思是“愚弄我一次，是你壞；愚弄我兩次，是我蠢”。手動敲的，拿來收藏。。 <!-- 地址：https://mp.weixin.qq.com/s/DKRk0DU5auqgn_ogmx5g_w --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8個JavaScript陣列操作必須熟練運用的方法</title> <script> /* *JavaScript提供了大量不同的處理陣列的方法 */ /* *1.Array.map() 使用.map()方法，可以建立一個基於原始陣列的修訂版陣列，.map()方法接受一個 函式，該函式遍歷陣列中的所有項並進行相應的修改。 當需要更新陣列中的所有項並將其儲存到一個新陣列中, .map()方法就可以派上用場了。 * */ // 如有個一文章列表的陣列： const articles = [ { article_id: "6976209276364652558", title: "如何在 vue 的計算屬性中傳遞引數", views: 1258, }, { article_id: "6976113133358153736", title: "Angular資料狀態管理框架：NgRx/Store", views: 2258, }, { article_id: "6975722363241365534", title: "Angular管道PIPE介紹", views: 1568, }, ]; // 現在基於上面文章列表陣列，獲取所有title組成的陣列，如下： const arrayTitles = articles.map((item) => item.title); console.log(arrayTitles); // [ // '如何在 Vue 的計算屬性中傳遞引數', // 'Angular資料狀態管理框架：NgRx/Store', // 'Angular管道PIPE介紹' // ] // 只要是陣列都可以使用.map()。接下來就基於上面標題陣列，增加作者資訊，如下： const arrayTitlesWithAuthor = arrayTitles.map( (title) => `《${title}》作者：天行無忌` ); console.log(arrayTitlesWithAuthor); //輸出結果如下: // [ // '《如何在 Vue 的計算屬性中傳遞引數》作者：天行無忌', // '《Angular資料狀態管理框架：NgRx/Store》作者：天行無忌', // '《Angular管道PIPE介紹》作者：天行無忌' // ] // .map()方法是一個用來建立新陣列,修改其內容並保持原始陣列不變的通用方法。 // 當出現需要修改現有陣列的內容並將結果儲存為新變數的時候就可以用 /* *2.Array.filter() * * filter()方法根據特定條件獲取陣列中的元素，像.map()方法一樣，它將返回一個新陣列 * 並保持原始陣列不變。 * * 基於上面的articles陣列,分別獲取views小於2000的和大於2000的文章列表 * */ const lessArticles = articles.filter((item) => item.views < 2000); const muchArticles = articles.filter((item) => item.views > 2000); console.log(lessArticles); console.log("\r\n==========================================\r\n"); console.log(muchArticles); //輸出的結果如下： // [ // { // article_id: '6976209276364652558', // title: '如何在 Vue 的計算屬性中傳遞引數', // views: 1258 // }, // { // article_id: '6975722363241365534', // title: 'Angular管道PIPE介紹', // views: 1568 // } // ] // // ========================================== // [ // { // article_id: '6976113133358153736', // title: 'Angular資料狀態管理框架：NgRx/Store', // views: 2258 // } // ] // 當需要從陣列中刪除不符合特定條件的元素時,可以使用.filter() /* *3.Array.find() .find() 方法看起來很像.filter()方法，跟.filter()方法一樣， 將匹配的條件的元素返回，區別在於.find()將只返回與提供的條件 匹配的第一個元素,不是陣列 **/ const lessArticle = articles.find((item) => item.views < 2000); const muchArticle = articles.find((item) => item.views > 2000); console.log(lessArticle); console.log("\r\n==========================================\r\n"); console.log(muchArticle); //輸出結果： // { // article_id: '6976209276364652558', // title: '如何在 Vue 的計算屬性中傳遞引數', // views: 1258 // } // ========================================== // { // article_id: '6976113133358153736', // title: 'Angular資料狀態管理框架：NgRx/Store', // views: 2258 // } // 什麼時候使用Array.find() 呢？當需要獲取陣列通過定義條件的第一個元素時 /* *4. Array.forEach() .forEach() 方法的工作方式很像常規的 for 迴圈，遍歷一個數組 並在每個元素上執行一個函式。.forEach() 的第一個引數是回撥函式，它包含迴圈陣列的當前值和索引。 **/ articles.forEach((item, index) => { console.log(`文章索引 ${index} 的標題為《${item.title}》`); }); // 輸出結果如下： // 文章索引 0 的標題為《如何在 Vue 的計算屬性中傳遞引數》 // 文章索引 1 的標題為《Angular資料狀態管理框架：NgRx/Store》 // 文章索引 2 的標題為《Angular管道PIPE介紹》 // 當需要簡單地遍歷陣列的每個元素而不是需要構建新陣列時 /* *5. for...of ***/ // for...of 是es6推出的迭代器，號稱最簡潔，可以是用 break，continue和 return 終止迴圈。跟 .forEach() 不同的是，不提供陣列索引。跟 for 語句相比程式碼少得多，更簡潔。 // 下面程式碼遍歷輸出陣列，如下： for(const item of articles){ console.log(item); } /* *6.Array.every() .every()方法將檢查陣列中的每個元素是否都通過提供的條件，如果陣列中的所有元素都通過條件，則將返回 true ，如果沒有，將返回 false。 * * **/ // 例如，檢查 articles 陣列所有的文章 views 都超過 1000，如下： const isMoreThan1000 = articles.every((item) => item.views > 1000); console.log(isMoreThan1000); // true // 檢查 articles 陣列所有的文章 views 都超過 2000，如下： const isMoreThan2000 = articles.every((item) => item.views > 2000); console.log(isMoreThan2000); // false // **什麼時候使用 Array.every() ？**當需要確認陣列的每一項都通過定義的條件時。 /* *7.Array.some() .some() 方法和 .every() 方法類似，但驗證的結果是相反的，如果陣列中的所有元素只要有一個通過條件，則將返回 true ，如果所有的元素都不通過條件，將返回 false。 **/ // 例如，檢查 articles 陣列所有的文章 views 是否有 views 超過 2000 的文章，如下： const isMore2000 = articles.some((item) => item.views > 2000); console.log(isMore2000); // true // 檢查 articles 陣列所有的文章 是否有 views 超過 3000 的文章，如下： const isMore3000 = articles.some((item) => item.views > 3000); console.log(isMore3000); // false /* *8.Array.reduce() .reduce() 方法接受一個回撥函式作為其第一個引數，一個可選的初始值作為其第二個引數。 如果沒有提供初始值，則使用第一個陣列元素作為值。回撥函式提供一個累加器 accumulator 和 currentValue 引數，用於執行 reduce 計算。 */ //這裡就簡單舉個例子，對 articles 陣列的 views 進行累加求和: const sumViews = articles.reduce( (accumulator, current) => accumulator + current.views, 0 ); console.log(sumViews); // 5084 // 使用 .reduce() 方法可以用於展平一個數組，當然已經有很多方法可以做到這一點，這就是其中的方法之一。 const flattened = [ [0, 1], [2, 3], [4, 5], ].reduce((accumulator, current) => accumulator.concat(current), []); console.log(flattened); // [ 0, 1, 2, 3, 4, 5 ] //當需要通過操作其值將陣列向下轉換為單個值時，可以使用 .reduce() 方法 </script> </head> <body> </body> </html>