原生JS forEach()和map()遍历的区别以及兼容写法

本文详细比较了JavaScript中的forEach()和map()方法,探讨了它们的共同点和区别,包括参数传递、匿名函数的使用、this指向以及返回值特性。forEach()用于遍历数组,不返回值;而map()在遍历时返回新的数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、原生JS forEach()和map()遍历

共同点:

    1.都是循环遍历数组中的每一项。

    2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

    3.匿名函数中的this都是指Window。

    4.只能遍历数组。

1.forEach()

   没有返回值。

arr[].forEach(function(value,index,array){

  //do something

})

  • 参数:value数组中的当前项, index当前项的索引, array原始数组;
  • 数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
  • 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;

[javascript] view plain copy

 

  1. var ary = [12,23,24,42,1];  
  2. var res = ary.forEach(function (item,index,input) {  
  3.        input[index] = item*10;  
  4. })  
  5. console.log(res);//--> undefined;  
  6. console.log(ary);//--> 通过数组索引改变了原数组;  


2.map() 

有返回值,可以return 出来。

arr[].map(function(value,index,array){

  //do something

  return XXX

})

  • 参数:value数组中的当前项,index当前项的索引,array原始数组;
  • 区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

[javascript] view plain copy

 

  1. var ary = [12,23,24,42,1];  
  2. var res = ary.map(function (item,index,input) {  
  3.     return item*10;  
  4. })  
  5. console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改
  6. console.log(ary);//-->[12,23,24,42,1];  原数组并未发生变化
<think>我们使用原生JavaScript获取指定class元素下的span标签的文本内容 步骤: 1. 首先获取所有具有指定class的元素(可能有多个) 2. 遍历这些元素,然后在每个元素内部查找span元素 3. 获取每个span元素的文本内容 注意:由于同一个class可能有多个元素,每个元素内也可能有多个span,所以我们需要考虑遍历所有的情况。 方法: 使用document.getElementsByClassName(className)获取指定class的元素集合 然后遍历这个集合,对每个元素使用getElementsByTagName('span')获取其内部的span元素集合 再遍历span元素集合,获取每个span的文本内容(textContent或innerText) 但是,如果只需要第一个元素或者特定的一个元素,我们可以根据实际情况调整。 根据用户需求,他想要获取指定class元素下的span标签的文本内容。这里没有指定是第几个元素,也没有指定是第几个span,所以我们可以考虑两种情况: 情况1:获取指定class的第一个元素内的所有span的文本内容 情况2:获取指定class的每一个元素内的所有span的文本内容,并汇总 由于问题没有明确,我们先按照情况1(第一个元素)来写,同时也可以提供情况2的代码。 另外,如果指定class的元素不存在,我们需要处理。 代码示例: 假设class名为"my-class" 情况1:获取第一个具有"my-class"类的元素内所有span的文本内容 情况2:获取所有具有"my-class"类的元素内所有span的文本内容,并放入一个数组 我们分别写两个函数: 函数1:getFirstClassSpanTexts(className) 返回第一个匹配元素内所有span的文本数组 函数2:getAllClassSpanTexts(className) 返回一个二维数组,每个子数组是每个匹配元素内所有span的文本数组 但用户可能只需要文本内容,而不需要区分是哪个元素内的,我们可以将所有的span文本合并成一个数组(扁平化)。 根据引用[1]中,我们可以使用document.getElementsByClassName来获取元素。 注意:getElementsByClassName返回的是HTMLCollection,是动态集合,而getElementsByTagName返回的也是动态集合。 我们使用textContent来获取文本,因为innerText有性能问题且不是标准(但兼容性好),textContent是标准方法。 实现: 情况1:获取第一个匹配元素内所有span的文本 */</think>要使用原生 JavaScript 获取指定 class 元素下的 span 标签文本内容,可以通过以下方法实现: ### 方法 1:获取单个元素内的 span 文本 ```javascript // 获取第一个匹配 .my-class 的元素 const element = document.querySelector('.my-class'); // 获取该元素内的第一个 span 文本 const spanText = element.querySelector('span').textContent; console.log(spanText); // 输出: "示例文本" ``` ### 方法 2:获取所有匹配元素的 span 文本 ```javascript // 获取所有 .my-class 元素 const elements = document.getElementsByClassName('my-class'); // 遍历每个元素获取其内部的 span 文本 const allTexts = []; for (let i = 0; i < elements.length; i++) { const spans = elements[i].getElementsByTagName('span'); for (let j = 0; j < spans.length; j++) { allTexts.push(spans[j].textContent); } } console.log(allTexts); // 输出: ["文本1", "文本2", ...] ``` ### 方法 3:使用 querySelectorAll 精简写法 ```javascript // 直接获取所有 .my-class 内的 span 元素 const spans = document.querySelectorAll('.my-class span'); // 提取文本内容到数组 const texts = Array.from(spans).map(span => span.textContent); console.log(texts); ``` ### 注意事项: 1. 使用 `textContent` 而非 `innerText`: - `textContent` 获取所有文本节点(包括隐藏元素) - `innerText` 只获取可见文本(可能引发重排) 2. 元素不存在时的处理: ```javascript const element = document.querySelector('.my-class'); if (element) { // 安全操作 } ``` 3. 动态元素监听: ```javascript // 当元素动态加载时使用 MutationObserver const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.addedNodes.length) { // 重新获取文本 } }); }); observer.observe(document.body, { childList: true, subtree: true }); ``` ### 示例 HTML 结构 ```html <div class="my-class"> <span>第一段文本</span> </div> <div class="my-class"> <span>第二段文本</span> <span>额外文本</span> </div> ``` > 引用说明:根据 DOM 操作规范,`getElementsByClassName` 返回动态集合,而 `querySelectorAll` 返回静态集合[^1]。建议优先使用 `textContent` 属性获取文本内容,因其性能优于 `innerText` 且符合标准[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值