ES6_Demo，模拟后台json数据展示

最新推荐文章于 2025-09-10 20:18:23 发布

weixin_30876945

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/Sky-Ice/p/9001223.html

本文介绍了一个使用ES6特性（如箭头函数、字符串模板）来模拟后台数据加载的小Demo。通过按钮点击事件，可以实现一次性加载全部数据或逐条加载数据。

最近在学习ES6，下面，模拟后台传过来json数据，并在页面展示的一个小Demo。

页面简单的不可描述，只有一个button按钮

<button>点击获取json数据</button>

　通过点击按钮，触发点击事件获取数据。

let btn = document.querySelectorAll('button')[0];

　获取按钮button

   let info = [{
        title: "aaa",
        read: 100,
        hot: true
    }, {
        title: "bbb",
        read: 222,
        hot: true
    }, {
        title: "ccc",
        read: 333,
        hot: false
    }, {
        title: "ddd",
        read: 555,
        hot: true
    },]

　模拟后台数据

 let newArr = info.map((item, index, arr) => {
        let json = {};
        json.t = item.title;
        json.r = item.read;
        json.h = item.hot;
        return json;
    })

　通过map，遍历json数据，并返回，将返回值赋给变量newArr

　第一种，整体展示，即，点击一次按钮，显示所有数据

 btn.onclick = function () {
     newArr.forEach((val, index, arr) => {
        let ul = document.createElement("ul");
        document.body.insertBefore(ul, btn);
        let lis = `<li>${val.t}</li><li>${val.r}</li> <li>${val.h}</li>`
        ul.innerHTML = lis;
    })
}

　这里，采用了ES6新增的箭头函数，以及，字符串模板，使用foreach遍历循环整个数据，结果为一个点击一次按钮，展示所有数据。

第二种，点击一次获取一条数据

 let num = -1;
    btn.onclick = function () {
        num++;
        let ul = document.createElement("ul");
        for (let i = 0; i < newArr.length; i++) {
            if (num < newArr.length) {
                document.body.insertBefore(ul, btn);
                let lis = `<li>${newArr[num].t}</li><li>${newArr[num].r}</li> <li>${newArr[num].h}</li>`
                ul.innerHTML = lis;
            }
        }
    }

　定义了一个num变量，用来表示数据序号，同时，判断是否超出数据数量，如果没有，则添加数据。

　好了，一个小Demo就此完成。继续学习去了~

转载于:https://www.cnblogs.com/Sky-Ice/p/9001223.html