1. Trang chủ
  2. » Công Nghệ Thông Tin

Practical prototype and scipt.aculo.us part 9 ppsx

6 257 0

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 6
Dung lượng 86,71 KB

Nội dung

Using Enumerable#select What if we need to find several needles in a haystack? [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].select(isEven); //-> [2, 4, 6, 8, 10] Just like detect, select tests each item against the given function. But it doesn’t stop after the first match—it will return all items in the collection that match the criteria. ["foo", 1, "bar", "baz", 2, null].select( function(item) { return typeof item === "string"; }); //-> ["foo", "bar", "baz"] Unlike detect, which is guaranteed to return only one item, select will always return an array. If there are no matches, it will return an empty array. Using Enumerable#reject Nearly identical to select, reject will return all the items that fail a particular test. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reject(isEven); //-> [1, 3, 5, 7, 9] Using Enumerable#partition When you need to separate a collection into two groups, use Enumerable#partition.It returns a two-item array: the first an array of all items that passed the test, and the sec- ond an arr ay of all items that failed the test. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].partition(isEven); //-> [ [2, 4, 6, 8, 10], [1, 3, 5, 7, 9] ] Sorting Collections: min, max, and sortBy The next three Enumerable methods—min, max, and sortBy—address common situations of arranging collections by value. CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN)36 Using Enumerable#min and #max Much like Math.min and Math.max, which identify the smallest and largest values of all the arguments passed to them, Enumerable#min and #max will find the smallest and largest val- ues in an existing group: Math.min(1, 4, 9, 16, 25); //-> 1 Math.max(1, 4, 9, 16, 25); //-> 25 var squares = [1, 4, 9, 16, 25]; squares.min(); //-> 1 squares.max(); //-> 25 In this example, it’s easy to figure out what the minimum and maximum values are—numbers are directly comparable. For trickier collections, though, you’ll need to pass in a function to identify exactly what you want the maximum or minimum of: var words = ["flowers", "the", "hate", "moribund", "sesquicentennial"]; words.max( function(word) { return word.length; } ); //-> 16 words.min( function(word) { return word.length; } ); //-> 3 Comparing on string length, we get 3 and 16 as the min and max, respectively—the lengths of the shortest and longest words in the array. Using Enumerable#sortBy JavaScript has a built-in sorting method: Array#sort. Why do we need another? Let’s illustrate. If we try to use Array#sort on an example set of numbers, we’ll be in for a surprise: [2, 5, 4, 8, 9, 1, 3, 10, 7, 6].sort(); //-> [1, 10, 2, 3, 4, 5, 6, 7, 8, 9] As it happens, sort called with no arguments will coerce the array items into strings before it compares them. ( 10 is greater than 2, but "10" is less than "2".) If we want to compare the numbers directly, we must pass a function argument into sort: [2, 5, 4, 8, 9, 1, 3, 10, 7, 6].sort(function(a, b) { return a – b; }); //-> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN) 37 The passed function tells sort how to compare any two items in the array. In the pre- ceding example, if a is greater than b, then the return value will be positive, indicating that a should follow b.If b is greater than a, then the return value will be negative, and a will precede b. (If the return value is 0, then the two are equal, of course.) This is nuts—or, at the very least, surprising. We need a better sort function. Enumerable#sortBy works a little differently. It, too, takes a function argument, but the function is used only to translate a given item to a comparison value: var words = ["aqueous", "strength", "hated", "sesquicentennial", "area"]; // sort by word length words.sortBy( function(word) { return word.length; } ); //-> ["area", "hated", "aqueous", "strength", "sesquicentennial"] // sort by number of vowels in the word words.sortBy( function(word) { return word.match(/[aeiou]/g).length; } ) //-> ["strength", "hated", "area", "aqueous", "sesquicentennial"] As you can see, the comparison function takes one argument, rather than two. Most developers will find this far more intuitive. Advanced Enumeration: map, inject, invoke, and pluck The next four Enumerable methods carry more cryptic names, but are every bit as useful as the methods described previously. Using Enumerable#map and Enumerable#inject The map method performs parallel transformation. It applies a function to every item in a collection, pushes each result into an array, and then returns that array. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map( function(num) { return num * num; } ); //-> [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] The inject method returns an accumulated collection. Think of it as a hat being passed around to each of the items—each item throws a different quantity into the hat. CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN)38 var words = ["aqueous", "strength", "hated", "sesquicentennial", "area"]; var totalLength = words.inject(0, function(memo, string) { return memo + string.length; }); // -> 40 Since we need to keep track of memo—the variable that stores our running total—the arguments for inject are slightly different. The first argument of inject is our starting value— 0, in this case, since we’re dealing with a numeric property. The second argument is the function we’re using against the collection’s items. This inner function itself takes two arguments: our running total ( memo) and the item we’re working with ( string). The function’s return value will be used as the memo for the next item in the collection. This can be a bit confusing, so let’s add a logging statement to the inner function to illustrate what’s going on: var totalLength = words.inject(0, function(memo, string) { console.log('received ' + memo + '; added ' + string.length); console.log('returning ' + (memo + string.length)); return memo + string.length; }); //-> received 0; added 7 //-> returning 7 //-> received 7; added 8 //-> returning 15 //-> received 15; added 5 //-> returning 20 //-> received 20; added 16 //-> returning 36 //-> received 36; added 4 //-> returning 40 //-> 40 Now that you can see each step in the enumeration, the behavior of inject should be easier to follow. CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN) 39 Using Enumerable#pluck and Enumerable#invoke These two Enumerable methods are somewhat special. They take a string as their first argument instead of a function. The pluck method collects individual properties on each of the objects on the collection: var words = ["aqueous", "strength", "hated", "sesquicentennial", "area"]; words.pluck('length'); //-> [7, 8, 5, 16, 4] Note that this example code is equivalent to words.map( function(word) { return word.length; } ); but is shorter and more meaningful. The invoke method is similar: it calls the specified instance method on each item. Let’s illustrate by using one of Prototype’s string methods: " aqueous ".strip(); //-> "aqueous" var paddedWords = [" aqueous ", "strength ", " hated ", "sesquicencennial", " area "]; words.invoke('strip'); //-> ["aqueous", "strength", "hated", "sesquicentennial", "area"] This code is equivalent to words.map( function(word) { return word.strip(); } ); but invoke can also pass arguments along to the instance method. Simply add the required number of arguments after the first: "swim/swam".split('/'); //-> ["swim", "swam"] "swim/swam".replace('/', '|'); //-> "swim|swam" var wordPairs = ["swim/swam", "win/lose", "glossy/matte"]; wordPairs.invoke('split', '/'); //-> [ ["swim", "swam"], ["win", "lose"], ["glossy", "matte"] ] wordPairs.invoke('replace', '/', '|'); //-> ["swim|swam", "win|lose", "glossy|matte"] The map, inject, pluck, and invoke methods greatly simplify four very common code patterns. Become familiar with them and you’ll start to notice uses for them all over the code you write. CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN)40 Other Collections That Use Enumerable Two other Prototype classes that make use of Enumerable are Hash and ObjectRange. Together they serve as great examples of how to use Enumerable with other types of collections. Hash There is no built-in facility in JavaScript for setting key/value pairs—the construct that’s known as a hash (in Ruby), a dictionary (in Python), or an associative array (in PHP). There is, of course, an ordinary object, and this suffices for most cases. var airportCodes = { AUS: "Austin-Bergstrom Int'l", HOU: "Houston/Hobby", IAH: "Houston/Intercontinental", DAL: "Dallas/Love Field", DFW: "Dallas/Fort Worth" }; for (var key in airportCodes) { console.log(key + " is the airport code for " + airportCodes[key] + '.'); } >>> AUS is the airport code for Austin-Bergstrom Int'l. >>> HOU is the airport code for Houston/Hobby. >>> IAH is the airport code for Houston/Intercontinental. >>> DAL is the airport code for Dallas/Love Field. >>> DFW is the airport code for Dallas/Fort Worth. We can declare an object and iterate over its properties quite easily. This doesn’t get us everything a hash would, but it comes very close. Eventually, however, we’ll run into two major problems. Objects Have No Key Safety An object is not a blank slate when it’s declared. It has native properties and methods with names that may conflict with the names you’d want to use for your keys. CHAPTER 3 ■ COLLECTIONS (OR, NEVER WRITE A FOR LOOP AGAIN) 41 . array. Using Enumerable#reject Nearly identical to select, reject will return all the items that fail a particular test. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reject(isEven); //-> [1, 3, 5, 7, 9] Using. 3, 4, 5, 6, 7, 8, 9, 10].partition(isEven); //-> [ [2, 4, 6, 8, 10], [1, 3, 5, 7, 9] ] Sorting Collections: min, max, and sortBy The next three Enumerable methods—min, max, and sortBy—address. LOOP AGAIN)36 Using Enumerable#min and #max Much like Math.min and Math.max, which identify the smallest and largest values of all the arguments passed to them, Enumerable#min and #max will

Ngày đăng: 03/07/2014, 01:20

TÀI LIỆU CÙNG NGƯỜI DÙNG

  • Đang cập nhật ...

TÀI LIỆU LIÊN QUAN