返回

Javascript Array 内置对象 Array 的常用方法

前端

JavaScript 内置对象 Array 的常用方法

JavaScript 的 Array 对象是一个强大的工具,它提供了许多内置方法来操作数组。这些方法可以用来添加、删除、排序、搜索和修改数组中的元素。

本节将介绍 Array 对象的一些常用方法,并提供示例代码来说明如何使用它们。

pop()

pop() 方法删除并返回数组的最后一个元素。

const arr = [1, 2, 3, 4, 5];

const lastElement = arr.pop();

console.log(lastElement); // 5
console.log(arr); // [1, 2, 3, 4]

如果数组为空,则 pop() 方法返回 undefined。

const arr = [];

const lastElement = arr.pop();

console.log(lastElement); // undefined
console.log(arr); // []

push()

push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

const arr = [1, 2, 3, 4, 5];

const newLength = arr.push(6, 7);

console.log(newLength); // 7
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

shift()

shift() 方法从数组的开头删除第一个元素,并返回该元素。

const arr = [1, 2, 3, 4, 5];

const firstElement = arr.shift();

console.log(firstElement); // 1
console.log(arr); // [2, 3, 4, 5]

如果数组为空,则 shift() 方法返回 undefined。

const arr = [];

const firstElement = arr.shift();

console.log(firstElement); // undefined
console.log(arr); // []

unshift()

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

const arr = [1, 2, 3, 4, 5];

const newLength = arr.unshift(0);

console.log(newLength); // 6
console.log(arr); // [0, 1, 2, 3, 4, 5]

splice()

splice() 方法可以用来添加、删除或替换数组中的元素。

// 添加元素
const arr = [1, 2, 3, 4, 5];

arr.splice(2, 0, 2.5, 3.5);

console.log(arr); // [1, 2, 2.5, 3.5, 3, 4, 5]

// 删除元素
const arr = [1, 2, 3, 4, 5];

arr.splice(2, 2);

console.log(arr); // [1, 2, 5]

// 替换元素
const arr = [1, 2, 3, 4, 5];

arr.splice(2, 1, 2.5);

console.log(arr); // [1, 2, 2.5, 4, 5]

slice()

slice() 方法返回数组的一个子数组。

const arr = [1, 2, 3, 4, 5];

const subArray = arr.slice(2, 4);

console.log(subArray); // [3, 4]

slice() 方法可以接受两个参数:开始索引和结束索引。开始索引是子数组的第一个元素的索引,结束索引是子数组的最后一个元素的索引。如果省略结束索引,则子数组将一直延伸到数组的末尾。

const arr = [1, 2, 3, 4, 5];

const subArray = arr.slice(2);

console.log(subArray); // [3, 4, 5]

sort()

sort() 方法对数组中的元素进行排序。

const arr = [1, 5, 3, 2, 4];

arr.sort();

console.log(arr); // [1, 2, 3, 4, 5]

sort() 方法可以接受一个比较函数作为参数。比较函数有两个参数,a 和 b,这两个参数都是数组中的元素。比较函数返回一个值,如果 a 小于 b,则返回一个负值;如果 a 等于 b,则返回 0;如果 a 大于 b,则返回一个正值。

const arr = [1, 5, 3, 2, 4];

arr.sort((a, b) => a - b);

console.log(arr); // [1, 2, 3, 4, 5]

reverse()

reverse() 方法将数组中的元素顺序反转。

const arr = [1, 2, 3, 4, 5];

arr.reverse();

console.log(arr); // [5, 4, 3, 2, 1]

join()

join() 方法将数组中的元素连接成一个字符串。

const arr = [1, 2, 3, 4, 5];

const str = arr.join();

console.log(str); // "1,2,3,4,5"

join() 方法可以接受一个字符串作为参数,该字符串将被用作元素之间的分隔符。

const arr = [1, 2, 3, 4, 5];

const str = arr.join("-");

console.log(str); // "1-2-3-4-5"

concat()

concat() 方法将两个或多个数组连接成一个新的数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const newArr = arr1.concat(arr2);

console.log(newArr); // [1, 2, 3, 4, 5, 6]

forEach()

forEach() 方法对数组中的每个元素执行一个指定的函数。

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});

// 输出:
// 1
// 2
// 3
// 4
// 5

forEach() 方法可以接受三个参数:元素本身、元素的索引和数组本身。

const arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

// 输出:
// Element: 1, Index: 0, Array: [1, 2, 3, 4, 5]
// Element: 2, Index: 1, Array: [1, 2, 3, 4, 5]
// Element: 3, Index: 2, Array: [1, 2, 3, 4, 5]
// Element: 4, Index: 3, Array: [1, 2, 3, 4, 5]
// Element: 5, Index: 4, Array: [1, 2, 3, 4, 5]

map()

map() 方法将数组中的每个元素映射到一个新值,并返回一个由这些新值组成的数组。

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map((element) => element * 2);

console.log(newArr); // [2, 4, 6, 8, 10]

map() 方法可以接受三个参数:元素本身、元素的索引和数组本身。

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map((element, index, array) => {
  return `Element: ${element}, Index: ${index}, Array: ${array}`;
});

console.log(newArr);