템플릿 문자열
이것은 내가 매우 좋아하는 ES6의 특성 중 하나입니다. 변수와 문자열 사이의 관계를 직관적으로 반영합니다. ES5에서는 문자열에 변수를 추가하려면 다음 작성 방법을 사용해야합니다.
Animate (box, 'translate (-' + itemwidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'translate (-800px, 0)'; flag = true;});이제 ES6 템플릿 문자열을 사용하여 문자열과 변수를 직접 결합하여 이해하기 쉽게 할 수 있습니다.
애니메이션 (box,`translate (-$ {itemwidth*num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform =`transle (itemberdith*(item.length-2)} px, 0)`; flag = true;});매우 직관적이고 편리합니까? 위의 두 가지 간단한 예에서 ES6에서 문자열에는 백티크 (``)가 표시되어 있어야합니다.
또 다른 기능이 있습니다. 템플릿 문자열은 기존 ES5 문자열에서 불가능한 접힌 문자열을 출력 할 수 있습니다. 사용해야하며 (/n), 쓸 때 마차 반품을 입력하기 위해 작성할 수 없습니다. 그러나 ES6 문자열 템플릿에서는 문자열이 출력되면 캐리지 리턴, 공간을 입력 한 다음 직접 출력되도록 직접 작성하여 매우 편리합니다.
mystring =`abcdeffff fas`; console.log (mystring);/*출력 abcdeffff fas*/
함수 확장
1. 함수의 기본값을 설정하십시오
함수의 확장에서 함수가 함수의 기본값을 설정하도록 함수가 추가되어 매우 양호하다고 말할 수 있습니다. ES5의 함수에 대한 기본값을 어떻게 설정했는지 기억하십니까?
함수 테스트 (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; Console.log (A+B+C);}여기서 우리는 하루까지 예상 효과를 달성하기 위해 기본값을 설정하고, 우리는 a = 0 인치를 통과합니다.이 시간에, 우리 가이 방법을 작성하는 것은 잘못입니다. 프로그램의 경우 0은 False이므로 A는 기본값을 10이므로 예상 효과를 달성하지 못합니다. 그러나 ES6은 기본값을 설정하는 아주 좋은 방법을 제공합니다. 위의 코드는 다음과 같이 다시 작성할 수 있습니다.
함수 테스트 (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. 화살표 기능
Cofficscript를 이해하는 학생들은 Cofficescript의 힘이 유비쿼터스 화살표 기능이라는 것이 분명해야합니다. 이제 ES6은 공식적으로 화살표 기능을 도입하여 프로그램을 단순화 할 수 있습니다.
// es5 var test = function (a, b) {return a+b;} // es6 var test2 = test (a, b) => a+b;회전 목마를 작성할 때는 작은 점의 배열 객체의 다음 작은 점으로 마우스를 이동시켜 그래프가 올바른 위치로 이동할 수 있도록해야합니다. ES5에서는 현재 객체에 속성을 추가해야합니다.이 객체는 쓰기가 더 번거롭고 쓰기 방법은 다음과 같습니다.
var lilist = docum lilist [i] .addeventListener ( 'mouseEnter', function () {console.log (this.index);}, false);}이 is.index 속성은 현재 마우스에 배치 된 요소의 인덱스이며,이 인덱스에 따라 현재 요소가 얻어집니다. 그러나 ES6에서는 배열에서 화살표 기능과 새로 소개 된 FindIndex를 직접 사용하여 현재 활성 요소의 인덱스를 찾을 수 있습니다. 코드는 다음과 같습니다.
lilist = document.querySelectorall ( 'li'); arraylilist = array.form (lilist); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .addeventListener ( 'mouseEnter', function () {let thisindex = arraylilist.findIndex ((n) => n == this);}, false);}위의 코드에 의해 얻은이 인덱스는 현재 마우스에 배치 된 인덱스입니다. 여기서는 화살표 기능의 매개 변수 n을 이해합니다. 매개 변수 n을 전달한 후에는 배열에서 물체를 가로 지르고 이와 동일한 객체를 찾은 다음 인덱스를 반환합니다. array.from ()은 여기에서 사용됩니다. 이것은 ES6의 배열에 추가 된 새로운 방법으로 클래스 배열을 배열로 변환 할 수 있습니다.
es6 for… 루프
위의 JS 코드 루프가 사용하지만 실제로는 ES6의 For… Of Loop으로 대체되어 글을 더 간결하게 만듭니다. JS의 루프를 기억하십니까? 이 루프는 키를 키 값 쌍으로 루프 할 수 있지만 값을 루프 할 수는 없습니다. For의 출현은 그 단점을 보충하는 것입니다. For… Of Loop에서 사용할 수있는 범위에는 배열, 세트 및 맵 구조, 일부 배열과 같은 객체 (인수 개체, Dom Nodelist 객체), 생성기 개체 및 문자열이 포함됩니다. 따라서이 루프를 사용하여 For Loop을 교체 할 수 있지만 여기서는 for ... of loop을 직접 사용하면 chrome49에 오류 가보고됩니다. 관계자는 이것이 Chrome49의 버그임을 확인했으며 Chrome51에 고정 될 것임을 확인했습니다 . 그래서 글을 쓸 때, 나는 array.from ()을 사용하여 Nodelist 객체를 배열로 변환하여 자신감을 가지고 작동 할 수 있습니다. 코드는 다음과 같습니다.
lilist = document.queryselectorall ( 'li'); arraylilist = array.form (lilist); for (lilist) {li.addeventListener ( 'mouseEnter', function () {thisindex = arraylilist.findindex ((n) => n == this);};요약
위는이 기사의 모든 내용입니다. 간결하지 않습니까? 이 기사를 통해, 나는 이런 것들만이 이미 ES6의 매력을 느끼게 만들었다 고 생각합니다. ES6을 배우는 것이 도움이되기를 바랍니다.