每个开发人员都应该掌握的 JavaScript 数组方法（第 1 部分）
“能力越大，责任越大。”
— 本叔叔，蜘蛛侠 (2002)
就像蜘蛛侠必须掌握他新发现的能力一样，开发人员需要掌握 javascript 强大的数组方法才能高效、负责任地进行编码。
让我们深入研究一些必须知道的数组方法！
1. 查找
find() 方法返回满足所提供的测试函数的第一个数组元素的值。
arr.find(callback(element, index, arr),thisarg)
- 返回数组中满足给定函数的第一个元素的值。
- 如果没有元素满足该函数，则返回未定义
const cuties = [
{ name: "wanda maximoff", age: 31 },
{ name: "natasha romanoff", age: 32 },
{ name: "jane foster", age: 27 },
{ name: "gwen stacy", age: 26 },
];
// find method returns the value of the first element
// in the array that satisfies the given function
// or else returns undefined
let cuty = cuties.find(({ age }) => age >= 30);
// output: { name: 'wanda maximoff', age: 31 }
console.log(cuty);
2. 查找索引
findindex() 方法返回满足所提供的测试函数的第一个数组元素的索引，否则返回 -1。
arr.findindex(callback(element, index, arr),thisarg)
- 返回数组中满足给定函数的第一个元素的索引。
- 如果没有元素满足该函数，则返回-1。
const cuties = [
{ name: "wanda maximoff", age: 31 },
{ name: "natasha romanoff", age: 32 },
{ name: "jane foster", age: 27 },
{ name: "gwen stacy", age: 26 },
];
// findindex method returns the index of the first array element
// that satisfies the provided test function or else returns -1.
let cutyindex = cuties.findindex(({ age }) => age >= 30);
// output: 0
console.log(cutyindex);
3.索引
indexof() 方法返回数组元素出现的第一个索引，如果未找到，则返回 -1。
arr.indexof(searchelement, fromindex)
- 如果元素在数组中至少出现一次，则返回该元素的第一个索引。
- 如果在数组中未找到该元素，则返回-1。
const productprices = [5, 12, 3, 20, 5, 2, 50]; // indexof() returns the first index of occurance // of an array element, or -1 if it is not found. let firstindex = productprices.indexof(20); console.log(firstindex); // 3 let secondindex = productprices.indexof(5); console.log(secondindex); // 0 // the second argument specifies the search start index let thirdindex = productprices.indexof(5, 1); console.log(thirdindex); // 4 // indexof returns -1 if not found let notfoundindex = productprices.indexof(15); console.log(notfoundindex); // -1
4. 排序
sort() 方法按特定顺序（升序或降序）对数组的项目进行排序。
arr.sort(comparefunction)
- 对数组元素进行排序后返回数组（这意味着它更改了原始数组并且不进行复制）。
const avengers = ["captain", "tony", "thor",
"natasha", "bruce", "clint"];
// modifies the array in place
avengers.sort();
// [ 'bruce', 'captain', 'clint', 'natasha', 'thor', 'tony' ]
console.log(avengers);
const nums = [1000, 50, 2, 7, 14];
// number is converted to string and sorted
nums.sort();
// output: [ 1000, 14, 2, 50, 7 ]
console.log(nums)
// sort nums in ascending order by providing compare function
nums.sort((a, b) => a - b);
// output: [ 2, 7, 14, 50, 1000 ]
console.log(nums);
5. 包括
includes() 方法检查数组是否包含指定元素。
arr.includes(valuetofind, fromindex)
includes() 方法返回：
- 如果在数组 searchvalue 中的任何位置找到，则为 true
- 如果在数组 searchvalue 中找不到任何位置，则返回 false
const avengers = ["captain", "tony", "thor",
"natasha", "bruce", "clint"];
// includes() method returns true if an array contains
// a specified element or else returns false.
let check1 = avengers.includes("thor");
console.log(check1); // true
// second argument specifies position to start the search
let check2 = avengers.includes("thor", 3);
console.log(check2); // false
// the search starts from the 4th-to-last element ("hulk")
// and checks the rest of the array for "thor".
let check3 = avengers.includes("thor", -4);
console.log(check3); // true
6. foreach
foreach() 方法为每个数组元素执行提供的函数。
arr.foreach(callback(currentvalue), thisarg)
• foreach() 不会对没有值的数组元素执行回调。
• 返回未定义。
const nums = [120, 150, 80, , 200]; // foreach() method executes a provided // function for each array element which // have values. it returns undefined. /* num 0: 120 num 1: 150 num 2: 80 num 4: 200 */ nums.foreach((value, index) => { console.log('num ' + index + ': ' + value); });
7. 切片
slice() 方法将数组的一部分的浅拷贝返回到新的数组对象中。
arr.slice(开始, 结束)
• 返回包含提取元素的新数组。
const fruits = ["apple", "banana", "orange", "grape", "mango"]; // slicing the array (from start to end) let slicedfruits1 = fruits.slice(); console.log(slicedfruits1); // [ 'apple', 'banana', 'orange', 'grape', 'mango' ] // slicing from the third element let slicedfruits2 = fruits.slice(2); console.log(slicedfruits2); // [ 'orange', 'grape', 'mango' ] // slicing from the second element to fourth element let slicedfruits3 = fruits.slice(1, 4); console.log(slicedfruits3); // [ 'banana', 'orange', 'grape' ] // slicing the array from start to second-to-last let slicedfruits4 = fruits.slice(0, -1); console.log(slicedfruits4); // [ 'apple', 'banana', 'orange', 'grape' ] // slicing the array from third-to-last let slicedfruits5 = fruits.slice(-3); console.log(slicedfruits5); // [ 'orange', 'grape', 'mango' ]
8. 拼接
splice() 方法修改数组（添加、删除或替换元素）。
arr.splice(start, deletecount, item1, ..., itemn)
• 返回包含已删除元素的数组。
let animals = ["dog", "cat", "elephant", "lion"]; // replacing "elephant" & "lion" with "tiger" & "giraffe" let removedanimals1 = animals.splice(2, 2, "tiger", "giraffe"); console.log(removedanimals1); // [ 'elephant', 'lion' ] console.log(animals); // [ 'dog', 'cat', 'tiger', 'giraffe' ] // adding elements without deleting existing elements let removedanimals2 = animals.splice(1, 0, "elephant", "lion"); console.log(removedanimals2); // [] console.log(animals); // [ 'dog', 'elephant', 'lion', 'cat', 'tiger', 'giraffe' ] // removing 3 elements let removedanimals3 = animals.splice(2, 3); console.log(removedanimals3); // [ 'lion', 'cat', 'tiger' ] console.log(animals); // [ 'dog', 'elephant', 'giraffe' ]
9. 每个
every() 方法检查所有数组元素是否通过给定的测试函数。
arr.every(callback(currentvalue), thisarg)
every() 方法返回：
- true - 如果所有数组元素都通过给定的测试函数（回调返回真值）。
- false - 如果任何数组元素未通过给定的测试函数。
const nums1 = [ 1 , 2 , 3 , 4 , 5]; // every() method returns true if all the array // elements pass the given test function or else // returns false let result1 = nums1.every(element => element element <h3> 10.<strong>一些</strong> </h3> <p>some() 方法测试是否有任何数组元素通过给定的测试函数。</p> <p>arr.some(callback(currentvalue), thisarg)</p>
- 如果数组元素通过给定的测试函数，则返回 true（回调返回真值）。
- 否则返回 false
const nums1 = [ 8 , 2 , 7 , 9 , 6]; // some() method returns true if any of the array // elements pass the given test function or else // returns false let result1 = nums1.some(element => element element <p>请继续关注我们系列的第 2 部分，我们将深入探讨更重要的 javascript 数组方法！快乐学习！</p>
以上就是每个开发人员都应该掌握的 JavaScript 数组方法（第 1 部分）的详细内容，更多请关注www.sxiaw.com其它相关文章！