JS의 다양한 메소드를 만나보자 (2) forEach()/find()/findIndex()/includes()/indexOf()/sort()/replace()/join()/substring()/split()

JS의 다양한 메소드를 만나보자 (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();

hianna.tistory.com/409

 

● 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

JS의 다양한 메소드를 만나보자 (1) map()/reduce()/concat()/push()/filter()/slice()