|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <title>Array Cardio 💪</title> |
| 6 | +</head> |
| 7 | +<body> |
| 8 | + <p><em>请按 F12 查看 Console 面板</em> 💁</p> |
| 9 | + <script> |
| 10 | + |
| 11 | + // ## Array 基础 Day 1 |
| 12 | + |
| 13 | + // Some data we can work with |
| 14 | + |
| 15 | + const inventors = [ |
| 16 | + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, |
| 17 | + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, |
| 18 | + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, |
| 19 | + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, |
| 20 | + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, |
| 21 | + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, |
| 22 | + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, |
| 23 | + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, |
| 24 | + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, |
| 25 | + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, |
| 26 | + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, |
| 27 | + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } |
| 28 | + ]; |
| 29 | + |
| 30 | + const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; |
| 31 | + |
| 32 | + const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; |
| 33 | + |
| 34 | + // Array.prototype.filter() |
| 35 | + // 1. Filter the list of inventors for those who were born in the 1500's |
| 36 | + // 筛选 16 世纪出生的人 |
| 37 | + const fifteen = inventors.filter(function(inventor) { |
| 38 | + if (inventor.year >= 1500 && inventor.year < 1600 ) { |
| 39 | + return true; |
| 40 | + } |
| 41 | + }); |
| 42 | + console.table(fifteen); |
| 43 | + |
| 44 | + const __fifteen = inventors.filter(inventor =>(inventor.year >= 1500 && inventor.year < 1600)); |
| 45 | + console.table(__fifteen); |
| 46 | + |
| 47 | + |
| 48 | + // Array.prototype.map() |
| 49 | + // 2. Give us an array of the inventors' first and last names |
| 50 | + // 展示上面发明家的姓名 |
| 51 | + const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last); |
| 52 | +// const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); |
| 53 | + console.log(fullNames); |
| 54 | + |
| 55 | + |
| 56 | + // Array.prototype.sort() |
| 57 | + // 3. Sort the inventors by birthdate, oldest to youngest |
| 58 | + // 把这些人从大到小进行排序 |
| 59 | + const ordered = inventors.sort(function(firstName, secondName) { |
| 60 | + if(firstName.year > secondName.year) { |
| 61 | + return 1; // 对 sort 函数，返回值为 -1 排在前面，1 排在后面 |
| 62 | + } else { |
| 63 | + return -1; |
| 64 | + } |
| 65 | + }); |
| 66 | + console.table(ordered); |
| 67 | + |
| 68 | + const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1); |
| 69 | + console.table(__ordered); |
| 70 | + |
| 71 | + |
| 72 | + // Array.prototype.reduce() |
| 73 | + // 4. How many years did all the inventors live |
| 74 | + // 他们所有人一共活了多少岁 |
| 75 | + // 下面三种写法是一样的效果 |
| 76 | + var total = 0; |
| 77 | + for(var i = 0; i < inventors.length; i++) { |
| 78 | + total += inventors[i].passed - inventors[i].year; |
| 79 | + } |
| 80 | + console.log(total); |
| 81 | + |
| 82 | + var totalYears = inventors.reduce(function(total, inventor) { |
| 83 | + return total + inventor.passed - inventor.year; |
| 84 | + }, 0); |
| 85 | + console.log(totalYears); |
| 86 | + |
| 87 | + const totalYear = inventors.reduce( (total, inventor) => { |
| 88 | + return total + inventor.passed - inventor.year; |
| 89 | + }, 0); |
| 90 | + console.log(totalYear); |
| 91 | + |
| 92 | + // 5. Sort the inventors by years lived、 |
| 93 | + // 按照他们在世的岁数进行排序 |
| 94 | + const oldest = inventors.sort( (a, b) => { |
| 95 | + const last = a.passed - a.year; |
| 96 | + const next = b.passed - b.year; |
| 97 | + return (next < last) ? -1 : 1; |
| 98 | + }); |
| 99 | + console.table(oldest); |
| 100 | + |
| 101 | + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name |
| 102 | + // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris |
| 103 | + |
| 104 | + // 这个是超级酷的一个玩法，打开上面的网页。然后输入下面的语句，就可以筛选出页面中含有 'de' 这个词的所有街道的名称 |
| 105 | + |
| 106 | + // const category = document.querySelector('.mw-category'); |
| 107 | + // const links = Array.from(category.querySelectorAll('a')); |
| 108 | + // const de = links |
| 109 | + // .map(link => link.textContent) |
| 110 | + // .filter(streetName => streetName.includes('de')); |
| 111 | + |
| 112 | + |
| 113 | + // 下面是我在豆瓣里筛选书名里含有 CSS 的书的代码 |
| 114 | + // https://book.douban.com/tag/web |
| 115 | + const cate = document.querySelectorAll('.subject-list h2 a'); |
| 116 | + const book = links |
| 117 | + .map(link => link.title) |
| 118 | + .filter(title => title.includes('CSS')); |
| 119 | + |
| 120 | + |
| 121 | + // 7. sort Exercise |
| 122 | + // Sort the people alphabetically by last name |
| 123 | + // 按照姓氏的字母进行排序 |
| 124 | + const sortName = inventors.sort( (a, b) => { |
| 125 | + return (a.last > b.last) ? 1 : -1; |
| 126 | + }) |
| 127 | + console.table(sortName); |
| 128 | + |
| 129 | + |
| 130 | + // 8. Reduce Exercise |
| 131 | + // Sum up the instances of each of these |
| 132 | + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; |
| 133 | + const reduce = data.reduce( (obj, item) => { |
| 134 | + if( !obj[item] ) { |
| 135 | + obj[item] = 0; |
| 136 | + } |
| 137 | + obj[item]++; |
| 138 | + return obj; |
| 139 | + }, {}); |
| 140 | + console.log(reduce); |
| 141 | + |
| 142 | + </script> |
| 143 | +</body> |
| 144 | +</html> |
0 commit comments