本文使用到了部分ES6的知识
假设接口如下
const getImoocCourseList = function() {
// ajax
return {
status: true,
msg: '获取成功',
data: [{
id: 1,
title: 'Vue 入门',
date: 'xxxx-01-09'
}, {
id: 2,
title: 'ES6 入门',
date: 'xxxx-01-10'
}, {
id: 3,
title: 'React入门',
date: 'xxxx-01-11'
}]
}
};
1.首先通过ES6中的解构赋值从中提取数据，使用的ES6的好处在于ES6对象的解构赋值是不需要按顺序对应的，变量必须与属性同名，就能取到正确的值。
const { data: listData, status, msg } = getImoocCourseList();
为此引用下阮一峰大神的ES6入门中的介绍
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
2.通过push方法插入数据进行展示，使用ES6模板字符串能够不再使用字符串连接的形式，有效避免使用连接时出现的问题。在
function foo(val) {
return val.replace('xxxx', 'xoxo');
}if (status) {
let arr = [];listData.forEach(function({ date, title }) {
// arr.push(
// '<li>\
// <span>' + title + '</span>' +
// '<span>' + date + '</span>' +
// '</li>'
// );//注意push方法中出入代码端的方式用到了ES6中的模板字符串
arr.push(
`
<li>
<span>${ `课程名: ${ title }` }</span>
<span>${ foo(date) }</span>
</li>
`
);});
let ul = document.createElement('ul');
ul.innerHTML = arr.join('');document.body.appendChild(ul);
} else {
alert(msg);
}
下面是HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
个人在学习ES6，如果有什么需要订正的地方欢迎大家留言。祝大家新年快乐，工作顺利。
