JS的forEach()方法（动态获取数据）

定义和用法

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>

得出的总数依次相加！

JS的forEach()方法 （动态获取数据）

猜你喜欢

JS的forEach()方法（动态获取数据）