Introduction to Array Methods in JavaScript
Arrays in JavaScript are one of the most powerful tools for storing and managing data. By using different methods, you can easily perform various operations on arrays. From combining to adding and removing elements, all of these can be done using array methods that are easily executable.
One of the most commonly used methods is map() that allows you to apply a function to all elements of an array and returns a new array. For example, if you want to double all the numbers in an array, you can use this method.
Another method that is very commonly used is filter(). This method is used for selecting elements from an array that meet certain criteria. For example, you might want to get all numbers greater than 1 from an array.
Similarly, the reduce() method is one of the powerful tools for reducing an array to a single value like summing or multiplying all elements. This method allows you to perform more complex operations on the array.
Here are some code examples and usage on how to use these methods for better understanding each usage in practical applications.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>mini-learn - Array Methods in JavaScript</title>
</head>
<body>
<script>
const numbers = [1, 2, 3, 4, 5];
// Using the map method to double the numbers
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Using the filter method to filter out numbers greater than 2
const greaterThanTwo = numbers.filter(number => number > 2);
console.log(greaterThanTwo); // [3, 4, 5]
// Using the reduce method to sum all numbers
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15
</script>
</body>
</html>
Explanation of Tags in Simple Language
<!DOCTYPE html>
This line indicates that the document is of HTML5 type.
<html lang="fa">
This tag defines the HTML document and sets its language to Persian.
<head>
The header section of the document that can include metadata, title, and links.
<meta charset="UTF-8">
This setting defines the character encoding for the document as UTF-8, allowing all characters to be displayed.
<title>
This tag specifies the title of the page, which will be displayed in the browser's title bar.
</head>
This denotes the end of the header section.
<body>
This starts the body of the HTML document, which contains the content.
<script>
A block that is used to write JavaScript code.
const numbers = [1, 2, 3, 4, 5];
This defines an array of numbers.
numbers.map(number => number * 2);
This creates a new array with all elements doubled.
numbers.filter(number => number > 2);
This creates a new array containing only elements that are greater than 2.
numbers.reduce((total, number) => total + number, 0);
This sums all the elements of the array and displays the result.
</script>
This denotes the end of the JavaScript code block.
</body>
This denotes the end of the HTML document body.
</html>
This signifies the end of the HTML document.