DEVLOG
JS의 다양한 메소드를 만나보자 (2) forEach()/find()/findIndex()/includes()/indexOf()/sort()/replace()/join()/substring()/split() 본문
JS의 다양한 메소드를 만나보자 (2) forEach()/find()/findIndex()/includes()/indexOf()/sort()/replace()/join()/substring()/split()
meroriiDev 2020. 12. 8. 17:55JS의 다양한 메소드를 만나보자 (2편)
Array.
- forEach
- find
- findIndex
- includes
- indexOf
- sort
- join
String.
- replace
- substring
- split
배열관련
● forEach
: 주어진 함수를 배열 요소 각각에 대해 실행한다.
내 생각에는 밑에서 다루게 될 모든 메소드의 베이스가 되는 메소드인 것 같다.
배열.forEach(function(현재값[, index]){});
products.forEach(function(product,i){
console.log(product.id);
}
● find
: 배열 안을 돌면서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
: 만족하는 요소가 없다면 undefined 반환
배열.find(function(현재값){});
ex) id가 apple인 객체 찾기
var an1Answer = products.find(function(product){
if(product.id === 'apple') return product;
});
var an1Answer = products.find(function(product){
return product.id === 'apple';
});
● findIndex
: 배열에서 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.
: 만족하는 요소가 없으면 -1을 반환
배열.findIndex(function(현재값){});
ex) id가 orange인 객체가 몇번째인지 찾기
var an2Answer = products.findIndex(function(product){
if(product.id === 'orange') return product;
})+1;
var an2Answer = products.findIndex(function(product){
return product.id === 'orange';
})+1;
● includes
: 배열이 특정 요소를 포함하고 있는지 판별한다.
배열.includes(요소);
ex) 배열요소 중 파인애플이 포함되는지 확인하기
if(productNamesArr.includes('파인애플')) console.log("파인애플 포함한다");
● indexOf
: 배열에서 특정 요소가 몇번째인지 알아낸다.
배열.indexOf(요소);
ex)
productNamesArr.indexOf('아보카도')+1;
이 메소드를 모르더라도 findIndex메소드를 사용해서 나타낼수도있는데 줄 수에서 엄청 차이나기때문에 다양한 메소드를 알아두는 것이 중요하다는 것을 깨닫았다.
productNamesArr.findIndex(function(productName){
if(productName === '아보카도') return productName;
})+1;
● sort
: 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
(ex. 오름차순 / 내림차순)
products.sort();//오름차순
products.sort(function(a, b){ //내림차순
if(a.price<b.price) return 1;
if(a.price>b.price) return -1;
return 0;
});
products.sort().reverse();
● join
: 배열의 모든 원소를 하나의 문자열로 나타내준다.
: 이때 구분할 문자열을 넣어 사이를 구분해줄 수 있다.
배열.join('구분할 문자열');
productNamesArr.join('-');
문자열관련
● replace
: 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다
문자열.replace('바꾸기 전 문자', '바꿀 문자');
ex) 배열의 description만 뽑아서 콘솔로 출력하되 '맛있는'을 '달콤한'으로 바꾸어서 출력하기
products.forEach(function(product){
console.log(product.description.replace('맛있는','달콤한'));
})
● substring
: string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환한다.
문자열.substring(시작인덱스, 종료인덱스);
const str = 'Mozilla';
console.log(str.substring(1, 3));
// expected output: "oz"
console.log(str.substring(2));
// expected output: "zilla"
● split
: 지정한 구분자를 이용하여 여러 개의 문자열로 나누어 배열로 반환한다.
문자열.split('구분할 문자');
an13Answer.split('-');
(1편) - map() / reduce() / concat() / push() / filter() / slice()
https://mesonia.tistory.com/57
'frontend > javascript' 카테고리의 다른 글
엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML (0) | 2020.12.11 |
---|---|
페이지 로드 후 실행하기 (window.onload, document.ready) / document.ready를 순수자바스크립트로! (DOMContentLoaded) (0) | 2020.12.11 |
[AJAX] $.ajax()메소드와 옵션 (0) | 2020.12.02 |
JS의 다양한 메소드를 만나보자 (1) map()/reduce()/concat()/push()/filter()/slice() (0) | 2020.12.02 |
[참고] JavaScript 연습 사이트 (0) | 2020.11.02 |