ES6_javascript 기술의 매우 실용적인 새로운 기능 소개

이 앞에 써있습니다.

ES6는 검토를 위해 Ecma 컨퍼런스에 제출되었습니다. 이는 우리가 JavaScript에 대한 최신 표준과 일부 구문 설탕을 대대적으로 소개할 것임을 의미합니다. ES6에는 주목할 만한 것들이 많이 있습니다. 다음은 기록을 위해 가장 자주 사용하는 새로운 기능 중 일부입니다.

1. for-of 루프

이것은 배열 루핑에 적합합니다. 그 이유는 현재 es5의 배열 루핑의 모든 단점을 보완하기 때문입니다.

예를 들어 for-in은 배열 값뿐만 아니라 배열 객체의 추가 속성을 순회합니다. 또 다른 요점은 for-in의 인덱스가 문자열 유형이라는 점인데, 이는 특히 중요합니다.

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

물론 forEach() 함수도 있는데, 여기에는 return을 중단할 수 없는 등의 문제가 있습니다.

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

for-in보다 훨씬 간단해 보입니다. 하지만 위에서 언급했듯이 단점도 있습니다. 그럼 for-of를 시도해 봅시다:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

볼 수 있는 내용:

for-of를 사용하면 배열 내부의 요소가 반복되고 추가 속성은 for-in에서 탐색되지 않습니다. 둘째, 루프 변수의 유형은 모두 문자열이 아닌 배열의 유형과 일치합니다. .

이 두 가지 점 때문에 forEach() 또는 for-in 대신 for-of를 선택할 가치가 있습니다. 물론 이를 지원하지 않는 브라우저도 있습니다. 그러나 위 코드는 성공적으로 실행될 수 있으며 최신 버전의 FireFox에서는 예상한 결과를 얻을 수 있습니다. 물론 for-of는 배열에만 사용되는 것이 아니라 DOM NodeList, 문자열 등과 같은 배열과 유사한 모든 객체에 사용할 수 있습니다.

2. 템플릿 문자열

이것도 아주 재미있고 끈 연결에도 사용할 수 있습니다. 이름에서 우리는 그것이 무엇을 하는지 알 수 있습니다. 프론트엔드 개발 과정에서 문자열을 동적으로 이어붙여야 하는 상황(동적 DOM 생성, 데이터 포맷팅) 등은 불가피하게 마주치게 됩니다.

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

템플릿으로 사용되는 문자열은 ` 기호로 묶여 있습니다. 그중 $(paramenter)는 자리 표시자이며 $(obj.name)과 같은 개체를 지원합니다. 일반 문자열과 비교하여 템플릿 문자열은 + 연결을 사용하지 않고 여러 줄로 작성할 수 있습니다.

hello:$(name),
welcome es6,
your words is $(words)

템플릿 문자열은 특수 문자를 이스케이프하지 않으므로 보안 위험을 직접 처리해야 한다는 점은 주목할 가치가 있습니다. 템플릿 문자열에는 기본 제공 루프 구문과 조건문이 없으므로 템플릿 문자열은 템플릿 프레임워크를 대체할 수 없습니다. 따라서 일반적인 일반 문자열 연결의 경우 이를 사용하여 코드를 좀 더 멋져 보이게 만들 수 있습니다. PS(그 외에는 별로 쓸모가 없을 것 같습니다. ψ(╰_╯))

위에서 언급한 내장 루프 및 판단 분기가 없는 문제를 해결하기 위한 자세한 소개는 다음과 같습니다.

es6-템플릿 문자열-mozilla

3. 기본 매개변수

이것은 약간 흥미롭습니다. 우리 모두는 js 함수가 함수 매개변수에 대한 기본값을 설정할 필요가 없다는 것을 알고 있습니다. 예를 들어 다음 코드는 오류를 보고합니다.

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

이는 매개변수에 기본값을 부여할 수 없다는 의미이기도 합니다. 매개변수에 기본값을 부여해야 한다면 함수 내에서 정의되지 않았는지 확인해야 합니다. 하지만 ES6에서는 함수 내부에서 판단 후 기본값을 할당하는 대신 매개변수에 기본값을 설정할 수 있으며, 다음과 같은 연산식을 사용할 수도 있습니다.

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

이 방법은 C#과 같은 동적 언어와 마찬가지로 코드를 작성할 때 매우 간단합니다. 이는 직관적이고 편리합니다. 그래서 지금도 아주 잘 사용하고 있습니다. 레스트 매개변수(Rest Parameter)도 있는데 특별히 쓸 만한 내용은 발견하지 못해서, 관심 있으신 분들은 확인해보시면 됩니다.

기본 매개변수 및 나머지 매개변수 -mozilla

ES6에는 많은 새로운 기능과 구문이 있습니다. 관심이 있으시면 Mozilla 팀의 블로그를 살펴보세요. 매우 자세한 소개와 일련의 기사가 있습니다.

mozilla-ES6 시리즈 소개

자, 위의 내용은 제가 ES6에서 발견한 세 가지 실용적인 새로운 사항입니다. 이 세 가지가 일상적인 개발에 가장 많이 사용되어야 합니다.

ES6의 매우 실용적인 새로운 기능에 대한 내용입니다. 여러분에게 도움이 되기를 바랍니다.