其他分享
首页 > 其他分享> > 原生js处理数组数据小方法

原生js处理数组数据小方法

作者:互联网

<ul id="ul"></ul>
<script>

//假设这是一组数据,要渲染到页面页面
var arr = [{
msg:"nisjsiqi",
img:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"122"

},
{
msg:"2222",
img:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"122"

},
{
msg:"3333",
img:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"122"

},
{
msg:"44444",
img:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"122"

},
{
msg:"666",
img:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"122"
}];


// 渲染以上数据到ul中
render(arr)
function render(arr){
//.map()方法将数据渲染到html的ul中
ul.innerHTML = arr.map(function(item){
console.log(item);

//返回值放到li中,用拼接的方式
return '<li>'+item.msg +' <img src="'+ item.img +'" alt=""> </li>'
// .join 拼接
}).join("")
}
let arr3= [1,2,3,6]
let arr7 = arr3.join("");

//打印arr7
console.log(arr7);
</script>

 

标签:原生,img,app,js,数组,msg,253,img1,138
来源: https://www.cnblogs.com/meirongliu/p/16649765.html