定义和用法
forEach( )方法用于调用数组的每个元素,并将元素传递给回调函数
注意:forEach( )对于空数组是不会执行回调函数。
语法:
array.forEach(function(currentValue, index, arr), thisValue)
其中function(currentValue, index, arr),中
参数(currentValue, index, arr)参数是必选的,数组中每个元素需要调用的函数,
thisValue可选,传递给函数的值一般用 " this " 值,如果这个参数为空, " undefined " 会传递给 “ this " 值。
实例:
html代码
<ul> </ul>
js代码:
var infoList=[
{name:'one'},
{name:'two'},
{name:'throw'},
{name:'fore'},
{name:'five'}
]
var ul=document.querySelector('ul');
var st='';
infoList.forEach(function(item){
// infoList 内有多少个对象, 执行多少回
// 有多少对象就需要多少个 ul 标签
str +='<ul>'
for(var key in item){
// 对象内有多少个成员, 执行多少回
// 有多少成员, 就需要多少个 li 标签
console.log(item)
st +='<li>' +item[key]+'</li>'+'<br>'
}
st +='</ul>'
})
ul.innerHTML=st
控制台输出:
扫描二维码关注公众号,回复:
14744084 查看本文章
{name: 'one'}
{name: 'two'}
{name: 'throw'}
{name: 'fore'}
{name: 'five'}
页面显示:
这是一个动态渲染ul li 数据的实例.
官网还有几个 实例:
将数组中的所有值乘以特定数字
<p>乘以: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p>计算后的值: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function myFunction(item,index,arr) {
arr[index] = item * document.getElementById("multiplyWith").value;
demo.innerHTML = numbers;
}
</script>
计算数组所有元素相加的总和
<button onclick="numbers.forEach(myFunction)">点我</button>
<p>数组元素总和:<span id="demo"></span></p>
<script>
var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) {
sum += item;
demo.innerHTML = sum;
}
</script>
得出的总数依次相加!