[乐意黎原创] Array.prototype.find() 与 Array.prototype.findIndex() 使用详解

﹏ヽ暗。殇╰゛Y 2022-12-06 04:09 306阅读 0赞

Array.prototype.find()

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

  1. const array1 = [5, 12, 8, 130, 44];
  2. const found = array1.find(element => element > 10);
  3. console.log(found);
  4. // expected output: 12

语法

  1. arr.find(callback[, thisArg])

参数

callback在数组每一项上执行的函数,接收 3 个参数:

element当前遍历到的元素。

index可选 当前遍历到的索引。

array可选 数组本身。

thisArg可选 执行回调时用作this 的对象。

返回值

数组中第一个满足所提供测试函数的元素的值,否则返回 undefined

find方法不会改变数组。

  1. //用对象的属性查找数组里的对象
  2. var inventory = [
  3. {name: 'apples', quantity: 2},
  4. {name: 'bananas', quantity: 0},
  5. {name: 'cherries', quantity: 5}
  6. ];
  7. function findCherries(fruit) {
  8. return fruit.name === 'cherries';
  9. }
  10. console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

  1. const array1 = [5, 12, 8, 130, 44];
  2. const isLargeNumber = (element) => element > 13;
  3. console.log(array1.findIndex(isLargeNumber));
  4. // expected output: 3

语法

  1. arr.findIndex(callback[, thisArg])

参数

callback针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

element当前元素。

index当前元素的索引。

array调用findIndex的数组。

thisArg可选。执行callback时作为this对象的值.

返回值

  1. 数组中通过提供测试函数的第一个元素的**索引**。否则,返回-1
  2. //查找数组中首个质数元素的索引
  3. //以下示例查找数组中素数的元素的索引(如果不存在素数,则返回-1)。
  4. function isPrime(element, index, array) {
  5. var start = 2;
  6. while (start <= Math.sqrt(element)) {
  7. if (element % start++ < 1) {
  8. return false;
  9. }
  10. }
  11. return element > 1;
  12. }
  13. console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
  14. console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

最后, 使用测试:

  1. //aerchi, test example
  2. var list =[
  3. {"number":0,"name":"弯腰树陈酒","type":9},
  4. {"number":0,"name":"泸西烧洋芋","type":0},
  5. {"number":0,"name":"弥勒红酒","type":1},
  6. {"number":2,"name":"石屏豆腐","type":2},
  7. {"number":6,"name":"宣威火腿","type":4},
  8. {"number":0,"name":"富源火锅","type":3}
  9. ];
  10. var temp_wanyaoshu = {number: 0, name: "弯腰树陈酒", type: 9},
  11. /***findIndex****/
  12. list.findIndex((item, index)=>{
  13. return item.name == temp_wanyaoshu.name && (item.type == temp_wanyaoshu.type);
  14. })
  15. //0
  16. list.findIndex((item, index)=>{
  17. return (item.name == "宣威火腿" && (item.type == 4) );
  18. })
  19. //4
  20. list.findIndex((item, index)=>{
  21. return (item.name == "宣威火腿" && (item.type == 41) );
  22. })
  23. //-1
  24. /***find****/
  25. list.find((item, index)=>{
  26. return item.name == temp_wanyaoshu.name && (item.type == temp_wanyaoshu.type);
  27. })
  28. //{number: 0, name: "弯腰树陈酒", type: 9}
  29. list.find((item, index)=>{
  30. return (item.name == "宣威火腿" && (item.type == 4) );
  31. })
  32. //{number: 6, name: "宣威火腿", type: 4}
  33. list.find((item, index)=>{
  34. return (item.name == "宣威火腿" && (item.type == 41) );
  35. })
  36. //undefined
  37. let item_wanyaoshu_index = -1;
  38. // 不包含, 返回 index or -1
  39. item_wanyaoshu_index = list.findIndex((item, index)=>{
  40. return item.name == temp_wanyaoshu.name && (item.type == temp_wanyaoshu.type);
  41. });
  42. if( item_wanyaoshu_index==-1){
  43. list.unshift(temp_wanyaoshu);
  44. }

乐意黎

2020-09-11

发表评论

表情:
评论列表 (有 0 条评论,306人围观)

还没有评论,来说两句吧...

相关阅读