JavaScript 배열의 22가지 일반적인 메서드에 대한 자세한 코드 소개
- 黄舟원래의
- 2017-03-06 14:56:051386검색
앞서 말씀드린 대로
배열에는 총 22가지 방법이 있습니다. 이 글에서는 이를 객체 상속 방법, 배열 변환 방법, 스택 및 큐 방법, 배열 정렬 방법, 배열 접합 방법에는 하위 배열 생성 방법, 배열 삭제 방법, 배열 위치 방법, 배열 병합 방법, 배열 반복 방법 등 10가지 범주가 있습니다.
객체 상속 방법
배열은 특별합니다. 객체 Object[toString()]toString() 메소드의 toString(), toLocaleString() 및 valueOf() 메소드를 상속받아 배열의 각 값으로 연결된 쉼표와 같은 문자열을 반환합니다. string [참고] 이 메서드의 반환 값은 매개변수 없이 Join() 메서드를 호출하여 반환된 문자열과 동일합니다.
[1,2,3].toString();//'1,2,3' ['a','b','c'].toString();//'a,b,c' [1,[2,'c']].toString();//'1,2,c'
Alert()는 문자열 매개변수를 받아야 하므로 다음에서 toString을 호출합니다. background () 메서드는 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이거나 정의되지 않은 경우 값은 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() 메소드가 undefine 인 경우 표준 브라우저는 쉼표를 구분 기호로 사용하여 문자열을 반환하는 반면, IE7 브라우저는 'undefine'을 구분 기호로 사용하여 문자열
//标准浏览器为'1,2,3';IE7-浏览器为'1undefined2undefined3' var a = [1,2,3]; console.log(a.join(undefined));
을 반환합니다. 배열의 값이 null이거나 정의되지 않은 경우 이 값은 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' [참고] 객체에 길이 속성이 없으면 배열 클래스가 아니므로 배열 메소드를 호출할 수 없습니다var obj = { 0: 'a', 1: 'b' };
console.log(typeof Array.prototype.join.call(obj, '-'));//''스택 및 큐 메소드push() 및 pop() 메서드를 사용하면 배열을 스택으로 사용할 수 있습니다. unshift() 및 Shift() 메서드의 동작은 push() 및 pop()과 매우 유사합니다. 차이점은 전자가 배열의 꼬리 대신에 요소를 삽입하고 삭제한다는 것입니다. 스택은 LIFO(Last-First-Out, Last-In-First-Out) 데이터 구조입니다. 즉, 가장 최근에 추가된 항목이 가장 먼저 제거됩니다. 스택에 있는 항목의 삽입(푸시라고 함) 및 제거(팝이라고 함)는 스택의 맨 위 위치에서만 발생합니다. JavaScript는 배열이 스택과 같은 동작을 달성하기 위해 특별히 push() 및 pop() 메서드를 제공합니다. 큐 데이터 구조의 액세스 규칙은 FIFO(선입선출, 선입선출, 선입선출)입니다. 밖으로). 대기열은 목록 끝에 항목을 추가하고 목록 앞쪽에서 항목을 제거합니다. 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 두 개의 배열을 병합해야 하는 경우 적용 방법 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을 사용할 수 있습니다. [참고] 호출 방법을 사용할 경우 전체 배열 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() 메소드도 객체에 요소를 추가할 수 있습니다. 추가된 객체는 배열과 같은 객체가 됩니다. 즉, 새로 추가된 요소의 키는 배열의 인덱스이고 객체에 길이 속성이 있습니다.
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() 메서드는 배열의 끝에서 마지막 항목을 제거합니다. 배열, 배열의 길이 값을 줄이고 제거된 항목을 반환합니다. 따라서 배열은 원래 배열을 변경합니다var a = ['a', 'b', 'c']; console.log(a,a.pop()); // ['a', 'b'] 'c'빈 배열에 pop() 메서드를 사용하면 오류가 보고되지 않지만 정의되지 않은
var a = []; console.log(a,a.pop()); // [] undefined
[shift()가 반환됩니다. ]
shift() 메서드는 배열의 첫 번째 항목을 제거하고 반환하는 동시에 배열의 길이를 1씩 줄입니다. 따라서 배열은 원래 배열을 변경합니다.var a = ['a', 'b', 'c']; console.log(a,a.shift());//['b', 'c'] 'a'빈 배열에 Shift() 메서드를 사용하면 오류가 보고되지 않지만 정의되지 않은
var a = []; console.log(a,a.shift());// [] undefined
[unshift()가 반환됩니다. ]
unshift() 메서드는 배열 앞에 원하는 수의 항목을 추가하고 새 배열 길이를 반환합니다. 따라서 배열은 원래 배열을 변경합니다.var a = ['a', 'b', 'c']; console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4unshift()가 여러 매개변수와 함께 호출되면 매개변수는 한 번에 하나씩 삽입되는 것이 아니라 한 번에 삽입됩니다. 이는 최종 배열에 삽입된 요소의 순서가 매개변수 목록
var a = ['a', 'b', 'c']; console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6의 순서와 일치함을 의미합니다.[참고] IE7 브라우저에서 unshift() 메서드는 항상 정의되지 않은
//标准浏览器下，返回[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("p"));
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首次出现的位置，如果没有找到则返回-1
search参数表示要搜索的项；使用严格相等运算符（===）进行比较
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));//-1
start参数表示该搜索的开始位置，该方法会隐式调用Number()转型函数，将start非数字值(undefined除外)转换为数字。若忽略该参数或该参数为undefined或NaN时，start = 0
var 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; 0
var 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第一次出现的位置，如果没有找到则返回-1
search参数表示要搜索的项；使用严格相等运算符（===）进行比较
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));//-1
start表示该搜索的开始位置，该方法会隐式调用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 value
var 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()方法的第二个参数固定this
var obj = {
name: '张三',
times: [1, 2, 3],
print: function () {
//该this指向obj
console.log(this);
this.times.forEach(function (n) {
//该this指向window
console.log(this);
});
}
};
obj.print();var obj = {
name: '张三',
times: [1, 2, 3],
print: function () {
//该this指向obj
console.log(this);
this.times.forEach(function (n) {
//该this同样指向obj
console.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);//2var 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，它才返回false
a = [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，则返回false
a = [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()
以上就是详细介绍JavaScript数组中的22个常用方法的代码详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！