javascript中數組的22種方法

前面的話數組總共有22種方法,本文將其分為對象繼承方法、數組轉換方法、棧和隊列方法、數組排序方法、數組拼接方法、創建子數組方法、數組刪改方法、數組位置方法、數組歸并方法和數組迭代方法共10類來進行詳細介紹對象繼承方法數組是一種特殊的對象,繼承了對象Object的toString()、toLocaleString()和valueOf()方法【toString()】toString()方法返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串[注意]該方法的返回值與不使用任何參數調用join()方法返回的字符串相同[1,2,3].toString();//'1,2,3'
['a','b','c'].toString();//'a,b,c'
[1,[2,'c']].toString();//'1,2,c'由于alert()要接收字符串參數,它會在后臺調用toString()方法,會得到與toString()方法相同的結果alert([1,2,3]);//'1,2,3'
【toLocaleString()】toLocaleString()是toString()方法的本地化版本,它經常也會返回與toString()方法相同的值,但也不總是如此。因為,它調用元素的是toLocaleString()方法將每個數組元素轉化為字符串var person1 = {toLocaleString: function(){return 'Nikolaos';},toString: function(){return 'Nicholas';}
};
var person2 = {toLocaleString: function(){return 'Grigorios';},toString: function(){return 'Greg';}
};
var people = [person1,person2];
console.log(people.toString());//'Nicholas,Greg'
console.log(people.toLocaleString());//'Nikolaos,Grigorios'如果數組中的某一項的值是null或者undefined,則該值在toLocaleString()和toString()方法返回的結果中以空字符串表示var colors = [1,undefined,2,null,3];
console.log(colors.toString());//'1,,2,,3'
console.log(colors.toLocaleString());//'1,,2,,3'
【valueOf()】valueOf()方法返回數組對象本身var a = [1, 2, 3];
console.log(a.valueOf());// [1, 2, 3]
console.log(a.valueOf() instanceof Array);//true數組轉換方法
【join()】Array.join()方法是String.split()方法的逆向操作,后者是將字符串分割成若干塊來創建一個數組數組繼承的toLocaleString()和toString()方法,在默認情況下都會以逗號分隔的字符形式返回數組項;而join()方法可以使用不同的分隔符來構建這個字符串,join()方法只接收一個參數,用作分隔符的字符串,然后返回包含所有數組項的字符串如果不給join()方法傳入任何值,則使用逗號作為分隔符var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'var b = new Array(10);
b.join('-');//'---------',9個連字符組成的字符串若join()方法的參數是undefined,標準瀏覽器以逗號為分隔符返回字符串,而IE7-瀏覽器以'undefined'為分隔符返回字符串//標準瀏覽器為'1,2,3';IE7-瀏覽器為'1undefined2undefined3'
var a = [1,2,3];
console.log(a.join(undefined));如果數組中的某一項的值是null或者undefined,則該值在join()方法返回的結果中以空字符串表示var colors = [1,undefined,2,null,3];
console.log(colors.join());//'1,,2,,3'該方法也可以用于類數組對象上console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.prototype.join.call(obj, '-'));// 'a-b'[注意]若對象沒有length屬性,就不是類數組,也就不能調用數組的方法var obj = { 0: 'a', 1: 'b' };
console.log(typeof Array.prototype.join.call(obj, '-'));//''棧和隊列方法push()和pop()方法允許將數組當作棧來使用。unshift()和shift()方法的行為非常類似于push()和pop(),不一樣的是前者是在數組的頭部而非尾部進行元素的插入和刪除操作棧是一種LIFO(Last-First-Out,后進先出)的數據結構,也就是最新添加的項最早被移除。而棧中項的插入(叫做推入)和移除(叫做彈出),只發生在一個位置——棧的頂部。javascript為數組專門提供了push()和pop()方法,以便實現類似棧的行為隊列數據結構的訪問規則是FIFO(first-in-first-out,先進先出)。隊列在列表的末端添加項,從列表的前端移除項。結合使用shift()和push()方法,可以像使用隊列一樣使用數組【push()】push()方法可以接收任意數量的參數,把它們逐個添加到數組末尾,并返回修改后數組的長度。所以,該數組會改變原數組var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5如果需要合并兩個數組,可以使用apply方法var a = [1, 2, 3];
var b = [4, 5, 6];
console.log(a,Array.prototype.push.apply(a, b));//[1,2,3,4,5,6] 6[注意]如果使用call方法,則會把數組b整體看成一個參數var a = [1, 2, 3];
var b = [4, 5, 6];
console.log(a,Array.prototype.push.call(a, b));//[1,2,3,[4,5,6]] 4push()方法也可以向對象中添加元素,添加后的對象變成類數組對象,即新加入元素的鍵對應數組的索引,并且對象有一個length屬性var obj = {a: 1};
console.log(obj,[].push.call(obj, 2));// {a:1, 0:2, length: 1}
console.log(obj,[].push.call(obj, [3]));// {a:1, 0:2, 1:[3], length: 2}
【pop()】pop()方法從數組末尾移除最后一項,減少數組的length值,然后返回移除的項。所以,該數組會改變原數組var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'對空數組使用pop()方法,不會報錯,而是返回undefinedvar a = [];
console.log(a,a.pop()); // [] undefined
【shift()】shift()方法移除數組中的第一個項并返回該項,同時數組的長度減1。所以,該數組會改變原數組var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'對空數組使用shift()方法,不會報錯,而是返回undefinedvar a = [];
console.log(a,a.shift());// [] undefined
【unshift()】unshift()方法在數組前端添加任意個項并返回新數組長度。所以,該數組會改變原數組var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4當使用多個參數調用unshift()時,參數是一次性插入的而非一次一個地插入。這意味著最終的數組中插入的元素的順序和它們在參數列表中的順序一致var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6[注意]在IE7-瀏覽器中,unshift()方法返回的總是undefined//標準瀏覽器下,返回[1] 1;而IE7-瀏覽器下,返回[1] undefined
var a = [];
console.log(a,a.unshift(1));數組排序方法數組中存在兩個可以直接用來重排序的方法: reverse()和sort() 【reverse()】reverse()方法用于反轉數組的順序,返回經過排序之后的數組;而原數組順序也發生改變var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']
【sort()】默認情況下,sort()方法按字符串升序排列數組項,sort方法會調用每個數組項的toString()方法,然后比較得到的字符串排序,返回經過排序之后的數組,而原數組順序也發生改變var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]如果數組包含undefined元素,它們會被排到數組的尾部var array = ['3',3,undefined,2,'2'];
console.log(array,array.sort());//["2", 2, "3", 3, undefined] ["2", 2, "3", 3, undefined]sort()方法可以接受一個比較函數作為參數,以便指定哪個值在哪個值的前面。比較函數接收兩個參數,如果第一個參數應該位于第二個參數之前則返回一個負數,如果兩個參數相等則返回0,如果第一個參數應該位于第二個參數之后則返回一個正數function compare(value1,value2){if(value1 < value2){return -1;}else if(value1 > value2){return 1;}else{return 0;}
}
var array = ['5px',50,1,10];
//當數字與字符串比較大小時,字符串'5px'會被轉換成NaN,這樣結果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]對于數值類型或valueOf()方法會返回數值類型的對象類型,比較函數可以簡化function compare(value1,value2){return value1 - value2;
}
var array = ['5px',50,1,10];
console.log(array.sort(compare));//["5px",1,10,50]
var array = [5,50,1,10];
console.log(array.sort(compare));//[1,5,10,50]如果對一個字符串數組執行不區分大小寫的字母表排序,比較函數首先將參數轉化為小寫字符串再開始比較a = ['ant','Bug','cat','Dog'];
a.sort();//['Bug','Dog','ant','cat'];
a.sort(function(s,t){var a = s.toLowerCase();var b = t.toLowerCase();if(a < b)return -1;if(a > b)return 1;return 0;
});//['ant','bug','cat','dog']【tips】使用sort()方法創建一個隨機數組function compare(){return Math.random() - 0.5;
}
var array = [1,2,3,4,5];
console.log(array.sort(compare));//[2,1,5,4,3]數組拼接方法
【concat()】concat()方法基于當前數組中的所有項創建一個新數組,先創建當前數組一個副本,然后將接收到的參數添加到這個副本的末尾,最后返回新構建的數組。所以concat()不影響原數組如果不給concat()方法傳遞參數時,它只是復制當前的數組;如果參數是一個或多個數組,則該方法會將這些數組中的每一項都添加到結果數組中;如果傳遞的值不是數組,這些值就會被簡單地添加到結果數組的末尾var numbers = [1,2];
console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]如果不提供參數,concat()方法返回當前數組的一個淺拷貝。所謂“淺拷貝”,指的是如果數組成員包括復合類型的值(比如對象),則新數組拷貝的是該值的引用//該方法實際只復制了數組的第一維,數組第一維存放的是第二維的引用,而第二維才是實際存放他們的內容
var numbers = [1,2];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]var numbers = [[1,2]];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]concat()方法也可以用于將對象合并為數組,但是必須借助call()方法var newArray = Array.prototype.concat.call({ a: 1 }, { b: 2 })
console.log(newArray);// [{ a: 1 }, { b: 2 }]
console.log(newArray[0].a);//1創建子數組方法【slice()】slice()方法基于當前數組中的一個或多個項創建一個新數組,接受一個或兩個參數,即要返回項的起始和結束位置,最后返回新數組,所以slice()不影響原數組slice(start,end)方法需要兩個參數start和end,返回這個數組中從start位置到(但不包含)end位置的一個子數組;如果end為undefined或不存在,則返回從start位置到數組結尾的所有項如果start是負數,則start = max(length + start,0)如果end是負數,則end = max(length + end,0)start和end無法交換位置如果沒有參數,則返回原數組var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]如果不提供參數,slice()方法返回當前數組的一個淺拷貝//該方法實際只復制了數組的第一維,數組第一維存放的是第二維的引用,而第二維才是實際存放他們的內容
var numbers = [1,2];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]var numbers = [[1,2]];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]slice()方法涉及到Number()轉型函數的隱式類型轉換,當start被轉換為NaN時,相當于start = 0;當end被轉換為NaN時(end為undefined除外),則輸出空數組var numbers = [1,2,3,4,5];
console.log(numbers.slice(NaN));//[1,2,3,4,5]
console.log(numbers.slice(0,NaN));//[]
console.log(numbers.slice(true,[3]));//[2,3]
console.log(numbers.slice(null,undefined));//[1,2,3,4,5]
console.log(numbers.slice({}));//[1,2,3,4,5]
console.log(numbers.slice('2',[5]));//[3,4,5]可以使用slice()方法將類數組對象變成真正的數組var arr = Array.prototype.slice.call(arrayLike);Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);數組刪改方法
【splice()】splice()和slice()擁有非常相似的名字,但它們的功能卻有本質的區別。splice()方法用于刪除原數組的一部分成員,并可以在被刪除的位置添加入新的數組成員,該方法會改變原數組splice()返回一個由刪除元素組成的數組,或者如果沒有刪除元素就返回一個空數組splice()的第一個參數start指定了插入或刪除的起始位置。如果start是負數,則start = max(length + start,0);如果start是NaN,則相當于start = 0如果只提供一個元素,相當于將原數組在指定位置拆分成兩個數組var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-4+8=4; [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-9+8,0)=0 [] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]第二個參數number指定了應該從數組中刪除的元素的個數。如果省略第二個參數,從起始點開始到數組結尾的所有元素都將被刪除。如果number是負數或NaN或undefined,則number=0,因此不刪除元素var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0,2));// [3,4,5,6,7,8] [1,2]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,100));// [1] [2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []如果后面還有更多的參數,則表示這些就是要被插入數組的新元素var a = [1,2,3,4,5];
console.log(a,a.splice(2,0,'a','b'));//[1,2,'a','b',3,4,5] []
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] ['a','b']數組位置方法ES5為數組實例添加了兩個位置方法:indexOf()、lastIndexOf()【indexOf()】indexOf(search,start)方法接收search和start兩個參數,返回search首次出現的位置,如果沒有找到則返回-1search參數表示要搜索的項;使用嚴格相等運算符(===)進行比較var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1start參數表示該搜索的開始位置,該方法會隱式調用Number()轉型函數,將start非數字值(undefined除外)轉換為數字。若忽略該參數或該參數為undefined或NaN時,start = 0var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因為person和people[0]雖然值相同,但是是兩個引用
alert(morePeople.indexOf(person));//0,因為person和morepeople[0]是同一個引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因為不是同一個引用indexOf()方法兼容寫法if (typeof Array.prototype.indexOf != "function") {Array.prototype.indexOf = function (searchElement, fromIndex) {var index = -1;fromIndex = fromIndex * 1 || 0;for (var k = 0, length = this.length; k < length; k++) {if (k >= fromIndex && this[k] === searchElement) {index = k;break;}}return index;};
}【lastIndexOf()】與indexOf()不同,lastIndexOf()從右向左查找lastIndexOf(search,start)方法接收search和start兩個參數,返回search第一次出現的位置,如果沒有找到則返回-1search參數表示要搜索的項;使用嚴格相等運算符(===)進行比較var arr = [1,2,3,'1','2','3'];
console.log(arr.lastIndexOf('2'));//4
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(0));//-1start表示該搜索的開始位置,該方法會隱式調用Number()轉型函數,將start非數字值(undefined除外)轉換為數。若忽略該參數或該參數為undefined或NaN時,start = 0與字符串的lastIndexOf()方法不同,當search方法為負數時,search = max(0,length+search)var arr = ['a','b','c','d','e','a','b'];
console.log(arr.lastIndexOf('b'));//6
console.log(arr.lastIndexOf('b',undefined));//-1
console.log(arr.lastIndexOf('a',undefined));//0
console.log(arr.lastIndexOf('b',NaN));//-1
console.log(arr.lastIndexOf('b',1));//1
console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6
console.log(arr.lastIndexOf('b',-5));//max(0,-5+7)=2; 1
console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1【tips】返回滿足條件的項的所有索引值可以通過循環調用indexOf()或lastIndexOf()來找到所有匹配的項function allIndexOf(array,value){var result = [];var pos = array.indexOf(value);if(pos === -1){return -1;}while(pos > -1){result.push(pos);pos = array.indexOf(value,pos+1);}return result;
}
var array = [1,2,3,3,2,1];
console.log(allIndexOf(array,1));//[0,5]   lastIndexOf()方法兼容寫法 if (typeof Array.prototype.lastIndexOf != "function") {Array.prototype.lastIndexOf = function (searchElement, fromIndex) {var index = -1, length = this.length;fromIndex = fromIndex * 1 || length - 1;for (var k = length - 1; k > -1; k-=1) {if (k <= fromIndex && this[k] === searchElement) {index = k;break;}}return index;};
}數組歸并方法數組歸并方法包括reduce()和reduceRight()方法兩種,它們使用指定的函數將數組元素進行組合,生成單個值。這在函數式編程中是常見的操作,也可以稱為“注入”和“折疊”【reduce()】reduce()方法需要兩個參數。第一個是執行化簡操作的函數。化簡函數的任務就是用某種方法把兩個值組合或化簡為一個值,并返回化簡后的值化簡函數接受四個參數,分別是:【1】初始變量,默認為數組的第一個元素值。函數第一次執行后的返回值作為函數第二次執行的初始變量,依次類推【2】當前變量,如果指定了第二個參數,則該變量為數組的第一個元素的值,否則,為第二個元素的值【3】當前變量對應的元素在數組中的索引(從0開始)【4】原數組對象化簡函數的這四個參數之中,只有前兩個是必須的,后兩個則是可選的values.reduce(function(prev, cur, index, array){//todo
});reduce()方法第二個(可選)的參數是一個傳遞給函數的初始值var a = [1,2,3,4,5];
var sum = a.reduce(function(x,y){return x+y},0);//數組求和
var product = a.reduce(function(x,y){return x*y},1);//數組求積
var max = a.reduce(function(x,y){return (x>y)?x:y;});//求最大值[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev, cur)return prev+ cur;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后結果:15[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev, cur);return prev + cur;
},0);
// 0 1
// 1 2
// 3 3
// 6 4
// 10 5
//最后結果:15[注意]reduce()方法的返回結果類型和傳入的初始值相同[1, 2, 3, 4, 5].reduce(function(prev, cur){console.log(prev.sum, cur);prev.sum = prev.sum + cur;return prev;
},{sum:0});
//0 1
//1 2
//3 3
//6 4
//10 5
//Object {sum: 15}利用reduce()方法,可以寫一個數組求和的sum方法Array.prototype.sum = function (){return this.reduce(function (prev, cur){return prev + cur;})
};
[3,4,5,6,10].sum();// 28由于reduce方法依次處理每個元素,所以實際上還可以用它來搜索某個元素。比如,找出長度最長的數組元素function findLongest(entries) {return entries.reduce(function (prev, cur) {return cur.length > prev.length ? cur : prev;}, '');
}
console.log(findLongest([1,2,3,'ab',4,'bcd',5,6785,4]));//'bcd'可以利用reduce()方法,實現二維數組的扁平化var matrix = [[1, 2],[3, 4],[5, 6]
];
// 二維數組扁平化
var flatten = matrix.reduce(function (prev, cur) {return prev.concat(cur);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]在空數組上,不帶初始值參數調用reduce()將導致類型錯誤異常。如果調用它的時候只有一個值——數組只有一個元素并且沒有指定初始值,或者有一個空數組并且指定一個初始值——reduce()只是簡單地返回那個值而不會調用化簡函數var arr = [];
arr.reduce(function(){});//Uncaught TypeError: Reduce of empty array with no initial valuevar arr = [];
arr.reduce(function(){},1);//1reduce()方法兼容寫法if (typeof Array.prototype.reduce != "function") {Array.prototype.reduce = function (callback, initialValue ) {var previous = initialValue, k = 0, length = this.length;if (typeof initialValue === "undefined") {previous = this[0];k = 1;}if (typeof callback === "function") {for (k; k < length; k++) {this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));}}return previous;};
}【reduceRight()】reduceRight()的工作原理和reduce()一樣,不同的是它按照數組索引從高到低(從右到左)處理數組,而不是從低到高var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){console.log(prev,cur);return prev + cur;
});
console.log(sum);
//5 4
//9 3
//12 2
//14 1
//15reduceRight()方法兼容寫法if (typeof Array.prototype.reduceRight != "function") {Array.prototype.reduceRight = function (callback, initialValue ) {var length = this.length, k = length - 1, previous = initialValue;if (typeof initialValue === "undefined") {previous = this[length - 1];k--;}if (typeof callback === "function") {for (k; k > -1; k-=1) {          this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));}}return previous;};
}數組迭代方法ECMAScript5為數組定義了5個迭代方法。每個方法都接收兩個參數:要在每一項上運行的函數和(可選的)運行該函數的作用域對象——影響this的值。傳入這些方法中的函數會接收三個參數:數組項的值、該項在數組中的位置和數組對象本身。根據使用的方法不同,這個函數執行后的返回值可能會也可能不會影響訪問的返回值function(item,index,array){//todo
}
【map()】map()方法對數組的每一項運行給定函數,返回每次函數調用的結果組成的數組//f是array的每一個元素調用的函數。它的返回值成為返回數組的元素;o是f調用時的可選this值
array.map(f,o);
[1,2,3].map(function(item,index,arr){return item*item});//[1,4,9]
[1,2,3].map(function(item,index,arr){return item*index});//[0,2,6]map()方法還可以接受第二個參數,表示回調函數執行時this所指向的對象var arr = ['a','b','c'];
[1,2].map(function(item,index,arr){return this[item]},arr);//['b','c']在實際使用的時候,可以利用map()方法方便獲得對象數組中的特定屬性值var users = [{name:'t1',email:'t1@qq.com'},{name:'t2',email:'t2@qq.com'},{name:'t3',email:'t3@qq.com'}];
console.log(users.map(function(item,index,arr){return item.email}));//["t1@qq.com", "t2@qq.com", "t3@qq.com"]map()方法還可以用于類數組對象Array.prototype.map.call('abc',function(item,index,arr){return item.toUpperCase()});//["A", "B", "C"]對于稀疏數組,map()方法不會在實際上不存在元素的序號上調用函數var a = [1,,3];
console.log(a.map(function(item,index,arr){return item*2;}));//[2, 2: 6]map()方法兼容寫法if (typeof Array.prototype.map != "function") {Array.prototype.map = function (fn, context) {var arr = [];if (typeof fn === "function") {for (var k = 0, length = this.length; k < length; k++) {      arr.push(fn.call(context, this[k], k, this));}}return arr;};
}【forEach()】forEach()方法對數組中的每一項運行給定函數,這個方法沒有返回值。本質上與for循環迭代數組一樣。如果需要有返回值,一般使用map方法[1,2,3,4].forEach(function(item,index,arr){console.log(item)
});
//1
//2
//3
//4類似于如下的for循環var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {console.log(array[k]);
}使用forEach()方法實現簡單的加法var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {sum += item;
});
console.log(sum);//10forEach()方法除了接受一個必須的回調函數參數,第二個參數還可以接受一個可選的上下文參數(改變回調函數里面的this指向)var out = [];
[1, 2, 3].forEach(function(elem){this.push(elem * elem);
}, out);
console.log(out);// [1, 4, 9]第二個參數對于多層this非常有用,因為多層this通常指向是不一致的,可以使用forEach()方法的第二個參數固定thisvar obj = {name: '張三',times: [1, 2, 3],print: function () {//該this指向objconsole.log(this);this.times.forEach(function (n) {//該this指向windowconsole.log(this);});}
};
obj.print();var obj = {name: '張三',times: [1, 2, 3],print: function () {//該this指向objconsole.log(this);this.times.forEach(function (n) {//該this同樣指向objconsole.log(this);},this);}
};
obj.print();forEach()循環可以用于類數組對象var str = 'abc';
Array.prototype.forEach.call(str, function(item, index, array) {console.log( item + ':' + index);
});
//a:0
//b:1
//c:2與for循環不同,對于稀疏數組,forEach()方法不會在實際上不存在元素的序號上調用函數var a = [1,2,3];
delete a[1];
for(var i = 0; i < a.length; i++){console.log(a[i]);
}
//1
//undefined
//3a.forEach(function(item,index,arr){console.log(item)});
//1
//3forEach()方法無法在所有元素都傳遞給調用的函數之前終止遍歷。也就是說,沒有像for循環中使用的相應的break語句。如果要提前終止,必須把forEach()方法放在一個try塊中,并能拋出一個異常for(var i = 0; i < 5; i++){if(i == 2) break;
}
console.log(i);//2
var a = [1,2,3,4,5];
console.log(a.forEach(function(item,index,arr){if(index == 2) break;//Uncaught SyntaxError: Illegal break statement
}));var a = [1,2,3,4,5];
a.forEach(function(item,index,arr){try{if(item == 2) throw new Error;    }catch(e){console.log(item);}
});forEach()方法兼容寫法if(typeof Array.prototype.forEach != 'function'){Array.prototype.forEach = function(fn,context){for(var k = 0,length = this.length; k < length; k++){if(typeof fn === 'function' && Object.prototype.hasOwnProperty.call(this,k)){fn.call(context,this[k],k,this);}}}
}【filter()】filter()方法對數組中的每一項運行給定函數,返回該函數會返回true的項組成的數組。該方法常用于查詢符合條件的所有數組項[1, 2, 3, 4, 5].filter(function (elem) {return (elem > 3);
});// [4, 5]    [0, 1, 'a', false].filter(Boolean);// [1, "a"][1, 2, 3, 4, 5].filter(function (elem, index, arr) {return index % 2 === 0;
});// [1, 3, 5]filter()方法還可以接受第二個參數,指定測試函數所在的上下文對象(this對象)var Obj = function () {this.MAX = 3;
};
var myFilter = function (item) {if (item > this.MAX) {return true;}
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, new Obj());// [8, 4, 9]filter()會跳過稀疏數組中缺少的元素,它的返回數組總是稠密的,所以可以壓縮稀疏數組的空缺var a = [1,2,,,,3,,,,4];
console.log(a.length);//10
var dense = a.filter(function(){return true;})
console.log(dense,dense.length);//[1,2,3,4] 4如果要壓縮空缺并刪除undefined和null元素,可以這樣使用filter()方法var a = [1,2,,undefined,,3,,null,,4];
console.log(a.length);//10
var dense = a.filter(function(item){return item!= undefined;})
console.log(dense,dense.length);//[1,2,3,4] 4filter()方法兼容寫法if (typeof Array.prototype.filter != "function") {Array.prototype.filter = function (fn, context) {var arr = [];if (typeof fn === "function") {for (var k = 0, length = this.length; k < length; k++) {fn.call(context, this[k], k, this) && arr.push(this[k]);}}return arr;};
}【some()】some()方法對數組中的每一項運行給定函數,如果該函數對任一項返回true,則返回true。并且當且僅當數值中的所有元素調用判定函數都返回false,它才返回falsea = [1,2,3,4,5];
a.some(function(elem, index, arr){return elem%2===0;})//true
a.some(isNaN);//false在空數組上調用some()方法會返回false[].some(function(){});//falsesome()方法兼容寫法if (typeof Array.prototype.some != "function") {Array.prototype.some = function (fn, context) {var passed = false;if (typeof fn === "function") {for (var k = 0, length = this.length; k < length; k++) {if (passed === true) break;passed = !!fn.call(context, this[k], k, this);}}return passed;};
}【every()】every()方法對數組中的每一項運行給定函數,如果該函數對每一項都返回true,則返回true;只要有一項返回false,則返回falsea = [1,2,3,4,5];
a.every(function(elem, index, arr){elem < 10;})//true
a.every(function(elem, index, arr){return elem%2 ===0;});//false在空數組上調用every()方法會返回true[].every(function(){});//trueevery()方法兼容寫法if (typeof Array.prototype.every != "function") {Array.prototype.every = function (fn, context) {var passed = true;if (typeof fn === "function") {for (var k = 0, length = this.length; k < length; k++) {if (passed === false) break;passed = !!fn.call(context, this[k], k, this);}}return passed;};
}總結javascript數組方法特意定義為通用的,因此它們不僅應用在真正的數組而且在類數組對象上都能正確工作。這22種方法中,除了toString()和toLocaleString()以外的所有方法都是通用的可以改變原數組的方法總共有7種:包括unshift()、shift()、push()、pop()這4種棧和隊列方法,reverse()和sort()這2種數組排列方法,數組刪改方法splice()

轉載于:https://www.cnblogs.com/xuyuanjia/p/5743560.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/457479.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/457479.shtml
英文地址,請注明出處:http://en.pswp.cn/news/457479.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

javascript/jquery高度寬度詳情解說分析

為什么80%的碼農都做不了架構師&#xff1f;>>> 一、window對象表示瀏覽器中打開的窗口 二、window對象可以省略 一、document對象是window對象的一部分 二、瀏覽器的HTML文檔成為Document對象 window.location和document.location window對象的location屬性引用的…

農用地包括哪些地類_土地地類一覽表

一級類二級類三級類含義編號三大類名稱編號名稱編號名稱1農用地指直接用于農業生產的土地&#xff0c;包括耕地&#xff0c;園地&#xff0c;林地&#xff0c;牧草地及其他的農業用地11耕地指種植農作物、土地&#xff0c;包括熟地、新開發復墾整理地&#xff0c;休閑地、輪歇地…

紅黑樹插入時的自平衡

紅黑樹插入時的自平衡 紅黑樹實質上是一棵自平衡的二叉查找樹&#xff0c;引入帶顏色的節點也是為了方便在進行插入或刪除操作時&#xff0c;如果破壞了二叉查找樹的平衡性能通過一系列變換保持平衡。 紅黑樹的性質 每個節點要么是紅色&#xff0c;要么是黑色根節點必須是黑…

說一下自己對于 Linux 哲學的理解

查閱了一些資料&#xff0c;官方的哲學思想貌似是&#xff1a; 一切皆文件由眾多單一目的的小程序&#xff0c;一個程序只實現一個功能&#xff0c;多個程序組合完成復雜任務文本文件保存配置信息盡量避免與用戶交互什么&#xff0c;你問我的理解&#xff1f;哲學思想&#xff…

UWP學習記錄

微軟{X:Bind}、{Binding}資料網站 &#xff1a; https://msdn.microsoft.com/windows/uwp/xaml-platform/x-bind-markup-extension在View的ItemTemplate中綁定ViewModel的方法&#xff1a;1 <ItemsControl Name"XX" ItemsSource"{x:Bind VM.XXModels,ModeOne…

dw1000信標碼_DW1000方案工牌型UWB標簽,助力10厘米高精度室內定位!

DW1000方案工牌型UWB標簽&#xff0c;助力10厘米高精度室內定位&#xff01;發布日期&#xff1a;2019-04-01 瀏覽次數&#xff1a;244次微能信息(95power)推出一款工牌型UWB標簽VDU1510 &#xff0c;廣泛應用于超寬帶UWB定位系統&#xff0c;最高可實現10cm高精度人員定位。工…

【Java】HashMap源碼(1.7)

Life is not a ridiculous number of life, the meaning of life lies in life itself HashMap源碼 散列集 數組和鏈表可以保持元素插入的順序&#xff0c;對數組來說&#xff0c;他的優點是擁有連續的存儲空間&#xff0c;因此可以使用元素下標快速訪問&#xff0c;但缺點在…

Docker 基本用法

1.安裝&#xff1a; wget http://mirrors.yun-idc.com/epel/6/i386/epel-release-6-8.noarch.rpm rpm -ivh epel-release-6-8.noarch.rpm yum install docker-io -y2.獲取鏡像 pull docker pull ubuntu docker pull ubuntu:14.043.運行這個鏡像&#xff0c;在其中運行bash應用…

畫刷的使用

1.畫刷的定義&#xff1a; HBRUSH hBrush; windows 自定義的畫刷&#xff1a; WHITE_BRUSH、LTGRAY_BRUSH、GRAY_BRUSH、DKGRAY_BRUSH、BLACK_BRUSH和NULL_BRUSH &#xff08;也叫HOLLOW_BRUSH&#xff09; 獲取方法如下&#xff1a; hBrush (HBRUSH) GetStockObject (GRAY_BR…

dataframe 控對象_iOS知識 - 常用小技巧大雜燴

1&#xff0c;打印View所有子視圖po [[self view]recursiveDescription]2&#xff0c;layoutSubviews調用的調用時機* 當視圖第一次顯示的時候會被調用。* 添加子視圖也會調用這個方法。* 當本視圖的大小發生改變的時候是會調用的。* 當子視圖的frame發生改變的時候是會調用的。…

【Java】jdk 1.8 新特性——Lambda表達式

Lambda表達式 jdk 1.8 新加入的特性&#xff0c;簡化了簡單接口的實現 函數式接口 函數式中只有一個待實現的方法&#xff0c;可以使用FunctionalInterface注解標注函數式接口.這個接口中只能有一個待實現的方法&#xff0c;但可以包含默認方法&#xff0c;靜態方法以及Obje…

【Todo】Java8新特性學習

參考這篇文章吧&#xff1a; http://blog.csdn.net/vchen_hao/article/details/53301073 還有一個系列轉載于:https://www.cnblogs.com/charlesblc/p/6123380.html

jsp調整字體大小font_html font標簽如何設置字體大小?

首先我們先來看看htmlfont標簽是如何來設置字體大小的&#xff1a;都只到htmlfont標簽是個專門用來設置字體的標簽&#xff0c;雖然在html5中用的會很少(因為都用css樣式來設置font標簽里面的屬性)&#xff0c;但是個人覺得font標簽還是相當強大的標簽的&#xff0c;為什么這么…

runtime官方文檔

OC是一種面向對象的動態語言&#xff0c;作為初學者可能大多數人對面向對象這個概念理解的比較深&#xff0c;而對OC是動態語言這一特性了解的比較少。那么什么是動態語言&#xff1f;動態語言就是在運行時來執行靜態語言的編譯鏈接的工作。這就要求除了編譯器之外還要有一種運…

【Java】synchronized關鍵字筆記

Java Synchronized 關鍵字 壹. Java并發編程存在的問題 1. 可見性問題 可見性問題是指一個線程不能立刻拿到另外一個線程對共享變量的修改的結果。 如&#xff1a; package Note.concurrency;public class Demo07 {private static boolean s true;public static void mai…

sql語句分析是否走索引_MySql 的SQL執行計劃查看,判斷是否走索引

在select窗口中&#xff0c;執行以下語句&#xff1a;set profiling 1; -- 打開profile分析工具show variables like %profil%; -- 查看是否生效show processlist; -- 查看進程use cmc; -- 選擇數據庫show PROFILE all; -- 全部分析的類型show index from t_log_account; ##查看…

SQL Server-數據類型(七)

前言 前面幾篇文章我們講解了索引有關知識&#xff0c;這一節我們再繼續我們下面內容講解&#xff0c;簡短的內容&#xff0c;深入的理解&#xff0c;Always to review the basics。 數據類型 SQL Server支持兩種字符數據類型&#xff0c;一種是常規&#xff0c;另外一種則是Un…

【隨記】SQL Server連接字符串參數說明

廢話不多說&#xff0c;請參見 SqlConnection.ConnectionString 。 轉載于:https://www.cnblogs.com/xiesong/p/5749037.html

【設計模式 00】設計模式的六大原則

設計模式的六大原則 參考&#xff1a; 設計模式六大原則 1. 單一職責原則 一個類只負責一個明確的功能 優點&#xff1a; 降低類的復雜度&#xff0c;提高代碼可讀性和可維護性降低變更時對其他功能的影響 2. 里氏替換原則 **原則一&#xff1a;**若 o1 是 C1 的一個實例化…

pb retrieve時停止工作_大佬們掛在嘴邊的PE、PB是什么?

在緊鑼密鼓地準備科創50ETF的發行工作間隙&#xff0c;今天小夏先帶你讀懂最簡單的PE、PB估值指標這兩大指標。01、什么是PE&#xff08;市盈率&#xff09;PE&#xff0c;也就是市價盈利比率&#xff0c;簡稱市盈率。市盈率是指股票價格與每股收益&#xff08;每股收益&#x…