본문 바로가기
공부/javascript

2022.07.05 - javascript 30 [ day4 ] Array 함수 연습

by 기묜몬 2022. 7. 5.

[ 공통 Array ] 

      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 = [
  'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
  'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
  'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
  'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
  'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
];

 

1.  Array.prototype.filter() : 조건을 걸어 배열을 걸러낼때 사용
    Q. Filter the list of inventors for those who were born in the 1500'
     - 1500년대에 태어난 사람들의 발명가 목록을 걸러라.

 const fifteen = inventors.filter(
        (inventor) => inventor.passed >= 1500 && inventor.passed <= 1600
      );
   // 함수 내부의 내용이 반환값(return)만 있다면 return 과 코드 블록인 중괄호({}) 를 생략할 수 있음
      console.table(fifteen);

 

 

2. Array.prototype.map(): 주어진 배열을 재구성한다. (first,last를 붙여 이름을 만든다 )
    Q. Give us an array of the inventors first and last names
     - 발명가들의 이름과 성 배열 정렬

  const fullNames = inventors.map(
        (inventors) => `${inventors.first} ${inventors.last}`
      );
      // 백틱사용하기 전엔 IsaacNewton 과 같이 문자열이 붙어서 나오므로 해줘야함.
      console.log(fullNames);

 

 

3. Array.prototype.sort() : 배열 안의 원소를 정렬하는 함수 ( 요소 순서를 결정 / 오름차순 )
    Q. Sort the inventors by birthdate, oldest to youngest 

      - 나이순으로 오름차순 정렬

      // const ordered = inventors.sort(function (a, b) {
      //   if (a.year > b.year) {
      //     return 1;
      //   } else {
      //     return -1;
      //   }
      // });
      // if~ return 코드를 밑의 코드처럼 줄이자
  
  const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
      console.table(ordered);

 

 

5.  Array.prototype.reduce() : 배열의 각 요소를 순회하며 callback 함수의 실행값을 누적하여 하나의 결과값 반환
    Q. How many years did all the inventors live all together?

     - 모든 발명가들은 몇 년을 함께 살았는가?

   const totalYears = inventors.reduce((total, inventors) => {
        return total + (inventors.passed - inventors.year);
      }, 0);
      console.log(totalYears); //  861년 / 연속된 두 요소의 생애주기 값으로 비교 후 정렬했다.

 

 

6.  create a list of Boulevards in Paris that contain 'de' anywhere in the name
     Q.해당 링크에 포함된 streetname 이름에 de가 포함된 streetname 목록 만들기
      https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

 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"));

=> 

1) mw-category 클래스 선택 

2) 클래스 안의 a태그를  links변수에 array형태로 할당

3) map으로 links의 요소들을 textContent로 바꾸고 

4) de를 포함하는 요소들만 반환

 

 

7. sort Exercise 
    Q. Sort the people alphabetically by last name
     - 성을 기준으로 배열을 알파벳순으로 정렬 

    const alpha = people.sort((FirstAlpha, SecondAlpha) => {
        const [aLast, aFirst] = FirstAlpha.split(", ");
        const [bLast, bFirst] = SecondAlpha.split(", ");
        return aLast > bLast ? 1 : -1;
        // console.log(last, first); // Becker Carl
        // console.log(lastOne);
      });
      console.log(alpha);

 

 

 8. Reduce Exercise
     Q. Sum up the instances of each of these
       - 요소를 요약하라 ( 종류별로 몇 개인지 모으라는 듯? ex) car -> 5 )

const data = ['car', 'car', 'truck', 'hyo','hyo','truck', 'bike', 'walk','hyo', 'car', 'van', 'bike', 'walk','hyo', 'car', 'hyo','van', 'car', 'hyo','truck', 'pogostick'];
// 오브젝트 항목이 없으면 오브젝트 항목은 0과 같으며,
      // 초기 항목을 0으로 설정한 다음 계속 이동하여 증가시켜 해당 오브젝트를 반환할 수 있다.
      const transportation = data.reduce(
        function (obj, item) {
          if (!obj[item]) {
            obj[item] = 0;
          }
          obj[item]++;
          return obj;
        },
        {
          // 빈 객체로 시작해야함
        }
      );
      console.log(transportation);