JavaScript 算法和数据结构
1.分割数组
function chunkArrayInGroups(arr, size) { let [start, end, result] = [null, null, []]; for (let i = 0; i < Math.ceil(arr.length / size); i++) { start = i * size; end = start + size; result.push(arr.slice(start, end)); } return result; } chunkArrayInGroups(["a", "b", "c", "d"], 2);
2.了解使用命令式编程的危害通过
// tabs 是在窗口中打开的每个站点的 title 的数组 var Window = function(tabs) { this.tabs = tabs; // 我们记录对象内部的数组 }; // 当你将两个窗口合并为一个窗口时 Window.prototype.join = function (otherWindow) { this.tabs = this.tabs.concat(otherWindow.tabs); return this; }; // 当你在最后打开一个选项卡时 Window.prototype.tabOpen = function (tab) { this.tabs.push('new tab'); // 我们现在打开一个新的选项卡 return this; }; // 当你关闭一个选项卡时 Window.prototype.tabClose = function (index) { // 只修改这一行下面的代码 var tabsBeforeIndex = this.tabs.slice(0, index); // 点击之前获取 tabs var tabsAfterIndex = this.tabs.splice(index + 1); // 点击之后获取 tabs this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // 将它们合并起来 // 只修改这一行上面的代码 return this; }; // 我们创建三个浏览器窗口 var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // 你的邮箱、Google Drive 和其他工作地点 var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // 社交网站 var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // 娱乐网站 // 现在执行打开选项卡，关闭选项卡和其他操作 var finalTabs = socialWindow .tabOpen() // 打开一个新的选项卡，显示猫的图片 .join(videoWindow.tabClose(2)) // 关闭视频窗口的第三个选项卡，并合并 .join(workWindow.tabClose(1).tabOpen()); console.log(finalTabs.tabs);
3.在函数中重构全局变量
// 全局变量 var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]; // 修改这行下面的代码 function add (bookList,bookName) { return bookList.concat(bookName); // 修改这行上面的代码 } // 修改这行下面的代码 function remove (bookList,bookName) { return bookList.filter((b)=>b!=bookName); // 修改这行上面的代码 } var newBookList = add(bookList, 'A Brief History of Time'); var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies'); var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies'); console.log(bookList);
4.使用 map 方法从数组中提取数据
// 全局变量 var watchList = [ { "Title": "Inception", "Year": "2010", "Rated": "PG-13", "Released": "16 Jul 2010", "Runtime": "148 min", "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Christopher Nolan", "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy", "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.", "Language": "English, Japanese, French", "Country": "USA, UK", "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg", "Metascore": "74", "imdbRating": "8.8", "imdbVotes": "1,446,708", "imdbID": "tt1375666", "Type": "movie", "Response": "True" }, { "Title": "Interstellar", "Year": "2014", "Rated": "PG-13", "Released": "07 Nov 2014", "Runtime": "169 min", "Genre": "Adventure, Drama, Sci-Fi", "Director": "Christopher Nolan", "Writer": "Jonathan Nolan, Christopher Nolan", "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow", "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.", "Language": "English", "Country": "USA, UK", "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg", "Metascore": "74", "imdbRating": "8.6", "imdbVotes": "910,366", "imdbID": "tt0816692", "Type": "movie", "Response": "True" }, { "Title": "The Dark Knight", "Year": "2008", "Rated": "PG-13", "Released": "18 Jul 2008", "Runtime": "152 min", "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)", "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine", "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", "Language": "English, Mandarin", "Country": "USA, UK", "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg", "Metascore": "82", "imdbRating": "9.0", "imdbVotes": "1,652,832", "imdbID": "tt0468569", "Type": "movie", "Response": "True" }, { "Title": "Batman Begins", "Year": "2005", "Rated": "PG-13", "Released": "15 Jun 2005", "Runtime": "140 min", "Genre": "Action, Adventure", "Director": "Christopher Nolan", "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)", "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes", "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.", "Language": "English, Urdu, Mandarin", "Country": "USA, UK", "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg", "Metascore": "70", "imdbRating": "8.3", "imdbVotes": "972,584", "imdbID": "tt0372784", "Type": "movie", "Response": "True" }, { "Title": "Avatar", "Year": "2009", "Rated": "PG-13", "Released": "18 Dec 2009", "Runtime": "162 min", "Genre": "Action, Adventure, Fantasy", "Director": "James Cameron", "Writer": "James Cameron", "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang", "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.", "Language": "English, Spanish", "Country": "USA, UK", "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg", "Metascore": "83", "imdbRating": "7.9", "imdbVotes": "876,575", "imdbID": "tt0499549", "Type": "movie", "Response": "True" } ]; // 只修改这一行下面的代码 let ratings=watchList.map(item=>{ return {title:item["Title"],rating:item["imdbRating"]}}); // 只修改这一行上面的代码 console.log(JSON.stringify(ratings));
5.Map，Filter，Reduce方法并在数组原型中实现（原文链接：https://blog.csdn.net/ly979898684/article/details/89399409）
6.使用 reduce 方法分析数据
// 全局变量 var watchList = [ { "Title": "Inception", "Year": "2010", "Rated": "PG-13", "Released": "16 Jul 2010", "Runtime": "148 min", "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Christopher Nolan", "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy", "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.", "Language": "English, Japanese, French", "Country": "USA, UK", "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg", "Metascore": "74", "imdbRating": "8.8", "imdbVotes": "1,446,708", "imdbID": "tt1375666", "Type": "movie", "Response": "True" }, { "Title": "Interstellar", "Year": "2014", "Rated": "PG-13", "Released": "07 Nov 2014", "Runtime": "169 min", "Genre": "Adventure, Drama, Sci-Fi", "Director": "Christopher Nolan", "Writer": "Jonathan Nolan, Christopher Nolan", "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow", "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.", "Language": "English", "Country": "USA, UK", "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg", "Metascore": "74", "imdbRating": "8.6", "imdbVotes": "910,366", "imdbID": "tt0816692", "Type": "movie", "Response": "True" }, { "Title": "The Dark Knight", "Year": "2008", "Rated": "PG-13", "Released": "18 Jul 2008", "Runtime": "152 min", "Genre": "Action, Adventure, Crime", "Director": "Christopher Nolan", "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)", "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine", "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", "Language": "English, Mandarin", "Country": "USA, UK", "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg", "Metascore": "82", "imdbRating": "9.0", "imdbVotes": "1,652,832", "imdbID": "tt0468569", "Type": "movie", "Response": "True" }, { "Title": "Batman Begins", "Year": "2005", "Rated": "PG-13", "Released": "15 Jun 2005", "Runtime": "140 min", "Genre": "Action, Adventure", "Director": "Christopher Nolan", "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)", "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes", "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.", "Language": "English, Urdu, Mandarin", "Country": "USA, UK", "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg", "Metascore": "70", "imdbRating": "8.3", "imdbVotes": "972,584", "imdbID": "tt0372784", "Type": "movie", "Response": "True" }, { "Title": "Avatar", "Year": "2009", "Rated": "PG-13", "Released": "18 Dec 2009", "Runtime": "162 min", "Genre": "Action, Adventure, Fantasy", "Director": "James Cameron", "Writer": "James Cameron", "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang", "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.", "Language": "English, Spanish", "Country": "USA, UK", "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.", "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg", "Metascore": "83", "imdbRating": "7.9", "imdbVotes": "876,575", "imdbID": "tt0499549", "Type": "movie", "Response": "True" } ]; function getRating(watchList){ // 只修改这一行下面的代码 var averageRating = watchList.filter(x => x.Director === "Christopher Nolan").map(x => Number(x.imdbRating)).reduce((x, y) => x + y) / watchList.filter(x => x.Director === "Christopher Nolan").length; // 只修改这一行上面的代码 return averageRating; } console.log(getRating(watchList));
7.使用 sort 方法按字母顺序给数组
function alphabeticalOrder(arr) { // 只修改这一行下面的代码 return arr.sort((a,b)=>{ return a === b ? 0 : a < b ? -1 : 1; }) // 只修改这一行上面的代码 } alphabeticalOrder(["a", "d", "c", "a", "z", "g"]);返回：["a", "h", "m", "m", "n", "x"]