새로운 배열 메소드: 1. 배열 유사 객체 또는 반복 가능한 객체를 실제 배열로 변환할 수 있는 from() 2. 일련의 값을 배열로 변환할 수 있는 of(), 이는 단점을 보완합니다. 배열 생성자 Array() 3. find() 및 findIndex(), 조건을 충족하는 첫 번째 배열 요소를 반환합니다. 4. fill() 등.
VUE3.0을 빠르게 시작하는 방법:
이 튜토리얼의 운영 환경인 Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터로 들어갑니다.
1. Array.from()
Array.from 메소드는 두 가지 유형의 객체를 실제 배열로 변환하는 데 사용됩니다:
배열과 유사한 객체와
반복 가능한 객체(ES6 new 데이터 구조 Set 및 Map 포함)
는 Iterator 인터페이스의 데이터 구조가 배포됨에 따라 Array.from은 이를 배열로 변환할 수 있습니다.
실제 개발에서는 일반적으로 DOM 작업에서 반환된 NodeList 컬렉션과 함수 내부의 인수를 변환하는 데 사용할 수 있습니다. 객체가
매개변수를 전달하면 중복을 제거하기 위해 클래스 배열을 실제 배열 배열로 변환하는 데 사용됩니다
.
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))) //[1,2,3,5] //...동일한 효과를 얻을 수도 있습니다. console.log([...new Set(arr)]) //[1,2,3,5]
이 메서드를 배포하지 않는 브라우저의 경우 다음을 사용할 수 있습니다.
cosnt대신 Array.prototype.slice 메소드
toArray = (() => {
Array.from ? Array.from : obj => [].slice.call(obj)
})()는 두 번째 매개변수를 받을 수도 있습니다. 이 매개변수는 함수에 전달되어 map 메소드와 유사한 효과를 얻고, 각 요소를 처리하고 처리된 배열을 반환합니다.
Array.from([1,2,3 ], item => 항목 *2) //[2,4,6]
반환된 문자열의 길이를
사용하여 문자열을 배열로 변환한 다음 문자열의 길이를 반환할 수 있습니다. 다양한 유니코드 문자를 올바르게 처리할 수 있기 때문입니다. /uFFFF보다 큰 유니코드 문자를 2자로 계산하는 JS 자체 버그
function countLength(string) {
return Array.from(string).length
} 2. Array.of()
Array.of 메소드는 일련의 값을 배열로 변환하는 데 사용됩니다. 배열 생성자 Array()의 단점을 보완합니다. 매개변수 개수가 다르기 때문에 Array()의 동작도 달라집니다.
//다음 코드는 차이점을 보여줍니다. Array.of(3) // [3]
Array.of(3, 11, 8) // [3,11,8]
새로운 배열(3); // [, , ,]
새로운 배열(3, 11, 8); // [3, 11, 8]
//Array.of 메서드는 다음 코드로 시뮬레이션할 수 있습니다.
함수 ArrayOf() {
return [].slice.call(인수);
} 3. 배열 인스턴스의 Find() 및 findIndex()는
조건
을 충족하는 첫 번째 배열 구성원을 반환합니다. 해당 매개 변수는 콜백 함수입니다. 모든 배열 구성원은 조건을 충족하는 첫 번째 항목까지 이 함수를 실행합니다. 조건을 만족하는 멤버가 없으면 정의되지 않은 값을 반환합니다.
이 메서드의 콜백 함수는 현재 값, 현재 위치, 원본 배열
예제 1
[1,12,4]을 받습니다.
,0,5] .find((item,index, arr) => return item < 1) // 0
예시 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(항목); // -5
// find는 이런 종류의 복잡한 검색도 지원합니다. var points = [
{
x: 10,
y: 20
},
{
엑스: 20,
예: 30
},
{
x: 30,
예: 40
},
{
엑스: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.find(함수 matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } findIndex()
의 작성 및 사용법은기본적으로 find() 메소드와 동일합니다. 조건에 맞는 첫 번째 배열 멤버의 위치를 반환합니다. 값이 없으면 -1을 반환합니다.
예시 1
[1 ,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3예
2
var points = [
{
x: 10,
y: 20
},
{
엑스: 20,
예: 30
},
{
x: 30,
예: 40
},
{
엑스: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.findIndex(함수 matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(함수 matcher(point) {
return point.x % 6 == 0 && point.y % 7 == 0;
}); //1 4. 배열 인스턴스의 fill(
// 채우기 메소드는 주어진 값으로 배열을 채웁니다.
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//채우기 메소드는 채우기의 시작 및 끝 위치를 지정하는 데 사용되는 두 번째 및 세 번째 매개변수를 허용할 수도 있습니다.
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 채워진 유형이 객체인 경우 할당된 객체는 깊은 복사 객체가 아닌 동일한 메모리 주소입니다.
arr = new Array(3).fill({
이름: "마이크"
});
arr[0].name = "벤";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] 두 메서드 모두 배열에서 NaN을 찾을 수 있지만 ES5의 indexOf()는 NaN 5를 찾을 수 없습니다.
배열 인스턴스의 항목(), 키() 및 값()
메소드
는모두 배열을 순회하는 데 사용되며 모두 순회 객체를 반환합니다. for...of 루프를 사용하여 배열을 순회할 수 있습니다.
keys()는
키 이름의 쌍입니다.values()의 순회는
키 값의 순회
입니다.
()) {
console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
//ab
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "비"
var a = [1, 2, 3];
[...a.values()] // [1,2,3]
[...a.keys()] // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. include() 메서드는 부울 값을 반환합니다
. , 배열에 주어진 값
[1, 2, 3]이 포함되어 있는지 여부를 나타냅니다.includes(2) // true [(1, 2, 3)].includes(4) // false는
검색 시작 위치를 나타내는 두 번째 매개변수도 받을 수 있으며 기본값은 0입니다. 두 번째 매개변수가 음수이면 숫자의 위치를 나타냅니다. 두 번째 매개 변수가 배열 길이보다 큰 경우 포함 메서드는
의미론이 충분하지 않고 NaN[1, 23, NaN].includes(NaN)
을 잘못 판단하는 indexOf 메서드의 단점을 보완하기 위해
아래 첨자 0부터 시작합니다.//진정한
호환 방법:
함수 = ( () => {
배열.프로토타입.포함
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => 반환 항목 === val)
})() 7. 배열 인스턴스의 Flat(), flatMap()
// flat()
[1, 2, [3, [4, 5]]].플랫()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].플랫(2)
// [1, 2, 3, 4, 5]
//플랫맵()
[2, 3, 4]. flatMap((x) => [x, x * 2])
//map이 실행된 후에는 [[2, 4], [3, 6], [4, 8]]입니다.
//그런 다음 flat() 메서드를 실행하여 다음 결과를 얻습니다. // [2, 4, 3, 6, 4, 8]
// flatMap()은 배열의 한 수준만 확장할 수 있습니다.
// .Flat()과 동일
[1, 2, 3, 4].플랫맵(x => [
[x*2]
])
//맵이 실행된 후 [[[2]], [[4]], [[6]], [[8]]]
//그런 다음 flat() 메서드를 실행하여 다음 결과를 얻습니다. // [[2], [4], [6], [8]] 코드 복사 8. 배열 인스턴스의 copywithin()은
멤버를 다음 위치에 복사합니다. 현재 배열 내의 지정된 위치 다른 위치에 복사한 다음 현재 배열로 돌아가면 원래 배열이
세 가지 매개변수를 받도록 변경됩니다:
1. 대상(필수) 이 위치에서 데이터 교체 시작
2. 시작(선택 사항) 이 위치에서 데이터 읽기를 시작합니다. 기본값은 0입니다. 음수인 경우
숫자 3에 도달하기 전에 데이터 읽기를 중지한다는 의미입니다. (선택 사항) 기본값은 배열 길이와 같습니다. 음수이면
세 매개변수가 모두 숫자여야 한다는 의미입니다. 그렇지 않으면 자동으로 숫자 값으로 변환됩니다.
[1,2,3,4,5].copywithin(0,3)/ /[4,5,3 ,4,5]는 아래 첨자 3부터 끝까지(4,5)까지의 멤버를 아래 첨자 0부터 시작하는 위치에 복사하고, 원래의 1과 2를 대체한다는 의미입니다.