- splice : 특정 요소를 지우고 (추가하고) 싶다면???
arr.splice(n, m, x) : 특정 요소 지움 // n : 시작, m : 개수, x : 추가(필수사항X)// 특정요소 지우기!! // let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); // arr 의 [1]번째 부터 2개 지워라 console.log(arr); // [1, 4, 5]// 특정요소 지우고 추가하기!! // let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); // arr의 [1]번째 부터 3개 지우고 100, 200 넣어라 console.log(arr); // [1, 100, 200, 5]// 특정요소 추가하기!! // let arr = ["나는","홍길동","입니다"]; arr.splice(1, 0, "코딩", "마스터"); // arr의 [1]번째에 "코딩", "마스터" 넣어라 console.log(arr); // [ '나는', '코딩', '마스터', '홍길동', '입니다' ]// 삭제된 요소 반환하기!! // let arr = [1, 2, 3, 4, 5]; let answer = arr.splice(1, 2); // splice로 삭제한 값을 answer에 추가 console.log(arr); // [ 1, 4, 5 ] console.log(answer); // [ 2, 3 ]
- slice : 특정 요소를 반환하고 싶다면???
arr.slice(n, m) : n부터 m앞까지 봔환해라~ let arr = [1, 2, 3, 4, 5]; arr.slice(1, 4); // arr의 [1]번째 부터 [4]번째 앞까지 반환해라 === [1]~[3]까지 반환 console.log(arr); // [2, 3, 4]// 배열을 복사하고싶다! // let arr = [1, 2, 3, 4, 5]; let arr2 = arr.slice(); // 아무것도 입력하지 않으면 배열을 복사한다. console.log(arr2); // [ 1, 2, 3, 4, 5 ]
- concat : 배열을 합치고 싶다면???
arr.concat(arr2, arr3 ......) : 합쳐서 새배열로 반환! let arr = [1, 2]; arr.concat([3,4]); // [1, 2, 3, 4] arr.concat([3,4],[5,6]); // [1, 2, 3, 4, 5, 6] arr.concat([3,4],5,6); // [1, 2, 3, 4, 5, 6] - indexOf : 특정 요소의 위치 가져오기!
arr.indexOf(n, m); // n에 해당하는 요소가 있으면 해당요소의 인덱스 번호를 반환 없다면 -1 을 반환한다. // m(필수요소X) 시작위치 let arr = [1, 2, 3, 4, 5, 1, 2, 3] arr.indexOf(3); // 2 arr.indexOf(3,3); // 7 arr.lastindexOf(3); // 뒤에서 부터 찾아라~ 7 //--------------------// // 문자열도 동일하게 인덱스 번호를 반환한다. let arr = ['가', '나', '다', '라', '마']; arr.indexOf('라') // 3 - includes : 특정 요소를 포함하는지 확인하고 싶다면???
arr.includes() : 포함하는지 확인! let arr = [1, 2, 3]; arr.includes(2); // true arr.includes(7); // false //--------------------// // 문자열도 동일하게 작동한다. let arr = ['가', '나', '다', '라', '마']; arr.includes('나'); // true arr.includes('사'); // false - filter : 만족하는 모든 요소를 배열로 반환하고 싶다면???
let arr = [1, 2, 3, 4, 5, 6]; const answer = arr.filter((item) => { // item에 arr을 하나씩 넣어준다 return item % 2 === 0; // item이 짝수가 맞다면 answer에 넣어준다 }); console.log(answer); // [ 2, 4, 6 ] //--------------------// // 문자열도 동일하게 작동한다. let arr = ['가', '나나', '다', '라라라', '마마마마']; const answer = arr.filter((item) => { return item.length > 2; }); console.log(answer); // [ '라라라', '마마마마' ] - reverse : 역순으로 재정렬을 하고싶다면???
// 최근순으로 보여주기에 많이 사용함 let arr = [1, 2, 3, 4, 5]; arr.reverse(); // [5, 4, 2, 3, 1] - map : 반복!!반복!!반복!!반복!!
map, key 리액트는 가상 DOM 에 무언가 올라가고 진짜 DOM과 비교할때 어떤게 바뀌 었는지 비교할떄 필요한 값이 키이다 각 요소마다 키는 자동으로 들어간다 절대로 중복되지 않게 가지고 있는데 map은 return할떄 키 값을 지정해 준다 보통 map의 index로 키값을 정해준다//map의 기본형태 let a = [1,2,3,4] let newa = a.map ( (데이터, 인덱스) => { return 데이터*2 }); console.log(newa) // [ 2, 4, 6, 8 ]// map의 응용 let userList = [ { name : "Mike", age : 30 }, { name : "Jane", age : 20 }, { name : "Tom", age : 10 }, ]; let newUserList = userList.map( (user, idx) => { console.log(user, idx); //{ name: 'Mike', age: 30 } 0 //{ name: 'Jane', age: 20 } 1 //{ name: 'Tom', age: 10 } 2 return Object.assign({}, user, { id : idx + 1, isAdult : user.age > 19, }); }); //------------------------// console.log(userList); [ { name: 'Mike', age: 30 }, { name: 'Jane', age: 20 }, { name: 'Tom', age: 10 } ] console.log(newUserList); [ { name: 'Mike', age: 30, id: 1, isAdult: true }, { name: 'Jane', age: 20, id: 2, isAdult: true }, { name: 'Tom', age: 10, id: 3, isAdult: false } ] - join : 배열을 합쳐서 문자열을 만들고싶다면??
let arr = ['역시', '코드스니펫이', '최고야']; let newArr = arr.join(); console.log(newArr); // 역시,코드스니펫이,최고야 [아무 값도 넣어주지 않으면 ,으로 구분함 ]let arr = ['역시', '코드스니펫이', '최고야']; let newArr = arr.join(' '); console.log(newArr); // 역시 코드스니펫이 최고야 [공백으로 구분도 가능]let arr = [1,2,3,4,5,6,7,8,9,0]; let newArr = arr.join('-'); console.log(newArr); // 숫자 또한 가능하고 아무값으로나 구분할수있음 - split : 문자열을 배열로 나누고싶다면??
const bug = "나는,개똥벌레,친구가,없네"; const answer = bug.split(","); console.log(answer) // [ '나는', '개똥벌레', '친구가', '없네' ]const bug = "나는 개똥벌레 친구가 없네"; const answer = bug.split(""); //하나하나 나누고 싶다면??? console.log(answer) [ '나', '는', ' ', '개', '똥', '벌', '레', ' ', '친', '구', '가', ' ', '없', '네' ] // 띄어쓰기도 나눠준다!const email = "qwer@naver.com" const id = email.split("@") console.log(id) // [ 'qwer', 'naver.com' ] console.log(id[0]) // qwer //이런식으로 인덱스번째만 가져오기도 가능 - sort : 배열을 재정렬을 하고싶다면???
// 배열 자체가 변경되는 함수이니 주의해서 사용하자!! let arr = [2, 4, 1, 5, 3]; arr.sort(); console.log(arr); // [ 1, 2, 3, 4, 5 ] // 문자열도 동일하게 적용 // let arr = ['라', '가', '다', '나', '마']; arr.sort(); console.log(arr); // [ '가', '나', '다', '라', '마' ]!!!!!! 주의 !!!!!! let arr = [27, 8, 5, 13]; arr.sort(); console.log(arr); // [ 13, 27, 5, 8 ] // 이런식으로 인수를 문자열로 인식하기 때문에 단순한 방법 외에는 잘 정렬이 되지 않는다. // 이런 복잡한 값들을 정렬해줄땐 함수를 넣어줘서 비교후 정렬해준다. !!!!!! 주의 !!!!!! let arr = [27, 8, 5, 13]; arr.sort((a, b) => { return a - b; }); console.log(arr); // [ 5, 8, 13, 27 ] //------------------------// a - b 를 해주는 이유는 console.log(a, b); 를 찍어보면 알수있는대 8 27 // 8 - 27 = 27이 더 크다 [8, 27, 5, 13] 5 8 // 5 - 8 = 8이 더 크다 [5, 8, 27, 13] 13 5 // 13 - 5 = 5가 더 작다 [5, 8, 27, 13] 13 8 // 13 - 8 = 8가 더 작다 [5, 8, 27, 13] 13 27 // 13 - 27 = 27이 더 크다 [5, 8, 13, 27] 이와 같이 동작하며 값을 하나씩 비교해봐서 a - b 를 했을때 음수가 나오면 a 보다 b 가 크다 양수가 나오면 a 보다 b 가 작다 로 구분하여 정렬한다. - reduce : 배열의 모든수를 합치고싶다면???
let arr = [1, 2, 3, 4, 5]; const answer = arr.reduce( (누적계산값, 현재값) => { return 누적계산값 + 현재값; }, 0); // 0은 초기값 console.log(answer); // 15// reduce 응용하기! // 나이별로 구분해서 성인인 사람만 가져와 새 배열로 만들고 싶다! 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 : 7 }, ]; let answer = userList.reduce((누적계산값, 현재값) => { if (현재값.age > 19) { // 현재 들어온값에서 age값이 19 보다 크다면 누적계산값.push(현재값.name); // 누적계산값에 현재값에 name을 기본값인 빈 배열에 push 해라 } return 누적계산값 }, []); // 기본값을 빈 배열로 설정 console.log(answer) // [ 'Mike', 'Jane', 'Sue', 'Harry' ]// reduce 응용하기 2! // 이름이 3글자인 사람만 뽑아오고싶다!! 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 : 7 }, ]; let answer = userList.reduce((누적계산값, 현재값) => { if (현재값.name.length === 3) { // 만약 현재값에 name의 길이가 3 이라면 누적계산값.push(현재값.name); // 누적계산값에 현재값에 name을 기본값인 빈 배열에 push 해라 } return 누적계산값 }, []); // 기본값을 빈 배열로 설정 console.log(answer) // [ 'Tom', 'Sue' ]
Junior Developer🔥