반응형 Language/JavaScript64 [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 객체에 담아서 사용하다보면 key값들만 뽑아서 사용하거나 value값들만 뽑아서 사용해야하는 경우가 생긴다. 배열에 돌려서 하나하나 뽑아 쓰기 보다는 스크립트에는 Object.values() 라는 메서드를 제공해주는데 특정 객체를 대상으로 value값들만 뽑아서 배열로 반환하는 메서드라 생각하면 된다. ▷ 구문 Object.values(obj) : Object.values() 는 파라매터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환합니다. 배열의 값들이 순서는 오브젝트의 속성을 for in 구문등으로 반복한 결과와 동일합니다. (참고로 for in 구문은 순서를 보장하지 않습니다) 예제를 통해 알아보자. ▷ 예제1) 숫자값들로 이루어진 객체 var obj = { a: 2, b: .. 2020. 12. 15. [JavaScript] arr.filter() - 배열에서 원하는 배열값들만 추려내기/반환하기 (ft. Array.prototype.filter()) 스크립트로 배열을 다룰때 많은 값들을 가진 배열에서 원하는 조건에 맞는 값들만 뽑아내 사용하고 싶을때 Array.prototype.filter() 메서드를 사용하면 손쉽게 할 수 있다. 메서드 이름 그대로 배열에 필터링을 건다고 생각하면 쉽다. ▷ 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) callback : callbackFunction 이며 function 안에서 조건에 따라 true를 반환하는 요소만 가지고 배열을 만들어준다. element : 현재 요소 (ex. 반복문의 현재 요소) index : 현재 요소의 인덱스 array : filter 함수를 사용하는 대상 배열 thisArg : callback을 실행할 때 this로 사용.. 2020. 12. 15. [JavaScript] Math.(round/ceil/floor) - 반올림/올림/내림 스크립트에는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 내장 객체인 Math 객체가 존재한다. Math 객체 안에는 아주 다양한 메서드가 존재하는데 그 중에서 우리는 흔히 쓰이는 반올림(round)/올림(ceil)/내림(floor) 메서드에 대해 알아보고자 한다. ▷ 구문 Math.round(num) : 반올림 Math.ceil(num) : 올림 Math.floor(num) : 내림 예제를 통해 알아보자. ▷ 예제1) Math.round() Math.round(7.5); //8 Math.round(7.4); //7 Math.round(7.48); //7 Math.round(-7.5); //-7 Math.round(-7.6); //-8 ▷ 예제2) Math.ceil() Math.ceil(6... 2020. 12. 15. [JavaScript] indexOf() - 문자열 및 배열에서 특정 값의 위치(인덱스) 찾기 (ft. include() 대체 메서드) 문자열 또는 배열에서 특정 값의 위치를 파악해야하여 사용하는 경우가 많은데 찾고자하는 특정 값의 인덱스(위치)값을 알려주는 indexOf() 메서드에 대해 알아보고자 한다. 제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며 각각 String.prototype.indexOf() 와 Array.prototype.indexOf()를 의미한다. ▷ 구문 .indexOf( searchElement[, fromIndex] ) 첫번째 매개변수에는 찾고자 하는 값/요소 를 입력하고 (문자열의 경우 대소문자 구분) 두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다. 예제를 통해 알아보자. ▷ 예제1) String.prototype.indexOf() var str .. 2020. 12. 14. [JavaScript] 특정 값이 숫자인지 체크하기 (ft. isNaN() / Number.isNaN()) - 특정 값이 숫자가 맞는지 확인하기- 특정 값이 숫자가 맞는지 체크하기 위해서 자바스크립트에서 제공해주는 isNaN() 메서드가 존재한다. 예제를 통해 쉽게 접근해보자. ▷예제1) isNaN("123") //false isNaN("abc") //true 메서드 안에 숫자를 넣었는데 false가 나오고 문자를 넣었는데 true가 나온게 이상해 보일수는 있으나 NaN이 의미하는 것은 Not a Number 이기 때문에 메서드의 매개변수가 숫자일 경우 false, 숫자가 아닐경우 true를 반환한다. 이렇게보면 숫자인지만 체크하는게 아니라 문자도 체크하는것으로도 볼 수 있는데 isNaN() 메서드는 좀 일반적이지 않은 규칙을 가지고 있으므로 조심해서 사용하는게 좋다. 그래서 나온게 제목에 있는것처럼 Numb.. 2020. 12. 7. [JavaScript] arr.(push/pop/unshift/shift) - 배열 데이터 추가 및 삭제 하기 배열 데이터를 다루는 Array.prototype.push(), Array.prototype.pop(), Array.prototype.shift(), Array.prototype.unshift() 메서드에 대해 알아보자. 앞서 arr.splice() 메서드를 통한 배열 값 추가 삭제에 대해 알아봤는데, splice() 메서드도 알아두면 좋다. ▷ 배열 요소 추가하기 (Array.push(), Array.unshift()) var mine = [0,1,2]; mine.push(3); // 배열의 마지막에 요소를 추가 // mine = [0,1,2,3] var mine = [0,1,2]; mine.unshift(3); // 배열의 앞쪽에 요소를 추가 // mine = [3,0,1,2] ▷ 배열 요소 삭제하기.. 2020. 11. 11. [JavaScript] arr.splice() - 배열 데이터 추가/제거/교체/추출 하기 Array.prototype.splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 한마디로 splice() 메서드를 가지고 push/pop/unshift/shift 역할을 다 할 수 있다고 생각하면 된다. ▷ 구문 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start : 배열의 변경을 시작한 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. (음수로 설정될 경우 배열의 끝에서부터 요소를 세어나가 array.length - n 번째 인덱스를 가르키며, 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.) deleteCount : 배열에서 제거할.. 2020. 11. 5. [JavaScript] arr.map() - 배열의 데이터들을 가공하여 새로운 배열을 만들어 사용하기 Array.prototype.map() 메서드는 기존 배열 데이터를 조건에 맞게 가공하여 새로운 배열을 만들어주는 메서드이다. 가장 많이 사용되는 배열 메서드들 중에 하나로 알아두면 좋다. ▷ 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback : 새로운 배열 요소를 생성하는 함수 (세 가지 인수를 가진다.) currentValue : 처리할 현재 요소이다. index : 처리할 현재 요소의 인덱스를 의미한다. array : map() 메서드를 호출한 배열을 의미한다. thisArg: callback 함수를 실행할 때 this로 사용되는 값 ▷ 예제 1) Array.prototype.map() 기본 사용 방법 var arr =.. 2020. 10. 17. [JavaScript] 배열, 객체 반복문 (ft. forEach 문 , for ~ in 문) - 배열 및 객체 반복문 사용- 배열과 객체의 반복문에 대해 알아보도록하자. 일반 for문을 사용할 순 있지만 제목에 나와있는것처럼 본문은 forEach문과 for~in문을 사용할 경우다. 1. 배열 반복문 (forEach) var targetArr = ['mine','it','record','tistory']; targetArr.forEach(function(item,index,arr){ console.log(item,index,arr[index]); }); forEach 구문에 대해 알아보자. forEach(function(item, index, arr){ ... }) for문과 다르게 forEach는 배열의 길이만큼 알아서 반복된다. 각각의 매개변수가 의미하는것은 다음과 같다. item : 배열의 .. 2020. 10. 13. 이전 1 ··· 3 4 5 6 7 8 다음 반응형
