es6 배열 메서드: 1. map 메서드, 3. findIndex 메서드, 5. 모든 메서드, 7. ReduceRight 메서드, 10. 키 방법 등
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
배열은 동일한 데이터 유형의 데이터를 특정 순서로 배열한 집합입니다. JavaScript 언어 표준 ES6(ECMAScript 6)의 새 버전에서 ES6은 배열에 몇 가지 새로운 기능을 추가하며, 이러한 새로운 기능은 대규모 데이터 수집에 직면했을 때 배열의 데이터 처리 기능을 확장하여 종종 누적 및 필터링을 완료할 수 있습니다. 반복 작업, 변환 및 기타 작업 없이. 이 문서에서는 ES6에서 제공하는 몇 가지 새로운 기능을 배열에 사용하는 방법을 요약합니다.
는 메소드를 공식화하여 배열의 각 요소를 처리하고 처리된 배열을 반환합니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.map((currentValue,index,arr) => {
console.log("当前元素"+currentValue);
console.log("当前索引"+index);
if (currentValue>20) {
return currentValue-10;
} else {
return currentValue-5;
}
})
console.log(arr1)
//另一种形式
let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
return item + index + array[index] + this.val;
//对第一个元素，1 + 0 + 1 + 5 = 7
//对第二个元素，2 + 1 + 2 + 5 = 10
//对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]find 메소드는 요구 사항을 충족하는 첫 번째 요소를 반환하고 findIndex 메소드는 요구 사항을 충족하는 첫 번째 요소의 첨자를 반환합니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.find((currentValue, index) => {
return currentValue>20;
})
var arr2 = arr.findIndex((currentValue, index) => {
return currentValue>20;
})
console.log(arr,arr1,arr2);
//数组元素为对象
var allPeple = [
{name: '小王', id: 14},
{name: '大王', id: 41},
{name: '老王', id: 61}
]
var PId = 14; //假如这个是要找的人的ID
var myTeamArr = [{name: '小王', id: 14}]
function testFunc(item){return item.id == PId ;}
//判断myteam里是不是有这个人，如果==-1 代表没有，在allPeople中找到他，添加入我的队伍
myTeamArr.findIndex(testFunc) == -1
? myTeamArr.push(allPeple.find(testFunc))
: console.log('已存在该人员');
//检索满足条件的对象
var stu = [
{name: '张三', gender: '男', age: 20},
{name: '王小毛', gender: '男', age: 20},
{name: '李四', gender: '男', age: 20}
]
var obj = stu.find((element) => (element.name == '李四'))
console.log(obj);
console.log(obj.name);
[1,2,3].findIndex(function(x) {x == 2;});
// Returns an index value of 1.
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1는 배열의 요소를 검색하고 요구 사항을 충족하는 모든 요소를 배열 형식으로 반환합니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.filter((currentValue, index) => {
return currentValue>20;
})
console.log(arr,arr1);
//逻辑属性的筛选
var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
// 保留奇数项
let nums = [1, 2, 3];
let oddNums = nums.filter(item => item % 2);
console.log(oddNums);는 배열의 각 요소가 조건을 충족하는지 여부를 감지합니다. 그렇다면 true를 반환하고 그렇지 않으면 false를 반환합니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.every((currentValue, index) => {
return currentValue>20;
})
console.log(arr,arr1);는 조건을 충족하는 요소가 배열에 있는지 여부를 감지합니다. 그렇다면 true를 반환하고 그렇지 않으면 false를 반환합니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.some((currentValue, index) => {
return currentValue>20;
})
console.log(arr,arr1);는 누산기(accumulator)로 함수를 받습니다(왼쪽에서 오른쪽으로). 배열의 각 값은 감소하기 시작하고 최종적으로 값이 됩니다. Reduce는 마지막 값인 PreviousValue, 현재 값인 CurrentValue, 현재 값의 인덱스, 배열 배열 등 4개의 매개변수가 있는 함수를 허용합니다.
reduceRight 메서드는 축소 메서드와 동일하며 둘 다 배열의 누적 개수를 찾습니다. 차이점은 ReduceRight()는 배열의 끝부터 배열의 배열 항목을 누적한다는 것입니다.
reduceRight()가 콜백 함수인 callbackfn을 처음 호출할 때 prevValue와 curValue는 두 값 중 하나일 수 있습니다. ReduceRight()가initialValue 인수와 함께 호출되면 prevValue는initialValue와 같고 curValue는 배열의 마지막 값과 같습니다. initialValue 매개변수가 제공되지 않으면 prevValue는 배열의 마지막 값과 같고 curValue는 배열의 마지막에서 두 번째 값과 같습니다.
console.clear();
var arr = [0,1,2,3,4];
var total = arr.reduce((a, b) => a + b); //10
console.log(total);
var sum = arr.reduce(function(previousValue, currentValue, index, array){
console.log(previousValue, currentValue, index);
return previousValue + currentValue;
});
console.log(sum);
//第二个参数为5，第一次调用的previousValue的值就用传入的第二个参数代替
var sum1 = arr.reduce(function(previousValue, currentValue, index){
console.log(previousValue, currentValue, index);
return previousValue + currentValue;
},5);
console.log(sum1);
var sum2 = arr.reduceRight(function (preValue,curValue,index) {
return preValue + curValue;
}); // 10
var sum3 = arr.reduceRight(function (preValue,curValue,index) {
return preValue + curValue;
}, 5); // 15
//计算数组arr的平方和
var arr1 = arr.map((oVal) => {return oVal*oVal;})
console.log(arr1);
var total1 = arr1.reduce((a, b) => a + b); //30
console.log(total1);
//计算指定数组和
let nums = [1, 2, 3, 4, 5];// 多个数的累加
let newNums = nums.reduce(function(preSum,curVal,array) {
return preSum + curVal;
}, 0);
console.log(newNums)//15는 배열의 요소를 반복하며, 이는 for 루프와 동일하며 반환 값이 없습니다.
console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.forEach((currentValue, index) => {
console.log(currentValue, index);
})ES6은 배열 탐색을 위해 항목(), 키() 및 값()이라는 세 가지 새로운 방법을 제공합니다. 둘 다 for...of 루프를 사용하여 탐색할 수 있는 순회 객체를 반환합니다. 유일한 차이점은 키 이름을 순회하고, 값()은 키 값을 순회하며, 항목()은 키 값을 순회한다는 것입니다.
console.clear();
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"Array.from() 메서드는 주로 두 가지 유형의 객체(배열 유사 객체[배열 유사 객체] 및 탐색 가능한 객체[반복 가능])를 실제 객체로 변환하는 데 사용됩니다. 정렬.
console.clear();
//类似数组的对象转为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
console.log(Array.from(arrayLike)); // ["a","b","c"]
//字符转数组
let arr = Array.from('w3cplus.com') //字符转数组
console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]
//Set数据转数组
let namesSet = new Set(['a', 'b']) //new Set创建无重复元素数组
let arr2 = Array.from(namesSet); //将Set结构数据转为数组
console.log(arr2); //["a","b"]
//转换Map数据
let m = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(Array.from(m)); // [[1, 2], [2, 4], [4, 8]]
//接受第二个参数为map转换参数
var arr = Array.from([1, 2, 3]); //返回一个原样的新数组
var arr1 = Array.from(arr, (x) => x * x)
console.log(arr1); // [1, 4, 9]
var arr2 = Array.from(arr, x => x * x);
console.log(arr2); // [1, 4, 9]
var arr3 = Array.from(arr).map(x => x * x);
console.log(arr3); // [1, 4, 9]
//大样本生成
var arr4 = Array.from({length:5}, (v, i) => i);
console.log(arr4); // [0, 1, 2, 3, 4]
//第三个参数为diObj对象，map函数中this指向该对象
//该功能实现由对象自带方法转换数据
let diObj = {
handle: function(n){
return n + 2
}
}
console.log(Array.from(
[1, 2, 3, 4, 5],
function (x){return this.handle(x)},
diObj
)) //[3, 4, 5, 6, 7]copyWidthin 메소드는 지정된 위치의 배열 항목을 현재 배열 내의 다른 위치(원본 배열 항목은 덮어쓰게 됨)에 복사한 후 현재 배열을 반환할 수 있습니다. copyWidthin 메소드를 사용하면 현재 배열이 수정됩니다.
copyWidthin은 세 개의 매개변수 [.copyWithin(target, start = 0, end = this.length)]를 허용합니다:
console.clear(); var arr = [1, 2, 3, 4, 5]; //从下标3开始提取2个（5-3=2）元素到下标0 var arr = arr.copyWithin(0, 3, 5); console.log(arr);
채우기 방법은 주어진 값으로 배열을 채웁니다. 이 방법은 빈 배열을 초기화하는 데 매우 편리합니다. 배열의 기존 요소가 모두 지워집니다.
fill 메소드는 채우기의 시작 및 끝 위치를 지정하는 데 사용되는 두 번째 및 세 번째 매개변수도 사용할 수 있습니다.
console.clear();
var arr = ['a', 'b', 'c',,,];
arr.fill(0, 2, 5);
console.log(arr); // ["a", "b", 0, 0, 0]
arr.fill(0, 2);
console.log(arr); // ["a", "b", 0, 0, 0]
arr = new Array(5).fill(0, 0, 3);
console.log(arr); // [0, 0, 0, empty × 2]
arr = new Array(5).fill(0, 0, 5);
console.log(arr); // [0, 0, 0, 0, 0]
console.log(new Array(3).fill({})); //[{…}, {…}, {…}]
console.log(new Array(3).fill(1)); //[1, 1, 1]ES6은 새로운 데이터 구조인 Set을 제공합니다. 배열과 유사하지만 멤버의 값이 고유하고 중복되는 값이 없습니다.
console.clear();
var s = new Set();
[2,3,5,4,5,2,2].forEach(x => s.add(x));
console.log(s); //{2, 3, 5, 4}
for(let i of s) {console.log(i);} //Set对象循环
var set = new Set([1,2,3,4,4]);
//符号”...“将一个数组转为用逗号分隔的参数序列
console.log([...set]); //[1, 2, 3, 4]
var items = new Set([1,2,3,4,5,5,5,5,]);
console.log(items.size); //5，元素个数
// add添加元素
var set = new Set();
set.add("a");
set.add("b");
console.log(set); //{"a", "b"}
var s = new Set();
s.add(1).add(2).add(2); //链式添加
console.log(s.size);
console.log(s.has(1)); //has判断元素1是否存在
console.log(s.has(2)); //true
console.log(s.has(3)); //false
s.delete(2); //删除第2个元素
console.log(s.has(2)); //false
// set转数组
var items = new Set([1,2,3,4,5]);
var array = Array.from(items);
console.log(array); //[1, 2, 3, 4, 5]
// 数组的 map 和 filter 方法也可以间接用于Set
var s = new Set([1,2,3]);
s = new Set([...s].map(x => x * 2));
console.log(s); //{2, 4, 6}
s = new Set([...s].filter(x => (x % 3) ==0));
console.log(s); //6，被3整除
// 实现并集、交集、差集
var a = new Set([1,2,3]);
var b = new Set([4,3,2]);
//并集
var union = new Set([...a, ...b]);
console.log(union);
//交集
var intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect);
//差集
var difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference);
//遍历数据同步改变原来的Set结构
// 利用原Set结构映射出一个新的结构
var set1 = new Set([1,2,3]);
set1 = new Set([...set1].map(val => val *2));
console.log(set1);
// 利用Array.from
var set2 = new Set([1,2,3]);
set2 = new Set(Array.from(set2, val => val * 2));
console.log(set2);Map 객체를 사용하여 키-값 쌍을 저장하고 키의 원래 삽입 순서를 기억할 수 있습니다. 모든 값(객체 또는 기본 요소)을 키 또는 값으로 사용할 수 있습니다. Map은 키-값 쌍 구조의 집합으로 검색 속도가 매우 빠릅니다.
console.clear(); var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85]; //Map键值对的结构 var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); console.log(m.get('Michael')); // 95 //初始化Map需要的二维数组 var m = new Map(); // 空Map m.set('Adam', 67); // 添加新的key-value m.set('Bob', 59); console.log(m.has('Adam')); // 是否存在key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // 删除key 'Adam' console.log(m.get('Adam')); // undefined //key相同时，后面的值会把前面的值冲掉 var m = new Map(); m.set('Adam', 67); m.set('Adam', 88); console.log(m.get('Adam')) // 88
ES6新版本JavaScript语言给数组添加了许多面向大数据处理的新功能，使得JS在数据处理量和速度方面有了质的提升。需要提示的是，当我们处理的数据量较大时，建议使用Google Chrome浏览器。ES6数组+Chrome浏览器，使得JS在数据处理功能产生变革，完全可以媲美Python或R语言等数据处理软件。
提示：本页中JS脚本代码可复制粘贴到JS代码运行窗口调试体验； 文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴
【推荐学习：javascript高级教程】
위 내용은 javascript es6의 배열 메소드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
