JS/배열 메소드 array method 제대로 배우기(1) indexOf, findIndex,find,filter

 

1. 1차배열에서 값 찾기 : indexOf를 사용하자 

var arr = [ "사과", "딸기", "복숭아" ];
var arr2 = [ 5, 3, 0.5, 7, 2, 9];

console.log(arr.indexOf("복숭아")); // 2 출력
console.log(arr2.indexOf(5)); // 0 출력

//따라서 
const resultIndex= arr.indexOf("복숭아")

console.log(arr[resultIndex])  // 복숭아 출력!

2.객체배열에서 값 찾기 : findIndex , find

✅find : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소를 반환합니다.

 

만족하는 요소가 없으면 undefined를 소환 , 

✅findIndex: 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.

만족하는 요소가 없으면 -1을 반환합니다.

-> 배열에서만 사용가능하다 

**2022/9/14 추가 return을 입력안할시 제대로 작동안할 수도 있다 

else if (checked == false) { //체크해제시 arrInvList_checked에서 삭제 
				var index = arrInvList_checked.findIndex((obj) => {
					return obj.row_num === currGridData.row_num
				})

function test() {
  let result1, result2;
  var arr3 = [
    { num: 0, name: "홍길동" },
    { num: 1, name: "박보검" },
    { num: 2, name: "강호동" },
  ];

  result1 = arr3.find((list) => list.name === "강호동");
  result2 = arr3.findIndex((list) => list.name === "강호동");
  console.log(result1); //   { num: 2, name: "강호동" },
  console.log(result2);//    2
  console.log(typeof result1); // Object
  console.log(typeof result2); // number

  return `${JSON.stringify(result1)},${result2}`;
}

 

+++추가 객체를 출력할때는 JSON.stringify를 이용하자 

test()를 실행해 페이지에 출력

3. 조건에 맞는 새로운 배열을 반환하자 ! filter()

filter  메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

arr.filter(callback(element[, index[, array]])[, thisArg])

 

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

✅활용 1 배열의 내용을 검색

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

✅활용2 객체배열의 유효성을 검사

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 5

✅활용4 객체배열의 조건에 맞는 새로운 배열 반환 

// Assignment 2. courses 라는 배열이 있습니다.
// level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.
let courses = [
  {level:'easy', subject: 'English'}, 
  {level:'hard', subject: 'Mathmatic'}, 
  {level:'medium', subject: 'Literature'}, 
  {level:'hard', subject: 'Science'}, 
  {level:'medium', subject: 'Socialogy'}
];

// 아래 함수를 작성해주세요. 
function filtered() {
  return courses.filter((value) => value['level'] === 'hard')
}

console.log(filtered());
// [{ level: 'hard', subject: 'Mathmatic'}, {level: 'hard', subject: 'Science'}] 출력

++++추천 링크

2022.05.27 - [개발] - thisArg는 무엇일까

thisArg는 무엇일까

2022.05.27 - [분류 전체보기] - 개발일기 5월 27일자 배열함수 사용하기

개발일기 5월 27일자 배열함수 사용하기