2021/05/31 -2 자바스크립트

Array 

---

 

find() 메서드

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

 

구문

arr.find(callback[, thisArg])

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
//12

 

length() 메서드

Array 인스턴스의 length 속성은 배열의 길이를 반환합니다

const name = ['kim', 'park', 'lee']
console.log(name.length) //3

 

concat() 메서드

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 

 

구문

array.concat([value1[, value2[, ...[, valueN]]]])

const number = [1, 2, 3]
const name = ['kim', 'park', 'lee']
console.log(number.concat(name)) // [1,2,3,"kim", "park", "lee"]

 

forEach() 메서드

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

 

 

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

const name = ['kim', 'park', 'lee']

name.forEach(function (el, index, array) {
  console.log(el, index, array)
})

// kim 0 (3) ["kim", "park", "lee"]
// park 1 (3) ["kim", "park", "lee"]
// lee 2 (3) ["kim", "park", "lee"]​

 

map() 메서드

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

const name = ['kim', 'park', 'lee']

const a = name.forEach((el, index) => {
  console.log(`${el}-${index}`)
})
console.log(a) //undefined

const b = name.map((el, index) => {
  return `${el}-${index}`
})
console.log(b) //(3) ["kim-0", "park-1", "lee-2"]

forEach와 map 의 차이는

forEach는 반환값이 undefined,

map은 새로운 배열을 반환하는 것이 큰 차이입니다.

 

map 메서드를 사용하면 객체 데이터를 배열로 반환할 수 있습니다.

const b = name.map((el, index) => ({
  id: index,
  name: el
}))
console.log(b)

 

filter() 메서드

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

 

구문

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

const number = ['1', '2', '3']

const a = number.map(number => number < 3)
console.log(a) // [true, true, false]

const b = number.filter(number => number < 3)
console.log(b) // ["1", "2"]

 

findIndex() 메서드

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

 

구문

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

const array = ['Apple', 'Grape', 'Banana']
const a = array.findIndex(fruit => /^G/.test(fruit))

console.log(a); // 1

G로 시작하는 아이템의 Index 값이 출력됩니다.

 

includes() 메서드

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.

 

구문

arr.includes(valueToFind[, fromIndex])

const pets = ['cat', 'dog', 'bat']

console.log(pets.includes('cat')) //true
console.log(pets.includes('at')) //false

 

원본이 수정되는 메서드

---

push(), unshift(), reverse(), splice()

const number = [1, 2, 3, 4]

number.push(5)
console.log(number) //[1, 2, 3, 4, 5]

number.unshift(0)
console.log(number) //[0, 1, 2, 3, 4, 5]

number.reverse()
console.log(number) //[5, 4, 3, 2, 1, 0]

//3번째 index 아이템부터 2개를 삭제
number.splice(3, 2)
console.log(number) //[5, 4, 3, 0]

//1번째 index 아이템부터 0개를 삭제하고 100을 끼워넣기
number.splice(1, 0, 100)
console.log(number) //[5, 999, 4, 3, 0]

push 메서드는 배열의 끝에 요소를 추가하고 배열의 새로운 길이를 반환합니다.

unshift 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고 새로운 길이를 반환합니다.

reverse 메서드는 배열의 순서를 반전합니다.

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.