Question

我正在尝试将以下工作功能转换为箭头功能，但失败了。我不知道我在做什么错。

这是我的开始情况：

let abc = Math.max.apply( null, $( "#wrapper .item" ).map( function () {
    return parseInt( $( this ).prop( "id" ).match( /\d+/g ), 10 );
} ) );

这就是我尝试过的。也许我误会了什么？：

let abc = Math.max.apply( null, $( "#wrapper .item" ).map( item => parseInt( item.prop( "id" ).match( /\d+/g ), 10 ) ) );

给定的错误是：

issue.prop不是函数。

所以我尝试了另一种方法：

let abc = Math.max.apply( null, jQuery( "#wrapper .item" ).map( issue => parseInt( jQuery(issue).prop( "id" ).match( /\d+/g ), 10 ) ) );

这给我这个错误：

无法读取未定义的属性“匹配”

我在这里做错了什么？

Answer 1

jQuery的map()函数将Integer索引和Element domElement分别传递给回调。

$(function() {
    let abc = Math.max.apply(null, $('#wrapper .item').map( (index, item) => parseInt( $(item).prop('id').match( /\d+/g ), 10 ) ) );

    console.log(abc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper">
    <div id="item1" class="item">Item 1</div>
    <div id="item2" class="item">Item 2</div>
    <div id="item3" class="item">Item 3</div>
</div>

Answer 2

jQuery .map()不是Array.prototype.map。 jQuery首先将index，然后是element传递给回调，而Array.prototype.map首先是传递element，然后是index。

也是这样：

let abc = Math.max.apply( null, $("#wrapper .item")
  .map((idx, item) => parseInt($(item).prop('id').match( /\d+/g ), 10)))
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="item" id="item1"></div>
  <div class="item" id="item2"></div>
</div>

（您也将$(item).prop替换为item.prop，这是行不通的）

Answer 3

根据它的外观，似乎您正在尝试寻找给定特定选择器的最大id值（假设它们都是数字）。我将提供本机Javascript和jQuery的示例（以及发生的事情的分解）。

本机Javascript方法（也将适用于jQuery）

// Get your items
let items = [...document.querySelectorAll('#wrapper .item')];

// Parse your ids
let ids = items.map(i => parseInt(i.id.match(/\d+/g), 10));

// Get the max
let max = Math.max.apply(null, ids);

// Output it
console.log(max);

<div id='wrapper'>
  <div id='item-123' class='item'>123</div>
  <div id='item-456' class='item'>456</div>
  <div id='item-789' class='item'>789</div>
  <div id='item-101112' class='item'>101112</div>
  <div id='item-131415' class='item'>131415</div>
</div>

然后，您可以根据需要将所有内容放在一起，尽管有点：

let max = Math.max.apply(null, [...document.querySelectorAll('#wrapper .item')].map(i => parseInt(i.id.match(/\d+/g), 10)));

console.log(max);

<div id='wrapper'>
  <div id='item-123' class='item'>123</div>
  <div id='item-456' class='item'>456</div>
  <div id='item-789' class='item'>789</div>
  <div id='item-101112' class='item'>101112</div>
  <div id='item-131415' class='item'>131415</div>
</div>

jQuery特定方法

如果您是专门使用jQuery并希望尽可能多地利用它，那么您只需要进行一些更改即可：

let max = Math.max.apply(null, [...$('#wrapper .item')].map(i => parseInt($(i).prop('id').match(/\d+/g), 10)));

console.log(max);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='wrapper'>
  <div id='item-123' class='item'>123</div>
  <div id='item-456' class='item'>456</div>
  <div id='item-789' class='item'>789</div>
  <div id='item-101112' class='item'>101112</div>
  <div id='item-131415' class='item'>131415</div>
</div>

仅的区别在于以下语法：

选择-使用jQuery的$(selector)与Javascript的querySelector(selector)
属性访问-使用jQuery的.prop(id)与Javascript的id属性

Answer 4

建议的更改：

您可以使用$( )代替jQuery的document.querySelectorAll选择器
您可以使用.map()及其回调参数

Array.from

请勿在{{1}}正则表达式上使用g，因为您只希望一个匹配项（如果有多个匹配项，则使用.match会得到g ）
您可以在结果中使用一元NaN而不是+。
您可以使用简单的parseInt(***, 10)语法访问id属性。
您可以使用传播语法代替.id。

apply

let abc = Math.max(...Array.from(
    document.querySelectorAll('#wrapper .item'), item => +item.id.match(/\d+/)
));
console.log(abc);

将jQuery映射函数转换为箭头函数

4 个答案:

本机Javascript方法（也将适用于jQuery）

jQuery特定方法