【JavaScript 】JavaScript 数组对象操作数组的方法(很全带示例)

发布时间:2023年12月18日

JavaScript 数组对象操作数组的方法

1. push() - 向数组的末尾添加一个或多个元素,并返回新的长度。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

2. pop() - 删除并返回数组的最后一个元素。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // [1, 2]
console.log(last); // 3

3. shift() - 删除并返回数组的第一个元素。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // [2, 3]
console.log(first); // 1

4. unshift() - 向数组的开头添加一个或多个元素,并返回新的长度。

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

5. slice() - 返回一个新的数组对象,这个对象是一个由原数组的指定开始到结束(不包括结束)的浅拷贝。原始数组不会被改变。

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]

6. splice() - 通过删除或替换现有元素或者添加新元素来修改数组,并以数组的形式返回被修改的内容。此方法会改变原数组。

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 2, 'a', 'b'); // 从索引1开始,删除2个元素,并添加'a'和'b'。
console.log(arr); // [1, 'a', 'b', 4]
console.log(removed); // [2, 3]

7. sort() - 对数组的元素进行排序,并返回数组。

let arr = [5, 2, 8];
arr.sort(); // 对数字排序需要提供一个比较函数,否则它将作为字符串排序。
console.log(arr); // [2, 5, 8]

8. reverse() - 反转数组中元素的顺序。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

9. concat() - 用于连接两个或更多的数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5]

10. map() - 通过指定函数处理数组的每个元素,并返回处理后的新数组。

let numbers = [1, 2, 3, 4, 5];  
let doubledNumbers = numbers.map(num => num * 2);  
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

11. join() - 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。默认使用’,'号分隔。

let arr = [1, 2, 3];
let str = arr.join(', '); // 使用逗号和空格作为分隔符。
console.log(str); // "1, 2, 3"

12. filter() - 创建一个新数组,包含通过测试的所有元素。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

13. reduce() - 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

14. reduceRight() - 与reduce()类似,但是从右到左。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight((acc, num) => acc + num, 0);
console.log(sum); // 15

15. find() - 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

16. findIndex() - 返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

let numbers = [1, 2, 3, 4, 5];
let indexOfFirstEven = numbers.findIndex(num => num % 2 === 0);
console.log(indexOfFirstEven); // 1

17. includes() - 判断一个数组是否包含一个指定的值,从右往左遍历。


let arr = [1, 2, 3, 4, 5];
let included = arr.includes(3); // 检查数组中是否包含 3,从右往左遍历
console.log(included); // 输出: true

18. indexOf() - 在数组中从左到右搜索一个值,并返回其索引(从0开始)。


let arr = ['apple', 'banana', 'cherry', 'date'];
let index = arr.indexOf('banana'); // 查找 'banana' 的索引
console.log(index); // 输出: 1

19. lastIndexOf() - 在数组中从右到左搜索一个值,并返回其索引(从0开始)。


let arr = ['apple', 'banana', 'cherry', 'date'];
let index = arr.lastIndexOf('banana'); // 从右往左查找 'banana' 的索引
console.log(index); // 输出: 1

20. forEach() - 对数组的每个元素执行一次给定的函数。


let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
    console.log(`索引:${index},值:${item}`);
});
// 输出:
// 索引:0,值:1
// 索引:1,值:2
// 索引:2,值:3
// 索引:3,值:4
// 索引:4,值:5

21. map() - 通过指定函数处理数组的每个元素,并返回处理后的新数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2); // 把每个元素乘以2
console.log(newArr); // 输出: [2, 4, 6, 8, 10]

22. filter() - 创建一个新数组,包含通过测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3); // 选择大于3的元素
console.log(newArr); // 输出: [4, 5]

23. reduce() - 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((accumulator, current) => accumulator + current, 0); // 求和
console.log(sum); // 输出: 15

24. reduceRight() - 与reduce()类似,但是从右到左。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduceRight((accumulator, current) => accumulator + current, 0); // 从右到左求和
console.log(sum); // 输出: 15

25. some() - 测试数组中是否至少有一个元素通过由提供的函数实现的测试。

// 25. some()
let arr = [1, 2, 3, 4, 5];
let hasPositive = arr.some(item => item > 0); // 检查数组中是否存在正数
console.log(hasPositive); // 输出: true

26. every() - 测试数组的所有元素是否都通过由提供的函数实现的测试。

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

const areAllNumbersGreaterThan2 = numbers.every(number => number > 2);
console.log(areAllNumbersGreaterThan2); // 输出: true

27. includes() - 判断一个数组是否包含一个指定的值,从右往左遍历。

const fruits = ['apple', 'banana', 'orange'];

const doesFruitsIncludeOrange = fruits.includes('orange');
console.log(doesFruitsIncludeOrange); // 输出: true

28. find() - 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const people = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }];

const firstPerson = people.find(person => person.name === 'Bob');
console.log(firstPerson); // 输出: { name: 'Bob' }

29. findIndex() - 返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

const people = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }];

const indexOfBob = people.findIndex(person => person.name === 'Bob');
console.log(indexOfBob); // 输出: 1

30. copyWithin() - 在当前已排序的数组中,将指定位置的元素替换为其他元素,不会修改原数组的大小,但会改变原数组的顺序。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // 输出: [4, 5, 3, 4, 5]

31. fill() - 使用给定的值填充数组的从起始索引到结束索引的所有元素。不会改变原数组的大小。

const arr = [1, 2, 3, 4, 5];
arr.fill(7, 1, 3);
console.log(arr); // 输出: [1, 7, 7, 4, 5]

32. keys() - 返回一个表示给定对象的所有可枚举属性的字符串数字索引的迭代器对象。

const person = { name: 'Alice', age: 25 };
const keysIterator = person.keys();
const keysArray = Array.from(keysIterator);
console.log(keysArray); // 输出: ['name', 'age']

33. values() - 返回一个表示给定对象的所有属性值的迭代器对象。

const person = { name: 'Alice', age: 25 };
const valuesIterator = person.values();
const valuesArray = Array.from(valuesIterator);
console.log(valuesArray); // 输出: ['Alice', 25]

34. entries() - 返回一个表示给定对象的所有可枚举属性名和相应值的迭代器对象。

const person = { name: 'Alice', age: 25 };
const entriesIterator = person.entries();
const entriesArray = Array.from(entriesIterator);
console.log(entriesArray); // 输出: [['name', 'Alice'], ['age', 25]]

35. reduceRight() - 与reduce()类似,但是从右到左。

const arr = [1, 2, 3, 4];  
const sum = arr.reduceRight((acc, val) => acc + val, 0);  
console.log(sum); // 输出:10

36. fill() - 使用给定的值填充数组的从起始索引到结束索引的所有元素。不会改变原数组的大小。

const arr = [1, 2, 3];  
arr.fill(4, 1, 2);  
console.log(arr); // 输出:[1, 4, 4]

37. includes() - 判断一个数组是否包含一个指定的值,从右往左遍历。

const arr = [1, 2, 3, 4];  
console.log(arr.includes(2)); // 输出:true  
console.log(arr.includes(5)); // 输出:false

38. some() - 测试数组中是否至少有一个元素通过由提供的函数实现的测试。

const arr = [1, 2, 3, 4];  
const isEven = num => num % 2 === 0;  
console.log(arr.some(isEven)); // 输出:true,因为数组中存在偶数

39. every() - 测试数组的所有元素是否都通过由提供的函数实现的测试。

const arr = [1, 2, 3, 4];  
const isPositive = num => num > 0;  
console.log(arr.every(isPositive)); // 输出:true,因为数组中所有元素都为正数

40. findIndex() - 返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

const arr = [1, 2, 3, 4];  
const isFour = num => num === 4;  
console.log(arr.findIndex(isFour)); // 输出:3,因为第一个满足条件的元素的索引是3
文章来源:https://blog.csdn.net/codeblank/article/details/135013965
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。