知识点：
forEach、filter、map、every、some的语法相同：arr.forEachfunction (elem, index, array) {}, thisArg);
reduce、reduceRight的语法相同：arr.reduce(function (prev, elem, index, array) {}, initialValue);
reduce、reduceRight不能改变this指向；
reduce跟reduceRight的区别：reduceRight遍历出来的数据是倒序的；
一、every()
- 如果有一个不满足条件就停止遍历，条件就是return后面的表达式；
- 返回一个boolean值
1.1 页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>forEach、filter、map使用与重写</title>
</head>
<body>
<div id="data" class="data" style="display: none">
[
{"id":"1","course":"前端开发1","is_free":"1"},
{"id":"2","course":"前端开发2","is_free":"0"},
{"id":"3","course":"前端开发3","is_free":"1"}
]
</div>
</body>
</html>
1.2 every()的用法：课程为免费时，停止遍历
<script type="text/javascript">
var data = JSON.parse(document.getElementById('data').innerHTML);
var res = data.every(function (elem, index, array) {
console.log(elem);
return elem.is_free == '0';
}, {name: 'test' })
console.log(res);
</script>
1.3 在原型上重写every()
Array.prototype.JEvery = function (fn) {
var arr = this,
arrLen = arr.length,
arg2 = arguments[1] || window,
res = true;
for (var i = 0; i < arrLen; i++) {
if (!fn.apply(arg2, [arr[i], i, arr])) {
res = false;
break;
}
}
return res;
}
1.4 调用在原型上重写的every()
var res = data.JEvery(function (elem, index, array) {
console.log(elem);
return elem.is_free === '0';
})
console.log(res);
二、some()
- 有一个满足条件就停止遍历，条件就是return后面的表达式；
- 返回一个boolean值
2.1 some()的用法：课程为免费时，停止遍历
var res = data.some(function (elem, index, array) {
console.log(elem);
return elem.is_free === '0';
}, null)
console.log(res);
2.2 在原型上重写some()
Array.prototype.JSome = function (fn) {
var arr = this,
arrLen = arr.length,
arg2 = arguments[0] || window,
res = false;
for (var i = 0; i < arrLen; i++) {
if (fn.apply(arg2, [arr[1], i, arr])) {
res = true;
break;
}
}
return res;
}
2.3 调用在原型上重写的every()
var res = data.JSome(function (elem, index, array) {
console.log(elem);
return elem.is_free === '0';
})
console.log(res);
三、reduce()
3.1 reduce()的用法：找出免费课程
/**
* reduce 归纳函数
* reduce跟reduceRight的区别：reduceRight遍历出来的数据是倒序的
* data.reduce(function(){})的本质是遍历，每一次遍历都会执行回调函数(function(){})，
* 每一次执行回调函数，prev里面有值，每一次都可以对prev的值进行操作；
* prev一开始是没有值的，它的值等于它的第二个参数；
* 它的第二个参数是对象、数组...，prev就是个对象、数组...，
* prev的初始值===intialValue的值；
*/
var initialValue = [];
var newArr = data.reduce(function (prev, elem, index, array) {
if (elem.is_free === '1') {
prev.push(elem);
}
return prev; //如果不return；只有第一次遍历的时候有值，其他时候为undefined
}, initialValue) //initialValue:变量，可以在外面声明； prev的初始值 = initialValue
console.log('newArr', newArr);
3.2 在原型上重写reduce()
//新增改变this指向功能（原生的reduce方法不能更改this指向）
Array.prototype.JReduce = function (fn, initialValue) {
var arr = this,
arrLen = arr.length,
arg2 = arguments[2] || window,
item;
for (var i = 0; i < arr.length; i++) {
initialValue = fn.apply(arg2, [initialValue, arr[i], i, arr]);
}
return initialValue;
}
3.3 调用在原型上重写的reduce()
var newArr = data.JReduce(function (prev, elem, index, array) {
console.log(this); //{name: "test"}
if (elem.is_free === '1') {
prev.push(elem);
}
return prev;
}, [], {
name: 'test'
})
console.log('newArr-JReduce', newArr)
四、reduceRight()
4.1 在原型上重写reduceRight()
Array.prototype.JReduceRight = function (fn, initialValue) {
var arr = this,
arrLen = arr.length,
arg2 = arguments[2] || window,
item;
//reduceRight遍历出来的数据是倒序的；所以从arrLen-1项开始遍历
for (var i = arrLen - 1; i >= 0; i--) {
item = arr[i];
initialValue = fn.apply(arg2, [initialValue, item, i, arr]);
}
return initialValue;
}
4.2 调用在原型上重写的reduceRight()
var newArr = data.JReduceRight(function (prev, elem, index, array) {
console.log(this);
if (elem.is_free === '1') {
prev.push(elem);
}
return prev;
}, [], {
name: 'test'
})
console.log('newArr-JReduceRight', newArr)
五、案例
5.1 将字符串从'='拆分，组合成对象形式
var cookieData = "BSHGA=JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9;TTO=1285;OT_B=44555DESHFDK";
var cookieArr = cookieData.split(';');
console.log(cookieArr);
var obj = cookieArr.reduce(function (prev, elem) {
var item = elem.split('=');
prev[item[0]] = item[1];
return prev
}, {})
console.log(obj)
