1.Sorting Arrays (정렬 배열)
sort() 메소드는 값을 문자열로 정렬합니다. 그러나 숫자를 문자열로 정렬하면 잘못된 결과를 생성합니다. 이는 compare function을 사용하여 해결할 수 있습니다.
The Compare Function (비교 함수) : 비교 함수의 목적은 대체 정렬 순서를 정의하는 것입니다. 비교 함수는 인수에 따라 음수, 0 또는 양수 값을 반환해야합니다. sort() 함수는 두 값을 비교할 때 비교 함수에 값을 보내고 반환 된 (음수, 0, 양수)값에 따라 값을 정렬합니다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; // Banana,Orange,Apple,Mango
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits; // Apple,Banana,Mango,Orange
}
</script>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in ascending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById('demo').innerHTML = points; // 40, 100, 1, 5, 25, 10
function myFunction() {
points.sort(
function(a, b) {return a -b }
);
document.getElementById('demo').innerHTML = points; //1,5,10,25,40,100
};
</script>
</html>
자바 스크립트 배열은 종종 객체를 포함합니다. 객체에 다른 유형의 속성이 있더라도 sort() 메서드를 사용하여 배열을 정렬할 수 있습니다. 해결 방법은 속성 값을 비교하는 비교 함수를 작성하는 것입니다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
</body>
<script>
var cars = [
{ type: "Volvo", year: 2016 },
{ type: "Saab", year: 2001 },
{ type: "BMW", year: 2010 }
];
displayCars(); // Volvo 2016 Saab 2001 BMW 2010
function myFunction() {
cars.sort(function (a, b) { return a.year - b.year });
displayCars(); // Saab 2001 BMW 2010 Volvo 2016
};
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
};
</script>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var cars = [
{ type: "Volvo", year: 2016 },
{ type: "Saab", year: 2001 },
{ type: "BMW", year: 2010 }
];
displayCars(); // Volvo 2016 Saab 2001 BMW 2010
function myFunction() {
cars.sort(function (a, b) {
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) { return -1; }
if (x > y) { return 1; }
return 0;
});
displayCars(); // BMW 2010 Saab 2001 Volvo 2016
};
function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
};
</script>
</body>
</html>
2.Reversing an Array
reverse() 메소드는 배열의 요소를 내림차순으로 정렬하고 원본 배열을 변형하며 그 참조를 반환합니다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to reverse the order of the elements in the array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; // Banana,Orange,Apple,Mango
function myFunction() {
fruits.reverse();
document.getElementById("demo").innerHTML = fruits; // Mango,Apple,Orange,Banana
}
</script>
</html>
3. filter()
filter() 메소드는 테스트를 통과한 모든 배열 요소로 채워진 배열을 만듭니다.(함수로 제공) 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
Syntax >>> array.filter(function(currentValue, index, arr), thisValue);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get every element in the array that has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
};
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult); // 32,33,40
};
</script>
</html>
참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
4. every()
every() 메서드는 배열의 모든 요소가 테스트를 통과하는지 여부를 확인합니다.(함수로 제공) every() 메서드는 배열에 있는 각 요소에 대해 함수를 한 번 실행합니다. 함수가 false 값을 반환하는 배열 요소를 찾으면 every()는 false를 반환하고 나머지 값은 확인하지 않습니다. false가 발생하지 않으면 every()는 true를 반환합니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
Syntax >>> array.every(function(currentValue, index, arr), thisValue);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check if every element in the array has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
};
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult); // false
};
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_every.asp
5. some()
some() 메서드는 배열의 요소 중 하나가 테스트를 통과하는지 여부를 확인합니다.(함수로 제공) some() 메서드는 배열에 있는 각 요소에 대해 함수를 한 번 실행합니다. 함수가 true 값을 반환하는 배열 요소를 찾으면 some()은 true를 반환하고 나무지 값은 확인하지 않습니다. 그렇지 않은 경우는 false를 반환합니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
Syntax >>> array.some(function(currentValue, index, arr), thisValue);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check if any of the elements in the array has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var ages = [3, 10, 18, 20];;
function checkAdult(age) {
return age >= 18;
};
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult); // true
};
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_some.asp
6. find()
find() 메서드는 함수를 제공하는 테스트를 통과한 배열의 첫번째 요소 값을 반환합니다. find() 메서드는 배열에 있는 각 요소에 대해 함수를 한 번 실행합니다. 함수가 true값을 반환하는 배열 요소를 찾으면 find()는 해당 배열 요소의 값을 반환하고 나머지 값을 확인하지 않습니다. 그렇지 않으면 undefined를 반환합니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
Syntax >>> array.find(function(currentValue, index, arr), thisValue);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check get the value of the first element in the array that has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p><strong>Note:</strong> The find() method is not supported in IE 11 (and earlier versions).</p>
</body>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult); //18
}
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_find.asp
7. findIndex()
findIndex() 메서드는 함수를 제공하는 테스트를 통과한 배열의 첫번째 요소의 인덱스를 반환합니다. findIndex() 메서드는 배열에 있는 각 요소에 대해 함수를 한 번 실행합니다. 함수가 true값을 반환하는 배열 요소를 찾으면 findIndex()는 해당 배열 요소의 인덱스를 반환하고 나머지 값은 확인하지 않습니다. 그렇지 않은 경우 -1을 반환합니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
Syntax >>> array.findIndex(function(currentValue, index, arr), thisValue);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check get the index of the first element in the array that has a value of 18 or more.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p><strong>Note:</strong> The findIndex() method is not supported in IE 11 (and earlier versions).</p>
</body>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
};
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult); // 2
};
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_findindex.asp
8. includes
includes() 메서드는 문자열에 지정된 문자열의 문자가 포함되어 있는지 여부를 확인합니다. 이 메소드는 문자열에 문자가 포함되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다. 이 메서드는 대/소문자를 구분합니다.
Syntax >>> string.includes(searchvalue, start);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check where if the string includes the specified value.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p><strong>Note:</strong> The includes() method is not supported in IE 11 (and earlier versions).</p>
</body>
<script>
function myFunction() {
var str = "Hello world, welcome to the universe.";
var n = str.includes("world");
document.getElementById("demo").innerHTML = n; // true
}
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_includes.asp
9. map()
map() 메서드는 모든 배열 요소에 대해 제곱근을 가진 배열을 반환하여 새 배열을 만듭니다. map() 메서드는 배열의 각 요소에 대해 한 번 제공된 함수를 차례로 호출합니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않으며, 원래 배열을 변경하지 않습니다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the square root of each element in the array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt); // 2,3,4,5
};
</script>
</html>
참조 : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_map
10. reduce()
reduce() 메서드는 배열의 각 값에 대해 제공된 함수를 실행합니다.(왼쪽에서 오른쪽으로) 함수의 반환 값은 누산기(결과/합계)에 저장됩니다. 또한 값이 없는 배열 요소에 대해 함수를 실행하지 않습니다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the sum of the numbers in the array.</p>
<button onclick="myFunction()">Try it</button>
<p>Sum of numbers in array:
<span id="demo"></span>
</p>
</body>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
};
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum); // 125
};
</script>
</html>
참조 : https://www.w3schools.com/jsref/jsref_reduce.asp
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
11.가장 높은(또는 가장 낮은) 배열 값 찾기
배열에 최대 또는 최소값을 찾는 기본 제공 함수는 없습니다. 그러나 배열을 정렬 한 후에는 인덱스를 사용하여 가장 높은 값과 가장 낮은 값을 얻을 수 있습니다.
example)
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
example)
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value
가장 높은(또는 가장 낮은) 값을 찾고자 할 때 전체 배열을 정렬하는 것은 매우 비효율적인 방법입니다. Math.max.apply를 사용하여 배열에서 가장 높은 숫자를 찾을 수 있습니다. Math.max.apply([1, 2, 3])는 Math.max(1, 2, 3)와 같습니다.
example)
var points = [40, 100, 1, 5, 25, 10];
function myArrayMax(arr) { return Math.max.apply(null, arr); }
// return 100
Math.min.apply를 사용하여 배열에서 가장 낮은 수를 찾을 수 있습니다. Math.min.apply([1, 2, 3])는 Math.min(1, 2, 3)와 같습니다.
example)
function myArrayMin(arr) { return Math.min.apply(null, arr); }
// return 1
가장 빠른 해결책은 "home made" 메소드를 사용하는 것입니다. 이 함수는 각 값을 발견된 가장 높은 값과 비교하는 배열을 반복합니다.
example) (Find Max)
function myArrayMax(arr) {
var len = arr.length;
var mx = -Infinity;
while (len--) {
if( arr[len] > max) {
max = arr[len];
}
}
}
이 함수는 각 값을 발견된 가장 낮은 값과 비교하는 배열을 반복합니다.
example) (Find Min)
function myArrayMin(arr) {
var len = arr.length;
var mx = -Infinity;
while (len--) {
if( arr[len] < min) {
min = arr[len];
}
}
}
댓글