小和尚学习-数组常用API

本来无望的事，大胆尝试，往往能成功。——莎士比亚

目录

一. forEach二. Filter三. Map四. Every五. Some六. Reduce七. ReduceRight

一. forEach

数组遍历

callback：遍历回调事件 element：遍历元素index：遍历元素索引self：遍历数组本身 target：callback里的this指向，默认为window // 数据 var personArr = [ { name: '王刚', src: './src/img/3.png', des: '脊椎不好', sex: 'm' }, { name: '刘颖', src: './src/img/5.png', des: '我是谁', sex: 'f' }, { name: '王莹莹', src: './src/img/4.png', des: '我很好看', sex: 'f' }, { name: '刘洪波', src: './src/img/1.png', des: '你没有见过的人', sex: 'm' }, { name: '刘飞', src: './src/img/2.png', des: '挂壁你', sex: 'm' }, ]; // forEach模拟 Array.prototype.myForEach = function (callback) { var _arr = this; // 指向方法调用者（被遍历的数组） var len = _arr.length; // 数组长度 var param2 = arguments[1] || window; // callback函数里的this for (var i = 0; i < len; i++) { callback.apply(param2, [_arr[i], i, _arr]); } }; // forEach遍历 personArr.myForEach(function (item, index, self) { // 此时的this，为li伪数组 this[index].innerHTML = item.name; }, document.getElementsByTagName('li'));

二. Filter

过滤数组元素，将符合条件的元素组成新数组返回

callback：遍历回调事件 element：遍历元素index：遍历元素索引self：遍历数组本身 target：callback里的this指向，默认为window // filter模拟 Array.prototype.myFilter = function (callback) { var _arr = this; // 指向方法调用者（被遍历的数组） var len = _arr.length; // 数组长度 var param2 = arguments[1] || window; // callback函数里的this var newArr = []; // 存放符合条件的元素 for (var i = 0; i < len; i++) { callback.apply(param2, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : ''; } return newArr; }; // filter过滤 var newArr = personArr.myFilter(function (item, index, self) { // 过滤出性别为女的人 if (item.sex === 'female') { return true; } else { return false; } }); console.log(newArr);

三. Map

映射数组元素，返回元素集中化操作后，组成的新数组

callback：遍历回调事件 element：遍历元素index：遍历元素索引self：遍历数组本身 target：callback里的this指向，默认为window // map模拟 Array.prototype.myMap = function (callback) { var _arr = this; // 指向方法调用者（被遍历的数组） var len = _arr.length; // 数组长度 var param2 = arguments[1] || window; // callback函数里的this var newArr = []; // 存放集中化操作后的元素 for (var i = 0; i < len; i++) { newArr.push(callback.apply(param2, [_arr[i], i, _arr])); } return newArr; }; // map映射 var newArr = personArr.myMap(function (item, index, self) { // 将每个人的名字加上索引值 item.name += index; return item; }); console.log(newArr);

四. Every

当且仅当数组元素全部符合条件，返回true；反之，返回false

callback：遍历回调事件 element：遍历元素index：遍历元素索引self：遍历数组本身 target：callback里的this指向，默认为window // every模拟 Array.prototype.myEvery = function (callback) { var _arr = this; var len = _arr.length; var param2 = arguments[1] || window; var flag = true; for (var i = 0; i < len; i++) { if (!callback.apply(param2, [_arr[i], i, _arr])) { flag = false; break; } } return flag; }; // every var flag = personArr.every(function (item, index, self) { return item.age >= 18; // 判断每个人的年龄是否都大于18 }); console.log(flag);

五. Some

只要数组元素有一个符合条件，返回true；反之，返回false

callback：遍历回调事件 element：遍历元素index：遍历元素索引self：遍历数组本身 target：callback里的this指向，默认为window // some模拟 Array.prototype.mySome = function (callback) { var _arr = this; var len = _arr.length; var param2 = arguments[1] || window; var flag = false; for (var i = 0; i < len; i++) { if (callback.apply(param2, [_arr[i], i, _arr])) { flag = true; break; } } return flag; }; // some var flag = personArr.mySome(function (item, index, self) { return item.age > 17; // 判断每个人的年龄是否都大于17 }); console.log(flag);

六. Reduce

返回数组元素累计

callback：遍历回调事件 prevElement：上一次累计值element：遍历元素index：遍历元素索引self：遍历数组本身 initialValue：累计初始值 // reduce模拟 Array.prototype.myReduce = function (callback, initialValue) { var _arr = this; var len = _arr.length; var parm2 = arguments[2] || window; // 这个是自己加的，真实数组 reduce 没有这个参数 for (var i = 0; i < len; i++) { initialValue = callback.apply(parm2, [initialValue, _arr[i], i, _arr]); } return initialValue; }; // reduce var newValue = [1, 2, 3, 4].myReduce(function (prevElement, currentElement, index, self) { prevElement += currentElement; return prevElement; }, ''); console.log(newValue); // '1234'

七. ReduceRight

返回数组元素累计（从右 $\to$ 左遍历）

callback：遍历回调事件 prevElement：上一次累计值element：遍历元素index：遍历元素索引self：遍历数组本身 initialValue：累计初始值 // reduceRight模拟 Array.prototype.myReduceRight = function (callback, initialValue) { var _arr = this; var len = _arr.length; var param2 = arguments[2] || window; for (var i = len - 1; i >= 0; i--) { initialValue = callback.apply(param2, [initialValue, _arr[i], i, _arr]); } return initialValue; }; // reduceRight var newValue = [1, 2, 3, 4].myReduceRight(function (prevElement, currentElement, index, self) { prevElement += currentElement; return prevElement; }, ''); console.log(newValue); // '4321'

提示：对于[1, 2, 3, ,1]这样数组没有填值的情况，以上所举API会忽略空值处，相当于[1, 2, 3, 1]这种数组调用API