Javascript JS 배열(array)

배열 - 문자, 숫자, 객체, 함수 등 포함 가능

let arr = [
	'민수', // 문자
    3, // 정수
    false, // 논리연산자
    {
    	name: 'Mike',
        age: 30,
    }, // 객체
    function() { // 함수
    	console.log('TEST');
    }
]

console.log(arr[4]);
console.log(arr[3].name);

 

let days = ['월','화','수'];

 

호출

console.log(days[index]);

인덱스0결과

 

길이

console.log(days.length);

결과

 

추가

배열뒤에

days.push('목');
console.log(days);

결과

 

배열앞에

days.unshift('일');
console.log(days);

결과

 

제거

배열뒤에

days.pop();
console.log(days);

결과

 

배열앞에

days.shift();
console.log(days);

결과

 

for ... of - for 문보단 간결하지만 index를 얻을수 없음

for(let day of days) {
	console.log(day);
}

결과

 

배열도 객체이기 때문에 for ... in 은 사용가능 하나 단점이 많아서 권장하지 않음.

 

splice(n, m, x) - n부터 m까지 특정 요소 지우고 x 값을 차례로 추가

let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");
// ["나는", "대한민국", "소방관", "철수", "입니다"]
arr.splice(1, 2);
// ["나는"]

 

slice() - n부터 m까지 반환

let arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4]

let arr2 = arr.slice(); // 배열복제

 

concat() - 합쳐서 새배열 반환

let arr = [1,2];
arr.concat([3,4]); // [1,2,3,4]

 

indexOf() / lastIndexOf()

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2
arr.indexOf(3,3); // 7
arr.lastIndexOf(3); // 7

 

includes() - 포함하는지

let arr = [1,2,3];
arr.includes(2); // true
arr.includes(8); // false

 

arr.find(fn) / arr.findIndex(fn)

// find(fn) 해당하는 첫 번째 값을 반환하고 없으면 undefind 를 반환
// findIndexOf(fn) 해당하는 첫 번째 값의 인덱스를 반환하고 없으면 undefind 를 반환
// ex 1)
let arr = [1,2,3,4,5];

const result = arr.find((item)=>{
  return item % 2 === 0; // 짝수인것
});

console.log(result); // 첫번째 착수인 2를 찾고 반환한다.

// ex 2)
let userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 },
];

const result2 userList.find(()=>{
  if (user.age < 19) { // userList 중 age 19 미만인것
    return true;
  }
  return false;
});

console.log(result2); // { name: "Tom", age: 10 } 이 해당함으로 true 반환

 

arr.filter(fn) - find와 findIndexOf 사용법과 같음, 만족하는 모든 요소를 배열로 반환

const arr = [1,2,3,4,5];

const result = arr.filter((item)=>{
  return item % 2 === 0;
});

console.log(result); // 짝수인 모든 값을 반환 [2, 4]

 

arr.reverse() - 역순으로 재정렬

const arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1] 반환

 

arr.map(fn) - 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

const userList = [
  { name: "Mike", age: 30 },
  { name: "Jane", age: 27 },
  { name: "Tom", age: 10 },
];

let newUserList = userList.map((user, index)=>{
  return Object.assign({}, user, {
    id: index + 1,
    idAdult: user.age > 19,
  });
});

console.log(newUserList);
console.log(userList); // 기존 값은 변경된게 없음.

결과

 

join("합칠 문자") / split("나눌 문자")

// join()
let arr = ["안녕","나는","철수야"];

let result = arr.join();
let result2 = arr.join("-");
console.log(result); // join() 내부에 아무것도 입력하지 않았을시 기본 (,) 으로 합쳐짐 결과, "안녕,나는,철수야"
console.log(result2); // join("-") 내부에 입력한 (-) 으로 합쳐짐 결과, "안녕-나는-철수야"

// split()
const users = "Mike,Jane,Tom,Tony";
const result3 = users.split(",");
console.log(result3); // 문자열 users를 , 기준으로 잘라 배열로 만듬 결과, ["Mike","Jane","Tom","Tony"]

 

Array.isArray(객체 또는 배열) - 배열이면 true 배열이 아니면 false 반환

 

arr.sort() - 배열 재정렬, 배열 자체가 변경되니 주의가 필요

// 함수 이용X
let arr = [1,5,4,2,3];
arr.sort();
console.log(arr); // 결과 [1,2,3,4,5]

let arr2 = [27,8,5,13];
arr2.sort();
console.log(arr2); // 결과 [13,27,5,8] 13앞에 1과 27 앞에 2의 기순으로 정렬이 되기 때문에 이상하게 정렬됨

// 함수 이용
arr2.sort((a, b)=>{
  return a - b;
});
console.log(arr2); // 결과 [5,8,13,27]

 

reduce

// ex 1)
let arr = [1,5,4,2,3];
// 배열의 모든수 합치기
// 인수를 함수로 받음
// (누적 계산값, 현재값) => { return 계산값 };
const result = arr.reduce((prev, current)=>{
  return prev + current;
}, 0);
console.log(result); // 결과 15

// ex2 )
let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, current)=>{
  if(current.age > 19) {
    prev.push(current.name);
  }
  return prev;
}, []);

console.log(result);