JS30 Day 4 - Array Cardio Day 学习笔记

今天，这个单元主要是练习并熟悉关于阵列的一些方法，如处理资料、筛选资料等等。
而题目也分为8题

此处为题目会用到的资料

const inventors = [  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }];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'];

第一题 filter():过滤出生在1500年的发明家

filter也就是过滤资料，他会一个个去做过滤的动作，给予一组阵列，
return(可省略)一个以条件过滤的结果，返回一个新的阵列，但并不影响原本的阵列
console.table()，也就是资料以table呈现。

Array.prototype.filter()1. Filter the list of inventors for those who were born in the 1500'slet year = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600);console.table(year);

第二题 map():遍历并将发明家的姓氏、名字放进阵列

map与foreach最大差别，是否回回传一个新的阵列
foreach用的时机，当我们想对阵列内的每一个内容做处理
map用的时机，当我们想对阵列内的每一个内容做处理，并产生一个新的阵列

Array.prototype.map()2. Give us an array of the inventors first and last namesmap写法let names = inventors.map(inventor => inventor.first + ' ' + inventor.last);console.log(names);forEach写法(错误)let foreachNames = inventors.forEach(inventor => inventor.first + ' ' + inventor.last);console.log(foreachNames); // undefinedforEach写法正确写法创建一个新的阵列let arr = [];把处理完的资料一个个推进arr里面inventors.forEach(inventor =>arr.push(inventor.first + ' ' + inventor.last));console.log(arr);

第三题 sort():以发明家的出生日期，以年龄最大排至最老进行分类

sort通常需要放两个参数，去两两做比较，预设是用字串比较

Array.prototype.sort()3. Sort the inventors by birthdate, oldest to youngest

一般来说，直接sort，都是针对纯值或是字串，会预设由小到大

let arr = [1, 8, 5, 6, 7, 2];let arr2 = ['a', 'c', 'd', 'b'];arr.sort();arr2.sort();console.log(arr); // [1, 2, 5, 6, 7, 8]console.log(arr2); //["a", "b", "c", "d"]

<0[a,b] / =0(不变) / >0[b,a]

如果减去<0，前面的摆前面，如果等于0，不动，如果>0，后面摆前面let ages = inventors.sort((a, b) => a.year - b.year)console.table(ages);

第四题 reduce():计算全部发明家岁数的总和

第一个参数为处理，函数中又有两个参数(sum为总和,inventor为inventors的各笔资料)
第二个参数为初始值(0)

Array.prototype.reduce()4. How many years did all the inventors live all together?let sum = inventors.reduce((sum, inventor) => {  return sum + (inventor.passed - inventor.year)}, 0)// 当跑第一次sum=0 , inventor={first: 'Albert',last: 'Einstein',year: 1879, passed: 1955}// 第二次sum=76 , {first: 'Isaac',last: 'Newton',year: 1643,passed: 1727}...console.log(sum); // 861用foreach操作let sum = 0;inventors.forEach((inventor) => {  sum += (inventor.passed - inventor.year)});console.log(sum); // 861

第五题 sort():以发明家的年龄以大到小做排列

5. Sort the inventors by years lived新增一格年龄，以示岁数排列清楚inventors.forEach((inventor) => {  inventor.yearsOld = inventor.passed - inventor.year;});年龄做相减排列由大到小let ages = inventors.sort((b, a) => {  return (a.passed - a.year) - (b.passed - b.year)});console.table(ages);

第六题 map()&filter():到指定网址，创建一个Boulevards in Paris的list下包含'de'的资料

由于资料是以querySelectorAll获取，故资料为伪阵列，所以不可用map，而在此我们需要利用
Array.from将伪阵列转为真实的阵列，在用map遍历并处理完资料后，取资料的title，并以
includes方法去找含有'de'的资料
(includes() 方法会判断阵列是否包含特定的元素，并以此来回传 true 或 false)

6. create a list of Boulevards in Paris that contain 'de' anywhere in the namehttps://en.wikipedia.org/wiki/Category:Boulevards_in_Paris// 获取全部资料(伪阵列(不可用map))let six = document.querySelectorAll('.mw-category-group li a');console.log(six); //NodeList(38) [a, a, a, a, a, a,....// 利用Array.from转为真实阵列let arraySix = Array.from(six);console.log(arraySix); // (38) [a, a, a, a, a, a, a, a, a, a, ...// 利用map遍历并获取data(a标籤下)的title，然后再利用filter过滤title中，是否含有'de'let de = arraySix.map(data => data.title).filter(dataTitle => dataTitle.includes('de'));console.log(de); // (12) ["Boulevard de l'Amiral-Bruix", "Boulevard des Capucines", "Boulevard de ...]

第七题 sort():利用people中的姓氏去排列(由小到大)

此题，我们利用split()隔开元素，他会回传成阵列形式，并可个别取名，将名字分为a,b两个阵列取出来比较
也可写成a.split(' ');，预设以，隔开，而split(', ')中的(, )是参考我们要切的内容。
如果不加上[0]整个名字都会去比较，第一个字母相同的话就会去比较第二个字母。

7. sort ExerciseSort the people alphabetically by last name  let peopleNames = people.sort((a, b) => {  let [aFirstName, aLastName] = a.split(', ');  let [bFirstName, bLastName] = b.split(', ');  // 加上[0](只会比较字首)，如果a字母大于b字母(D>B)则[b,a]，为0则不变，小于则[a,b]  // return aLastName > bLastName ? 1 : bLastName> aLastName ? -1 : 0  return aLastName[0] > bLastName[0] ?1 :bLastName[0] > aLastName[0] ?-1 :0;});console.table(peopleNames);

第八题 reduce():计算每个实体的总数

此题，我们将初始值设为一个空物件，为了将计算后的每个实体都放进去，并做判断，譬如如果物件中没有'car'，那么就将'car'加至物件中，并赋予属性值为1，如果再拿到一个'car'，就直接将其属性值+1。

8. Reduce ExerciseSum up the instances of each of these 要计算的资料 const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];// 计算总数let value = 0;// 初始值为空物件let total = data.reduce((obj, item) => {  // 如果物件中没有这个属性，就创建一个并给予属性值为1  if (!obj[item]) {    obj[item] = 1;    // 每一次属性值+1时都会+1    value++; // 计算出总数  }  // 如果已经有某属性，也就是重複出现就+1  else {    obj[item] += 1;    // 每一次属性值+1时都会+1    value++;  }  console.log(obj); // {car: 1} =>  {car: 2} => {car: 2, truck: 1}...  console.log(obj[item]); // 当前属性值 1=>2=>1...  return obj;}, {});console.table(total); // {car: 5, truck: 3, bike: 2, walk: 2, van: 2}console.log(value); //14