HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="data" style="display: none;">[{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]</div></body></html>
every
1.如果有一个不满足条件就停止遍历、条件就是return后面表达式
2.返回一个值bool
var data = [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}
]
var res = data.every(function (elem, index, array) {
console.log(elem);
return elem.is_free == '0';
});
console.log(res);
some
1.如果有一个满足条件就停止遍历、条件就是return后面表达式
2.返回一个值bool
var data = [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}
];
var res = data.some(function (elem, index, array) {
console.log(elem);
return elem.is_free == '0';
});
reduce
reduce()方法和reduceRight()方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce()是从左到右处理（从第一个成员到最后一个成员），reduceRight()则是从右到左（从最后一个成员到第一个成员），其他完全一样。
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
上面代码中，reduce()方法用来求出数组所有成员的和。reduce()的参数是一个函数，数组每个成员都会依次执行这个函数。如果数组有 n 个成员，这个参数函数就会执行 n - 1 次。
- 第一次执行：
a是数组的第一个成员1，b是数组的第二个成员2。 - 第二次执行：
a为上一轮的返回值3，b为第三个成员3。 - 第三次执行：
a为上一轮的返回值6，b为第四个成员4。 - 第四次执行：
a为上一轮返回值10，b为第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。
reduce()方法和reduceRight()方法的第一个参数都是一个函数。该函数接受以下四个参数。
- 累积变量。第一次执行时，默认为数组的第一个成员；以后每次执行时，都是上一轮的返回值。
- 当前变量。第一次执行时，默认为数组的第二个成员；以后每次执行时，都是下一个成员。
- 当前位置。一个整数，表示第二个参数（当前变量）的位置，默认为
1。 - 原数组。
这四个参数之中，只有前两个是必须的，后两个则是可选的。
[1, 2, 3, 4, 5].reduce(function (
a, // 累积变量，必须
b, // 当前变量，必须
i, // 当前位置，可选
arr // 原数组，可选
) {
// ... ...
如果要对累积变量指定初值，可以把它放在reduce()方法和reduceRight()方法的第二个参数。
[1, 2, 3, 4, 5].reduce(function (a, b) {
return a + b;
}, 10);
// 25
上面代码指定参数a的初值为10，所以数组从10开始累加，最终结果为25。注意，这时b是从数组的第一个成员开始遍历，参数函数会执行5次。
建议总是加上第二个参数，这样比较符合直觉，每个数组成员都会依次执行reduce()方法的参数函数。另外，第二个参数可以防止空数组报错。
function add(prev, cur) {
return prev + cur;
}
[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1
上面代码中，由于空数组取不到累积变量的初始值，reduce()方法会报错。这时，加上第二个参数，就能保证总是会返回一个值。
下面是一个reduceRight()方法的例子。
function subtract(prev, cur) {
return prev - cur;
}
[3, 2, 1].reduce(subtract) // 0
[3, 2, 1].reduceRight(subtract) // -4
上面代码中，reduce()方法相当于3减去2再减去1，reduceRight方法相当于1减去2再减去3。
由于这两个方法会遍历数组，所以实际上可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。
function findLongest(entries) {
return entries.reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, '');
}
findLongest(['aaa', 'bb', 'c']) // "aaa"
上面代码中，reduce()的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。
reduce
归纳函数
prev 等于 initialValue
查找所有免费课程
var initialValue = [];
var data = [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}
];
var nArr = data.reduce(function (prev, elem, index, array) {
if (elem.is_free === '1') {
prev.push(elem);
}
return prev;
}, initialValue);
console.log(nArr);
cookie字符串转对象
var cookieData =BIDUPSID=1EBD3FDD1C3B5AAC7C92B36F03110EC4; PSTM=1603192695; BDUSS=mpsS3lZTUN4VVlCSmNvS2VNY3g3cXB1WFhDc3lNUHM3a21RY21NcXJBRTlZYzlmSVFBQUFBJCQAAAAAAAAAAAEAAADGnXcb2LzH6dLUus7Z4gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD3Up1891Kdfb; BDUSS_BFESS=mpsS3lZTUN4VVlCSmNvS2VNY3g3cXB1WFhDc3lNUHM3a21RY21NcXJBRTlZYzlmSVFBQUFBJCQAAAAAAAAAAAEAAADGnXcb2LzH6dLUus7Z4gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD3Up1891Kdfb; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598;
var cookieArr = cookieData.split('; ');
console.log(cookieArr);
var cookieObj = cookieArr.reduce(function (prev,elem) {
var item = elem.split('=');
console.log(item);
prev[item[0]]=item[1];
return prev;
},{});
console.log(cookieObj);
重写reduce
Array.prototype.myReduce = function (fn, initialValue) {
var arr = this,
len = arr.length,
// this指向：arguments[形参个数+1];
arg2 = arguments[2] || window;
for (var i = 0; i < len; i++) {
initialValue = fn.apply(arg2, [initialValue, arr[i], i, arr]);
}
return initialValue;
}
reduceRight
倒序归纳
var data = [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}
]
var initialValue = [];
var nArr = data.reduceRight(function (prev, elem, index, array) {
prev.push(elem.course);
return prev;
}, initialValue);
console.log(nArr);
重写reduceRight
Array.prototype.myReduceRight = function (fn, initialValue) {
var arr = this,
len = arr.length,
// this指向：arguments[形参个数+1];
arg2 = arguments[2] || window;
for (var i = len-1; i >= 0; i--) {
initialValue = fn.apply(arg2, [initialValue, arr[i], i, arr]);
}
return initialValue;
}
实战课程搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<input type="text" id="J_searchInput" placeholder="搜索课程" />
<ul class="J_list">
<span>- 暂无数据 -</span>
</ul>
<body>
<div id="J_data" style="display: none;">
[{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
{"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
{"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
{"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
{"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]
</div>
<script type="text/html" id="J_itemTpl">
<li>{{course}}</li>
</script>
</body>
<script type="text/javascript">
; (function (document) {
var data = JSON.parse(document.getElementById('J_data').innerHTML),
oSearchInput = document.getElementById('J_searchInput'),
oList = document.getElementsByClassName('J_list')[0],
tpl = document.getElementById('J_itemTpl').innerHTML;
var init = function () {
bindEvent()
}
function bindEvent() {
oSearchInput.addEventListener('input', searchCourse, false);
}
function searchCourse() {
var val = this.value,
len = val.length;
if (len > 0) {
// 如果输入的数据找得到 则渲染模板
if (searchData(data, val).length > 0) {
oList.innerHTML = renderList(searchData(data, val));
// 如果输入的数据找不到 则提示没有数据
} else {
oList.innerHTML = '<span>- 暂无数据 -</span>';
}
// 如果没输入数据或者 清空了输入框
} else {
oList.innerHTML = '<span>- 暂无数据 -</span>';
}
}
// 查找数据
function searchData(data, keyword) {
var dataList = data.reduce(function (prev, elem) {
// **
var res = elem.course.indexOf(keyword);
if (res !== -1) {
prev.push(elem);
}
return prev;
}, []);
return dataList;
}
// 渲染模板
function renderList(data) {
var list = '';
data.forEach(function (elem) {
list += tpl.replace(/{{(.*?)}}/g, function (node, key) {
return {
course: elem.course
}[key];
});
});
return list;
}
init();
})(document);
</script>
</html>
重点应用
reduce归纳函数
// 查找数据
function searchData(data, keyword) {
var dataList = data.reduce(function (prev, elem) {
// **
var res = elem.course.indexOf(keyword);
if (res !== -1) {
prev.push(elem);
}
return prev;
}, []);
return dataList;
}
若有收获，就点个赞吧
0 人点赞
