JS数组的各个方法及其使用

ES6之前的数组方法

1.push():向数组末尾添加一个或多个元素。

let arr = [1, 2, 3];
arr.push(4);
// 现在 arr 为 [1, 2, 3, 4]

2.pop():从数组末尾移除最后一个元素。

let arr = [1, 2, 3, 4];
let removedElement = arr.pop();
// 现在 arr 为 [1, 2, 3],removedElement 为 4

3.shift():从数组头部移除第一个元素。

let arr = [1, 2, 3];
let removedElement = arr.shift();
// 现在 arr 为 [2, 3],removedElement 为 1

4.unshift():向数组头部添加一个或多个元素。

let arr = [2, 3];
arr.unshift(1);
// 现在 arr 为 [1, 2, 3]

5.slice():截取数组的一部分,返回一个新数组,不修改原数组。

let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(1, 4);
// slicedArr 为 [2, 3, 4]

6.splice():从数组中添加或移除元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b');
// 现在 arr 为 [1, 2, 'a', 'b', 4, 5]

7.concat():合并两个或多个数组,返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let mergedArr = arr1.concat(arr2);
// mergedArr 为 [1, 2, 3, 4]

8.indexOf():返回指定元素在数组中第一次出现的索引,如果不存在则返回 -1。

let arr = [1, 2, 3];
arr.forEach(element => console.log(element));
// 输出 1, 2, 3

9.forEach():对数组的每个元素执行提供的函数。

let arr = [1, 2, 3];
arr.forEach(element => console.log(element));
// 输出 1, 2, 3

10.map():对数组的每个元素执行提供的函数,并返回一个新数组。

let arr = [1, 2, 3];
let squaredArr = arr.map(element => element ** 2);
// squaredArr 为 [1, 4, 9]

测试使用文件

// 初始数组
let arr = [1, 2, 3, 4, 5];

// push(): 向数组末尾添加元素
arr.push(6);
console.log("push():", arr);

// pop(): 从数组末尾移除元素
let poppedElement = arr.pop();
console.log("pop():", arr, "Popped Element:", poppedElement);

// shift(): 从数组头部移除元素
let shiftedElement = arr.shift();
console.log("shift():", arr, "Shifted Element:", shiftedElement);

// unshift(): 向数组头部添加元素
arr.unshift(0);
console.log("unshift():", arr);

// slice(): 截取数组的一部分
let slicedArr = arr.slice(1, 4);
console.log("slice():", slicedArr);

// splice(): 从数组中添加或移除元素
arr.splice(2, 1, 'a', 'b');
console.log("splice():", arr);

// concat(): 合并两个数组
let arr2 = [7, 8, 9];
let mergedArr = arr.concat(arr2);
console.log("concat():", mergedArr);

// indexOf(): 查找元素的索引
let index = arr.indexOf('a');
console.log("indexOf():", index);

// forEach(): 对数组的每个元素执行函数
arr.forEach(element => console.log("forEach():", element));

// map(): 对数组的每个元素执行函数,并返回新数组
let squaredArr = arr.map(element => element ** 2);
console.log("map():", squaredArr);

ES6及以后

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

let arr = [1, 2, 3, 4, 5];
let result = arr.find(element => element > 2);
console.log("find():", result); // 输出 3

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

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(element => element > 2);
console.log("findIndex():", index); // 输出 2

13.filter():创建一个新数组,包含所有通过提供函数实现的测试的元素。

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(element => element % 2 === 0);
console.log("filter():", filteredArr); // 输出 [2, 4]

14.includes():判断数组是否包含某个元素,返回布尔值。

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

15.some():检查数组中是否至少有一个元素满足测试函数。

let arr = [1, 2, 3, 4, 5];
let hasEvenNumber = arr.some(element => element % 2 === 0);
console.log("some():", hasEvenNumber); // 输出 true

16.every():检查数组中是否所有元素都满足测试函数。

let arr = [1, 2, 3, 4, 5];
let allEvenNumbers = arr.every(element => element % 2 === 0);
console.log("every():", allEvenNumbers); // 输出 false

17.Array.from():将类数组对象或可迭代对象转换为真正的数组。

let arrayLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
let newArray = Array.from(arrayLike);
console.log("Array.from():", newArray); // 输出 ['a', 'b', 'c']

18.Array.of():创建一个具有可变数量参数的新数组实例。

let newArray = Array.of(1, 2, 3, 4, 5);
console.log("Array.of():", newArray); // 输出 [1, 2, 3, 4, 5]

三.sort排序

sort() 方法用于对数组的元素进行排序。在 ES6 之前,sort() 方法默认对数组元素进行字母顺序的排序,但在 ES6 及其之后的版本,可以通过传递一个比较函数来实现自定义排序。

1.默认排序(字母顺序):

let arr = ['banana', 'apple', 'orange', 'grape'];
arr.sort();
console.log("Default sort():", arr);
// 输出:['apple', 'banana', 'grape', 'orange']

2.数字排序:

let arr = [30, 5, 11, 7, 50];
arr.sort((a, b) => a - b);
console.log("Numeric sort():", arr);
// 输出:[5, 7, 11, 30, 50]

3.自定义排序:

let arr = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Doe', age: 35 }
];

arr.sort((a, b) => a.age - b.age);
console.log("Custom sort():", arr);
// 输出:[
//   { name: 'Jane', age: 25 },
//   { name: 'John', age: 30 },
//   { name: 'Doe', age: 35 }
// ]

你可能感兴趣的:(前端学习,javascript,开发语言,ecmascript)