开源软件名称(OpenSource Name):learn-co-curriculum/phase-1-javascript-functional-library-project开源软件地址(OpenSource Url):https://github.com/learn-co-curriculum/phase-1-javascript-functional-library-project开源编程语言(OpenSource Language):JavaScript 96.6%开源软件介绍(OpenSource Introduction):JavaScript Functional Library ProjectLearning Goals
IntroductionIn this lab, you will gain a deeper understanding of JavaScript's built in
collection-processing methods ( The programming approach you will be using in this lab is an example of functional programming (FP). There is nothing new or different here — we've been guiding you all along to think in the "FP" mindset — but you should use this as an opportunity to start understanding some important distinctions between functional programming and other styles of programming. A complete understanding of functional programming requires an understanding of a number of advanced topics in JavaScript, including pure functions, side effects, and immutability. However, at its most basic, FP can be understood as a programming style in which data manipulation occurs through functions that return the result of the manipulation without modifying the state of the original data. This style of programming can be contrasted with programming approaches that use shared state, in which data is manipulated and the results stored in a central location (commonly known as state). You will learn more about shared state when you get to React in the next phase. Read through this blog post about functional programming before continuing with the lab, but don't worry too much if you don't understand everything you read. Your goal should be to begin to get a feel for the concepts and for the distinction between functional programming and other styles of programming. InstructionsListed below are function signatures for each of the functions you will need to build. Each signature details what the name, parameters, and return value of the function should be. Pay close attention to these requirements as you work your way through. There are also some sample function calls provided with their expected return values; be sure to use them to test your functions. The functions are divided into three categories: array functions, object functions, and functions that should work with either collection type. Your job is to develop the code to implement these functions. The point of this exercise is to build your own implementation of the collection-processing methods. Don't simply re-use the built-in methods! Leverage all you know about callbacks, passing data, etc. to prove that you could build your own collection-processing framework whenever you want. Hint: For the first set of functions, you will need to figure out how to
make them work with either arrays or objects. There are multiple ways you could
approach this. One option is to use an Collection Functions (Arrays or Objects)myEach
Parameter(s):
Return value:
Behavior: Iterates over the collection of elements, passing each element in turn to the callback function. Returns the original, unmodified, collection. Example function calls: myEach([1, 2, 3], alert);
=> alerts each number in turn and returns the original collection
myEach({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn and returns the original collection myMap
Parameter(s):
Return value:
Behavior: Produces a new array of values by mapping each value in Example function calls: myMap([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
myMap({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9] myReduce
Parameter(s):
Return value:
Behavior: Reduce iterates through a The Hint: For the case when a start value for the accumulator is not passed in as an argument, think about how you'll need to adjust your function to account for the fact that the first element of the collection has already been accounted for. Example function calls: myReduce([1, 2, 3], function(acc, val, collection) { return acc + val; }, 10);
=> 16
myReduce({one: 1, two: 2, three: 3}, function(acc, val, collection) { return acc + val; });
=> 6 myFind
Parameter(s):
Return value:
Behavior: Looks through each value in the Example function calls: myFind([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> 2
myFind({one: 1, three: 3, four: 4, six: 6}, function(num){ return num % 2 == 0; });
=> 4 myFilter
Parameter(s):
Return value:
Behavior: Looks through each value in the Example function call: myFilter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]
myFilter({one: 1, three: 3, five: 5}, function(num){ return num % 2 == 0; })
=> [] mySize
Parameter(s):
Return value:
Behavior: Return the number of values in the Example function calls: mySize({one: 1, two: 2, three: 3});
=> 3
mySize([]);
=> 0 Array FunctionsmyFirst
Parameter(s):
Return value:
Behavior: Returns the first element of an Example function calls: myFirst([5, 4, 3, 2, 1]);
=> 5
myFirst([5, 4, 3, 2, 1], 3);
=> [5, 4, 3] myLast
Parameter(s):
Return value:
Behavior: Returns the last element of an Example function calls: myLast([5, 4, 3, 2, 1]);
=> 1
myLast([5, 4, 3, 2, 1], 3);
=> [3, 2, 1] BONUS: mySortByNote: Coding the
Parameter(s):
Return value:
Behavior: Returns a sorted copy of Note: The point of this exercise is not to write your own sorting algorithm
and you are free to use the native JS
sort.
You will, however, need to construct your Example function calls: mySortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num) });
=> [5, 4, 6, 3, 1, 2];
const stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
mySortBy(stooges, function(stooge){ return stooge.name });
=> [{name: 'curly', age: 60}, {name: 'larry', age: 50}, {name: 'moe', age: 40}]; BONUS: If you would like to go deeper and try to construct your own sorting algorithm, this is a great extension. Check out this list of sorting algorithms implemented in JS with additional resources. BONUS: myFlattenNote: Coding the
Parameter(s):
Return value:
Behavior: Flattens a nested If you pass Example function calls: myFlatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];
myFlatten([1, [2], [3, [[4]]]], true);
=> [1, 2, 3, [[4]]]; Hint: This one is challenging! You will need to use recursion to make this work for the multi-level case. Think about why we need that third argument here. Also think about how to handle the two optional arguments when you call the function recursively. Object FunctionsmyKeys
Parameter(s):
Return value:
Behavior: Retrieve all the names of the Example function call: myKeys({one: 1, two: 2, three: 3});
=> ["one", "two", "three"] myValues
Parameter(s):
Return value:
Behavior: Return all of the values of the Example function call: myValues({one: 1, two: 2, three: 3});
=> [1, 2, 3] ConclusionBuilding a functional library is a great experience for learning to see how many functions can build off of each other. This lab asked you to take on some of the basic tasks that you would face when writing a functional library. Expand your vocabulary by visiting a library like lodash or ramda. Look at methods like Ramda's filter or flip. Can you imagine how to write that? These libraries are providing the functionality just like you did! You've pushed your skills to a whole new level. Congratulations! Resources |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论