이 기사는 JavaScript 배열 작업 방법을 요약한 것입니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
ECMAScript는 배열에 이미 포함된 항목을 조작하기 위한 다양한 방법을 제공합니다. 여기에서는 이러한 방법에 대해 제가 이해한 내용을 정리합니다. 그 중에서 원래 배열이 바뀔지 여부를 분류 기준으로 먼저 사용하고, 각 방법을 하나씩 설명하겠습니다.
1. 원래 배열은 변경되지 않습니다
1.concat()
사용법: array.concat(array2,array3,.. ,arrayX)
반환값: 새 배열 반환
concat() 메서드는 두 개 이상의 배열을 연결하는 데 사용됩니다. 이 메서드는 기존 배열을 수정하지 않고 연결된 배열의 복사본만 반환합니다.
인수를 전달하지 않으면 현재 배열을 복사하고 복사본을 반환합니다. 전달된 값이 배열이 아닌 경우 해당 값은 결과 배열의 끝에 추가됩니다.
var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]
로그인 후 복사
2.join()
Usage: array.join(separator)
반환 값: 문자열 반환
조인 () 메소드는 배열의 모든 요소를 문자열에 넣는 데 사용됩니다. 요소는 지정된 구분 기호로 구분됩니다. 기본적으로 ','는 요소를 구분하는 데 사용되며 이는 원래 배열을 변경하지 않습니다.
var arr1 = [1,2,3];
var arr2 = arr1.join();
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // 1,2,3
로그인 후 복사
는 이전에 여러 개의 연속된 *를 생성해야 하는 함수를 발견했습니다. 처음에는 for 루프를 사용하여 직접 수행할 수 있었지만 나중에 Join() 메서드를 배운 후에는 수행할 수 있다는 것을 알았습니다. 단 한 문장으로.
var arr3 = "";
for(let i = 0; i < 15; i ++) {
arr3 = arr3 + "*";
}
console.log(arr3); // ***************
var arr4 = new Array(16).join("*");
console.log(arr4); // ***************로그인 후 복사
3.slice()
사용 방법: array.slice(start, end)
반환 값: 처음부터 끝까지를 포함하여 새 배열을 반환합니다(요소 제외). arrayObject에서
slice()는 반환할 항목의 시작 위치와 끝 위치인 하나 또는 두 개의 매개 변수를 허용합니다.
매개변수가 하나만 있으면, Slice() 메소드는 매개변수에 지정된 위치부터 현재 배열의 끝까지 모든 항목을 반환합니다.
매개변수가 두 개인 경우 이 메소드는 시작과 끝 사이를 반환합니다. 항목의 위치 - 끝 위치의 항목은 제외됩니다.
매개변수가 음수인 경우 배열의 끝부분부터 위치를 지정합니다. 즉, -1은 마지막 요소를 나타내고, -2는 마지막 요소에서 두 번째를 나타내는 식입니다.
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2); // 等价于 arr1.slice(2,4);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2); // [ 2, 3, 4, 5, 6 ]
console.log(arr3); // [ 3, 4 ]
console.log(arr4); // [ 3, 4 ]
로그인 후 복사
는 이 방법을 사용하여 의사 배열을 표준 data
Array.prototype.slice.call(arguments)
로그인 후 복사
로 변환합니다
4.some()
Usage 방법: array.some(function(currentValue,index,arr) ,thisValue)
반환 값: 부울 값
또는 ==> some()은 배열의 각 항목에 대해 지정된 함수를 실행합니다. 함수가 항목에 대해 true를 반환하면 나머지 요소는 조건을 충족하는 요소가 없으면 false가 반환됩니다.
function compare(item, index, arr){
return item > 10;
}
[2, 5, 8, 1, 4].some(compare); // false
[20, 5, 8, 1, 4].some(compare); // true로그인 후 복사
5.every()
사용 방법: array.every(function(currentValue,index,arr),thisValue)
반환 값: 부울 값# 🎜🎜#
and ==> Every()는 배열의 각 항목에 대해 지정된 함수를 실행합니다. 함수가 각 항목에 대해 true를 반환하면 나머지 요소는 테스트되지 않습니다. 조건을 만족하는 요소는 false를 반환합니다.
function compare(item, index, arr){
return item > 10;
}
[20, 50, 80, 11, 40].every(compare); // true
[20, 50, 80, 10, 40].every(compare); // false로그인 후 복사
5.filter()
사용 방법: array.filter(function(currentValue,index,arr), thisValue)
반환 값: 배열 반환# 🎜🎜#
filter() 메서드는 새 배열을 생성하며, 지정된 배열에서 조건을 충족하는 모든 요소를 확인하여 새 배열의 요소를 확인합니다.
배열의 각 항목에 대해 주어진 함수를 실행하고 결과가 true인 항목의 배열을 반환합니다.
function filterArr(item, index, arr){
return item > 4;
}
[2, 5, 8, 1, 4].filter(filterArr); // [5,8]로그인 후 복사
6.map()
사용 방법: array.map(function(currentValue,index,arr), thisValue)
반환 값: 배열 반환# 🎜🎜#
map() 메서드는 새 배열을 반환하며 배열의 요소는 함수 호출 후 원래 배열 요소의 값입니다.
function mapArr(item, index, arr){
return item * 4;
}
[2, 5, 8, 1, 4].map(mapArr); // [8,20,32,4,16]로그인 후 복사
필기시험이나 면접에서 자주 나오는 질문은
map 배열 메소드를 구현하는 것입니다. 다음은 제가 직접 작성한
var arr = [2, 4, 8, 6, 1];
Array.prototype.myMap = function (fn, thisValue) {
var arr = this,
len = arr.length,
tmp = 0,
result = [];
thisValue = thisValue || null;
for (var i = 0; i < len; i++) {
var item = arr[i],
index = i;
tmp = fn.call(thisValue, item, index, arr);
result.push(tmp);
}
return result
}
function mapArr(item, index, arr) {
return item * 4;
}
arr.myMap(mapArr) // [8, 16, 32, 24, 4]로그인 후 복사
6 메소드입니다. 🎜#
사용 방법: array.forEach(function(currentValue, index, arr), thisValue)
반환 값: undefine
map数组方法，以下是本人自己写的一个方法
var items = [1, 2, 4, 7, 3];
var copy = [];
items.forEach(function(item,index){
copy.push(item*index);
})
console.log(items); // [ 1, 2, 4, 7, 3 ]
console.log(copy); // [ 0, 2, 8, 21, 12 ]로그인 후 복사
6. forEach()
使用方法：array.forEach(function(currentValue, index, arr), thisValue)
返回值： undefined
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。这个方法没有返回值。
本质上与使用for循环迭代数组一样。
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum);
console.log(numbers); // [ 65, 44, 12, 4 ]
console.log(res); // 125
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum, 10); // 初始值设置为10，所以最终结果也相应的加10
console.log(res); // 135로그인 후 복사
로그인 후 복사
7. reduce() 与 reduceRight()
使用方法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
返回值： 返回计算结果
| 参数 |
描述 |
function(total,currentValue, index,arr) |
必需。用于执行每个数组元素的函数。 |
initialValue | forEach() 방법은 각 요소를 호출하는 데 사용됩니다. 배열 요소의 요소를 콜백 함수에 전달합니다. 이 메서드에는 반환 값이 없습니다. 기본적으로 for 루프를 사용하여 배열을 반복하는 것과 동일합니다. |
var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);
console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6
로그인 후 복사
로그인 후 복사
7.reduce() 및 ReduceRight()
사용 방법: array.reduce(function(total, currentValue, currentIndex, arr),initialValue)#🎜🎜# 반환값: 계산결과 반환#🎜🎜#
| 매개변수 |
설명 | #🎜🎜#
#🎜🎜#함수(total,currentValue, index,arr)#🎜🎜##🎜🎜#필수입니다. 각 배열 요소를 실행하는 데 사용되는 함수입니다. #🎜🎜##🎜🎜#
#🎜🎜#초기값#🎜🎜##🎜🎜#선택사항. 함수 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#에 전달된 초기 값函数参数
| 参数 |
描述 |
total |
必需。初始值, 或者计算结束后的返回值。 |
currentValue |
必需。当前元素 |
currentIndex |
可选。当前元素的索引 |
arr |
可选。当前元素所属的数组对象。 |
这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法中数组的第一项开始，逐个遍历到最后；而reduceRight()则从数组的最后一项开始，向前遍历到第一项。
如果没有设置initialValue，total的值为数组第一项，currentValue为数组第二项。
如果设置了initialValue，则total的值就是initialValue，currentValue为数组第一项。
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum);
console.log(numbers); // [ 65, 44, 12, 4 ]
console.log(res); // 125
var numbers = [65, 44, 12, 4];
function getSum(total,currentValue, index,arr) {
return total + currentValue;
}
var res = numbers.reduce(getSum, 10); // 初始值设置为10，所以最终结果也相应的加10
console.log(res); // 135로그인 후 복사
로그인 후 복사
二、会改变原数组
1. push()
使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新数组的长度
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);
console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6
로그인 후 복사
로그인 후 복사
2. pop()
使用方法：array.pop()
返回值： 数组原来的最后一个元素的值（移除的元素）
pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。
var arr = [65, 44, 12, 4];
var arr1 = arr.pop();
console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); // 4
로그인 후 복사
3. unshift()
使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新数组的长度
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。
var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);
console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); // 5
로그인 후 복사
4. shift()
使用方法：array.shift()
返回值： 数组原来的第一个元素的值（移除的元素）
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。
var arr = [65, 44, 12, 4];
var arr1 = arr.shift();
console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); // 65
로그인 후 복사
5. sort()
使用方法：array.sort(sortfunction)
返回值： 返回排序后的数组（默认升序）
sort() 法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。P.S 由于排序是按照 Unicode code 位置排序，所以在排序数字的时候，会出现"10"在"5"的前面，所以使用数字排序，你必须通过一个函数作为参数来调用。
var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values); // [ 0, 1, 10, 15, 5 ]
values.sort(function(a, b){
return a - b;
})
console.log(values); // [0, 1, 5, 10, 15 ]로그인 후 복사
6. reverse()
使用方法：array.reverse()
返回值： 返回颠倒后的数组
reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。
var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values); // [ 15, 10, 5, 1, 0 ]
로그인 후 복사
7. fill()
使用方法：array.fill(value, start, end)
返回值： 返回新的被替换的数组
fill()方法用于将一个固定值替换数组的元素。
| 参数 |
描述 |
| value |
必需。填充的值。 |
| start |
可选。开始填充位置。 |
| end |
可选。停止填充位置(不包含) (默认为 array.length) |
var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values); // [ 2, 2, 2, 2, 2 ]
values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values); // [ 0, 1, 5, 2, 15 ]
로그인 후 복사
8. splice()
使用方法：array.splice(index,howmany,item1,.....,itemX)
返回值： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组
splice()有多种用法：
1、删除: 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。splice(0,2) // 会删除数组中前两项
2、插入: 可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。splice(2,0,1,4) // 会从数组位置2的地方插入1和4
3、替换: 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需提供3个参数：起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。splice(2,3,1,4) // 会从数组位置2删除两项，然后再从位置2的地方插入1和4
// 删除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values); // [ 4, 8, 0, 7 ]
console.log(remove); // [ 3 ] 删除第四项
// 插入
remove = values.splice(2,0,1,2);
console.log(values); // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove); // [] 从位置2开始插入两项，由于没有删除所有返回空函数
// 替换
remove = values.splice(2,2,6,9,10);
console.log(values); // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove); // [ 1, 2 ] 从位置2开始删除两项，同时插入三项
로그인 후 복사
위 내용은 JavaScript 배열 조작 방법 요약(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
