ES6 새 특성의 배열, Math 및 확장 연산자 사용 예

본 논문의 실례는 ES6의 새로운 특성의 그룹, Math, 확장 조작법의 사용법을 설명한다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
Array
Array 객체에는 새로운 정적 방법이 추가되었고 Array 원형에도 새로운 방법이 추가되었습니다.
1.Array.from 클래스 배열 및 반복 가능한 객체에서 Array 인스턴스 만들기
클래스 그룹의 대상은 함수 중의arguments,document입니다.getElementsByTagName () 이 되돌아오는 nodeList 대상, 새로 추가된 맵과 Set 데이터 구조.

//in ES6   
let itemElements=document.querySelectorAll('.item');
let items=Array.from(itemElements);
items.forEach(function(item){
   console.log(item.nodeType);
});
//in ES5  
var items=Array.prototype.slice.call(itemElements);

위의 예에서 클래스 그룹 대상 itemElements 대상은 그룹 방법 forEach () 를 갖추지 못하지만 Array를 통과할 수 있습니다.from() 메서드가 Array로 변환됩니다.
Array.from () 의 또 다른 특징은 두 번째 선택할 수 있는 매개 변수 맵 Function입니다. 이 매개 변수는 한 번의 단독 호출을 통해 새로운 맵 그룹을 만들 수 있습니다.

let navElements=document.querySelectorAll("nav li");
let navTitles=Array.from(navElements,el=>el.textContent);

2.Array.of 방법
이 방법은 Array의 구조 함수와 매우 비슷하게 표현되어 하나의 매개 변수만 전달하는 상황에 적합하기 때문에 Array.of는 new Array ()의 더 좋은 선택이기 때문에, 그룹을 구축하는 방식은 현재 세 가지가 있습니다.

let x=new Array(3);// [undefined,undefined,undefined]
let y=Array.of(8);//[8]
let z=[1,2,3];

3. Array의find,findIndex,fill 방법
1)find 반환 반환true의 첫 번째 요소 2)findIndex 반환 반환 반환 함수 반환true의 첫 번째 요소의 아래 첨자 3)fill은 주어진 매개 변수로 '덮어쓰기' 그룹의 요소를 사용합니다

[5,3,4,10,1].find(n=>n===10);//10
[5,3,4,10,1].findIndex(n=>n===10);//2
[5,3,4,10,1].fill(7);//[7,7,7,7,7]
[5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]

2. Math
Math 객체에는 다음과 같은 몇 가지 새로운 방법이 추가되었습니다.

//Math.sign ， 1、-1 0
   Math.sign(5);//1
   Math.sign(-9)//-1
//Math.trunc  
   Math.trunc(5.9);//5
   Math.trunc(6.8908);//6
//Math.cbrt 
   Math.cbrt(64);//4

3. 확장 조작부호
확장 조작부호는 특정한 곳에서 원소를 확장하는 데 사용됩니다. 예를 들어 하나의 수조에서 하나의 수조를 확장하는 원소입니다.

let values=[1,2,4];
let some=[...values,8];//[1,2,4,8]
let more=[...values,8,...values];//[1,2,4,8,1,2,4]

또한 함수 호출의 매개 변수에 적용됩니다.

let values=[1,2,4];
doSomething(...values);
function doSomething(x,y,z){
  //x=1.y=2,z=4
}
// ES5 
doSomething.apply(null,values);

보시다시피 이 문법은 우리로 하여금 fn.apply () 의 번거로움은 매개 변수 목록의 임의의 위치에 사용할 수 있기 때문에 매우 유연합니다.
우리는 이미 확장 조작부호를 수조와 매개 변수에 응용하는 것을 보았는데, 사실상 우리는 그것을 모든 비교 가능한 사례의 대상에 사용할 수 있다.

let form = document.querySelectorAll('#my-form').
  inputs=form.querySelectorAll('input');
  selects=form.qurySelectorAll('select');
let allTheThings=[form,...inputs,...selects];

현재 allTheThings는 노드, 하위 노드, 하위 노드를 포함하는 2차원 그룹입니다.
이 문서가 ECMAScript 프로그램 설계에 도움이 되었으면 합니다.