Home > Web Front-end > JS Tutorial > Summary of 20 common JavaScript array operations

Summary of 20 common JavaScript array operations

藏色散人
Release: 2023-04-20 15:43:34
forward
1626 people have browsed it

ArrayObject in JavaScript, like arrays in other programming languages, is a collection of data. In JavaScript, the data inside an array can be of different types and has methods for performing common operations on arrays.

Declare arrays

There are three different declaration methods

1. Conventional method

1

2

3

4

5

6

const hobbys = new Array()

hobbys[0] = 'Basketball'

hobbys[1] = 'Badminton'

hobbys[2] = 'swimming'

console.log(hobbys)

// [ 'Basketball', 'Badminton', 'swimming' ]

Copy after login

2. Concise method

1

2

3

const hobbys = new Array('Basketball', 'Badminton','swimming')

console.log(hobbys)

// [ 'Basketball', 'Badminton', 'swimming' ]

Copy after login

3. Literal

1

2

3

const hobbys = ['Basketball','Badminton','swimming']

console.log(hobbys)

// [ 'Basketball', 'Badminton', 'swimming' ]

Copy after login

Array object method

1. forEach

forEach() method is used to call each element of the array and pass the element to the callback function. There is no return value, which is essentially equivalent to a for loop that executes the function function on each item. The original array will not be changed.

1

2

// currentValue:必需,当前元素 index:可选,当前元素的索引值 arr:可选,当前元素所属的数组对象。

array.forEach(function(currentValue, index, arr))

Copy after login

1

2

3

4

5

6

7

8

9

10

11

12

13

let array = ['a', 'b', 'c']

let func = (currentValue, index, arr) => {

  currentValue += 's' 

  console.log('currentValue:' + currentValue + ' index:' + index + ' arr:' + arr)

}

array.forEach(func)

console.log(array)

 

// 控制台输出:

// currentValue:as index:0 arr:a,b,c

// currentValue:bs index:1 arr:a,b,c

// currentValue:cs index:2 arr:a,b,c

// [ 'a', 'b', 'c' ]

Copy after login

2. map

Processes each element of the array through the specified function and returns the processed array.

The map() method returns a new array, and the elements in the array are the values ​​of the original array elements after calling the function. The method processes elements sequentially in the original array element order. The original array will not be changed.

1

2

// currentValue:必须,当前元素的值  index:可选,当前元素的索引值 arr:可选,当前元素属于的数组对象

array.map(function(currentValue,index,arr))

Copy after login

1

2

3

4

5

6

7

8

let array = [1, 2, 3, 4, 5]

let result = array.map((item) => {

  return item += 5

})

console.log(array)

console.log(result)

// [ 1, 2, 3, 4, 5 ]

// [ 6, 7, 8, 9, 10 ]

Copy after login

3. concat

The concat() method in JavaScript is used to concatenate two or more arrays and return the result.

1

2

// array1, array2, ..., arrayN 必需,该参数可以是具体的值,也可以是数组对象,可以是任意多个

array1.concat(array2,array3,...,arrayN)

Copy after login

1

2

3

4

5

6

7

8

const array1 = ['a', 'b', 'c']

const array2 = ['d', 'e', 'f']

const array3 = array1.concat(array2)

console.log(array3)

const array4 = array1.concat('123')

console.log(array4)

// [ 'a', 'b', 'c', 'd', 'e', 'f' ]

// [ 'a', 'b', 'c', '123' ]

Copy after login

4. push

The push() method in Javascript array is used to add one or more elements to the end of the array, and Returns the new length.

1

2

3

4

5

6

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let length = fruits.push("Kiwi")

console.log(fruits)

console.log(length)

// [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]

// 5

Copy after login

5. unshift

The unshift() method adds one or more elements to the beginning of the array and returns the new length.

1

2

3

4

5

6

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let length = fruits.unshift("Lemon", "Pineapple")

console.log(fruits)

console.log(length)

// [ 'Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango' ]

// 6

Copy after login

6. pop

The pop() method is used to delete the last element of the array and return the deleted element.

1

2

3

4

5

6

let sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu']

let result = sites.pop()

console.log(sites)

console.log(result)

// [ 'Google', 'Runoob', 'Taobao', 'Zhihu' ]

// Baidu

Copy after login

7. shift

The shift() method is used to delete the first element of the array and return the value of the first element

1

2

3

4

5

6

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let result = fruits.shift()

console.log(fruits)

console.log(result)

// [ 'Orange', 'Apple', 'Mango' ]

// Banana

Copy after login

8. splice

splice() method is used to add or delete elements in the array and return the deleted element array

1

2

3

4

// 参数 Values: index: 必需,规定从何处添加/删除元素

// howmany: 可选,规定应该删除多少元素 必须是数字,但可以是 "0"

// item1, ..., itemX 可选,要添加到数组的新元素

array.splice(index,howmany,item1,.....,itemX)

Copy after login

1

2

3

4

5

6

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let result = fruits.splice(1, 2, "Lemon", "Kiwi")

console.log(fruits)

console.log(result)

// [ 'Banana', 'Lemon', 'Kiwi', 'Mango' ]

// [ 'Orange', 'Apple' ]

Copy after login

9 The .slice

slice() method returns selected elements from an existing array. You can also extract a portion of a string and return the extracted portion as a new string. The original array will not be changed.

1

2

3

// start: 可选,规定从何处开始选取 若为负值,表示从原数组中的倒数第几个元素开始提取

// end: 可选,规定从何处结束选取 如果没有指定该参数,那么切分的数组包含从start到数组结束的所有元素

array.slice(start, end)

Copy after login

1

2

3

4

5

6

7

8

9

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]

let result1 = fruits.slice(1, 3)

let result2 = fruits.slice(2)

console.log(fruits)

console.log(result1)

console.log(result2)

// [ 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango' ]

// [ 'Orange', 'Lemon' ]

// [ 'Lemon', 'Apple', 'Mango' ]

Copy after login

10. join

join() method combines all array elements into a string. It behaves like toString(), but you can also specify the delimiter

1

2

// separator: 可选,指定要使用的分隔符 如果省略该参数,则使用逗号作为分隔符

array.join(separator)

Copy after login

1

2

3

4

5

6

7

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let energy1 = fruits.join();

let energy2 = fruits.join('-');

console.log(energy1)

console.log(energy2)

// Banana,Orange,Apple,Mango

// Banana-Orange-Apple-Mango

Copy after login

11. The every

every() method is used to detect whether all elements of the array match Specify the condition (provided through the function).

1

array.every(function(currentValue,index,arr))

Copy after login

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

let ages = [32, 33, 16, 40]

let nums = [32, 33, 19, 40]

function checkAdult(age) {

  return age >= 18

}

function checkNums(num) {

  return num >= 18

}

// 16不满足大于18,故结果false

let result1 = ages.every(checkAdult)

// 每一项都满足条件,故结果true

let result2 = nums.every(checkNums)

console.log(result1)

console.log(result2)

// false

// true

Copy after login

12. The filter

filter() method creates a new array. The elements in the new array are checked for all elements in the specified array that meet the conditions. The original array will not be changed.

1

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

Copy after login

1

2

3

4

5

6

7

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

function checkAdult(age) {

  return age >= 18;

}

let result = ages.filter(checkAdult)

console.log(result)

// [ 32, 33, 40 ]

Copy after login

13. The indexOf

indexOf() method returns the position where a specified string value first appears in the string. If not found, -1

1

2

3

// searchvalue: 必需。规定需检索的字符串值。

// start: 可选的整数参数。规定在字符串中开始检索的位置。值:0~array.length-1

string.indexOf(searchvalue,start)

Copy after login

1

2

3

4

5

6

7

let str = "Hello world, welcome to the universe.";

// 输出w所在的下标索引13(空格也算),没有找到会返回-1

let n = str.indexOf("welcome");

console.log(n)

console.log(str[n])

// 13

// w

Copy after login

14. reduce

reduce() method receives a function as an accumulator, each value in the array (from left to right ) begins to reduce and is finally calculated to a value.

1

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

Copy after login

1

2

3

4

5

6

7

let numbers = [2, 3, 5, 6]

function getSum(total, num) {

  return total + num

}

let result = numbers.reduce(getSum, 0)

console.log(result)

// 16

Copy after login

15. reverse

reverse() method is used to reverse the order of elements in the array. Will change the original array and return the array in changed order.

1

2

3

4

5

6

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let resut = fruits.reverse()

console.log(fruits)

console.log(resut)

// [ 'Mango', 'Apple', 'Orange', 'Banana' ]

// [ 'Mango', 'Apple', 'Orange', 'Banana' ]

Copy after login

16. sort

sort() method is used to sort the elements of the array. The sort order can be alphabetical or numerical, and in ascending or descending order.

1

2

// sortfunction: 可选。规定排序顺序。必须是函数。

array.sort(sortfunction)

Copy after login

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

let fruits = ["Banana", "Orange", "Apple", "Mango"]

let ages = [9, 3, 4, 5, 7, 10]

// 升序

let agesFunAsc = function (ag1,ag2) {

  return ag1 - ag2

}

// 降序

let agesFunDes= function (ag1,ag2) {

  return -(ag1 - ag2)

}

fruits.sort()

ages.sort(agesFunAsc)

console.log(fruits)

console.log(ages)

ages.sort(agesFunDes)

console.log(ages)

// [ 'Apple', 'Banana', 'Mango', 'Orange' ]

// [ 3, 4, 5, 7, 9, 10 ]

// [ 10, 9, 7, 5, 4, 3 ]

Copy after login

17. toString

toString() method is used to convert numbers to strings.

1

number.toString(radix)

Copy after login

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

let num = 15

let n = num.toString()

// 也可以使用不同的进制把一个数字转换为字符串

// 2进制

let b = num.toString(2);

// 8进制

let c = num.toString(8);

// 16进制

let d = num.toString(16);

console.log(n)

console.log(b)

console.log(c)

console.log(d)

// 15

// 1111

// 17

// f

Copy after login

18. at

at() method accepts an integer value and returns the value of the at index, both positive and negative integers are acceptable. A negative integer means counting down from the last item in the array.

1

array.at(index)

Copy after login

1

2

3

4

5

6

7

let str = 'helso word'

let item1 = str.at(2)

let item2 = str.at(-1)

console.log(item1)

console.log(item2)

// l

// d

Copy after login

19. find

find() method returns the value of the first element of the array that passes the test (judged within the function).

1

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

Copy after login

1

2

3

4

5

6

7

let ages = [3, 10, 18, 20];

function checkAdult(age) {

  return age >= 18;

}

let value = ages.find(checkAdult)

console.log(value)

// 18

Copy after login

20. some

some() method is used to detect whether the elements in the array meet the specified conditions (provided by the function).

1

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

Copy after login
rrree

The above is the detailed content of Summary of 20 common JavaScript array operations. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template