[javascript] 배열 정리

javascript 배열 정리

배열 안의 내용을 출력하거나 순서대로 체크하고 싶을 경우

1. forEach 예제

/**
 *============
 * String 배열
 *============
 */
const array = ['커피','주스','녹차'];

array.forEach((value, index) => {
  //인덱스와 값을 순서대로 출력
  console.log(index, value);
});

//결과
0 "커피"
1 "주스"
2 "녹차"

array.forEach((value, index) => {
  // 커피만 출력
  if (value === '커피') 
    console.log(index, value);
});

//결과
0 "커피"

/**
 *============
 * 객체 배열
 *============
 */
const arrayObj = [
  { id:1, name:"커피", tasty:"쓰다"}
  , {id:2, name:"주스", tasty:"달콤"}
  , {id:3, name:"녹차", tasty:"깔끔"}
];

arrayObj.forEach((value, index)=> {
  //인덱스와 값을 순서대로 출력
  console.log(index, value);
});

//결과
{id: 1, name: "커피", tasty: "쓰다"}
{id: 2, name: "주스", tasty: "달콤"}
{id: 3, name: "녹차", tasty: "깔끔"}

arrayObj.forEach((value, index)=> {
  //id가 2인 name과 tasty만 출력
  arrayObj.forEach((value, index) => {
    if(value.id === 2)
      console.log(value.name,'는',value.tasty);
});

//결과
주스 는 달콤

2. for 예제 (for 변수 of  배열)

/**
 *============
 * String 배열
 *============
 */
const array = ['커피','주스','녹차'];

for(const value of array) {
  console.log(value);
}

//결과
커피
주스
녹차

3. for 예제 (for let i = 0; i < 배열길이; i++)

/**
 *============
 * String 배열
 *============
 */
const array = ['커피','주스','녹차'];

for(let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

//결과
커피
주스
녹차

---

배열 항목 추가/삭제

• unshift() : 첫위치에 항목 추가
• push() : 마지막 위치에 항목 추가
• shift() : 첫 위치의 항목 삭제
• pop(0 : 마지막 위치의 항목 삭제

const array = [1,2,3];

// 첫번째 위치에 추가
array.unshift(4);
console.log(array);

//결과
[4,1,2,3]

// 마지막 위치에 추가
array.push(5);
console.log(array);

//결과
[4,1,2,3,5]

// 첫번재 위치 항목 삭제
array.shift();
console.log(array);

//결과
[1,2,3,5]

// 마지막 위치 항목 삭제
array.pop();
console.log(array);

//결과
[1,2,3]

---

배열 항목 변경

• splice(위치, 추출개수, 항목추가/변경)

const array = [1,2,3];

// 두번째 위치에 2개 항목을 99, 100으로 변경 
array.splice(1,2,99,100);
console.log(array);

//결과
[1,99,100]

---

배열 합치기

• concat(배열, 배열, ...)

const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [7,8,9];

const array123 = array1.concat(array2,array3);
console.log(array123);

//결과
[1, 2, 3, 4, 5, 6, 7, 8, 9]

---

배열 합친 후 문자열 만들기

• join('결합문자')

const array123 = [1,2,3,4,5,6,7,8,9];

let jointest = array123.join();
console.log(jointest);

//결과
"1,2,3,4,5,6,7,8,9"

let jointest2 = array123.join('-');
console.log(jointest2);

//결과
"1-2-3-4-5-6-7-8-9"

---

배열 항목 검색

• indexOf(검색데이터) : 검색데이터의 첫번째 위치 리턴
• lastIndexOf('검색데이터') : 검색데이터의 마지막 위치 리턴
• includes('검색데이터') : 찾는 데이터 존재 시 true 리턴

const array = ['커피','주스','녹차','주스'];

array.indexOf('주스');

//결과
1

array.indexOf('토피넛');

//결과
-1

array.lastIndexOf('주스');

//결과
3

array.includes('주스');

//결과
true

array.includes('라떼');

//결과
false

---

배열 항목 가져오기

• find(콜백함수) : 콜백 함수 조건에 맞는 첫번재 항목
• findIndex(콜백함수) : 콜백 함수 조건에 맞는 첫번째 항목의 인덱스

const array = [
  {id:'a', name: '커피'}
  ,{id:'b', name: '주스'}
  ,{id:'c', name: '녹차'}
];

const getFindNameFromId = array.find((data) => data.id === 'a');

console.log(getFindNameFromId.name);

// 결과
"커피"

---

배열 항목 정렬

• reverse() : 역순 정렬
• sort(비교함수) : 배열을 비고 함수로 정렬

const arraySort = [1,2,3,3,4,5,6,7];

arraySort.sort((a,b) => {
  //a가 b보다 작으면 a,b의 순서로 정렬
  if (a < b) {
    return 1;
  }
  
  //a와 b가 같으면 정렬 안함
  if (a === b) {
    return 0;
  }
  
  //a가 b보다 크면 b,a의 순서로 정렬
  if (a > b) {
    return -1;
  }
});

console.log(arraySort);

//결과
7,6,5,4,3,3,2,1

/**
 * 객체 정렬 예제
 */
const arrayObj = [
  {id:10, name:'커피'}
  , {id:4, name:'주스'}
  , {id:20, name:'녹차'}
  , {id:5, name:'라떼'}
];

// id로 오름차순
arrayObj.sort((a,b) => {
    return a.id - b.id;
});

//결과
0: {id: 4, name: "주스"}
1: {id: 5, name: "라떼"}
2: {id: 10, name: "커피"}
3: {id: 20, name: "녹차"}

// id로 내림차순
arrayObj.sort((a,b) => {
    return b.id - a.id;
});

//결과
0: {id: 20, name: "녹차"}
1: {id: 10, name: "커피"}
2: {id: 5, name: "라떼"}
3: {id: 4, name: "주스"}

// 한글이름으로 오름차순
arrayObj.sort((a, b) => {
	return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

//결과
0: {id: 20, name: "녹차"}
1: {id: 5, name: "라떼"}
2: {id: 4, name: "주스"}
3: {id: 10, name: "커피"}

// 한글이름으로 내림차순
array1.sort(function(a, b) {  
	return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
});

//결과
0: {id: 10, name: "커피"}
1: {id: 4, name: "주스"}
2: {id: 5, name: "라떼"}
3: {id: 20, name: "녹차"}

---

배열 항목 추출하여 새 배열 만들기

• map(콜백함수) : 콜백 함수로 새로운 배열 생성

const arrayObj = [
    {id:10, name: '커피', tasty: '쓰다'}
  , {id:20, name: '주스', tasty: '달콤'}
  , {id:30, name: '녹차', tasty: '깔끔'}
];

// name과 tasty만 가져와 새로운 배열 만들기
const arrayObj2 = arrayObj.map((value) => {
  let tmpArray = {};
  tmpArray.name = value.name;
  tmpArray.tasty = value.tasty;
  return tmpArray;
});

//결과
0: {name: "커피", tasty: "쓰다"}
1: {name: "주스", tasty: "달콤"}
2: {name: "녹차", tasty: "깔끔"}

---

배열 필터 걸어 새 배열 만들기

filter(콜백함수) : 콜백 함수의 조건을 만족하는 데이터의 배열 생성

const array = [10,20,30,40]

// 30 보다 크거나 같은 데이터
const newArray = array.filter((value) => {
  return value >= 30;
})
console.log(newArray);
//결과
30,40

// age가 20보다 크거나 같은 데이터
const arrayObj = [
    {name: '김씨', age: 34}
  , {name: '이씨', age: 23}
  , {name: '박씨', age: 14}
];

const newArrayObj = arrayObj.filter((value) => {
  return value.age >= 20;
});
console.log(newArrayObj);
//결과
0: {name: "김씨", age: 34}
1: {name: "이씨", age: 23}

---

배열섞기 (피셔 예이츠 알고리즘)

const array = [1,2,3,4,5];
const arrayLen = array.length;

// 피셔 예이츠 알고리즘
for (let i = arrayLen-1; i >= 0; i-- ) {
  const randomIdx = Math.floor(Math.random() * (i+1));
  [array[i], array[randomIdx]] = [array[randomIdx], array[i]];
}

console.log(array);

//결과 (매번 다름)
[3, 4, 5, 1, 2]