Arrays are also a composite data type, in which an array can store multiple different types of data
- The data stored in the array is ordered, each data in the array has a unique index can be manipulated through the index to get the data
- The data stored in an array is called an element
- Any type of value can be an element of an array
basic operation
Creating Arrays
// Create an array from an Array
const arr = new Array()
// Create arrays with []
const arr = []
Adding Elements to an Array
// Add elements by index
arr[0] = "test"
// If the indexes are not contiguous, the intermediate indexes are created as well, just the elements are empty, you should avoid using non-contiguous arrays, bad performance
arr[3] = "2"
// Add elements to the definition
const a = new Array(1,3,4)
const arr = ["1", "test"]
Read element
// Read by index, returns undefined if reading a non-existent element.
const arr = ["1", "test"]
arr[0] // "1"
Get the length of the array
// The actual value obtained is the largest index of the array + 1, which is not particularly accurate for non-contiguous arrays because of null values.
()
// Add an element to the end of the array
arr[] = "3"
// Modify the length, if you make it bigger, the extra part will be empty, if you make it smaller, it will remove elements from the back to front
= 10
Array traversal for-of
arr = [1,2,3,4,5,6,7,8,9,10]
// Iterate through lengths - positive order
for(let i=0; i < ;++){
(arr[i])
}
// Iterate through lengths - reverse order
for(let i=-1;i>=0;i--){
(arr[i])
}
// The for-of statement can be used to iterate through iterable objects
for(let a of arr){
(a)
}
Array method (non-destructive)
Methods
add, delete and check
// Check if an object is an array
let arr = []
((arr)) // true
let arr = [1,2,3]
// Get the specified element of the array by index.
((2))
let arr = [1,2,3]
let arr1 = [4,5,6]
// Used to concatenate two or more arrays
// Non-destructive method that doesn't affect the original array, but returns a new array
let new_arr = (arr1,[7,8])
(new_arr) // [1,2,3,4,5,6,7,8]
let arr = [1,2,3,2]
// Get the index of the first occurrence of the element in the array.
// Parameters: element to query, starting position of query
((2)) // 1
((2,2)) // 3
let arr = [1,2,3,2]
// Get the last occurrence of the element in the array, return the index of the element if it is found, or -1 if it is not found.
((2)) // 3
let arr = [1,2,3,2]
// concatenate the elements of an array into a string
(("~")) // 1~2~3~2
let arr = [1,2,3,2]
// Used to intercept arrays (non-destructive method)
/*
Parameters:1.the index of the start of the interception (including this index element)
2. the index of the end of interception (not including the index element, this parameter can be omitted, if omitted, it will be intercepted until the end)
If you omit both parameters, you can make a shallow copy of the array.
*/
((0,2)) // [1,2]
deep copy & shallow copy
// arr1 and arr are not duplicates, they point to the same memory address, and modifying either one affects the other.
let arr = [1,2,3,2]
let arr1 = arr
/*
Shallow copy
Normally, copies of objects are shallow copies
Shallow copies make a copy of a shallow layer of an object (only one layer is copied)
If the data stored in the object is the original value, the depth of the copy does not matter.
Shallow copies only copy the object itself, not the attributes (or elements) of the object
When slice is called, a new array object is created, which makes a copy of the array - shallow copying
*/shallow copy
let arr2 = [{"name": "l"},{"name": "q"}]]
let arr3 = ()
/*
Deep Copy
Deep copy means that not only the object itself is copied, but also the attributes and elements of the object.
Because of performance issues, deep copy is usually not used much.
*/
let arr4 = [{"name": "l"},{"name": "q"}]]
let arr5 = structuredClone(arr4)
expanding operator ...
let arr = [{"name":1},{"name":2}]
// You can expand elements from one array into another or pass them as arguments to a function.
// Shallow copy
let arr2 = [... .arr]
(arr2) // [ { name: 1 }, { name: 2 } ]
Copying of objects
/*
(target object, copied object)
Copies the attributes from the copied object into the target object and returns the target object
*/
const obj = {"name":1}
const obj1 = ({},obj)
(obj1) // { name: 1 }
const obj = {"name":1}
const obj1 = ({"age":1},obj)
(obj1) // { age: 1, name: 1 }
// Objects can also be copied using the expand operator
const obj = {"name":1}
const obj1 = {... .obj}
(obj1) // { name: 1 }, expand the attributes in obj in the new object
Array methods (destructive)
const arr = []
// Add one or more elements to the end of the array and return the new length
let l = (1,2,3)
(l) // 3
(arr) // [ 1, 2, 3 ]
const arr = [1,2,3,4,5]
// Delete and return the last element of the array
let a = ()
(a) // 5
(arr) // [ 1, 2, 3, 4 ]
() // 4
const arr = [1,2,3,4,5]
// Add one or more elements to the beginning of the array and return the new length
let a = (99,98)
(a) // 7
(arr) // [99, 98, 1, 2, 3, 4]
const arr = [1,2,3,4,5]
// Delete and return the first element of the array
let a = ()
(a) // 1
(arr) // [2, 3, 4, 5] // delete and return the first element of the array.
() // 4
// Deletes, inserts, or replaces elements in an array.
// Parameters: 1. starting position of deletion 2. number of elements to delete 3. elements to insert Return value: deleted elements
// Delete elements
const arr = [1,2,3,4,5]
let a = (1,2)
(a) // [2,3]
(arr) // [1,4,5]
// Replace elements
const arr = [1,2,3,4,5]
let a = (1,1, "ao") // can write more than one element
(a) // [2]
(arr) // [ 1, 'ao', 3, 4, 5 ]
// Inserting elements
const arr = [1,2,3,4,5]
let a = (1,0, "ao", "to") // Insert ao, to, and subsequent elements starting at 1 in the table below.
(a) // []
(arr) // [ 1, 'ao', 'to', 2, 3, 4, 5 ]
// Invert the array
const arr = [1,2, "a", "s",5]
()
(arr) // [ 5, 's', 'a', 2, 1 ]
Array de-duplication
const arr = [1, 2, 3, 2, 4, 1];
// De-emphasize using the set method
const arr1 = [. .new Set(arr)]; // [1, 2, 3, 4, 1]; // Use set method to de-emphasize.
(arr1); // [1, 2, 3, 4]
// Cyclic de-duplication
const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7]
const newArr = []
for(let ele of arr){
if((ele) === -1){
(ele)
}
}
(newArr)
(math.) higher order function
A function is called a higher-order function if its argument or return value is a function
Taking a function as a parameter means that code can be passed dynamically to another function
callback function
function user(fn,age){
fn(age)
}
function admin(age){
return age === 18;
}
// A function is passed as a parameter to another function, which is called a callback.
user(admin,18)
// Usually callback functions are defined using anonymous functions
user(a => age === 18,18)
It is possible to dynamically generate a new function by means of a higher-order function
function a(){
return "hello"
}
function b(fn){
return () => {
// ... Other customized codes
return fn()
}
}
closure (math)
Functions can be utilized to hide variables that you don't want to be accessible externally
-
Closures:
A closure is a function that can access variables in the scope of an external function. -
When to use:
Closures are used when we need to hide something we don't want to be accessible to others -
Conditions for forming a closure:
1. Nesting of functions-
Internal Functions to Reference Variables in External Functions
-
Internal functions to be returned as return values
-
function Sum() {
let num = 0 // be situated atSumwithin a scope
return () => {
num++
return num
}
}
const newFn = new Sum()
(newFn()) // 1
(newFn()) // 2
(newFn()) // 3
The scope of a function is determined when the function is created (lexical scoping) and is independent of the call location
// The principle of closures is to utilize lexical scopes
let a = "global"
function one(){
(a) // global
return a
}
function two(){
let a = "local"
(a) // local
one() // global
function three(){
(a) // local, function definition is external variable a is a in two
}
return three
}
let fn = two()
fn()
The life cycle of a closure:
- Closures are created at the time of an external function call, and each call to the external function creates a brand new closure
- Destroyed when the inner function is lost (the closure disappears when the inner function is garbage collected)
Caveats:
- Closures are mainly used to hide content that is not intended to be accessed externally.
- This means that the closure takes up some memory space
Closures are more wasteful of memory space compared to classes (classes can use prototypes while closures cannot)
- Use closures when fewer executions are required
- When you need to create a large number of instances, use the class
recursive (calculation)
A function that calls itself is called a recursive function
Recursion works in much the same way as loops.
function test(num){
// Termination condition
if (num === 1){
if (num === 1){ return 1
}
// Call itself
return test(num-1) * num
}
The core idea of recursion is to break down a large problem into smaller problems, and when the smaller problems are solved, the larger problem is also solved
To write a recursive function, two essentials must be included:
- Baseline condition - termination condition for recursion
- Recursive Conditionals - How to Split a Problem
The role of recursion and loops are the same, the difference is that the recursive idea is clearer and more concise, and the performance of loops is better.
In development, general problems can be solved by loops, but also try to use loops and less recursion.
Recursion is only used in scenarios where it is more difficult to solve using loops.
Array methods (callback function parameters)
/*
sort is used to sort arrays (which changes the original array)
By default, sort will sort the array in ascending order.
Note: sort will sort by Unicode by default, so if you sort numbers directly with sort
you may get an incorrect result.
Parameters:
- You can pass a callback function as an argument to specify the sorting rules through the callback function
(a, b) => a - b ascending order
(a, b) => b - a descending order
*/
let arr = [3,3,4,6,8,1,2,10]
((a,b) => a -b)
(arr)
/*
Used to traverse an array
takes a callback function as a parameter, which will be called several times
The callback function is called as many times as there are elements in the array.
Each time it is called, the data in the array is passed as a parameter.
There are three parameters in the callback function:
element the current element
index the index of the current element
array the array to be traversed
*/array
let arr = [3,3,4,6,8,1,2,10]
((element,index,array)=>{
(element)
(index)
(array)
})
/*
Saves the eligible elements of the array into a new array and returns them.
Requires a callback function as a parameter, will call the callback function for each element, and based on the return value (true, false) to determine whether to add the element to the new array
Non-destructive method, will not affect the original array.
*/
/*
Generate a new array based on the current array
requiring a callback function as a parameter.
The return value of the callback function becomes an element in the new array
Non-destructive methods do not affect the original array
*/
let a = ["Mall", "Account", "Login", "Register"]
let b = (ele => "<li>" + ele + "</li>")
(b) // [ '<li>Mall</li>', '<li>Account</li>', '<li>Login</li>', '<li>Register</li>' ]
/*
can be used to consolidate all the elements of an array into a single value
parameter:
1. callback function, specify the rules of the merge by callback function
2. optional parameter, initial value
*/
let arr = [1,2,3,4,5,6,7,8,10]
let b = ((a,b) => a+b)
(b) // 46
let arr2 = [1,2,3,4,5,6,7,8,10]
let b2 = ((a,b) => a+b,10)
(b2) // 56
function variable parameter
/*
Arguments are yet another implicit parameter in a function
arguments is an array-like object (pseudo-array)
It is similar to an array in that you can read the elements by index, and you can loop through the variables by for, but it is not an array object, and you cannot call the methods of an array.
Arguments are used to store the real parameters of a function.
Whether or not the user defines the formal parameters, the real parameters will be stored in the arguments object.
You can access the real parameters directly through this object.
*/
function test(){
(arguments) // { '0': 1, '1': 3, '2': 4 }
(arguments[0]) // 1
}
test(1,3,4)
/*
Variable parameters can be specified as such when defining a function.
- Variable arguments can take any number of real parameters and store them in an array for return.
- Variable parameters are basically the same as arguments, but they have some differences:
1. variable parameters can be named by themselves
2. variable arguments are arrays and can be used directly in array methods.
3. Variable arguments can be used with other arguments, but when they are used with normal arguments, the variable argument should be written last.
*/
function test(... .args){
(args) // [ 1, 3, 4 ]
(args[0]) // 1]
}
test(1,3,4)
call and apply
Calling a function can be done in ways other than by function() calls
function test(){
return "hello"
}
() // "hello"
() // "hello"
/*
In addition to calling a function, call and apply can also be used to specify the this of a function.
The first argument of call and apply will be the function's this.
When a function is called via the call method, the actual parameters of the function are listed directly after the first parameter.
*/class User{call method
class User{
name = "l"
age = 18
}
function test(a,b){
() // name
(this) // User { name: 'l', age: 18 }
(a) // 1
(b) // 2
}
let user = new User()
// Specify that the test function's this is the user object.
(user,1,2)
// Call the function via the apply method, passing an array of real parameters to the function.
class User{
name = "l"
age = 18
}
function test(a,b){
() // name
(this) // User { name: 'l', age: 18 }
(a) // 1
(b) // 2
}
let user = new User()
// Specify that the test function's this is the user object
(user,[1,2])
bind
bind() is a method of the function that can be used to create a new function
- bind binds this to the new function.
- bind can bind parameters to a new function
An arrow function does not have its own this; its this is determined by the outer scope
- Its this cannot be modified by call apply and bind.
- No arguments in arrow functions
class User{
name = "l"
age = 18
}
function test(a){
(a) // 10
() // l
}
const user = new User()
// Specify the this and arguments of the new function, or the arguments and this of the original function if it was called from the original function ().
const newFn = (user,10)
newFn()