2017-10-19 325 views
0

我从一个包含<A> -tag元素的jQuery包装器开始。我想结果是:Lodash映射到对象数组

[{href: "http://...", text: "The inner text"}, {...}, ...] 

到目前为止,我得到这个:

​​

这样的作品,但它看起来像有一个更好的方式,和内text属性被命名为“的innerText”,而不是“文本”。我确实需要innerText的元素,而不是.text(),因为它不会清理输出(换行符,空格,...)。

回答

1

您可以使用ES6 destructuringassign text to a new variable。现在你可以创建一个新的对象与href,并text变量使用shorthand property names

const links = $('a').toArray(); 
 

 
const result = links.map(({ href, innerText: text }) => ({ href, text })); 
 

 
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://www.google.com">Google</a> 
 
<a href="http://www.facebook.com">Facebook</a> 
 
<a href="http://www.apple.com">Apple</a>

你也可以使用jQuery的'.map()`

const result = $('a').map((k, { href, innerText: text }) => ({ href, text })).toArray(); 
 

 
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://www.google.com">Google</a> 
 
<a href="http://www.facebook.com">Facebook</a> 
 
<a href="http://www.apple.com">Apple</a>

+0

我在使用Babel编译ES6时, d我想这里有个bug,因为它将'map'语句编译为:'return pubs.map(function(_ref){var href = _ref.href,text = _ref.innerText;返回{href:href,text:text}; });''但'_ref'是'map'方法中的索引参数,而不是值。任何想法如何解决? – Koen

+1

第一个参数是Array#map中的值。你在jQuery对象上使用'.toArray()'吗? –

+0

对!我正在使用一个使用大量链接的框架,并且显然在每一步中都会将一组元素重新转换为一个jQuery包装器,所以我的'toArray'调用没有效果。 – Koen