## 大前端基礎(chǔ)之JS數(shù)組API及方法重構(gòu)沥曹;
**一髓帽、在JS中什么叫數(shù)組:**
? ? ? 數(shù)組是值的有序集合奄薇,每個值叫做一個**元素**驳阎,而每個元素在數(shù)組中有一個位置,以數(shù)字表示馁蒂,稱為**索引**呵晚,從0開始。js的數(shù)組是無類型的沫屡,數(shù)組元素可以是任意類型饵隙,同一個數(shù)組中的不同元素可能是對象或數(shù)組。數(shù)組元素的索引不一定要連續(xù)沮脖,元素之間可以有空隙金矛,叫做稀疏數(shù)組 。每個數(shù)組都具有一個**length屬性**勺届。針對非稀疏數(shù)組驶俊,length屬性就是數(shù)組元素的個數(shù),針對稀疏數(shù)組免姿,元素的length屬性比所有元素的索引要大废睦。
**二、數(shù)組的構(gòu)建方式**
1)养泡、字面量的創(chuàng)建嗜湃;var arr=[ ];
2)、構(gòu)造函數(shù)創(chuàng)建澜掩;var arr=new? Array();
如果通過這個方式創(chuàng)建函數(shù)购披,參數(shù)僅有一個時,且這個參數(shù)是正整數(shù)的時候肩榕,不能是負(fù)數(shù)或者小數(shù)刚陡,則表示創(chuàng)建一個具備該正整數(shù)長度的數(shù)組,里面有這個長度若干個空元素株汉,如果不是數(shù)值筐乳,這個數(shù)據(jù)就會作為該數(shù)組的第零個元素,長度為1
**三乔妈、JS數(shù)組的特點(diǎn)蝙云;**
1)arr.length? 數(shù)組的長度,元素的個數(shù)路召,長度可被修改勃刨,最大下標(biāo)為長度減1波材,僅記錄下標(biāo)的個數(shù),不包含屬性的數(shù)量
2)arr[arr.length]=20身隐,在數(shù)組最尾部添加一個元素
3)在對象中屬性名填入任何內(nèi)容都會隱式轉(zhuǎn)換成字符廷区,在數(shù)組中所有的下標(biāo)都會隱式轉(zhuǎn)換成number(NaN),不能轉(zhuǎn)換的就會默認(rèn)添加為數(shù)組的屬性名
4)數(shù)組不可以用點(diǎn)語法獲取下標(biāo)變量贾铝,但是可以用點(diǎn)語法獲取屬性
**四:數(shù)組的API隙轻;總的來說數(shù)組的API有以下幾個,那下面小編就介紹幾種在JS中經(jīng)常用到的API和數(shù)組方法重構(gòu)(其中arr參數(shù)表示為數(shù)組垢揩,item參數(shù)表示為元素玖绿,index為索引);
push()+pop(), shift()+unshift(), forEach(), map(), some(), every(), filter(), reduce()+reduceRight(), indexOf()+lastIndexOf(),join(), sort(), slice(), splice(), concat(), reverse(), Array.form(), Array.of(), find()+findIndex(), entries()+keys()+values(), includes()**
**四.1水孩;push镰矿,unshift琐驴,pop俘种,shift**
1)push;在數(shù)組尾部添加一個或者多個元素绝淡,并且返回新數(shù)組的長度
重構(gòu)push宙刘;(暫時增加一個元素)
function? pushs(arr,item){
? ? arr[arr.length]=item;//直接將元素添加在數(shù)組的最后
? ? return arr.length;//返回新數(shù)組的長度
}
2)unshift:在數(shù)組的頭部增加一個或者多個元素,并且返回新數(shù)組的長度
重構(gòu)unshiet牢酵;(暫時只添加一個)
function? unshift(arr,item){
? ? for(i=0;i<arr.length;i++){
? ? ? ? arr[i+1]=arr[i];//將數(shù)組元素往后移
? ? }
? ? arr[0=item]
? ? return arr.length//返回新數(shù)組的長度
}
3)pop;? 刪除數(shù)組最后一個元素悬包,并且返回被刪除的數(shù)值
重構(gòu)pop;
function pops(arr,item){
? ? item=arr[arr.length-1];//將數(shù)組最后一個元素保存
? ? arr.length--
? ? return item//返回被刪除的元素
}
4)shift; 刪除頭部第一個元素馍乙,并且返回被刪除的元素
重構(gòu)shift布近;
function shift(arr,item){
? ? item=arr[arr.length-1]//保存數(shù)組第一個元素
? ? for(i=0;i<arr.length,i++);
? ? arr[i]=arr[i+1];//將數(shù)組元素都往前移一位
? ? return item;//返回被刪除的長度
}
eg:
var arr=[1,2,3,4,5];
? ? ? ? var arr1=arr.push("s",6);
? ? ? ? var arr2=arr.unshift("a",10);
? ? ? ? var arr3=arr.pop();
? ? ? ? var arr4=arr.shift();
? ? ? ? console.log(arr1,arr2,arr3,arr4);//7 9? 6 "a"http://在這里,arr1和arr2返回新數(shù)組的長度丝格,arr3和arr4返回被刪除的元素
**四.2撑瞧;concat和join? 數(shù)組的合并**
1)concat。返回一個新數(shù)組显蝌,原來的數(shù)組不變化
var arr=arr1.concat(arr2,0,["a","b"],-1);
如果直接使用预伺,相當(dāng)于復(fù)制 arr1=arr.concat;
重構(gòu)concat;
function concats(arr,arr1,arr2,item){
? ? arr=[];//為返回新數(shù)組做準(zhǔn)備
? ? for(i=0;i<arr1.length;i++){
? ? ? ? arr[i]=arr1[i];
? ? }
? ? for(j=0;j<arr2.length;j++){
? ? ? ? arr[arr1.length+j]=arr2[j];
? ? }//遍歷數(shù)組arr1和arr2.
? ? arr[arr1.length+arr2.length]=item;//在已經(jīng)將數(shù)組添加形成的arr數(shù)組曼尊,在其后面再拼接元素
? ? return arr;//返回拼接形成的新數(shù)組
}
2)join;返回指定的字符連接形成的新字符串酬诀;
如;arr=[1,2,3,4,5]
var str=arr.join("|"),默認(rèn)為逗號? 1|2|3|4|5骆撇;
重構(gòu)join;
function joins(arr,item){
? ? str="";//為返回新字符串做準(zhǔn)備
? ? if(item===undefined) item=","http://用戶未加item時瞒御,默認(rèn)為逗號
? ? for(i=0;i<arr.length;i++){
? ? ? ? if(arr[i]===arr[arr.length-1]){
? ? ? ? ? ? str+=toString(arr[i]);//將數(shù)組最后一個元素的連接符號去掉
? ? ? ? }else{
? ? ? ? ? ? str+=toString(arr[i])+"item"'//將數(shù)組元素轉(zhuǎn)化為字符串
? ? ? ? }
? ? }
? ? return str;//返回新字符串
}
**四.3 splice;插入,刪除神郊,替換葵腹,返回被刪除的元素組成的新數(shù)組高每;**
arr.splice(從什么位置開始 可為負(fù)值表示由后向前,刪除幾個践宴,替換的元素(一個或者多個))
重構(gòu)splice方法
? ? ? //arr 為數(shù)組參數(shù)鲸匿,index為索引(可以為負(fù)),arrNum為要刪除的元素個數(shù)阻肩,后面可以跟需要添加的新元素带欢。
? ? ? function splices(arr, index, arrNum) {
? ? ? ? //獲取需要添加的元素個數(shù)(如果有的話)
? ? ? ? var arrArgumentsNum = arguments.length - 3;
? ? ? ? //設(shè)置delArr,用于以數(shù)組形式返回被刪除的元素
? ? ? ? var delArr = [];
? ? ? ? //簡單的判斷烤惊,防止函數(shù)調(diào)用失敗
? ? ? ? if (arr.length <= index) return 0;
? ? ? ? if (arrNum < 0) return 0;
? ? ? ? if (~index+ 1 > arr.length) return 0;
? ? ? ? //如果索引為負(fù)乔煞,在這里轉(zhuǎn)為正(從后往前)
? ? ? ? if (index< 0) {
? ? ? ? ? index= index+ arr.length;
? ? ? ? }
? ? ? ? //for循環(huán)遍歷刪除元素,后面的元素前移
? ? ? ? for (i = 0; i < arr.length - index; i++) {
? ? ? ? ? if (i < arrNum) delArr[i] = arr[index+ i];
? ? ? ? ? arr[index+ i] = arr[index+ arrNum + i];
? ? ? ? }
? ? ? ? //刪除多余元素
? ? ? ? arr.length -= arrNum;
? ? ? ? //如果需要插入元素柒室,則進(jìn)行下面操作
? ? ? ? if (arguments[3]) {
? ? ? ? ? arr.length += arrArgumentsNum;
? ? ? ? ? //循環(huán)讓元素后移
? ? ? ? ? for (i = 0; i < arrArgumentsNum; i++) {
? ? ? ? ? ? arr[arr.length - i - 1] = arr[arr.length - arrArgumentsNum - i - 1];
? ? ? ? ? }
? ? ? ? ? //添加對應(yīng)元素
? ? ? ? ? for (i = 0; i < arrArgumentsNum; i++) {
? ? ? ? ? ? arr[index+ i] = arguments[i + 3];
? ? ? ? ? }
? ? ? ? }
? ? ? ? return delArr;
? ? ? }
利用splice去重
Array.prototype.distinct=function(){
? ? for(var i=0;i<this.length;i++) {
? ? ? ? if(this.indexOf(this[i])!=i){
? ? ? ? ? ? this.splice(i,1);
? ? ? ? ? ? i--;
? ? ? ? }
? ? }
? ? return this;
}
var arr=[1,1,2,3,4,5,6,2,3,4,5,6,7,1,2,3,4,5,6]渡贾;
arr.distinct();//arr=[1, 2, 3, 4, 5, 6, 7]
**四.4? slice雄右;按指定位置截取復(fù)制內(nèi)容空骚,只能從前向后截取,第二個參數(shù)可以不寫擂仍,默認(rèn)到尾部囤屹;包括開始的位置,不包括結(jié)束的位置**
arr.slice(從第幾位開始(可以為負(fù)數(shù)逢渔,但是必須大于后面)肋坚,到第幾位結(jié)束)
重構(gòu)slice
function slice1(array,start,end){
? ? ? ? ? ? var arr1=[];
? ? ? ? ? ? if(!array || !Array.isArray(array)) return arr1;
? ? ? ? ? ? if(end===undefined)? ? end=array.length;
? ? ? ? ? ? if(start =.= undefined)? start=0;//防止用戶都沒有填,返回默認(rèn)值
? ? ? ? ? ? start=Number(start);
? ? ? ? ? ? end=Number(end);
? ? ? ? ? ? if(isNaN(start))? start=0;
? ? ? ? ? ? if(isNaN(end))? ? end=array.length;
? ? ? ? ? ? if(start<0)? ? ? start=array.length+start;
? ? ? ? ? ? if(end<0)? ? ? end=array.length+end;//當(dāng)為負(fù)值時肃廓,從數(shù)組后面開始算
? ? ? ? ? ? for(var i=start;i<end;i++){
? ? ? ? ? ? ? ? arr1.push(array[i]);//將選中的元素添加到新數(shù)組里
? ? ? ? ? ? }
? ? ? ? ? ? return arr1;? //返回新數(shù)組
? ? ? ? }
slice的應(yīng)用? 復(fù)制
var arr=[1,2,3];
var copies = arr.slice(0);
arr.length=0;//arr數(shù)組刪除所有元素
console.log(copies);
console.log(arr);
**四.5 indexOf和lastindexOf智厌;查找
find 返回?cái)?shù)組中第一個符合條件的元素,findIndex返回索引(兩中比較少用)**
1)indexOf(查詢元素盲赊,從什么位置開始)铣鹏,如果查到,返回該元素的下標(biāo)角钩。并且不會在繼續(xù)查找吝沫。如果沒有查到,則返回-1
當(dāng)查詢中有數(shù)組或者對象的時候递礼,因?yàn)橐玫刂凡煌蚁铡K詿o法查到
2)lastindexOf,和indexOf一樣,只不過是從數(shù)組后面開始查找
**四.6? Array.from? 將類數(shù)組轉(zhuǎn)換成數(shù)組脊髓,擁有數(shù)組的方法
Array.of? 把參數(shù)合并成一個數(shù)組返回辫愉,如果參數(shù)為空,則返回一個空數(shù)組**
ES6中将硝;arr=Array.from(類數(shù)組)恭朗;
ES5中屏镊;arr=Array.prototepy.slice.call(類數(shù)組)
**四.7數(shù)組的遍歷;**
forEach和map痰腮,for循環(huán)而芥,for in
1)forEach? 遍歷數(shù)組,沒有返回值
arr.forEach(function(item,index,arr){});
重構(gòu)forEach
function forEach1(array,fn){
if(!array || !Array.isArray(array)) console.error("forEach1 is not function");
for(var i=0;i<array.length;i++){
fn(array[i],i,array)};
// 遍歷傳入的數(shù)組膀值,把數(shù)組的元素棍丐、下標(biāo)、數(shù)組傳入回調(diào)函數(shù) } //不返回任何東西 }
2)map 遍歷數(shù)組沧踏,返回和原數(shù)組長度相同的新數(shù)組歌逢,如果沒有定義,直接為返回元素為undefined
arr.map(function(item,index,arr){});
map的重組
function map1(array,fn){
? ? ? ? ? ? if(!array || !Array.isArray(array))? console.error("forEach1 is not? function");
? ? ? ? ? ? var arr1=[];
? ? ? ? ? ? for(var i=0;i<array.length;i++){
? ? ? ? ? ? ? ? if(array[i]===undefined)? continue;? //遍歷過程中遇到undefined,跳出去這一次循環(huán)翘狱,后面繼續(xù)秘案,所以用continue;
? ? ? ? ? ? ? ? arr1[i]=fn(array[i],i,array);//新數(shù)組的元素是回調(diào)函數(shù)中返回的結(jié)果? ? ? ? ? ? }
? ? ? ? ? ? for(var j=0;j<arr1.length;j++){
? ? ? ? ? ? ? ? return? arr1[j]===undefined? undefined : arr1;?
? ? ? ? ? ? }? //如果新數(shù)組元素之undefined,返回undefined,如果不是,返回新數(shù)組? ? ? ? ? }
3)for in 遍歷數(shù)組潦匈,index為下標(biāo)阱高,arr[index]為屬性值? for(index in arr){}
以上方法會跳過空元素;
4) for循環(huán)? for(i=0;i<arr.length;i++){}
**四.8排序历等;(空間復(fù)雜度和事件復(fù)雜度)? sort
在排序時讨惩,sort()方法會調(diào)用每個數(shù)組項(xiàng)的 toString()轉(zhuǎn)型方法辟癌,然后比較得到的字符串寒屯,以確定如何排序。即使數(shù)組中的每一項(xiàng)都是數(shù)值黍少, sort()方法比較的也是字符串**
1)冒泡排序寡夹;
function sorts(arr,item){
? ? for(i=0;i<arr.length-1;i++){
? ? ? ? for(j=0;j<arr.length-1-i;j++){
? ? ? ? if(arr[j]>arr[j+1]){
? ? ? ? ? ? item=arr[j];
? ? ? ? ? ? arr[j]=arr[j+1];
? ? ? ? ? ? arr[j+1]=item;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
2)str.charCodeAt()將字符串的第0項(xiàng)轉(zhuǎn)換成Unicode編碼
如;var str="cbd012" 長度為6厂置,從為第0項(xiàng)菩掏;
str.charCodeAt(0);//將字符串的第0項(xiàng)轉(zhuǎn)化為Unicode編碼
3)Math.random()-0.5;將數(shù)組隨機(jī)亂序
4)數(shù)組的排序方式? sort? 只適用于數(shù)組
arr.sort(function(后一項(xiàng)(a),前一項(xiàng)(b))){
? ? return a-b //從小到大
? ? return b-a //從大到小
}
**四.9 some和every**
1)some 查找數(shù)組是否有滿足條件的元素昵济,如果有就是返回true智绸,不繼續(xù)向后遍歷,沒有返回false
arr.some(function(item,index,arr){})
重構(gòu)some
function somes(arr,fn){
? ? if(fn){
? ? ? ? return true
? ? }else{
? ? ? ? return false
? ? }
}
function fn(item,index,arr){}
2)every 查找數(shù)組中的條件每一個是否滿足條件访忿。有就返回true瞧栗,只要有一就返回false;
重構(gòu)every
function everys(arr,fn){
? ? if(!fn) return? false
? ? return ture;
}
function fn(item,index,arr){}
**四.10 filter和reduce及reduceRight**
1)filter 將滿足條件的元素返回一個新數(shù)組海铆,“過濾”功能迹恐,數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回滿足過濾條件組成的數(shù)組卧斟。
arr.filter(function(item,index,arr){});
重構(gòu)filter
function filter1(array,fn){
? ? ? ? ? ? var arr1=[];
? ? ? ? ? ? for (var i=0;i<array.length;i++){
? ? ? ? ? ? ? ? if(array[i]===undefined)? continue;
? ? ? ? ? ? ? ? if(fn(array[i],i,array))? arr1.push(array[i]);? //如果這里用arr1[i]=array[i];? 結(jié)果是[empty,2,empty,4......]
? ? ? ? ? ? } //這是因?yàn)榛卣{(diào)函數(shù)返回的是false true? false? true...,這樣arr1的奇數(shù)位就是empty,但是用push殴边,arr的奇數(shù)位就不會被復(fù)制憎茂。
? ? ? ? ? ? return arr1; //這個注釋可以用來區(qū)分map和filter的區(qū)別,map返回的是運(yùn)算結(jié)果
? ? ? ? }
2)reduce,遍歷數(shù)組,會將上一次的value返回給下一次的value
reduceRight()則從數(shù)組的最后一項(xiàng)開始锤岸,向前遍歷到第一項(xiàng)竖幔。
arr.reduce(function(value,item,index,arr){} 初始值),如過初始值沒有寫的話是偷,首先value會等于arr[0]
遍歷從第一項(xiàng)開始赏枚,如果給了初始值,則初始值等于value晓猛,遍歷從第0項(xiàng)開始
重構(gòu)reduce(不完整版)
function reduces(arr,fn,initvalue){
? ? var i=0
? ? if(initvalue===undefined){
? ? ? ? initvalue=arr[0];//如果為給初始值饿幅。則默認(rèn)為數(shù)組第一項(xiàng)
? ? ? ? i=1
? ? }
? ? for(i<arr.length;i++){
? ? ? ? var initvalue=fn(initvalue,arr[i],i;arr);//將初始值帶入fn函數(shù)中,并重新定義新初始值為fn函數(shù)中數(shù)組元素戒职。
? ? }
? ? return initvalue;
}
function fn(value,item,index,arr){}
**四.11 判斷是不是數(shù)組栗恩,不能用typeof**
1)ES6中;Array.isArray(arr)洪燥,是就返回true磕秤,不是返回false
**四.12 參數(shù)列表 arguments**
arguments? 偽數(shù)組;只能在函數(shù)中被調(diào)用捧韵,所有的列表(類數(shù)組市咆,偽數(shù)組)都可以通過[下標(biāo)]的方式調(diào)用。
arguments是實(shí)參中的列表再来,arguments.callee就是當(dāng)前函數(shù)蒙兰,如果該函數(shù)是回調(diào)執(zhí)行的,arguments.callee.caller就是回調(diào)執(zhí)行當(dāng)前函數(shù)外的函數(shù)
**四.13 arr的方法reverse();數(shù)組元素倒序或者反轉(zhuǎn)**
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原數(shù)組改變)
**四.14 entries/keys/values 都取/取鍵/取值**
var arr=['a', 'b', 'c']
for(let key of arr.keys()){console.log(key)} //0,1,2? ? ? ? ? ? ? ? ? ?
for(let value of arr.values()){console.log(value)} //a,b,c? ? ? ? ? ? ?
for(let [key, value] of arr.entries()){console.log([key,value])} //[0,'a'],[1,'b'],[2,'c']
**四.15? includes判斷數(shù)組是否包含某項(xiàng)芒篷,返回true/false**
[1, 2, 3, 4, 5].includes(4)? ? //true