-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
FX
committed
Aug 10, 2024
1 parent
82183fe
commit 792c973
Showing
3 changed files
with
759 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,242 @@ | ||
## **JavaScript Arrays Course** | ||
|
||
### **1. Introduction to Arrays** | ||
|
||
**Definition:** An array is a special type of object in JavaScript used to store multiple values in a single variable. Arrays are ordered collections where each item is accessible by its index. | ||
|
||
**Syntax:** | ||
|
||
```javascript | ||
let array = [element1, element2, element3, ...]; | ||
``` | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let fruits = ['Apple', 'Banana', 'Cherry'] | ||
let numbers = [1, 2, 3, 4, 5] | ||
``` | ||
|
||
### **2. Creating Arrays** | ||
|
||
**Using Array Literals:** | ||
|
||
```javascript | ||
let colors = ['Red', 'Green', 'Blue'] | ||
``` | ||
|
||
**Using the Array Constructor:** | ||
|
||
```javascript | ||
let emptyArray = new Array() | ||
let numbers = new Array(1, 2, 3, 4, 5) // Array with specific elements | ||
let lengthArray = new Array(10) // Array with 10 empty slots | ||
``` | ||
|
||
### **3. Accessing and Modifying Arrays** | ||
|
||
**Accessing Elements:** | ||
|
||
```javascript | ||
let fruits = ['Apple', 'Banana', 'Cherry'] | ||
console.log(fruits[0]) // "Apple" | ||
console.log(fruits[2]) // "Cherry" | ||
``` | ||
|
||
**Modifying Elements:** | ||
|
||
```javascript | ||
fruits[1] = 'Blueberry' | ||
console.log(fruits) // ["Apple", "Blueberry", "Cherry"] | ||
``` | ||
|
||
**Array Length:** | ||
|
||
```javascript | ||
let numbers = [1, 2, 3, 4, 5] | ||
console.log(numbers.length) // 5 | ||
``` | ||
|
||
### **4. Array Methods** | ||
|
||
**Adding and Removing Elements:** | ||
|
||
- `push(element1, element2, ...)` – Adds elements to the end of an array. | ||
- `pop()` – Removes the last element from an array. | ||
- `unshift(element1, element2, ...)` – Adds elements to the beginning of an array. | ||
- `shift()` – Removes the first element from an array. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let numbers = [1, 2, 3] | ||
numbers.push(4) // [1, 2, 3, 4] | ||
numbers.pop() // [1, 2, 3] | ||
numbers.unshift(0) // [0, 1, 2, 3] | ||
numbers.shift() // [1, 2, 3] | ||
``` | ||
|
||
**Finding Elements:** | ||
|
||
- `indexOf(element)` – Returns the first index at which a given element can be found. | ||
- `includes(element)` – Checks if an array contains a specified element. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let fruits = ['Apple', 'Banana', 'Cherry'] | ||
console.log(fruits.indexOf('Banana')) // 1 | ||
console.log(fruits.includes('Cherry')) // true | ||
``` | ||
|
||
**Iterating Over Arrays:** | ||
|
||
- `forEach(callback)` – Executes a provided function once for each array element. | ||
- `map(callback)` – Creates a new array with the results of calling a function on every element. | ||
- `filter(callback)` – Creates a new array with all elements that pass the test implemented by the provided function. | ||
- `reduce(callback, initialValue)` – Applies a function against an accumulator and each element to reduce it to a single value. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let numbers = [1, 2, 3, 4, 5] | ||
|
||
numbers.forEach(num => console.log(num)) // Logs each number | ||
|
||
let squared = numbers.map(num => num * num) // [1, 4, 9, 16, 25] | ||
|
||
let evenNumbers = numbers.filter(num => num % 2 === 0) // [2, 4] | ||
|
||
let sum = numbers.reduce((acc, num) => acc + num, 0) // 15 | ||
``` | ||
|
||
**Sorting and Reversing:** | ||
|
||
- `sort(compareFunction)` – Sorts the elements of an array in place and returns the array. | ||
- `reverse()` – Reverses the elements of an array in place. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let numbers = [4, 2, 5, 1, 3] | ||
numbers.sort() // [1, 2, 3, 4, 5] | ||
|
||
let letters = ['b', 'a', 'c'] | ||
letters.reverse() // ["c", "a", "b"] | ||
``` | ||
|
||
### **5. Advanced Array Methods** | ||
|
||
**Joining and Splitting:** | ||
|
||
- `join(separator)` – Joins all elements of an array into a string. | ||
- `split(separator)` – Splits a string into an array of substrings. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let fruits = ['Apple', 'Banana', 'Cherry'] | ||
let fruitString = fruits.join(', ') // "Apple, Banana, Cherry" | ||
|
||
let string = 'Red, Green, Blue' | ||
let colors = string.split(', ') // ["Red", "Green", "Blue"] | ||
``` | ||
|
||
**Array of Arrays (Multidimensional Arrays):** | ||
|
||
```javascript | ||
let matrix = [ | ||
[1, 2, 3], | ||
[4, 5, 6], | ||
[7, 8, 9], | ||
] | ||
|
||
console.log(matrix[1][2]) // 6 | ||
``` | ||
|
||
**Flattening Arrays:** | ||
|
||
- `flat(depth)` – Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. | ||
|
||
**Examples:** | ||
|
||
```javascript | ||
let nestedArray = [1, [2, [3, 4]], 5] | ||
let flatArray = nestedArray.flat(2) // [1, 2, 3, 4, 5] | ||
``` | ||
|
||
### **6. Real-World Usage of Arrays** | ||
|
||
**1. Managing User Data:** | ||
|
||
```javascript | ||
let users = [ | ||
{ name: 'Alice', age: 25 }, | ||
{ name: 'Bob', age: 30 }, | ||
{ name: 'Charlie', age: 35 }, | ||
] | ||
|
||
let names = users.map(user => user.name) // ["Alice", "Bob", "Charlie"] | ||
``` | ||
|
||
**2. Handling Dynamic Lists:** | ||
|
||
```javascript | ||
let tasks = [] | ||
|
||
function addTask(task) { | ||
tasks.push(task) | ||
} | ||
|
||
function removeTask(index) { | ||
tasks.splice(index, 1) | ||
} | ||
|
||
addTask('Buy groceries') | ||
addTask('Clean the house') | ||
console.log(tasks) // ["Buy groceries", "Clean the house"] | ||
removeTask(0) | ||
console.log(tasks) // ["Clean the house"] | ||
``` | ||
|
||
**3. Data Transformation and Visualization:** | ||
|
||
```javascript | ||
let sales = [200, 300, 250, 400, 500] | ||
let totalSales = sales.reduce((total, sale) => total + sale, 0) // 1650 | ||
let averageSales = totalSales / sales.length // 330 | ||
|
||
console.log(`Total Sales: ${totalSales}`) | ||
console.log(`Average Sales: ${averageSales}`) | ||
``` | ||
|
||
**4. Filtering and Sorting Data:** | ||
|
||
```javascript | ||
let products = [ | ||
{ name: 'Laptop', price: 999 }, | ||
{ name: 'Smartphone', price: 599 }, | ||
{ name: 'Tablet', price: 399 }, | ||
] | ||
|
||
let affordableProducts = products.filter(product => product.price < 600) // Products with price less than 600 | ||
let sortedProducts = products.sort((a, b) => a.price - b.price) // Sort by price | ||
``` | ||
|
||
### **7. Performance Considerations** | ||
|
||
**1. Avoiding Array Reallocation:** | ||
|
||
- Use `push` and `pop` instead of `concat` to avoid frequent reallocation. | ||
|
||
**2. Efficient Search:** | ||
|
||
- Use `Set` or `Map` for faster lookups if you need to frequently check for the existence of an element. | ||
|
||
**3. Minimizing Side Effects:** | ||
|
||
- Prefer functional methods like `map`, `filter`, and `reduce` to avoid mutating the original array. | ||
|
||
### **8. Conclusion** | ||
|
||
Arrays are a fundamental and versatile data structure in JavaScript. Understanding how to use array methods effectively will help you manage and manipulate collections of data efficiently. From basic operations to advanced techniques, mastering arrays will enable you to tackle a wide range of programming tasks and build robust applications. |
Oops, something went wrong.