揭秘JS数组的常用属性与方法，一览无遗！

2023-12-21 03:32:20

深度剖析数组的属性与方法：掌控 JavaScript 数组

前言

数组是 JavaScript 中至关重要的数据结构，用于存储和管理有序的元素集合。深入了解数组的属性和方法对于高效利用 JavaScript 编写可靠的代码至关重要。本文将深入探讨数组的属性和方法，以提升您的 JavaScript 技能。

一、数组的属性

1. length

length 属性表示数组中元素的数量，它始终为一个非负整数。length 属性可以通过赋值来设置数组的大小，但需要注意的是，缩小数组大小会丢失超出新长度的元素。

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray.length); // 输出：3

// 缩小数组大小
myArray.length = 2;

console.log(myArray); // 输出：['apple', 'banana']

2. [ ] 索引运算符

索引运算符（[]）用于访问和修改数组中的元素。索引从 0 开始，表示数组中的位置。可以使用负索引从数组末尾访问元素，从 -1 开始。

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray[0]); // 输出：'apple'
console.log(myArray[-1]); // 输出：'cherry'

二、数组的方法

1. 修改数组

push(element)

push() 方法向数组末尾添加一个或多个元素。它修改原始数组，并返回新的长度。

const myArray = ['apple', 'banana'];

myArray.push('cherry');

console.log(myArray); // 输出：['apple', 'banana', 'cherry']

pop()

pop() 方法从数组末尾删除最后一个元素，并返回该元素。如果数组为空，则返回 undefined。

const myArray = ['apple', 'banana', 'cherry'];

const lastElement = myArray.pop();

console.log(myArray); // 输出：['apple', 'banana']
console.log(lastElement); // 输出：'cherry'

shift()

shift() 方法从数组开头删除第一个元素，并返回该元素。如果数组为空，则返回 undefined。

const myArray = ['apple', 'banana', 'cherry'];

const firstElement = myArray.shift();

console.log(myArray); // 输出：['banana', 'cherry']
console.log(firstElement); // 输出：'apple'

unshift(element)

unshift() 方法向数组开头添加一个或多个元素。它修改原始数组，并返回新的长度。

const myArray = ['apple', 'banana'];

myArray.unshift('strawberry');

console.log(myArray); // 输出：['strawberry', 'apple', 'banana']

splice(index, howmany, item)

splice() 方法用于在指定位置插入、删除或替换数组元素。它有三个参数：

index ：指定要插入、删除或替换元素的位置。
howmany ：指定要删除的元素数量。
item ：指定要插入的新元素（可选）。

// 在索引 1 处插入元素
const myArray = ['apple', 'banana', 'cherry'];
myArray.splice(1, 0, 'orange');

console.log(myArray); // 输出：['apple', 'orange', 'banana', 'cherry']

// 从索引 1 开始删除 2 个元素
myArray.splice(1, 2);

console.log(myArray); // 输出：['apple', 'cherry']

// 用新元素替换元素
myArray.splice(1, 1, 'pineapple');

console.log(myArray); // 输出：['apple', 'pineapple', 'cherry']

2. 查找数组

indexOf(element, from)

indexOf() 方法返回数组中某个元素的第一个索引。如果未找到元素，则返回 -1。

const myArray = ['apple', 'banana', 'cherry'];

const index = myArray.indexOf('banana');

console.log(index); // 输出：1

lastIndexOf(element, from)

lastIndexOf() 方法返回数组中某个元素的最后一个索引。如果未找到元素，则返回 -1。

const myArray = ['apple', 'banana', 'cherry', 'banana'];

const index = myArray.lastIndexOf('banana');

console.log(index); // 输出：3

includes(element, from)

includes() 方法检查数组中是否包含某个元素。如果包含，则返回 true，否则返回 false。

const myArray = ['apple', 'banana', 'cherry'];

const result = myArray.includes('banana');

console.log(result); // 输出：true

3. 查询数组

find(callbackfn, thisArg)

find() 方法找到第一个满足条件的元素并返回。如果未找到元素，则返回 undefined。

const myArray = [
  { name: 'apple', price: 1.5 },
  { name: 'banana', price: 2.0 },
  { name: 'cherry', price: 2.5 }
];

const cheapFruit = myArray.find(fruit => fruit.price < 2);

console.log(cheapFruit); // 输出：{ name: 'apple', price: 1.5 }

findIndex(callbackfn, thisArg)

findIndex() 方法找到第一个满足条件的元素的索引并返回。如果未找到元素，则返回 -1。

const myArray = [
  { name: 'apple', price: 1.5 },
  { name: 'banana', price: 2.0 },
  { name: 'cherry', price: 2.5 }
];

const index = myArray.findIndex(fruit => fruit.price < 2);

console.log(index); // 输出：0

every(callbackfn, thisArg)

every() 方法检查数组中是否所有元素都满足条件。如果所有元素都满足，则返回 true，否则返回 false。

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

const result = myArray.every(num => num % 2 === 0);

console.log(result); // 输出：false

some(callbackfn, thisArg)

some() 方法检查数组中是否存在至少一个元素满足条件。如果存在，则返回 true，否则返回 false。

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

const result = myArray.some(num => num % 2 === 0);

console.log(result); // 输出：true

filter(callbackfn, thisArg)

filter() 方法创建一个新数组，包含数组中所有满足条件的元素。

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

const evenArray = myArray.filter(num => num % 2 === 0);

console.log(evenArray); // 输出：[2, 4]

4. 转换数组

map(callbackfn, thisArg)

map() 方法创建一个新数组，包含数组中每个元素经过转换后的结果。

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

const doubledArray = myArray.map(num => num * 2);

console.log(doubledArray); // 输出：[2, 4, 6, 8, 10]

reduce(callbackfn, initialValue)

reduce() 方法将数组中的元素累积为一个值。

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

const sum = myArray.reduce((a, b) => a + b, 0);

console.log(sum); // 输出：15

5. 迭代数组

forEach(callbackfn, thisArg)

forEach() 方法对数组中的每个元素执行指定的操作。它不返回任何值。

const myArray = ['apple', 'banana', 'cherry'];

myArray.forEach((element, index) => {
  console.log(`Element ${index + 1}: ${element}`);
});

// 输出：
// Element 1: apple
// Element 2: banana
// Element 3: cherry