앞서 말씀드린 대로
배열에는 총 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）！
JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr
Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AMNode.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다
Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.
JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AMJavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.
무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AMJavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.
파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AMPython 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.
Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.
JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
