JavaScript로 만나는 세상 | JavaScript로 만나는 세상
기본 자바스크립트 설명 잘 돼있음
JavaScript 배열(Array)의 발전과 성능에 대해서 자세히 알아보기
Javascript 에서 Object를 해시맵처럼 사용하지 마세요
객체를 사용과 Map을 이용하는 것과 가장 큰 차이점은 함수와 객체를 키로 사용 할 수 있다는 것이다. 일반적인 객체로 사용할 경우 키가 자동으로 문자열로 변환되기 때문에 이는 위 방법은 사용이 불가능 하다. 이는 테스트 코드를 작성할 때 좋다
Console.time() - Web API | MDN
console.time(label) : label에 들어가는 부분이 타이머의 이름, console.time과 console.timeEnd가 하나의 세트로 동작 label 미지정시 default라는 이름으로 동작함
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("Array insertion time");
만약 위의 예시에서 둘 중 하나라도 이름 다를 시 동작안함
instanceof :생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);
console.log(auto instanceof Car);
// expected output: true
console.log(auto instanceof Object);
// expected output: true
indexOf(): 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환
2차원 배열에서 배열안에 값이 2개 이상 존재하면 사용불가
filter(callback(currentValue[, index, [array]]):
주어진 콜백 함수에 통과하는 모든 요소를 모아 새로운 배열을 반환한다.
map(): 배열내의 모든 요소에 주어진 콜백함수를 적용한 결과를 모아 새로운 배열을 반환한다.
include(): 배열에 특정요소가 있는 지 true false 로 반환한다.
slice(begin,end): 배열의 begin부터 end-1 까지에 대한 얕은 복사본을 새로운 배열으로 반환
원본 배열에는 영향을 미치지 않는다. end가 없으면 begin부터 배열끝까지 복사한다.
splice(start,deleteCount,item1): 배열의 기존요소를 삭제 또는 교체하거나 새로운 요소를 추가한다.
item이 있을 시 deleteCount가 1일시 start자리에 수정
deleteCount 0일시 start자리에 추가한다
item이 없을시 start부터 deleteCount 수만큼(start포함)
배열에서 삭제 deleteCount없을시 start부터 배열끝까지 삭제
sort(compareFunction): 배열의 요소를 정렬한 후 배열을 반환한다. **정렬 순서는 문자열의 유니코드
포인트를 따른다**.compareFunction(정렬 순서를 정의하는 함수)이 제공되지
않으면 숫자 정렬시 문자열을 따르기 때문에 숫자정렬이 제대로 되지 않는다.
이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값
순서대로 정렬됩니다.
이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다.
이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우,
이 함수가 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,
이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다.
만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다.
find(): 주어진 함수를 만족하는 첫 번째 요소의 값을 반환한다. 만족하는 요소가 없으면 undefined를
반환한다.
findIndex(): 주어진 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 만족하는 요소가 없으면 -1을
반환한다.
join() : 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
split(): 문자열을 조건에 따라 나누어 배열로 반환한다.
trim(): 문자열 양 끝의 공백을 제거한다
typeof(): 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환
some(): 배열 안의 하나의 요소라도 주어진 함수를 통과하면 true를 반환 아니면 false반환
빈 배열시 무조건 false
every() : 배열 안의 모든 요소가 주어진 함수를 통과하면 true 하나라도 통과못하면 false
빈 배열시 무조건 true
includes() : 배열이 특정 요소를 포함하고 있는지 판별 인클루드 문안에 요소가 배열안에 존재하면
true 아니면 false 반환
str.substring(a,b) : 문자열에서 a인덱스 에서 시작하여 b인덱스 만큼의 문자들을 반환한다.
입력 값 하나만 들어가면 그수뒤에꺼 전부 반환 그리고 원래 문자열을 변화시키지 않는다
주의 할 점 a값보다 b값이 무조건 커야함 이건 무조건 인덱스 기준으로 숫자를 넣어야한다.
str.replace(a,b) : str에서 a를 b로 치환해준다 만약 중복일 수 처음 꺼만 바꿔준다 또한 대소문자를
구분한다
str.replaceall(a,b) : 이건 전부 치환
array1.unshift(a) : 배열에 맨 앞에 값을 추가한다
array.shift() : 배열에 첫번째 요소를 제거하고 제거된 요소를 반환한다.
str.repeat(count): str을 count에 들어간 수 만큼 반복해준다.
Math.sqrt(): 주어진 숫자에 루트(√ )를 씌웁니다. 만약 숫자가 음수이면 NaN를 반환.
Math.max(a,b,c): 입력받은 변수 값 중에 가장 큰 값을 반환한다.
Math.min(): 입력받은 변수 값 중에 가장 작은 값을 반환한다
Math.max.apply(null, numbers): 입력받은 배열에서 가장큰값을 반환해준다
Math.abs(): 숫자의 절대값을 반환한다.
Math.floor() : 소수점을 날린 수 반환
Math.round() : 소수점 수에 맞게 반올림 해서 정수반환
Math.ceil() : 얘는 무조건 소수점 있으면 올려서 정수 반환
parseInt(a,b): a=분석할 값, b= a를 무엇으로 변환할지 진수 값을 넣어주면 된다 이게 b(radix)가
없으면 기본이 10진수가 아니다!! 아래는 mdn 설명
만약 radix 가 undefined 이거나 0이라면, (또는 없다면), JavaScript 는 아래와 같이 임의 처리합니다. :
인풋 값 string 이 "0x" 나 "0X"로 시작한다면, radix 는 16(16진)이며, 나머지 문자열은 파싱됩니다.
인풋 값 string 이 "0"으로 시작한다면, radix 는 8(8진)이거나, 10(십진)입니다.
정확히 이 선택된 radix 는 구현 의존적적입니다. ECMAScript 5 는 10(십진)이 사용되는 것을
명시하지만, 모든 브라우저가 아직 이렇게 되지 않습니다. 이러한 이유로 항상 parseInt를 사용할 때는
radix 값을 명시해야 합니다.
인풋 값 string 이 다른 값으로 시작 된다면, radix 는 10(십진)입니다.
new Set(a) : a자리에 배열을 넣으면 중복을 제거하고 새로운 객체로 반환 그래서 return값을 받아줘야한다.
그래서 Set을 하고 나면 다시 배열로 돌려서 사용하는 경우가 많다. 배열의 길이가 길어질수록 속도도
다른 메소드를 이용해 중복제거 하는 거 보다 훨씬 빠르다
// 꿀팁 중복제거 하는 법
const set = new Set(testArr);
if(set.size < testArr.length){
console.log("중복이 있슴.");
}
// 배열을 합친후 중복제거 하고 다시 배열로 만들어주기
let addHoliday = holidayList.concat(result);
addHoliday = [...new Set(addHoliday)];
Array.from() : 문자열이나 객체를 배열로 바꿔준다 주로 Set()을 사용하고 많이 쓴다.
Spread Operator 로도 가능
// 배열요소가 객체일때 중복제거
const map = new Map(); // 맵
for (const character of test) {
map.set(JSON.stringify(character), character); // name, company가 모두 같은 객체 요소는 제외한 맵 생성
}
const archiveUnique = [...map.values()];
let arr = [...mySet]; //Spread 연산자를 이용해 array로 만들 수 있다.
JSON.stringify(): javaScript 값이나 객체를 JSON 문자열로 변환
JSON.parse(): JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성
객체 키순회 = Object.keys();
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// ["a", "b", "c"]
객체 값순회 = Object.values();
console.log(Object.values(object1));
// ["somestring", 42, false]
for(const key of Object.keys(testObject)) {
console.log(key);
console.log(testObject.key);
}
toString() : 내가 원하는 진수로 바꿔준다
onst num = 1384;
num.toString(2); // "10101101000"
// 십진수 1384를 이진수로 변환
// parseInt("10101101000", 2).toString(16); //"568"
// 2진수 "10101101000"를 10진수로 바꾼후 16진수로 다시변환
Array.fill() : 배열을 조건에 맞는 정적인 값으로 채운다
// 배열을 선언하면서 바로 값을 채우고 싶을때
// let b = Array(8).fill(0); => 길이 8인 배열을 0으로 채워라
// const array1 = [1, 2, 3, 4];
// console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
// console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
// [1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
// [1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
// [1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
// [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]