[Javascript] Refactoring: Array.prototype by example [filter, some, forEach]
JavaScript by Array filter prototype foreach Example some
2023-09-14 08:59:20 时间
Refactoring is a great opportunity to learn and we have an existing Javascript function that is lengthy, hard to understand, and overcomplicated. We'll take a look at putting some of Javascript's built in Array.prototype methods to use to help us clean this up and learn by example through refactoring.
By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.
In this lesson we touch on just a few of the Array methods:
var Inbox = { /** * An array of message objects * Example: {id: 1, from: 'Joe Schmoe', subject: 'Hello There', flagged: false} */ messages: [], /** * Given an array of "selected message ids", decide whether to flag OR unflag them * * If all selected messages are flagged, unflag them. * If none selected messages are flagged, flag them. * If any selected messages are not flagged, flag them. * * @param selectedIds * @return {boolean} */ shouldFlag: function(selectedIds) { return this.messages .filter(message => selectedIds.indexOf(message.id) !== -1) .some(message => !message.flagged); }, /** * BEFORE refactoring */ oldShouldFlag: function(selectedIds) { // Assume don't flag var shouldFlagMessages = false; // Keep track of how many are flagged and not flagged var flaggedCount = 0; var unFlaggedCount = 0; // Get only the messages we care about var messagesInQuestion = []; for (var i = 0; i < this.messages.length; i++) { if (selectedIds.indexOf(this.messages[i].id) !== -1) messagesInQuestion.push(this.messages[i]); } // Determine the number of flagged messages vs. unflagged messages in the set for (var i = 0; i < messagesInQuestion.length; i++) { if (messagesInQuestion[i].flagged) { flaggedCount++; } else { unFlaggedCount++; } } // Only flag the messages if there are no flagged messages // OR there are messagesInQuestion present that are not flagged if (flaggedCount === 0 || unFlaggedCount !== 0) shouldFlagMessages = true; return shouldFlagMessages; } }; /** * Setup data, usages, and verify expected outcomes */ Inbox.messages = [ { id: 123, from: "John Doe", flagged: false, subject: "Please Read Me" }, { id: 124, from: "Mary Jane", flagged: true, subject: "Not so important..." }, { id: 125, from: "Bill Bob", flagged: false, subject: "Spam Content" }, { id: 126, from: "Josh Josherson", flagged: true, subject: "RE: Your Request" }, { id: 127, from: "Kate Katerson", flagged: true, subject: "Just Checking in" } ]; // Pretend these are Jasmine tests ;P function assertShouldFlag(expectation, selectedIds, description) { var result = Inbox.shouldFlag(selectedIds); var message = (result === expectation) ? "Pass!" : "Failed..."; console.log( description, message + " Expected " + expectation + " got " + result + " with " + JSON.stringify(selectedIds) + "\n" ); } console.clear(); console.log(Math.random()); assertShouldFlag(false, [124, 126], "If all selected messages are flagged, unflag them."); assertShouldFlag(true, [123, 125], "If none selected messages are flagged, flag them."); assertShouldFlag(true, [123, 124, 126, 127], "If any selected messages are not flagged, flag them.");
相关文章
- [Javascript] Create 2d array by using Array.from
- [Javascript] Destructuring array by using object syntax
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Broadcaster + Operator + Listener pattern -- 25. Save Network Requests by Using a Cache
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Safer property access with Lodash's 'get' method
- [Javascript] JavaScript Array Methods in Depth - push
- 【MySQL】in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [Javascript] Understand Function Composition By Building Compose and ComposeAll Utility Functions
- [Javascript] Identify and Deal with NaN in JavaScript
- javascript面向对象之Javascript 继承
- 【JavaScript变量】Javascript的全局变量&局部变量
- 【 华为OD机试 2023】 创建二叉树(C++ Java JavaScript Python)
- JavaScript面向对象编程