JavaScript 30 Day -- 06 Array

實現效果：

這一部分主要是熟悉 Array 的幾個基本方法。

關鍵點：

console.table（） //按照表格輸出
filter（） //過濾  --篩出運行結果是 true 的組成數組返回
map（）  //map 形象的理解就是，把數組中的每個元素進行處理後，返回一個新的數組。
sort（）  //排序
reduce（）  //這是一個歸併數組的方法，它接受一個函數作爲參數（這個函數可以理解成累加器），它會遍歷數組的所有項，然後構建一個最終的返回值，這個值就是這個累加器的第一個參數。
some（）  //some() 中直到某個數組元素使此函數爲 true，就立即返回 true。所以可以用來判斷一個數組中，是否存在某個符合條件的值。
every（）  //every() 中除非所有值都使此函數爲 true，纔會返回 true 值，否則爲 false。主要用處，即判斷是否所有元素都符合條件。
find（）  //對於符合條件的元素，返回對應的元素，否則undefined
findIndex（） //返回元素的索引或者-1。
splice（） //原數組會被修改。第二個參數代表要刪掉的元素個數，之後可選的參數，表示要替補被刪除位置的元素。
slice（）  //不修改原數組，按照參數複製一個新數組，參數表述複製的起點和終點索引（省略則代表到末尾），但終點索引位置的元素不包含在內。

javascript

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 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'];

    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'];

    // Array.prototype.filter()
    // 1. Filter the list of inventors for those who were born in the 1500's
    // 篩選 16 世紀出生的人
      const fifteen = inventors.filter(function(inventor) {
          if (inventor.year >= 1500 && inventor.year < 1600 ) {
              return true;
          }
      });
      console.table(fifteen);

      const __fifteen = inventors.filter(inventor =>(inventor.year >= 1500 && inventor.year < 1600));
      console.table(__fifteen);


    // Array.prototype.map()
    // 2. Give us an array of the inventors' first and last names
    // 展示上面發明家的姓名  
      const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);
//   const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
      console.log(fullNames);


    // Array.prototype.sort()
    // 3. Sort the inventors by birthdate, oldest to youngest
    // 把這些人從大到小進行排序
//    const ordered = inventors.sort(function(firstName, secondName) {
//        if(firstName.year > secondName.year) {
//            return 1;  //   對 sort 函數，返回值爲 -1 排在前面，1 排在後面
//        } else {
//            return -1;
//        }
//    });
//    console.table(ordered);   

      const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1);
      console.table(__ordered);


    // Array.prototype.reduce()
    // 4. How many years did all the inventors live
    // 他們所有人一共活了多少歲
    // 下面三種寫法是一樣的效果
//    var total = 0;
//    for(var i = 0; i < inventors.length; i++) {
//        total += inventors[i].passed - inventors[i].year;
//    }
//    console.log(total);
//
//   var totalYears = inventors.reduce(function(total, inventor) {
//        return total + inventor.passed - inventor.year;
//    }, 0);
//    console.log(totalYears);

      const totalYear = inventors.reduce( (total, inventor) => {
          return total + inventor.passed - inventor.year;
      }, 0);
      console.log(totalYear);

    // 5. Sort the inventors by years lived、
    // 按照他們在世的歲數進行排序
      const oldest = inventors.sort( (a, b) => {
          const last = a.passed - a.year;
          const next = b.passed - b.year;
          return (next < last) ? -1 : 1;
      });
      console.table(oldest);

    // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
    // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

    // 這個是超級酷的一個玩法，打開上面的網頁。然後輸入下面的語句，就可以篩選出頁面中含有 'de' 這個詞的所有街道的名稱

    // const category = document.querySelector('.mw-category');
    // const links = Array.from(category.querySelectorAll('a'));
    // const de = links
    //             .map(link => link.textContent)
    //             .filter(streetName => streetName.includes('de'));


      // 下面是我在豆瓣裏篩選書名裏含有 CSS 的書的代碼
      // https://book.douban.com/tag/web
//    const links = document.querySelectorAll('.subject-list h2 a');
//    const book = links
//                  .map(link => link.title)
//                  .filter(title => title.includes('CSS'));


    // 7. sort Exercise
    // Sort the people alphabetically by last name
    // 按照姓氏的字母進行排序
      const sortName = inventors.sort( (a, b) => {
          return (a.last > b.last) ? 1 : -1;
      })
      console.table(sortName);


    // 8. Reduce Exercise
    // Sum up the instances of each of these
    // 統計各個物品的數量
      const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
      const reduce = data.reduce( (obj, item) => {
          if( !obj[item]  ) {
              obj[item] = 0;
          }
              obj[item]++;
              return obj;
      }, {});
      console.log(reduce);

const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];

    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19? 是否有人超過 19 歲？
    const isAdult = people.some( person => {
        const currentYear = (new Date()).getFullYear();
        return currentYear - person.year >= 19;
    });
    console.log({isAdult});

    // Array.prototype.every() // is everyone 19? 是否所有人都是成年人？
    const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
    console.log({allAdult});

    // Array.prototype.find()
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423
    // 找到 ID 號爲 823423 的評論
    const comment = comments.find(comment => comment.id == 823423);
    console.log(comment);

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    // 刪除 ID 號爲 823423 的評論
    const index = comments.findIndex(comment => comment.id == 823423);

    // 刪除方法一，splice()
    // comments.splice(index, 1);
    console.table(comments);
    // 刪除方法二，slice 拼接
    const newComments = [
        ...comments.slice(0, index),
        ...comments.slice(index + 1)
    ];
    console.table(newComments);