數(shù)組方法
方法列舉
- Foreach
- Filter
- Map
- Every
- Some
- Reduce
- ReduceRight
Foreach 遍歷并執(zhí)行函數(shù)
var personArr = [{name:'張三',sex:'m',age:18},
{name:'李四',sex:'m',age:28},
{name:'王二',sex:'f',age:22},
{name:'麻子',sex:'m',age:16}]
personArr.forEach(function(ele, index,self){
console.log(ele,index,self);
});
- forEach是數(shù)組原型上的方法，他接收兩個(gè)參數(shù)赠尾，第一個(gè)參數(shù)是一個(gè)函數(shù)func烁挟，第二個(gè)參數(shù)用來調(diào)整this指向
- foeEach方法會(huì)遍歷數(shù)組personArr掠河，并循環(huán)執(zhí)行func肥照，每次執(zhí)行都會(huì)將personArr當(dāng)前的元素败富、索引舟山、和自身作為形參傳給函數(shù)func
實(shí)例
var sla = [8000,9000,9822,10002];
personArr.forEach(func,sla);
function func(ele,index,self){
ele.name += '先生';
ele.sla = this[index];
}
console.log(personArr);
運(yùn)行結(jié)果
foreach1.jpg
- 通過forEach方法更改數(shù)組的屬性兔甘，改變this指向之后操作數(shù)據(jù)更加方便
源碼仿寫
Array.prototype.myforEach = function(func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len; i++){
func.apply(_this,[this[i],i,this]);
}
console.log('myforEach');
}
運(yùn)行結(jié)果
foreach2.jpg
Filter 遍歷篩選
用法
var teenager = personArr.filter(func);
function func(ele,index,self){
return ele.age < 18;//篩選出年齡小于18歲的ele
}
console.log('teenager',teenager);
運(yùn)行結(jié)果
filter1.png
- filter方法與foreach方法一樣也接收兩個(gè)參數(shù)谎碍，一個(gè)是函數(shù)func，另一個(gè)用來改變this指向
- filter方法在遍歷數(shù)組的同時(shí)洞焙，每訪問一個(gè)元素ele就執(zhí)行一次函數(shù)func
- filter方法在執(zhí)行func函數(shù)的時(shí)候會(huì)將當(dāng)前的元素ele蟆淀，索引index，數(shù)組本身self【固定順序】作為形參傳給函數(shù)func
- filter方法會(huì)讓函數(shù)func內(nèi)部的this指向第二個(gè)參數(shù)
- func函數(shù)需要返回一個(gè)布爾類型的值
- filter方法會(huì)返回一個(gè)數(shù)組澡匪，數(shù)組里面的內(nèi)容由func的返回值決定熔任，如果func返回TRUE，那么當(dāng)前訪問的元素ele就會(huì)被加入到返回的數(shù)組中
源碼仿寫
Array.prototype.myFilter = function(func){
var _this = arguments[1] || window;
var arr = [];
var len = this.length;
for(var i = 0;i < len; i++){
// if( func.apply(_this,[this[i],i,this]) ){
// arr.push(this[i]);
// }
func.apply(_this,[this[i],i,this]) && arr.push(this[i]);
}
return arr;
}
//調(diào)用myFilter
var teenager1 = personArr.myFilter(func,[]);
console.log('teenager1',teenager1);
myFilter運(yùn)行結(jié)果：
filter2.png
結(jié)果一樣唁情，仿寫成功疑苔！
filter1.png
關(guān)于第二個(gè)參數(shù)改變func內(nèi)部this指向的例子以后再補(bǔ)充
Map 遍歷映射
用法
var newArr = personArr.map(func,sla);
function func(ele,index,self){
ele.age += 10;//給每個(gè)元素的age屬性＋10
ele.sla = this[index];//給每個(gè)元素添加屬性sla，這里this指向傳入的對(duì)象sla
// console.log(ele,index,self,this);
return ele;
}
console.log(newArr);
運(yùn)行結(jié)果
map1.png
- map方法的參數(shù)和前面一樣
- map方法會(huì)返回一個(gè)新數(shù)組荠瘪，數(shù)組里面的元素是函數(shù)func的返回值
- map方法和foreach方法效果差不多夯巷，但是foreach是在原數(shù)組的基礎(chǔ)上操作的，map方法不會(huì)改變?cè)瓟?shù)組
源碼仿寫
Array.prototype.myMap = function(func){
var _this = arguments[1] || window;
var arr = [];
var len = this.length;
for(var i = 0;i < len;i ++){
arr.push( func.apply(_this,[this[i],i,this]) );
return arr;
}
}
//調(diào)用myMap
var newArr1 = personArr.myMap(func,sla);
console.log('newArr1',newArr1);
運(yùn)行結(jié)果
map2.png
從結(jié)果可以看出map方法可以達(dá)到foreach方法一樣的效果哀墓，并且myMap仿寫成功
Every
作用
判斷數(shù)組中的元素是否都符合條件，都符合返回true喷兼，只要有一個(gè)不符合就返回false
- 參數(shù)【同上】
- 返回值 true/false
- func需要有一個(gè)返回值篮绰，在循環(huán)遍歷數(shù)組的同時(shí)執(zhí)行函數(shù)func，只要函數(shù)返回false季惯，就不再遍歷了吠各，并且返回false
用法
function func(ele,index,self){
console.log(ele,index,self);//查看函數(shù)接收到的形參具體是什么
}
//調(diào)用every方法臀突，此時(shí)func沒有返回值
var flag = personArr.every(func);
console.log('flag',flag);
- 當(dāng)函數(shù)沒有設(shè)置返回值時(shí)，會(huì)默認(rèn)返回undefined贾漏，every方法通過隱式類型轉(zhuǎn)換判定為false候学，所以只執(zhí)行一次便結(jié)束（只打印索引為0的元素和數(shù)組自身），返回false
運(yùn)行結(jié)果
every1.jpg
function func(ele,index,self){
return ele.age > 20;//判斷年齡是否大于20纵散，是——返回true梳码，不是返回false
}
//調(diào)用every方法，此時(shí)func有返回值
var flag = personArr.every(func);
console.log('flag',flag);
運(yùn)行結(jié)果
every2.png
源碼仿寫
Array.prototype.myEvery = function(func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len;i ++){
if( func.apply(_this,[this[i],i,this]) == false){
return false;
}
}
return true;
}
var flag1 = personArr.myEvery(func);
console.log('flag1',flag1);
運(yùn)行結(jié)果
every3.png
成功
Some
作用
和every剛好相反伍掀，some是只要有一個(gè)符合要求就返回true掰茶，如果全都不符合要求才返回false
- 參數(shù)【同上】
- 返回值【同上】
用法演示
function func(ele,index,self){
return ele.age < 20;
}
var flag = personArr.some(func);
console.log('flag',flag);
源碼仿寫
Array.prototype.mySome = function (func){
var _this = arguments[1] || window;
var len = this.length;
for(var i = 0;i < len; i ++){
if( func.apply(_this,[this[i],i, this]) ){
return true;
}
}
return false;
}
//調(diào)用mySome方法
var flag1 = personArr.some(func);
console.log('flag1',flag);
運(yùn)行結(jié)果
some.png
可以看到函數(shù)func一樣，但是結(jié)果與every相反
Reduce
作用
傳遞一個(gè)初始值蜜笤，該值將基于數(shù)組的元素進(jìn)行一系列操作
注釋
- 參數(shù)：func和prevValue濒蒋，這里與前面的方法有所不同，reduce方法會(huì)將第二個(gè)參數(shù)作為第一個(gè)參數(shù)傳給func
- reduce方法傳給函數(shù)func的參數(shù)：preValue|icurValue|index|self 總共四個(gè)把兔，第二個(gè)和前面的ele等同
- 函數(shù)func最后也要返回prevValue沪伙，用來進(jìn)行后續(xù)操作
- reduce方法會(huì)返回最終的prevValue
用法
var initName = '';
var nameStr = personArr.reduce(func,initName);
function func(prevValue,icurValue,index,self){
prevValue += icurValue.name;//將所有元素的name值拼接成一個(gè)字符串
return prevValue;
}
console.log('nameStr',nameStr);
源碼仿寫
Array.prototype.myReduce = function(func,initKey){
var len = this.length;
var prevValue = initKey;
for(var i = 0; i < len; i++){
prevValue = func(prevValue,this[i],i,this);
}
return prevValue;
}
//調(diào)用myReduce方法
var nameStr1 = personArr.myReduce(func,initName);
console.log('nameStr1',nameStr1);
運(yùn)行結(jié)果
reduce.png
應(yīng)用
var cookieStr = '_ga=GA1.2.475962636.1637567371; _gid=GA1.2.610551851; UM_distinctid=17d469f16eef0b; locale=zh-CN; read_mode=day; default_font=font2; Hm_lvt_0c0e9d9b1e7d617b3e6842e85b9fb068=1637567371; sensorsdata2015jssdkcross=%7B%22distinct'
function getCookie(cookieStr){
var cookieArr = cookieStr.split('; ');
var cookieObj = {};
return cookieArr.reduce(function(prevValue,icurValue,index,self){
var arr = icurValue.split('=');
prevValue[arr[0]] = arr[1];
return prevValue;
},cookieObj)
}
var cookieObj = getCookie(cookieStr);
console.log(cookieObj);
//使用原生reduce方法實(shí)現(xiàn)
/**********************************************/
//以下調(diào)用自己的方法myReduce實(shí)現(xiàn)
var cookieObj = getCookie(cookieStr);
console.log('原生Reduce',cookieObj);
function getCookie1(cookieStr){
var cookieArr = cookieStr.split('; ');
var cookieObj = {};
//此處使用myReduce
return cookieArr.myReduce(function(prevValue,icurValue,index,self){
var arr = icurValue.split('=');
prevValue[arr[0]] = arr[1];
return prevValue;
},cookieObj)
}
var cookieObj1 = getCookie1(cookieStr);
console.log('myReduce',cookieObj1);
說明
現(xiàn)在有一個(gè)字符串cookieStr，他是由多個(gè)'name=key'以'; '連接起來的县好，現(xiàn)在想要將cookieStr的內(nèi)容轉(zhuǎn)化成一個(gè)對(duì)象焰坪，以方便后續(xù)操作name和key
- 使用myReduce方法的結(jié)果對(duì)比
運(yùn)行結(jié)果
reduce1.png
結(jié)果一樣，說明仿寫成功
通過getCookie函數(shù)獲得cookieObj
通過cookieObj.name可以獲得key值了
如cookieObj.read_mode得到'day'
reduce3.png
