each
是对每一个元素都做一件这个事情,这个方法很方便,它可以帮我们做太多有趣的东西,而且它还很乖巧,没有什么索取,安静的做着自己的事情。
不过还是回到最初的问题,现在我有一个元素的合集,就比如是 $('a')
。然后我想获取其中每一个元素的文本内容,因为是多个元素,最终的结果应该是个数组。当然这难不倒我们:
const textArray = [];$('a').each(function(){textArray.push( $(this).text() )})
我们先定义一个数组。然后对于这个合集中的每一个元素,都去获取它的文本内容,然后追加进这个数组。这是一个很基本的操作,但是我们比这个更懒,所以要讲一个完成这个操作方法,map()
。
专门一个方法,当然有懒的原因,但也说明了这个操作可能比较频繁。想想嘛,我们获取了一些元素,总要做些什么,无非就是设置它们的值,或者获取它们的值。那么 map()
就是为了更方便的获取它们的值,或者类似的需求。
如果反过来讲呢?我们没有获取其中值的需求,或者说我们不需要返回一些值,而只是进行一些操作的话,就没有必要使用 map()
,只用 each()
就好。
稍微对它们做了一些区分,我们来看实际的例子,上面的需求就可以被写成:
const textArray = $('a').map(function(){return $(this).text()})
这样写起来就更简单一些了,理解起来也很容易,对于合集中的每一个元素,执行后面的函数,获得一个返回值。将所有的返回值组成一个数组,存入等号左边的变量之中。
所以 map()
后面的函数是必须要有一个返回值的,而 each()
无欲无求,就不需要返回值。
那如果我们不管返回值的问题,用 map()
替代 each()
不也是完全可以的吗?在效果上确实是可以,但是,即便你不使用变量去储存它所生成的数组,这个数组实际还是会被生成的,就浪费资源,进而影响效率。
因为并没有规定返回值必须是怎样的,所以这种方法并不一定只是用来获取元素的某些属性值,还可以开发出更多有趣的玩法。
在 JS 的数组上,也有一个同名的方法,用来实现的效果也是类似的。可以说它们非常非常非常像,名字是一样的,效果也是一样。但是它们不是相同的。
今天我们所讲到的这个方法,是应用在 jQuery 对象上的,是这个对象的一个方法,和其他对象上的同名方法自然不能划等号。而且 jQuery 所获得的元素合集,只是类似于数组,可并不是数组。所以,它上面的方法,只是在模仿数组的方法,方便我们学习和使用。而绝不是把数组的方法直接应用在了它的上面。
暂无评论内容