이 문서에서는 ES5 및 ES6 배열 방법에 대한 요약을 공유합니다. 필요한 친구는
Array 개체 속성
constructor 이 개체를 생성하는 배열 함수에 대한 참조를 반환합니다.
length 배열의 요소 수를 설정하거나 반환합니다.
prototype을 사용하면 객체에 속성과 메서드를 추가할 수 있습니다.
전통적인 배열 객체 메서드
toSource() 객체의 소스 코드를 반환합니다.
toString() 배열을 문자열로 변환하고 결과를 반환합니다.
toLocaleString() 배열을 로컬 배열로 변환하고 결과를 반환합니다.
valueOf() 배열 객체의 원래 값을 반환합니다.
원래 배열을 수정합니다.
push() 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
unshift() 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
pop() 배열의 마지막 요소를 삭제하고 반환합니다.
shift() 배열의 첫 번째 요소를 삭제하고 반환합니다.
sort() 배열의 요소를 정렬합니다.
reverse() 배열의 요소 순서를 반대로 바꿉니다. 정렬.
splice()는 요소를 제거하고 배열에 새 요소를 추가합니다.
splice
Syntax
arrayObject.splice(index,howmany,item1,...,itemX)
var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr.splice(2,1); //"George", "John"
arr.splice(1,0,"William"); //"George", "William", "John"
arr.splice(2,1,"haha"); //"George", "William", "haha"
로그인 후 복사
원래 배열을 수정하지 않습니다
concat() 두 개 이상의 배열을 연결하고 결과를 반환합니다.
join() 배열의 모든 요소를 문자열에 넣습니다. 요소는 지정된 구분 기호로 구분됩니다.
slice() 기존 배열에서 선택한 요소를 반환합니다.
slice
Syntax
arrayObject.slice(start,end);
var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr.slice(2,1); //[]
arr.slice(1,2); //"William"
arr.slice(-2,-1); //"William"
로그인 후 복사
배열과 유사한 객체(인수 등)를 실제 배열로 변환
Array.prototype.slice.call(arguments);
ES5 new array
-
인덱스 메서드: indexOf(), lastIndexOf( )
반복 메서드: forEach(), map(), filter(), some(), Every()
병합 메서드: Reduce(), ReduceRight()
메서드는 수정되지 않습니다. 원본 array
index method
indexOf
array.indexOf(searchElement[, fromIndex])
로그인 후 복사
은 정수 인덱스 값을 반환합니다. 일치하는 항목이 없으면(엄격한 일치) -1이 반환됩니다.
fromIndex는 선택 사항이며, 기본값이나 형식이 요구 사항을 충족하지 않는 경우 기본값 0을 사용합니다.
var data = [2, 5, 7, 3, 5];
console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)로그인 후 복사
lastIndexOf
array.lastIndexOf(searchElement[, fromIndex])
로그인 후 복사
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 (未找到)
로그인 후 복사
두 메서드는 첫 번째 매개변수를 배열의 각 항목과 비교할 때 동등 연산자를 사용합니다. 그들은 완전히 동일해야 하며, 그렇지 않으면 -1이 반환됩니다.
반복 방법
각 방법은 두 개의 매개변수를 허용하는데, 첫 번째 매개변수는 콜백(콜백 함수, 필수)이고 두 번째 매개변수는 선택적 컨텍스트 매개변수입니다.
첫 번째 매개변수 콜백은 현재 항목의 값, 배열에 있는 현재 항목의 인덱스, 배열 객체 자체의 세 가지 매개변수를 허용합니다. 즉, function(value,index,arr) {}; 우리가 일반적으로 사용하는 jQuery에 캡슐화된 메소드와의 차이점은 첫 번째 매개변수와 두 번째 매개변수, 즉 index와 value의 순서가 반대라는 점에 유의해야 합니다. .
두 번째 매개변수는 선택적 컨텍스트 매개변수로, 위에서 언급한 콜백에서 this가 가리키는 값인 첫 번째 함수 매개변수를 실행하는 범위 개체입니다. 두 번째 선택적 매개변수를 지정하지 않으면 전역 객체가 대신 사용되거나(브라우저의 창) 엄격 모드에서는 정의되지 않은 경우도 있습니다.
forEach() 메서드를 제외하고 다른 반복 메서드의 콜백에는 반환 값이 있어야 하며, 그렇지 않으면 정의되지 않은 반환이 발생한다는 점에 유의해야 합니다.
forEach
forEach()는 배열을 반복하고 배열의 각 항목에 대해 지정된 함수를 실행합니다. 이 메서드에는 반환 값이 없습니다.
[].forEach(function(value, index, array) {
// ...
}, [ thisObject]);로그인 후 복사
[1, 2, 3, 4].forEach(function (item, index, array) {
console.log(array[index] == item); // true
sum += item;
});
alert(sum); // 10
var database = {
users: ["张含韵", "江一燕", "李小璐"],
sendEmail: function (user) {
if (this.isValidUser(user)) {
console.log("你好，" + user);
} else {
console.log("抱歉，"+ user +"，你不是本家人");
}
},
isValidUser: function (user) {
return /^张/.test(user);
}
};
// 给每个人法邮件
database.users.forEach( // database.users中人遍历
database.sendEmail, // 发送邮件
database // 使用database代替上面标红的this
);
// 结果：
// 你好，张含韵
// 抱歉，江一燕，你不是本家人
// 抱歉，李小璐，你不是本家로그인 후 복사
map
map()은 다음을 참조합니다. "mapping"”으로 배열의 각 항목에 대해 지정된 함수를 실행하고 각 함수 호출의 결과로 구성된 배열을 반환합니다.
[].map(function(value, index, array) {
// ...
}, [ thisObject]);로그인 후 복사
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16로그인 후 복사
filter
filter()，“过滤”，对数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
array.filter(callback,[ thisObject]);
로그인 후 복사
var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
return value % 3 === 0;
});
console.log(flag); // [3, 6, 9]로그인 후 복사
every
every()，判断数组中每一项都是否满足所给条件，当所有项都满足条件，才会返回true。
array.every(callback,[ thisObject]);
로그인 후 복사
var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
return value % 2 === 0;
});
console.log(flag); // false로그인 후 복사
some
some()，判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
array.some(callback,[ thisObject]);
로그인 후 복사
var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
return value % 2 === 0;
});
console.log(flag); // true로그인 후 복사
归并方法
这两个方法相比前面可能稍微复杂一些，它们都会迭代数组中的所有项，然后生成一个最终返回值。这两个方法接收两个参数。
reduce
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 对于空数组是不会执行回调函数的。
array. reduce(function(total, currentValue, currentIndex, array) {
// ...
});로그인 후 복사
var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
return total * curr;
});
console.log(sum9); // 24
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
return total * curr;
}, 10);
console.log(sum9_1); // 240로그인 후 복사
reduceRight
reduceRight()和reduce()相比，用法类似，差异在于reduceRight是从数组的末尾开始实现的。
array.reduceRight(callback,[ thisObject]);
로그인 후 복사
var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
return total - curr;
},200);
console.log(flag); // 3
console.log(flag_1); // 43로그인 후 복사
위 내용은 ES5 및 ES6 배열 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
