首页 > web前端 > js教程 > 正文

每个开发人员都应该掌握的 JavaScript 数组方法(第 1 部分)

PHPz
发布: 2024-09-07 21:17:03
转载
1182人浏览过

每个开发人员都应该掌握的 javascript 数组方法(第 1 部分)

“能力越大,责任越大。”
— 本叔叔,蜘蛛侠 (2002)

就像蜘蛛侠必须掌握他新发现的能力一样,开发人员需要掌握 javascript 强大的数组方法才能高效、负责任地进行编码。

让我们深入研究一些必须知道的数组方法!

1. 查找

find() 方法返回满足所提供的测试函数的第一个数组元素的值。

arr.find(callback(element, index, arr),thisarg)

立即学习Java免费学习笔记(深入)”;

  • 返回数组中满足给定函数的第一个元素
  • 如果没有元素满足该函数,则返回未定义
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)

即构数智人
即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台,支持数字人形象定制、短视频创作、数字人直播等。

即构数智人 36
查看详情 即构数智人

• 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 < 6);

// output: true
console.log(result1); 

const nums2 = [ 1 , 2 , 7 , 4 , 5];
let result2 = nums2.every(element => element < 6);

// output: false
console.log(result2);
登录后复制

10.一些

some() 方法测试是否有任何数组元素通过给定的测试函数。

arr.some(callback(currentvalue), thisarg)

  • 如果数组元素通过给定的测试函数,则返回 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 < 6);

// Output: true
console.log(result1); 

const nums2 = [ 8 , 6 , 7 , 9 , 10];
let result2 = nums2.some(element => element < 6);

// Output: false
console.log(result2);
登录后复制

请继续关注我们系列的第 2 部分,我们将深入探讨更重要的 javascript 数组方法!快乐学习!

以上就是每个开发人员都应该掌握的 JavaScript 数组方法(第 1 部分)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号