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

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

时间:2022-09-02 14:34:15浏览次数:81  
标签:原生 img app js 数组 msg 253 img1 138

<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
From: https://www.cnblogs.com/meirongliu/p/16649765.html

相关文章

  • 2022-09-02 vue.js不使用插件,进引入vue,实现js原生复制功能
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • JS实现拖拽效果
    HTML部分<divid="container"><divid="drag">拖拽区域</div></div> CSS部分:#container{width:300px;/*overflow:hidden有......
  • springboot项目使用jsp
    异常问题场景提示:这里简述项目相关背景springboot课堂学习问题详情提示:这里描述项目中遇到的问题jsp无法访问原因分析提示:这里填写问题的分析没有jsp解......
  • js数组方法
    修改器方法会改变自身的值push(element1,...,elementN):在数组的末尾增加一个或多个元素,并返回数组的新长度。pop():删除数组的最后一个元素,并返回这个元素(数组为空......
  • js 实现选择排序及优化
    //选择排序//原理:进行n-1趟循环,每趟循环中遍历所有未排好序的数,第一趟循环,从第0个元素开始向后遍历,找到最小的元素,与第1一个元素进行交换,第二趟,从第1个元素开始......
  • mockjs介绍
    一、为什么使用mockjs在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口,1.我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改......
  • 如何在 JavaScript 中将 JSON 转换为 CSV
    如何在JavaScript中将JSON转换为CSV下面是我们如何在JavaScript中轻松地将JSON转换为CSV:函数jsonToCsv(项目){constheader=Object.keys(items[0]);常......
  • 使用 Rust 开发原生 iOS 游戏
    使用Rust开发原生iOS游戏我记录了使用纯Rust探索跨平台游戏开发的旅程。严重地。我不解决。100%生锈或破产!为什么我选择Rust当谈到性能和模块化设计时,Rust......
  • js获取当前月第一天和最后一天(2022-09-02 00:00:00 - 2022-09-02 23:59:59)
    1.获取当前月第一天//获取当前月第一天exportfunctiongetCurrentMonthFirst(){vardate=newDate();date.setDate(1);returnnewDate(newDate(date).to......
  • 认识Node.js以及相关说明
    首先我们先要认识一下,Node是用JavaScript来编写的。问:JavaScript时怎么组成的?答:JavaScript主要是由两块核心组成,第一个核心是js的核心语法,该语法也被称为ECMAScript,语法......