- js 배열
기본적으로 배열에서 for 문 사용해서 빼는건 많이 해보지만, foreach는 아직 어색해서 많이 사용해봐야겠다는 생각이 든다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array.forEach() calls a function for each array element.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>";
}
</script>
</body>
</html>t왜 굳이 사이에 foreach넣고, 그 다음에 text에 </ul>을 추가했나 했더니, 목록형으로 나타내고 싶어서 그런거였다.
for문 앞 뒤에 따로 넣기 복잡하니까 그냥 앞에 달고 foreach문 끝난다음에 닫아줘서 자체적으로 ul로 표시하고 그 안에 li로해서 또 말머리 표시한듯!
<ol>과 <ul> 같은 경우에는 그 태그 안에 또 <li> 태그를 사용한다. (이는 list item)의 약자입니다.
- 배열 메소드
- pop() : 메소드를 사용하면, 마지막 요소를 끄집어 낸 다음에, 배열에 있는 마지막 인덱스의 배열값을 삭제한다.
- push() : 이 메소드는 배열에 마지막 인덱스에 새로운 요소를 추가할 때 사용한다.
- shift() : 이 메소드는 pop함수와 같은 기능을 하지만, 0 인덱스에 있는 값을 뽑아낸 후, 뒤에있는 인덱스를 한칸씩 앞으로 당긴다.
- unshift() : 이 메소드는 shift의 기능을 거꾸로 진행한다. 0 인덱스에 원하는 값을 추가한 후, 뒤에 인덱스를 한 칸씩 미룬다.
- concat() ; 이 메서드는 기존 배열을 연결해서 새로운 배열 하나를 만들어낸다 -> a배열 + b배열 = c배열인데, 앞에 배열 마지막 인덱스 뒤에 b배열이 쌓이는 형식!
그리고, 문자 한개를 요소로 해서, 배열 자체에 문자 하나를 넣는 업무를 진행 할 수 있다. (어떻게 보면 push()의 업무를 다른 방식으로 사용할 수 있는 것 과 같은 듯!) - splice() 배열에 새 항목을 추가 및 삭제할 때 사용한다. 매개변수의 유무에 따라서 추가인지 삭제인지 구분이 가능!
- 추가할 때 매개변수 3개 이상이 생기는데, 첫번쨰 매개변수는 새로운 요소를 추가할 인덱스 위치를 적는다.
- 두번빼 매개변수는 제거해야 하는 요소의 수를 정의하는데, 추가만 하려면 0을 삽입해주면 된다.
- 그 이후에는 추가할 요소를 정의하면 된다.
추가할 요소가 없으면, 매개변수는 2가지가 나오게되고,
여기서 첫번째 매개변수는 변수에서 삭제할 인덱스를 나타내게되고
두번째 매개변수는 제거하려는 요소의 개수를 나타낸다. -> 일반적으로 내가 배열에서 무언가를 삭제하면 default값이 남게 삭제되었던 경우가 많은 것 같은데, 이렇게 삭제하면 배열에 빈칸이 없이 삭제되는거여서 오류없이 사용하기 좋을 것 같다.
- js 배열 정렬하기
기본적으로, 자바스크립트로 숫자를 정렬하려고 한다면, 숫자를 문자열로 취급하여 유니코드에 맞춰서 sort를 하게된다.
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});이 식이 왜 이렇게 되어야 하는지를 인터넷에 검색해보았다.
비교함수를 사용하기 위해서 이렇게 사용하는 것이라는 것이다.
우선 제일 기본 적인 자바스크립트 비교함수!
- == 와 ===의 차이
==는 A와 B의 값이 같은가를 따진다면, ===는 A와 B의 값이 같고 데이터의 타입이 같은지를 따진다 (숫자인지 문자열인지 구분을 잘 해야하는 이유가 여기에서 나타난다)
- 매개 변수 두개의 값으로 a,b를 가지고 온 다음에 a와 b를 비교할 때, 반환되는 값이 0보다 크다면 a가 b보다 앞에 온다.
- 거꾸로 반환되는 값이 0보다 작다면 b가 a의 앞으로 순서가 변화가 일어난다
이를 활용해서, 내림차순 정렬하려면 a-b에서 b - a로 순서만 바꿔주면 된다는 점!
이를 활용한다고 하면, 배열안의 요소들에 .length를 넣어서, 길이에 따라서 정렬을 할 수도 있고 무한대로 활용이 가능 할 것 같다.
- 가장 높은 (낮은) 배열 값 찾기!
배열에서 최대값이나 최소값을 찾기 위한 함수가 없기 떕문에, 정렬 한 다음에 length -1인 값을 가지고 오거나,
0번째 가져오는거로 원하는 값을 가져 올 수 있다. -> 비효율적인 방법
다른 방법으로 활용하기 위한 방법은 파라미터로 입력 받은 숫자들 중에서 최대, 최소값을 가져와 리턴해주는
math.max() / math.min()을 활용하는 방법이다!
1. Function.prototype.apply() 사용하기
자바스크립트에서 함수를 호출하는 여러 가지 방법 중의 하나이다.
우리가 일반적으로 함수 호출할 때 함수명(파라미터) 형식으로 호출을 한다.
하지만 APPLY()메소드를 사용해서도 함수를 호출 할 수 있는데 이를 사용한 방법!
Math.max.apply(null, arr);
이와 같이, 함수에서 사용할 this 객체와 호출하는 함수로 전달한 파라미터를 입력받아서,
첫번째 파라미터에는 객체 지정해줄 필요 없으니까 null을 넣었다.
두번째 파라미터에 배열의 형태를 입력한 다음에, 내가 사용 할 배열 형태의 arr를 넣는다.
파라미터를 하나하나 적으면서 배열에서 최댓값이나, 최소값을 나오게 할 수 없으니까,
배열에 원소들을 하나하나 풀어서 넣은 것과 같은 효과를 나타내게 된다.
- 배열의 반복
- map() 메서드는 배열 요소에 대해 함수를 수행해서 새로운 배열을 만들어 내는데,
아래의 코드는 배열의 요소들의 값을 *2배하는 함수이다.
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
출력값 : 90,8,18,32,50이 함수에서 value 말고 나머지가 존재하지 않을 때는, 나머지는 충분히 생략이 가능하다.
- filter() 메서드는 if와 비슷하게 내가 원하는 식을 통과한 배열들의 요소로 새로운 배열을 만들어낸다
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
출력값 : [45,25]이 함수도 마찬가지로 value말고 나머지는 생략 가능!
- reduce() 메서드는 함수를 왼쪽에서 원하는대로 함축시키는거고 reduceRight() 같은 경우에는 요소에 대한 함수를 실행해서 단일값으로 축소시킵니다.
사이트에서 나온 예시같은 경우에는 sum으로 모든 요소의 합을 나타내는 것이었어서 두 메서드의 식이 크게 다르지 않았다. - every() 메서드는 배열 안에 모든 값이 if와 같이 조건식을 통과하는지 true, false로 결과를 보여주는 메서드이다.
- some() 메서드는 every()와 비슷하지만, 배열 내의 일부의 값만 조건에 통과하더라도 true를 나타낸다.
- indexOf() 메서드는 배열에서 원하는 요소를 검색한 다음에, 그 위치의 인덱스 값을 알려준다
여기서 포인트는 우리가 알고있는 인덱스 값은 0부터 시작이기 때문에 +1을 해야 정확한 위치가 나온다는 것이며,
원하는 값이 존재하지 않는 다면 -1 이라고 인덱스값을 반환해준다. - lastIndexOf() 메소드는, indexOf()와 하는 역할은 같지만, 원하는 요소의 제일 마지막 번째 인덱스를 가져온다. 여기서 원하는 위치를 제대로 찾으려면 +1을 해야된다는거 까먹지 말기.
- const로 할당한 배열은 재할당 할 수 없지만, 안에 있는 요소들은 재 할당이 가능하다는 점!
'수업 복습하기 > JavaScript + JQuery' 카테고리의 다른 글
| Day 01 - udemy js 완벽 가이드 (0) | 2022.08.29 |
|---|---|
| vs code - console.log 단축키 스니펫 (0) | 2022.08.03 |
| Day 01 - w3schools js 독학하기 (0) | 2022.07.25 |
| 코딩 앙마 유튜브 - 자바 스크립트 기초 강좌 (0) | 2022.07.13 |
| [JQuery] day 02 (0) | 2022.03.24 |
