배열
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
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는 배열 자체를 변형한다
- 예를들어 배열에 들어있는 숫자를 더하거나 평균을 구하는것을 배열을 값 하나로 줄이는 동작이다
- 네개의 인자를 가진다
- 누산기accumulator(acc)
값을 계속 갖고있음- 현재값(cur)
- 현재 인덱스(idx)
- 원본배열(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}
[...변수].reverse()
배열이나 객체에서 element들을 꺼내어, 복사
- 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))
call & apply의 공통점: this를 대체한다
[arr.length -1]