數(shù)組的方法大概分es3员舵、es5、es6版本了捉兴，各個(gè)版本都有一些新的定義蝎困。
鑒于es5 已經(jīng)成為當(dāng)前主流標(biāo)準(zhǔn)，所以不區(qū)分es3 和es5了倍啥，直接區(qū)分es5和es6禾乘。
es5數(shù)組內(nèi)置方法：
1，Array.prototype.push(itemX, itemY) ---向數(shù)組的末尾添加一個(gè)或更多元素虽缕，并返回新的長(zhǎng)度始藕。
2，Array.prototype.pop() --刪除并返回?cái)?shù)組的最后一個(gè)元素氮趋。
3伍派，Array.prototype.unshift(itemX, itemY) -- 向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度剩胁。
4诉植，Array.prototype.shift() -- 刪除并返回?cái)?shù)組的第一個(gè)元素。
5昵观，Array.prototype.concat（arrayX,arrayX,......,arrayX） --連接兩個(gè)或更多的數(shù)組晾腔，并返回結(jié)果，把后面的數(shù)組追加到第一個(gè)數(shù)組啊犬。
6灼擂，Array.prototype.join(指定分隔符) -- 把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔觉至。
6.1剔应，String.prototype.split(指定分隔符) -- 把字符串通過(guò)指定分隔符形成數(shù)組
7，Array.prototype.reverse() -- 顛倒數(shù)組中元素的順序。
8领斥，Array.prototype.sort(sortby) --對(duì)數(shù)組的元素進(jìn)行排序
8嫉到，Array.prototype.slice(start, end) --從某個(gè)已有的數(shù)組返回選定的元素
9，Array.prototype.splice(index,howmany,item1,.....,itemX) --刪除元素月洛，并向數(shù)組添加新元素何恶。
10，Array.prototype.toString() --把數(shù)組轉(zhuǎn)換為字符串嚼黔，并返回結(jié)果细层。
11，Array.prototype.toLocaleString() --把數(shù)組中每一元素轉(zhuǎn)換為本地字符串唬涧，再拼接疫赎，返回結(jié)果，主要是時(shí)間類碎节。
12捧搞，Array.prototype.valueOf --返回?cái)?shù)組對(duì)象的原始值,內(nèi)部用，其實(shí)就是返回它自己
13狮荔，Array.prototype.toSource --返回該對(duì)象的源代碼胎撇。// 大部分不支持
新增方法(存在ie6-ie8不兼容問(wèn)題)：
14，Array.prototype.forEach() --是Array新方法中最基本的一個(gè)殖氏，就是遍歷晚树，循環(huán)
15，Array.prototype.map() --原數(shù)組被“映射”成對(duì)應(yīng)新數(shù)組
16雅采，Array.prototype.filter() -- 根據(jù)過(guò)濾條件對(duì)原數(shù)組進(jìn)行過(guò)濾爵憎，形成新數(shù)組
17，Array.prototype.some() --是否“某些項(xiàng)”合乎條件 返回true/false
18婚瓜，Array.prototype.every() --是否都符合條件 返回true/false
19宝鼓，Array.prototype.indexOf() --包含指定元素的第一個(gè)位置
20，Array.prototype.lastIndexOf() --從數(shù)組后面找到該元素的第一個(gè)位置
21,Array.prototype.reduce() --迭代”闰渔、“遞歸(recursion)席函， 返回一個(gè)回調(diào)函數(shù)結(jié)果
22,Array.prototype.reduceRight() --從數(shù)組的末端開始迭代”、“遞歸(recursion), 返回一個(gè)回調(diào)函數(shù)結(jié)果
改變數(shù)組的方法有以下
push
pop
unshift
shift
splice
reverse
sort
重點(diǎn)講幾個(gè)方法冈涧，存在混淆點(diǎn)
// push 可以向尾部添加1個(gè)或者多個(gè)
var arr = [1, 2, 3];
arr.push(4, 5) // arr = [1, 2, 3, 4, 5] 以前都是插入單個(gè)茂附，還未插入多個(gè)
// unshift 可以向頭部添加1個(gè)或者多個(gè)
arr.unshift(4, 5) // arr = [4, 5, 1, 2, 3, 4, 5]
//concat 并不會(huì)改變數(shù)組
var arr2 = [10, 11];
var arr3 = arr.concat(arr2) // arr 和 arr2并不會(huì)發(fā)生變化
//sort(sortby) sortby 是一個(gè)函數(shù)，返回值為大于0 小于0 等于0
sortby = function(a, b){
return a-b;
//a -b > 0 a排在b后面
// a-b = 0 不換位置
// a-b < 0 a在b前面
}
// slice(start, end) start,end 說(shuō)明
/**
start 必選 ,end可選
*/
var arr = [1, 2, 3, 4];
//start 取值情況
var arr4 = arr.slice(0, 1) // arr4 = 1 從0開始督弓，截取1位
var arr4 = arr.slice(1, 1) // arr4 = 2 從1開始营曼，截取1位
var arr4 = arr.slice(-1, 1) // arr4 = 4 從倒數(shù)第一位開始，截取1位
var arr4 = arr.slice(5, 1) // arr4 = [] 超出數(shù)組長(zhǎng)度愚隧，返回空數(shù)組
// end 取值情況
var arr4 = arr.slice(1) // arr4 = [2, 3, 4] end為空蒂阱，從第一位開始，截取剩下的元素
var arr4 = arr.slice(1, 0) // arr4 = [] ,截取0個(gè)元素時(shí)，返回空數(shù)組
var arr4 = arr.slice(1,10) //arr4 = [2, 3, 4] end超出數(shù)組長(zhǎng)度時(shí)录煤，截取剩下的元素
var arr4 = arr.slice(1, -1) //arr4 = [2, 3] end為負(fù)數(shù)時(shí)鳄厌，截取到數(shù)組長(zhǎng)度+負(fù)數(shù)的位置，不包含該位置
var arr4 = arr.slice(-1, -1) // arr4 = [] start end 均為負(fù)數(shù)時(shí)妈踊，以start為開始了嚎，若end在start前返回空，在start后廊营，獲取剩下元素
//splice(index,howmany,item1,.....,itemX)
/**
index: 起始位
howmany: 多少個(gè)
item1...itemx:插入值
*/
var arr = [1, 2, 3, 4];
arr.splice(0) // arr = [] 為一個(gè)或兩個(gè)參數(shù)時(shí)歪泳，是刪除操作
arr.splice(1) // arr = [2, 3, 4]
arr.splice(-1) // arr = [1, 2, 3] 當(dāng)index為負(fù)值時(shí)，則從length+index位開始計(jì)算
arr.splice(-2, 1) // arr = [1, 2, 4]
arr.splice(1, 0) //arr = [1, 2, 3 ,4] 為0時(shí)不刪除
arr.splice(1, 5) // arr = [1] 超出長(zhǎng)度露筒，以最大長(zhǎng)度計(jì)算
arr.splice(1, 1, 10) // arr = [1,10, 3, 4] 先刪除呐伞，然后在指定位置插入值
arr.splice(1, 1, 10，20) // arr = [1,10慎式，20, 3, 4] 有多個(gè)則依次插入多個(gè)
arr.splice(10, 1, 555) // arr = [1, 2, 3, 4, 555] 起始值超出長(zhǎng)度時(shí)伶氢，則在最后面插入
es6的方法演示及兼容寫法
- forEach（callback,[ thisObject]）
callback回調(diào)函數(shù) = function (item, index ,array)
thisObject 一個(gè)可選的上下文參數(shù)（改變回調(diào)函數(shù)里面的this指向）
var data = {
users: ['張含韻', '李小璐', '白百何'],
sendEmails: function(user){
if(this.isValidUser(user)){
console.log('你好' + user);
} else {
console.log('你好不是本家人')
}
},
isValidUser: function(user){
return /^張/.test(user)
}
}
data.users.forEach(data.sendEmails, data)
//此時(shí)，如果不帶data,會(huì)報(bào)錯(cuò)的瞬捕，執(zhí)行sendEmails方法用到this.isValidUser方法鞍历，此時(shí)this指向window，帶了data肪虎，指向data
//jquery中也有each方法。容易混淆
$.each([], function(index, item, array) {
// ...
});
//回調(diào)函數(shù)中的參數(shù) 第一位和第二位與數(shù)組中的順序恰恰相反惧蛹，使用的時(shí)候要注意一下
// 兼容IE6-8
if(typeof Array.prototype.forEach !== 'function'){
Array.prototype.forEach = function(fn, context){
for(var k = 0, len = this.length; k < len; k++){
if(typeof fn === 'function' && Object.prototype.hasOwnProperty.call(this, k)){
fn.call(context, this[k], k, this)
}
}
}
}
//this指向的是調(diào)用的數(shù)組
- array.map(callback,[ thisObject]); //返回新數(shù)組
[].map(function(value, index, array) {
// ...
});
var arr = [1, 2, 3];
var arr2 = arr.map(function(value, index, array){
return value * 2 // 必須要return 否者返回 undefined
})
// arr2 = [2, 4, 6]
// 兼容IE6-8
if(typeof Array.prototype.map != 'function'){
Array.prototype.map = function(fn, context) {
var arr = [];
if(typeof fn === 'function' ){
for(var k = 0, len = this.length; k < len; k++){
arr.push(fn.call(context, this[k], k, this))
}
}
return arr;
}
}
3.array.filter(callback,[ thisObject]); //返回符合條件的新數(shù)組
if(typeof Array.prototype.map != 'function'){
Array.prototype.map = function(fn, context) {
var arr = [];
if(typeof fn === 'function' ){
for(var k = 0, len = this.length; k < len; k++){
fn.call(context, this[k], k, this) && arr.push(this[k]) //fn返回為真 則插入該值
}
}
return arr;
}
}
- array.some(callback,[ thisObject]); // 其中某項(xiàng)符合扇救， 返回true/false
var arr = [1, 4, 8];
var result = arr.some(function(item, index ,array){
if(item > 4){
return true;
}
})
result === true
// 兼容IE6-8
if(typeof Array.prototype.some!= 'function'){
Array.prototype.some = function(fn, context) {
var passed = false;
if(typeof fn === 'function'){
for(var k = 0, len = this.length; k < len; k++){
if(passed === true) {
break;
}
passed = !!fn(context, this[k], k, this);
}
}
return passed
}
}
- every(callback,[ thisObject]); //全部符合，返回true/false
var arr = [1, 4, 8];
var result = arr.every(function(item, index ,array){
if(item > 4){
return true;
}
})
result === false
// 兼容IE6-8
if(typeof Array.prototype.every!= 'function'){
Array.prototype.every= function(fn, context) {
var passed = true;
if(typeof fn === 'function'){
for(var k = 0, len = this.length; k < len; k++){
if(passed === false) {
break;
}
passed = !!fn(context, this[k], k, this);
}
}
return passed
}
}
- array.indexOf(searchElement[, fromIndex])
indexOf方法在字符串中自古就有香嗓，string.indexOf(searchString, position)迅腔。數(shù)組這里的indexOf方法與之類似。
返回整數(shù)索引值靠娱，如果沒(méi)有匹配（嚴(yán)格匹配）沧烈，返回-1. fromIndex可選，表示從這個(gè)位置開始搜索像云，若缺省或格式不合要求锌雀，使用默認(rèn)值0，我在FireFox下測(cè)試迅诬，發(fā)現(xiàn)使用字符串?dāng)?shù)值也是可以的腋逆，例如"3"和3都可以。
var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (從3號(hào)位開始搜索)
console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到侈贷，因?yàn)? !== "5")
// 兼容IE6-8
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;
};
}
- array.lastIndexOf(searchElement[, fromIndex])
lastIndexOf方法與indexOf方法類似：只是lastIndexOf是從字符串的末尾開始查找惩歉，而不是從開頭。還有一個(gè)不同就是fromIndex的默認(rèn)值是array.length - 1而不是0.
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;
};
}
var data = [2, 5, 7, 3, 5];
console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (從后往前，索引值小于3的開始搜索)
console.log(data.lastIndexOf(4)); // -1 (未找到)
- array.reduce(callback[, initialValue])
callback函數(shù)接受4個(gè)參數(shù)：之前值撑蚌、當(dāng)前值上遥、索引值以及數(shù)組本身。initialValue參數(shù)可選争涌，表示初始值露该。若指定，則當(dāng)作最初使用的previous值第煮；如果缺省解幼，則使用數(shù)組的第一個(gè)元素作為previous初始值，同時(shí)current往后排一位包警，相比有initialValue值少一次迭代撵摆。
var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
return previous + current;
});
console.log(sum); // 10
說(shuō)明：
因?yàn)閕nitialValue不存在，因此一開始的previous值等于數(shù)組的第一個(gè)元素害晦。
從而current值在第一次調(diào)用的時(shí)候就是2.
最后兩個(gè)參數(shù)為索引值index以及數(shù)組本身array.
執(zhí)行過(guò)程：
// 初始設(shè)置
previous = initialValue = 1, current = 2
// 第一次迭代
previous = (1 + 2) = 3, current = 3
// 第二次迭代
previous = (3 + 3) = 6, current = 4
// 第三次迭代
previous = (6 + 4) = 10, current = undefined (退出)
var matrix = [
[1, 2],
[3, 4],
[5, 6]
];
// 二維數(shù)組扁平化
var flatten = matrix.reduce(function (previous, current) {
return previous.concat(current);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]
// 兼容ie6-8
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;
};
}
- array.reduceRight(callback[, initialValue])
reduceRight是從數(shù)組的末尾開始實(shí)現(xiàn)
var data = [1, 2, 3, 4];
var specialDiff = data.reduceRight(function (previous, current, index) {
if (index == 0) {
return previous + current;
}
return previous - current;
});
console.log(specialDiff); // 0
// 初始設(shè)置
index = 3, previous = initialValue = 4, current = 3
// 第一次迭代
index = 2, previous = (4- 3) = 1, current = 2
// 第二次迭代
index = 1, previous = (1 - 2) = -1, current = 1
// 第三次迭代
index = 0, previous = (-1 + 1) = 0, current = undefined (退出)
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;
};
}
應(yīng)用場(chǎng)景舉例：
var eleDivs = document.getElementsByTagName("div");
Array.prototype.forEach.call(eleDivs, function(div) {
console.log("該div類名是：" + (div.className || "空"));
});
