ES6 현대 자바스크립트 공부!제1부

ES6의 간단한 소개부터 시작하겠습니다.
ES6는 ECMAScript 6을 대표하는데 자바스크립트가 바탕으로 하는 기초 언어로 JS는 ES6의 주요 실현에 속한다.
ECMA 조직이 내놓은 ES6 또는 ECMA 스크립트 2015는 현대적이고 기본적인 자바스크립트 기능을 제공한다.
이론은 충분해!ES6를 배우겠습니다.
1부에는 주어진 주제에 대한 해석이 포함되어 있다.

Var/Let/Const

나는 이 세 가지 주제를 간단명료하게 설명했다. 왜냐하면 나는 이미 그것들에 관한 글을 썼기 때문이다. 만약 당신이 더 많은 것을 필요로 한다고 생각한다면, 나는 당신이 나의 Let/Var/Const에 관한 글을 읽는 것을 권장한다.here

객체

이거

화살표 기능

어레이map()

변량

Var는 JavaScript 변수 키워드 중 하나로, 역할 영역이 함수이므로 재할당 또는 재선언할 수 있습니다.

양보하다

Let은 ES6에서 도입한 것입니다. var 키워드의 역할 영역은 블록을 정의하는 것이 아니기 때문에, Let 키워드는 변수가 블록을 정의하는 역할 영역에 사용됩니다.

콘스트

cont는let과 유사하지만,const값을 다시 지정할 수 없습니다.

오브젝트

너는 한 대상이 하나의 키 값이 맞다는 것을 알 수 있을 것이다. 나는 아래의 예에서 대상의 개념을 설명할 것이다.
여기에서, 나는 cont 키워드를 사용하여 myObject라는 대상을 정의했다.키 쌍을 몇 개 추가했습니다. 첫 번째는course입니다. 문자열로 설정하고, 두 번째는 함수입니다.우리가 한 대상에 함수가 있을 때, 우리는 이 함수를 방법이라고 부른다.

const myObject = 
{
course : "ES6",
learn : function() {}
};

ES6에서는 객체 내부의 함수를 정의하는 명확하고 간단한 문법이 있습니다.study라는 다른 함수를 정의했지만, 여기서는 사칭이나 function 키워드를 입력할 필요가 없고, 괄호와 괄호만 입력할 수 있습니다.마지막으로 우리는 세 명의 구성원, 한 개의 속성과 두 가지 방법을 가진 대상이 있다.
이 구성원들을 어떻게 방문하는지 토론해 봅시다.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

아마도 당신은 표현법을 잘 알고 있을 것입니다. 여기서 대상의 키 값 쌍, 예를 들어 myObject에 접근할 수 있습니다.공부?우리는 또 다른 괄호 표시법으로 대상 구성원을 방문하는 방법이 있다.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

myObject['course'] = "JavaScript";

네모난 괄호 방법을 사용하는 이유는 어떤 속성이나 방법을 방문해야 할지 모르기 때문이다.설명해 드릴게요.
이미지 목표는 폼의 입력 필드입니다. 사용자 값을 바탕으로 대상의 구성원에 접근할 것입니다.따라서, 목표를 괄호 안에 전달해야 합니다. 만약 입력 필드라면, 'target.value' 의 값을 얻을 것입니다.
이것이 바로 우리가 말한 동적 접근 대상 내부의 속성이나 방법이다.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

const target = "course";

myObject[target.value] = "JavaScript";

이

이것은 JavaScript의 특수한 키워드입니다. 문제는 JS 개발자를 항상 곤혹스럽게 하는 것입니다. 왜냐하면 다른 프로그래밍 언어의this와 달리 현재 대상에 대한 인용을 되돌려주기 때문입니다.
여기에 나는 대상이 하나 있다. 이 대상의 함수는 학습이다. 우리가 컨트롤러로 오자.기록해 봐요. 이게 뭐예요?
이를 myObject라고 부릅니다.공부().

const myObject = 
{
course : "ES6",
learn() {
console.log(this)
},
};

myObject.learn();

이것은 컨트롤러 결과입니다!,대상의 인용을 되돌려줍니다.

그러나 자바스크립트에서 우리는 이상한 점이 하나 있다. 이것은 항상 이렇게 일하지 않는다.내 뜻을 보여줘!
var 키워드를 사용하여 learn이라는 변수를 정의하고 myObject로 설정합니다.공부?봐라, 나는 괄호를 러너 앞에 두지 않았다. 여기, = 기호 앞에 있는 러너가 함수다.우리 좀 위로합시다.레코드

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn;

console.log(learn);

이것은 콘솔의 결과입니다. 이 기능이 표시된 것을 보실 수 있습니다.

현재 만약 내가 학습 함수를 호출한다면, 나는 대상의 인용이 아니라, 대상의 행동이 다르기 때문에 정의되지 않은 것을 얻을 것이다.
그 값은 함수를 호출하는 방식에 따라 결정됩니다. 함수를 대상 방법으로 호출하면 (myObject.learn (), 대상의 인용을 항상 주지만, 대상 외부에서 호출하면 전역 변수, 즉 창을 줍니다.창 대상이 없고 정의되지 않았습니다. 기본적으로 제한 모드가 활성화되어 있기 때문입니다.
제한 모드에서는 JS 코드를 보호된 방식으로 실행할 수 있습니다.

어떻게 이 문제를 해결합니까?
JavaScript 함수가 object라는 것을 아셔야 합니다. 제가 공부한 후에 bind 방법을 선택하고 myObject를 전달했습니다. 이것은 제 대상의 새로운 인용을 되돌려줍니다.bind 방법을 사용하면 이 값을 영구적으로 설정할 수 있습니다.

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn.bind(myObject);

console.log(learn);

화살표 기능

ES6는 선언 함수에 대해 더 깨끗하고 적합한 방법을 도입하여 이 두 함수를 비교해 보겠습니다.
나는 화살표 함수 방법으로 square라는 함수를 다시 썼다.자바스크립트 함수를 arrow 함수 방법으로 변환하려면 function 키워드를 삭제해야 합니다. 괄호 뒤에 (=>) 가 필요합니다. 함수에 인자가 없으면 빈 괄호를 추가하십시오.만약 반환 값이 한 줄에 불과하다면, 반환 값과 괄호를 삭제할 수 있습니다.
number가 number로 바뀌면 화살표 함수를 읽을 수 있습니다.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

어레이지도 ()

ES6는 항목 목록을 보여주는 데 사용되는 맵이라는 새로운 방법을 도입했다.우리는 어떻게 비추는 방법을 사용하는지 토론합시다.
여기에서, 나는courses라는 그룹이 하나 있는데, 그 중에는 네 개의 항목이 포함되어 있다. 지금 우리는 내가 'I learned {courses}' 라는 문장이 필요하다고 가정하자.
우리는 이 수조를 위해 맵 방법을 호출해야 한다. 이것은 수조의 모든 항목에 대해 맵 방법이 이 함수를 호출한다는 것을 의미한다.이것은 이 그룹의 모든 항목을 가져오고 새 항목을 되돌려줍니다.따라서 우리는 하나의 과정을 받아들이고 새로운 문자열을 되돌려 주는 함수가 있다. ("나는 배웠다"+ 색)이 방법은 새 그룹을 되돌려줍니다. 따라서 learnedCourses를 정의합니다.

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(function(course){
return 
' I learned '+ course;

})

우리들은 이 코드를 더욱 분명하게 말합시다.
나는 함수를 화살표 함수로 변환했다.

함수 키워드를 삭제합니다.

매개 변수가 하나만 있으면 괄호를 삭제할 수 있습니다.

매개변수 뒤에 배치(=>)

우리는 코드가 한 줄밖에 없기 때문에 괄호를 빼고 돌아갑니다.

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(course => ' I learned '+ course )

템플릿 문자열에 대해 토론합시다. 코드를 한 줄 바꾸고 싶습니다.ES6에서는 싱글 및 더블 따옴표 대신 {`} 문자를 사용할 수 있습니다.중간에 우리는 동적 과장 과정을 할 수 있도록 그것을 정의합시다.$와 괄호를 추가합니다. 괄호 안에 있는 매개 변수 자리 차지 문자입니다. 무엇을 넣든지 동적으로 보여집니다. 이 경우 수업이 놓입니다.이것이 바로 우리가 말한 템플릿 문자다.
...편집기의 행동이 단정하지 않아서, 나는 코드를 입력할 수 없지만, 보기에는 이렇다.

1부는 여기까지.🎉.
나는 네가 이것이 유용하다고 생각하기를 바란다.
연결해 주세요.