Question

下面的代码有效，但是有一种方法可以缩短结果，即直接从map函数获取结果，避免使用join行，或者可以避免在其中使用arra声明单独一行？

let arra = $('.imga').toArray();

var arrb = arra.map(function(el) {
	return $(el).attr('data-id');
});

let str = arrb.join();

console.log(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

Answer 1

如果要减少行数，请在代码中使用链接：

let str = $('.imga').toArray().map(function(el) {
    return $(el).attr('data-id');
}).join();

Answer 2

在一行代码中尝试以下解决方案

const string = [...document.querySelectorAll('.imga')].map(item => item.dataset.id).join(',');

console.log(string);

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

Answer 3

使用jQuery的map来获取数据属性，然后是get，最后是join，而不是强制转换为数组。因为代码使用回调参数而不是this，所以我们可以使用箭头功能将其全部粘贴在一行上。

const str = $('.imga').map((i, v) => v.dataset.id).get().join();

console.log(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

Answer 4

您可以使用reduce。

let arra = $('.imga').toArray();

var arrb = arra.reduce((op,el, index)=>{
   op += $(el).attr('data-id')
   if(index !== arra.length-1) op += ','
   return op;
},'');

console.log(arrb);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class='imga' src='images/5b0fd05fa00e7.jpg' data-id=442 alt='img'>
<img class='imga' src='images/5b0fd09fa00e7.jpg' data-id=2 alt='img'>
<img class='imga' src='images/5b0fd07fa00e7.jpg' data-id=54 alt='img'>
<img class='imga' src='images/5b0fd03fa00e7.jpg' data-id=45 alt='img'>

Answer 5

也许您应该尝试转义join不必要的部分。像这样

let arra = $('.imga').toArray(), 
    str = '' ;

var arrb = arra.forEach(function(el) {
    str += el.dataset.id;
});

console.log(str);

以较短的方式从数组中获取字符串

5 个答案: