Common methods of arrays in js

push()

Returns the new length after the specified value is added to the end of the array

arrayObject.push(newElement1, newElement2,... newElementX)
The push() method adds its parameter order to the tail of the arrayObject. Instead of creating a new array, it modifies the arrayObject directly.

Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr + "<br />")
document.write(arr.push("ddd") + "<br />")
document.write(arr)

</script>

Output:

aaa,bbb,ccc
4
aaa,bbb,ccc,ddd

pop()

Delete and return the last element of the array

arrayObject.pop()
The pop() method will delete the last element of arrayObject, reduce the array length by 1, and return the value of the element it deleted. If the array is already empty, pop() does not change the array and returns the undefined value.

Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)

</script>

Output:

aaa,bbb,ccc
ccc
aaa,bbb

unshift()

Adds one or more elements to the beginning of the array and returns the new length

arrayObject.unshift(newelement1,newelement2,...,newelementX)
The unshift() method inserts its arguments into the head of the arrayObject and moves the existing elements in sequence to a higher subscript to make room. The first parameter of the method becomes the new element 0 of the array, if there is a second parameter, it becomes the new element 1, and so on. Instead of creating a new creation, modify the original array directly.

Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr + "<br />")
document.write(arr.unshift("ddd") + "<br />")
document.write(arr)

Output:

aaa,bbb,ccc
4
ddd,aaa,bbb,ccc

shift()

Remove the first element of the array and return the value of the first element

arrayObject.shift()
Returns the value of the original first element of the array. If the array is empty, the shift() method does nothing and returns the undefined value. Note that this method does not create a new array, but directly modifies the original arrayObject.

Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

</script>

Output:

aaa,bbb,ccc
aaa
bbb,ccc

sort()

Sort elements of an array

arrayObject.sort(sortby)
The array is sorted on the original array without making a copy.
If the method is called without parameters, the elements in the array will be sorted alphabetically. To be more precise, they are sorted in the order of character encoding. To do this, first convert the elements of the array to strings, if necessary, for comparison.
If you want to sort by other criteria, you need to provide a comparison function that compares two values and then returns a number that describes the relative order of the two values. The comparison function should have two parameters a and b with the following return values:

• If a is less than b, a should appear before b in the sorted array, then a value less than 0 is returned.
• If a equals b, 0 is returned.
• If a is greater than b, a value greater than 0 is returned.

Input:

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>

Output:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

Input:

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

Output:

10,5,40,25,1000,1
1,5,10,25,40,1000

reverse()

Reverse the order of elements in an array

arrayObject.reverse()
This method changes the original array without creating a new one.

Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

Output:

aaa,bbb,ccc
ccc,bbb,aaa

filter()

Create a new array by checking all the elements in the specified array.

array.filter(function(currentValue,index,arr), thisValue)

Input:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
</script>

Output:

32，33，16，40

map()

Returns a new array. The elements in the array are the values processed by the original array element calling the function

array.map(function(currentValue,index,arr), thisValue)
map() does not detect empty arrays. Does not change the original array.

Input:

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
</script>

Output:

2,3,4,5

Data processing obtained in the interface:

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? 'male':item.sex === 0?'female':'secrecy',
        age: item.age,
        avatar: item.img
    }
})

Each element in the array is multiplied by the value specified in the input box, and the new array is returned:

var numbers = [65, 44, 12, 4];

function multiplyArrayElement(num) {
    return num * document.getElementById("multiplyWith").value;
}

function myFunction() {
    document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);
}

reduce()

Receiving a function as an accumulator, each value in the array (from left to right) starts to shrink and finally evaluates to a value.

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Click the button to calculate the sum of array elements:

<button onclick="myFunction()">Point me</button>
 
<p>Sum of array elements: <span id="demo"></span></p>
 
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
 
function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

join()

Put all the elements in the array into a string

arrayObject.join(separator)
Returns a string.
The string is generated by converting each element of arrayObject to a string, then connecting these strings and inserting a separator string between the two elements.
Input:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr.join())
document.write(arr.join("."))
</script>

Output:

aaa,bbb,ccc
aaa.bbb.ccc

concat()

Connect two or more arrays.

arrayObject.concat(arrayX,arrayX,...,arrayX)
This method does not change the existing array, but only returns a copy of the connected array.
Returns a new array. The array is generated by adding all arrayX parameters to arrayObject. If the argument to concat() is an array, the elements in the array are added instead of the array.
Input:

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

Output:

George,John,Thomas,James,Adrew,Martin,William,Franklin