배열_JavaScript

배열

let arr = new Array();
arr[0] = 10;
arr[5] = 1 // 배열이 0~5까지 생기고 5번째 인덱스가 1로 변경됨

배열 추가

변수.push(값)(반복문에도 쓰임)
변수.unshift() 맨 앞의 값 추가

배열 삭제

변수.pop() 끝의 값만 삭제
변수.shift() 맨 앞의 값만 삭제
delete 배열명[인덱스번호]

split()

• 배열은 못 짜름 (문자열 -> 배열 ㅇ, 배열 -> 배열 x)
• 문자열 자료형을 띄어쓰기 또는 해당기호 기준으로 짤라서 배열로 만듦
• 공백제거 할 때도 사용됨
• string.split(separator, limit)
  문자열을 'separator'로 잘라서,
  'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴한다.
• separator
  필수 아님,
  문자열을 잘라 줄 구분자 (문자열 또는 정규식),
  값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴한다.
• limit
  필수 아님,
  최대 분할 갯수

//ex1)
const str = "apple banana orange";
const arr = str.split();
document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1
//ex2)
let bin = 1000010001
let zeroArr = bin.split(0)
//[
  '1', '', '', '',
  '1', '', '', '1'
]
let zeroArr = bin.split(1)  
//[ '', '0000', '000', '' ]

• 배열에서 문자열로 변환해서 자르기

const report = ['a b c'];
const split = report.join(' ').split(' ')//['a', 'b', 'c']

배열 중복 제거

1. set

let a = [1,2,3,3,2];
let set = new Set(a); //중복제거
let b = [...set]; //배열로 변환
console.log(Array.isArray(b));,
코드 줄이기
let answer = [...new Set(temp)] //중복제거와 동시에 배열로 변환
let result = new Set(sum)
let arr = Array.from(result)

2 filter()

.indexOf(): 배열에서 특정값이 처음으로 나타나는 index를 리턴,

• 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환
  filter(): 특정조건에 부합하는 배열의 모든값을 배열 형태로 리턴
• 배열 각 요소에 대하여 주어진 함수의 결과값이 true인 요소를 모아 새로운배열을 반환
• 만약 조건에 부합되는 요소가 아무것도 없으면 빈 배열을 반환
• filter(callbackFunction, thisAgr) 2개의 인자를 가진다
• 그리고 callbackFunction 안에서 3개의 인자 (value, index, array) 를 가지는데 첫번째 부분인 value 인자만 필수로 지정되어야하고 나머지는 선택적이다
• ex)
  let numbers = [10, 4, 32, 17, 5, 2];
  1) 첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법)

let result = numbers.filter((value)=> value > 10);
console.log(result);      // [ 32, 17 ]

2) 두번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법)

function isBiggerThanTen (value) {
    return value > 10;
}
let result = numbers.filter(isBiggerThanTen);
console.log(result);      // [ 32, 17 ]

• ex)

let courses = [
{level:'easy', subject: "English" }, 
{level:'hard', subject: "Mathmatic" }, 
{level:'medium', subject: "Literature" }, 
{level:'hard', subject: "Science" }, 
{level:'medium', subject: "Socialogy" }
];
function filtered() {
  let result = courses.filter(courses(a) => courses(a).level =='hard')
    return result;
}
console.log(filtered())
출력-> [
  { level: 'hard', subject: 'Mathmatic' },
  { level: 'hard', subject: 'Science' }
]```

3. forEach()

• for문과 마찬가지로 반복적인 기능을 수행할때 사용
• 주어진 배열을 순회하면서, 배열의 원소들로 주어진 callback함수 실행,
• index와 조건식을 정의하지 않아도 callback함수를 수행할수 있음
• forEach(callback, thisArg)
• includes() 주어진 배열에 특정값이 포함되는지의 여부를 검사
• 변수.includes(실제변수에 들어가있는 값)
• 배열이 특정요소를 포함하고 있는지 Ture or False로 반환
• filter 와 includes를 함께 사용
• ex)

const arr = [1,2,3,4]
arr.forEach(function(value, index){
  console.log(`${index}번째의 값은${value}`)
})
//for문과의 차이점
//for문
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);
}
//forEach
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
superheroes.forEach(hero => {
  console.log(hero);
});
//특정문자 출력하기
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function filtered () {
  let result = fruits.filter((fruits)=> fruits.includes('ap'));
  return result
}
console.log(filtered()) //[ 'apple', 'grapes' ]
//총 합 구하기
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
  sum += n;
});
console.log(sum); //15

• 다차원배열
  console.log(myArray[3][2]) 로 접근

splice

• 배열내의 특정한요소를 삭제하거나, 다른요소로 대치하거나, 새로운요소를 추가할때 사용
• 보통 댓글삭제 기능을 구현할 때 많이 활용
• 원본 배열이 사라짐
• splice(인덱스의 시작점, 삭제할요소의 개수, 추가하고싶은 요소)
  변수.splice(,,);
  -ex)

//배열에서 30을 지운다고 가정
const numbers = [10, 20, 30, 40];
//30이 몇번째 인덱스 인지 indexOf로 알아냄
const index = numbers.indexOf(30);
//splice를 통해 해당 인덱스를 삭제
numbers.splice(index, 1);
console.log(numbers);
출력 -> [10, 20, 40]

.slice([start],[end])

• 시작점에 대한 인덱스, 종료할 기준인덱스 전까지 짤림
• 새로운 배열을 반환, 원본 배열은 수정되지 않음

.concat()

주어진 배열에 기존배열을 합쳐서 새로운배열을 반환(원본배열은 변하지않음, 중복가능)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated);
출력 -> [1, 2, 3, 4, 5, 6];

문자열 하나씩 출력하기

function getAllLetters(str) {
  let strArray = [];
  for(let i=0; i<str.length; i++){
    strArray.push(str[i]);
  }
  return strArray;
}
console.log(getAllLetters("Radagast"));
출력->['R','a','d','a','g','a','s','t']

map

• 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 것
• 매핑한다고 표현
• 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 되는 것
• 새로운 배열을 만들어 냄

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

• 매개변수
  callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
  -currentValue : 처리할 현재 요소
  -index(optional : 사용해도 되고 안해도 되고) : 처리할 현재 요소의 인덱스
  -array(optional : 사용해도 되고 안해도 되고) : map()을 호출한 배열
  -thisArg(optional : 사용해도 되고 안해도 되고) : callback을 실행할 때this로 사용되는 값
• 반환값
  배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
  map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
• 각 요소에 1씩 더한 값을 반환
  result = oneTwoThree.map((v) => {
  return v + 1;
  });
  result; // [2, 3, 4]
• this.state.변수.map((객체, 인덱스) => {
  }

reduce

• 배열의 각 요소에대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환
• 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째 파라미터는 reduce 함수에서 사용 할 초깃값
• map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형한다
• 예를들어 배열에 들어있는 숫자를 더하거나 평균을 구하는것을 배열을 값 하나로 줄이는 동작이다
• 네개의 인자를 가진다

1. 누산기accumulator(acc)
   값을 계속 갖고있음
2. 현재값(cur)
3. 현재 인덱스(idx)
4. 원본배열(src)
   리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회중 유지되므로 결국 최종결과는 하나의 값이 된다
   arr.reduce(callback[, initialValue])
   

//forEach로 배열의 총 합 구하기
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
  sum += n;
});
console.log(sum);//15
//reduce로 배열의 총 합 구하기
//0 은 직접 정하는 초깃값
let c = numbers.reduce((a, b) => a + b, 0)
console.log(c); //15

//평균구하기
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);
console.log(sum);//3

find

• 찾아낸 값 자체를 반환
• 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환, 값이 없으면 undefined 반환

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];
const todo = todos.find(todo => todo.id === 3);
console.log(todo);
 //{id: 3, text: "객체와 배열 배우기", done: true}

전개연산자 spread operator

[...변수].reverse()
배열이나 객체에서 element들을 꺼내어, 복사

.sort([]) 배열 정렬하기

- 0보다 작을경우 a가 b보다 앞에오고
- 0보다 클경우 b가 a보다 앞에 온다
- 0을 리턴하면 a와 b의 순서를 변경하지 않는다
- 원본 배열이 정렬된다

.sort((a, b) => a - b) 

.sort((x, y) => (x.dateFilter < y.dateFilter ? -1 : x.dateFilter > y.dateFilter ? 1 : 0))

• 두 숫자의 차가 양수값이냐, 음수값이냐를 이용해서 배열을 오름차순으로 정렬, 원본배열도 함께 정렬됨

.apply([],변수): 인자를 하나로 묶어 배열을 만들어 넣음

call & apply의 공통점: this를 대체한다

배열의 마지막값 가져오기

[arr.length -1]