이 기사는 ES6에 대한 심층적인 이해를 제공하고 ES6의 새로운 기능에 대해 배우는 데 도움이 되기를 바랍니다.
마스터 과정에 대한 프런트 엔드(vue) 항목: 학습 항목 입력
ECMAScript는 Netscape에서 개발한脚本语言的标准化规范입니다. 원래 이름은Mocha이고 나중에LiveScript로 이름이 변경되었으며 최종적으로JavaScript이름이 변경되었습니다.
원래 ECMAScript 6(ES6)으로 알려진 ECMAScript 2015(ES2015) 버전 6에는 새로운 기능이 추가되었습니다.
ES6 블록 범위
첫째, 범위란 무엇인가? 범위는 단순히 변수를 선언하는 것을 의미합니다. 이 변수의 유효한 범위는 let 오기 전입니다. Node.js는 var 의全局作用域와函数作用域만 가지며, ES6块级作用域js에 제공합니다.
{
var a = "?";
b = "⛳";
}
console.log(a);
console.log(b);? 잡히지 않은 ReferenceError: b가 정의되지 않았습니다.
보시다시피 var 키워드를 사용하여 블록에서 변수 a를 정의합니다. 실제로 전역적으로 액세스할 수 있습니다. 따라서 var声明的变量是全局的변수가 블록에서 적용되기를 원합니다. 아니요, 그러면 ES6 의 새로운 블록 수준 범위 키워드인 let 사용하여 변수 a를 선언할 수 있습니다. 다시 액세스하면 a is not defined 오류가 보고됩니다.
아래 그림과 같이 먼저 배열을 반환하는 함수를 정의한 후, 배열을 호출하여 temp에 반환값을 할당한 후,解构数组배열을 출력한 후 배열 변수를 직접 정의합니다. 그런 다음 함수 반환 값이 변수를 가리킵니다. 첫 번째 항목의 값은 첫 번째 배열 변수에 자동으로 할당되고 두 번째 항목은 두 번째 배열 변수에 할당됩니다. 마지막으로 세 개의 변수가 인쇄됩니다. 문제.
함수 아침 식사() {
반품 ['?', '?', '?'];
}
var temp = 아침 식사();
console.log(온도[0], 온도[1], 온도[2]);
[a, b, c] = 아침식사();
console.log(a, b, c);? ?
먼저, breakfast 함수는对象반환합니다.解构对象-값 쌍의 키는 매핑된 실제 객체의 키 이름을 나타냅니다. 그런 다음 아침 식사 함수가 호출되어 객체를 반환합니다. 그런 다음 변수 a, b, c를 인쇄하면 문제가 없음을 알 수 있습니다.
함수 아침 식사() {
return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = 아침식사();
console.log(a, b, c);?
템플릿 문자열을 사용하기 전에 +를 사용하여 문자열 변수를 연결합니다.
ES6에서 제공하는 템플릿 문자열을 사용하세요. 먼저 ``를 사용하여 문자열을 사용하려면 ${变量} 사용하세요.
a = '?'라고 하자,
b = '?️';
let c = '오늘 식사하세요' + a + '식사 후에 보세요' + b;
console.log(c);
d = `오늘 ${a}를 먹고 ${b}를 먹은 후에 지켜보세요`;
console.log(d);오늘은 먹고 볼까요?️ 오늘은 먹고 볼까요?️
이러한 함수를 사용하면 문자열이 어떤 것으로 시작하는지, 문자열이 어떤 것으로 끝나는지, 문자열이 포함되어 있는지 여부 등의 작업을 쉽게 완료할 수 있습니다.
let str = '안녕하세요, 저는 Xiao Zhou ❤️'입니다.
console.log(str.startsWith('안녕하세요'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('안녕하세요'));
console.log(str.includes(" "));진실 진실 거짓 진실
ES6에서는 기본 매개변수를 사용할 수 있는데, 매개변수에 값이 지정되어 있지 않으면 설정된 기본 매개변수를 사용하여 함수가 실행됩니다. 값을 사용하여 기본값을 덮어씁니다.
함수 말(str) {
console.log(str);
}
function say1(str = '안녕하세요') {
console.log(str);
}
말하다();
say1();
say1('❤️');한정되지 않은 안녕안녕❤️
... 사용하여 요소를 확장하면 다음과 같이 사용할 수 있습니다.
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); brr = ['왕자', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ] ❤️ ? [ '왕자', '❤️', '?', '?' ] 왕자❤️ ?
... 연산자는 함수 매개변수에 사용되며 매개변수 배열을 수신합니다.
함수 f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? [ '☃️', '㊙️' ] ? ☃️ ㊙️
.name 사용하여 함수 이름을 얻을 수 있습니다. 구체적인 사용법은 다음과 같습니다.
함수 f1() { }
console.log(f1.name);
f2 = 함수() { };
console.log(f2.name);
f3 = 함수 f4() { };
console.log(f3.name);f1 f2 f4
화살표 함수를 사용하면 코드를 더욱 간결하게 만들 수 있지만 화살표 함수의 한계도 주의해야 하며 화살표 함수 자체에는 이것이 없으며 이것은 부모를 가리킨다.
f1 = a => a;
f2 = (a, b) => {
a + b를 반환합니다.
}
console.log(f1(10));
console.log(f2(10, 10));10 20
es6의 객체 표현을 이용하면 객체 속성이 값과 같으면 값을 생략할 수 있으며, 함수 작성 시 function 생략할 수 있다.
a = '㊙️';
b = '☃️';
const 객체 = {
아: 아,
ㄴ: ㄴ,
말하다: 함수 () {
}
}
const es6obj = {
에이,
비,
말하다() {
}
}
console.log(obj);
console.log(es6obj); { a: '㊙️', b: '☃️', say: [기능: say] }
{ a: '㊙️', b: '☃️', say: [기능: say] } 측정값을 정의하려면 const 키워드를 사용하세요. const 측정값에 할당하는 작업을 제한하지만 측정값을 제한하지는 않습니다.
const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
앱 = 10;측정값에 다시 값을 할당하면 오류가 보고되는 것을 볼 수 있습니다.
☃️ ? ☃️ ? 앱 = 10; ^ TypeError: 상수 변수에 할당되었습니다.
점을 사용하여 객체 속성을 정의할 때 속성 이름에 공백 문자가 포함되어 있으면 불법이며 구문을 전달할 수 없습니다. [属性名] 사용하면 문제를 완벽하게 해결할 수 있으며 속성 이름을 직접 작성할 수 있을 뿐만 아니라 변수를 사용하여 지정할 수 있습니다. 구체적인 사용법은 다음과 같습니다.
obj = {}로 놔두세요;
let a = '작은 이름';
obj.name = '왕자';
// 중간에 공백이 있는 속성을 정의하기 위해 점을 사용하는 것은 불법입니다. // obj.little name = 'Little Prince';
obj[a] = '어린왕자';
console.log(obj); { 이름: '왕자', '작은 이름': '어린 왕자' } === 또는 == 사용하여 일부 특수 값을 비교한 결과가 요구 사항을 충족하지 못할 수 있습니다. Object.is(第一个值，第二个值) 사용하여 판단하면 웃을 수 있습니다.
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
거짓 진실 진실 거짓
다음과 같이 하나의 객체를 다른 객체에 복사하려면 Object.assign() 사용하십시오.
obj = {}로 놔두세요;
객체.할당(
// 소스 객체,
//대상 객체 복사 { a: '☃️' }
);
console.log(obj); { a: '☃️' }es6을 사용하여 다음과 같이 객체의 프로토타입을 설정할 수 있습니다.
obj1 = {라고 놔두세요
얻다() {
1을 반환합니다.
}
}
obj2 = {라고 놔두세요
답: 10,
얻다() {
2를 반환합니다.
}
}
test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 진실 2 진실
obj1 = {라고 놔두세요
얻다() {
1을 반환합니다.
}
}
obj2 = {라고 놔두세요
답: 10,
얻다() {
2를 반환합니다.
}
}
테스트하자 = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 진실 2 진실
obj1 = {라고 놔두세요
얻다() {
1을 반환합니다.
}
}
테스트하자 = {
__proto__: obj1,
얻다() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
배우기 전에 먼저 반복자를 작성하세요
함수 다이(arr) {
내가 = 0이라고 하자;
반품 {
다음() {
완료하자 = (i >= arr.length);
값 = !done arr[i++] : 정의되지 않음;
반품 {
가치: 가치,
완료: 완료
}
}
}
}
let arr = ['☃️', '?', '?'];
dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { 값: '☃️', 완료: false }
{ 값: '?', 완료: 거짓 }
{ 값: '?', 완료: 거짓 }
{ 값: 정의되지 않음, 완료: true }좋아, 단순화된 생성기를 살펴보자
함수* 다이(arr) {
for (let i = 0; i < arr.length; i++) {
항복 arr[i];
}
}
test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { 값: '?', 완료: 거짓 }
{ 값: '☃️', 완료: false }
{ 값: 정의되지 않음, 완료: true }es6을 사용하여 빠르고 편리하게 클래스를 구축하세요.
클래스 스투 {
생성자(이름) {
this.name = 이름;
}
말하다() {
return this.name + 'Say Ori';
}
}
let Xiaoming = new stu("작은명");
console.log(xiaoming.say());Xiao Ming은 Ori가 주었다고 말했습니다.
클래스 속성을 얻거나 수정하기 위한 get/set 메소드 정의
클래스 스투 {
생성자(이름) {
this.name = 이름;
}
얻다() {
this.name을 반환합니다.
}
세트(newStr) {
this.name = newStr;
}
}
let Xiaoming = new stu("작은명");
console.log(xiaoming.get());
Xiaoming.set("대밍")
console.log(xiaoming.get());샤오밍과 다밍
static 키워드로 수정된 메서드는 개체를 인스턴스화하지 않고도 직접 사용할 수 있습니다.
클래스 스투 {
정적 말(str) {
console.log(str);
}
}
stu.say("원래 정적 메소드");Origi 정적 방법
상속을 사용하면 다음과 같은 코드 중복성을 줄일 수 있습니다.
클래스 사람 {
생성자(이름, 이름) {
this.name = 이름;
this.bir = 비르;
}
쇼정보() {
return '이름:' + this.name + '생일:' + this.bir;
}
}
클래스 A는 Person {를 확장합니다.
생성자(이름, 이름) {
super(이름, 이름);
}
}
let zhouql = new A("저우 치뤄", "2002-06-01");
// Zhou Qiluo 자체에는 showInfo 메소드가 없으며 Person의 console.log(zhouql.showInfo())에서 상속됩니다.이름: Zhou Qiluo 생일: 2002-06-01
집합 컬렉션은 배열과 달리 집합 컬렉션의 중복 요소를 허용하지 않습니다.
//Set 컬렉션 생성 let food = new Set('??');
// 반복해서 추가하면 하나만 들어갈 수 있습니다. food.add('?');
food.add('?');
console.log(음식);
//현재 컬렉션 크기 console.log(food.size);
// 컬렉션에 요소가 존재하는지 확인 console.log(food.has('?'));
// 컬렉션의 요소를 삭제합니다. food.delete('?');
console.log(음식);
// 컬렉션을 반복합니다. food.forEach(f => {
console.log(f);
});
// 컬렉션을 지웁니다. food.clear();
console.log(음식); 세트(3) { '?', '?', '?' }
3
진실
세트(2) { '?', '?' }
?
?
설정(0) {}맵을 결합하여 키-값 쌍 저장
let food = new Map();
a = {}, b = function () { }, c = "이름"으로 둡니다.
food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '쌀');
console.log(음식);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(음식);
console.log(food.has(a));
food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(음식); Map(3) { {} => '?', [함수: b] => '?', '이름' => '쌀' }
3
?
Map(2) { {} => '?', [함수: b] => '?'
진실
[객체 객체] + ?
함수 () { } + ?
지도(0) {}모듈식 개발을 사용하여 es6은 일부 콘텐츠는 물론 기본 내보내기 및 기타 세부 정보를 쉽게 가져오고 내보낼 수 있습니다.
a = '?';
let f1 = function (str = '귀하의 매개변수') {
console.log(str);
}
수출 {a, f1 }; './27moduletest.js'에서 {a, f1}을 가져옵니다.
console.log(a);
f1();
f1('알겠습니다');