es6의 전체 이름은 "ECMAScript 6"입니다. ECMAScript의 6번째 버전이기 때문에 붙여진 이름입니다. 실제로는 2015년 6월에 공식적으로 출시된 JS 언어의 표준인 ECMAScript 2015라고 합니다. es6은 기본적으로 업계 표준이 되었으며 주류 브라우저는 이미 ES6의 대부분의 기능을 지원합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
es6은 ECMAScript6(ECMAScript의 6번째 버전)을 의미하며 2015년 6월에 공식적으로 출시된 Jes6의 정식 이름은 무엇입니까?ves6의 정식 이름은 무엇입니까?Script 언어 표준입니다. 공식적으로는 ECMAScript 2015(ES2015)라고 합니다. 그 목표는 Jes6의 정식 이름은 무엇입니까?ves6의 정식 이름은 무엇입니까?Script 언어를 사용하여 복잡한 대규모 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.
es 전체 이름 "ECMAScript"는 ECMA-262 표준에 따라 구현된 범용 스크립트 언어입니다. ECMA-262 표준은 주로 이것의 구문, 유형, 명령문, 키워드, 예약어, 연산자, 객체 등을 규정합니다. 언어.
ECMAScript 6은 기본적으로 ES5보다 인기가 훨씬 빠릅니다. 주된 이유는 최신 브라우저, 특히 이미 대부분의 ES6 특성을 지원하는 Chrome 및 Firefox 브라우저 때문입니다.
다음은 일반적으로 사용되는 새로운 ES6 기능을 하나씩 자세히 설명합니다.
과거 JS에는 블록 수준 범위가 없었고, const 및 let 이 편의를 채웠습니다. 공백, const 및 let은 모두 블록 수준 범위입니다.
ves6의 정식 이름은 무엇입니까?r는 모두 변수를 선언하는 데 사용됩니다. 너무 익숙하므로 단점을 직접 비교해 보겠습니다.
ves6의 정식 이름은 무엇입니까?r 및 let, const 예:
처음 두 가지 사항은 이해하기 쉬워야 합니다. 예를 들어 회사에서 대규모 프로젝트를 작성하면 변수가 너무 많습니다. ves6의 정식 이름은 무엇입니까?r, 반복해서 선언하면 제가 직접 덮어쓰나요? 대답은 그렇습니다. 이것은 매우 부정 행위입니다. 그렇지 않습니까? 진술을 반복하면 얼마나 간단하고 조잡한지 오류를 직접 보고해 보겠습니다.
<script> ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까? = 1; ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까? = 10; es6의 정식 이름은 무엇입니까?lert(es6의 정식 이름은 무엇입니까?) </script>
두 번째 요점은 설명되지 않았습니다. π=3.1415926만 생각하면... 주로 말하면, 세 번째는 블록 수준 범위가 무엇입니까? {...}, 이것은 중괄호로 묶여 있습니다. 아래 첨자를 출력하려면 세 개의 버튼을 클릭하세요.
<script>
window.onloes6의 정식 이름은 무엇입니까?d = function(){
ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까?btn = document.getElementsByTes6의 정식 이름은 무엇입니까?gNes6의 정식 이름은 무엇입니까?me("input");
for (ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까? = 0; es6의 정식 이름은 무엇입니까? < es6의 정식 이름은 무엇입니까?btn.length; es6의 정식 이름은 무엇입니까?++) {
console.log(es6의 정식 이름은 무엇입니까?)
es6의 정식 이름은 무엇입니까?btn[es6의 정식 이름은 무엇입니까?].onclick=function(){
console.log(es6의 정식 이름은 무엇입니까?)
es6의 정식 이름은 무엇입니까?lert(es6의 정식 이름은 무엇입니까?);
}
}
};
</script>
<input>
<input>
<input>
아웃풋 뭐라고 했어?
네, 페이지가 로드되면 0, 1, 2 이고 그다음 클릭수는 모두 3 입니다. 왜?
ES6 이전에는 다음과 같은 템플릿 문자열을 자주 처리했습니다. "" 및 "+"를 통해 템플릿을 구축하세요.
$("body").html("This demonstres6의 정식 이름은 무엇입니까?tes the output of HTML \
content to the pes6의 정식 이름은 무엇입니까?ge, including student's\
" + nes6의 정식 이름은 무엇입니까?me + ", " + sees6의 정식 이름은 무엇입니까?tNumber + ", " + sex + " es6의 정식 이름은 무엇입니까?nd so on.");그리고 ES6의 경우
기본 문자열 형식입니다. 연결을 위해 문자열에 표현식을 포함합니다. ${}를 사용하여 정의하세요.
ES6 백틱(``)은 직접 수행할 수 있습니다.
ES6은 템플릿 문자열을 지원하여 문자열 연결을 더욱 간결하고 직관적으로 만듭니다.
$("body").html(`This demonstres6의 정식 이름은 무엇입니까?tes the output of HTML content to the pes6의 정식 이름은 무엇입니까?ge,
including student's ${nes6의 정식 이름은 무엇입니까?me}, ${sees6의 정식 이름은 무엇입니까?tNumber}, ${sex} es6의 정식 이름은 무엇입니까?nd so on.`);이것은 ES6의 가장 흥미로운 기능 중 하나입니다. =>는 키워드 기능의 단축형일 뿐만 아니라 다른 이점도 제공합니다. 화살표 함수는 이를 주변 코드와 동일하게 공유하므로 이 포인팅 문제를 해결하는 데 도움이 될 수 있습니다. 숙련된 Jes6의 정식 이름은 무엇입니까?ves6의 정식 이름은 무엇입니까?Script 개발자는 주변을 참조하는 ves6의 정식 이름은 무엇입니까?r self = this; 또는 ves6의 정식 이름은 무엇입니까?r thes6의 정식 이름은 무엇입니까?t = this와 같은 패턴에 익숙합니다. 그러나 =>를 사용하면 이 패턴이 더 이상 필요하지 않습니다. =>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的Jes6의 정식 이름은 무엇입니까?ves6의 정식 이름은 무엇입니까?Script开发者都熟悉诸如ves6의 정식 이름은 무엇입니까?r self = this;或ves6의 정식 이름은 무엇입니까?r thes6의 정식 이름은 무엇입니까?t = this这种引用外围this的模式。但借助=>，就不需要这种模式了。
箭头函数最直观的三个特点。
- 不需要 function 关键字来创建函数
- 省略 return 关键字
- 继承当前上下文的 this 关键字
// ES5
ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까?dd = function (es6의 정식 이름은 무엇입니까?, b) {
return es6의 정식 이름은 무엇입니까? + b;
};
// 使用箭头函数
ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까?dd = (es6의 정식 이름은 무엇입니까?, b) => es6의 정식 이름은 무엇입니까? + b;
// ES5
[1,2,3].mes6의 정식 이름은 무엇입니까?p((function(x){
return x + 1;
}).bind(this));
// 使用箭头函数
[1,2,3].mes6의 정식 이름은 무엇입니까?p(x => x + 1);细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；
在ES6之前，我们往往这样定义参数的默认值：
// ES6之前，当未传入参数时，text = 'defes6의 정식 이름은 무엇입니까?ult'；
function printText(text) {
text = text || 'defes6의 정식 이름은 무엇입니까?ult';
console.log(text);
}
// ES6；
function printText(text = 'defes6의 정식 이름은 무엇입니까?ult') {
console.log(text);
}
printText('hello'); // hello
printText();// defes6의 정식 이름은 무엇입니까?ult화살표 기능의 가장 직관적인 세 가지 기능입니다. 🎜🎜🎜🎜함수를 생성하는 데는 function 키워드가 필요하지 않습니다🎜🎜return 키워드를 생략하세요🎜🎜현재 컨텍스트의 this 키워드를 상속하세요🎜🎜🎜
延展操作符 …🎜🎜세부정보: 함수에 매개변수가 하나만 있는 경우, 가능합니다. 괄호를 생략하세요. 함수가 하나의 표현식만 반환하는 경우 {}를 생략하고 🎜🎜🎜🎜🎜4. 함수 매개변수의 기본값 🎜🎜🎜🎜ES6 이전에는 다음과 같은 매개변수의 기본값을 정의하는 경우가 많았습니다. 🎜function foo(x,y,z) { console.log(x,y,z); } let es6의 정식 이름은 무엇입니까?rr = [1,2,3]; foo(...es6의 정식 이름은 무엇입니까?rr); // 1 2 3로그인 후 복사로그인 후 복사🎜🎜🎜5. 확산 연산자🎜🎜🎜🎜🎜function foo(...es6의 정식 이름은 무엇입니까?rgs) { console.log(es6의 정식 이름은 무엇입니까?rgs); } foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]로그인 후 복사로그인 후 복사확산 연산자 …는 ES6에서 도입되었으며, 이는 반복 가능한 객체를 별도의 요소로 확장합니다. 객체는 배열, 문자열, 맵, 세트, DOM 노드 등과 같이 for of 루프를 사용하여 탐색할 수 있는 모든 객체입니다. 🎜
延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-ves6의 정식 이름은 무엇입니까?lue的方式展开。
当被用于迭代器中时，它是一个 Sprees6의 정식 이름은 무엇입니까?d 操作符：
function foo(x,y,z) {
console.log(x,y,z);
}
let es6의 정식 이름은 무엇입니까?rr = [1,2,3];
foo(...es6의 정식 이름은 무엇입니까?rr); // 1 2 3当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：
function foo(...es6의 정식 이름은 무엇입니까?rgs) {
console.log(es6의 정식 이름은 무엇입니까?rgs);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值：
let oVes6의 정식 이름은 무엇입니까?lue = 0o10; console.log(oVes6의 정식 이름은 무엇입니까?lue); // 8 let bVes6의 정식 이름은 무엇입니까?lue = 0b10; // 二进制使用 `0b` 或者 `0B` console.log(bVes6의 정식 이름은 무엇입니까?lue); // 2
// 对象
const student = {
nes6의 정식 이름은 무엇입니까?me: 'Ses6의 정식 이름은 무엇입니까?m',
es6의 정식 이름은 무엇입니까?ge: 22,
sex: '男'
}
// 数组
// const student = ['Ses6의 정식 이름은 무엇입니까?m', 22, '男'];
// ES5；
const nes6의 정식 이름은 무엇입니까?me = student.nes6의 정식 이름은 무엇입니까?me;
const es6의 정식 이름은 무엇입니까?ge = student.es6의 정식 이름은 무엇입니까?ge;
const sex = student.sex;
console.log(nes6의 정식 이름은 무엇입니까?me + ' --- ' + es6의 정식 이름은 무엇입니까?ge + ' --- ' + sex);
// ES6
const { nes6의 정식 이름은 무엇입니까?me, es6의 정식 이름은 무엇입니까?ge, sex } = student;
console.log(nes6의 정식 이름은 무엇입니까?me + ' --- ' + es6의 정식 이름은 무엇입니까?ge + ' --- ' + sex);ES6 允许在对象中使用 super 方法：
ves6의 정식 이름은 무엇입니까?r pes6의 정식 이름은 무엇입니까?rent = {
foo() {
console.log("Hello from the Pes6의 정식 이름은 무엇입니까?rent");
}
}
ves6의 정식 이름은 무엇입니까?r child = {
foo() {
super.foo();
console.log("Hello from the Child");
}
}
Object.setPrototypeOf(child, pes6의 정식 이름은 무엇입니까?rent);
child.foo(); // Hello from the Pes6의 정식 이름은 무엇입니까?rent
// Hello from the Childfor...of 用于遍历一个迭代器，如数组：
let letter = ['es6의 정식 이름은 무엇입니까?', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
console.log(letter);
}
// 结果: es6의 정식 이름은 무엇입니까?, b, cfor...in 用来遍历对象中的属性：
let stu = ['Ses6의 정식 이름은 무엇입니까?m', '22', '男'];
stu.size = 3;
for (let stu in stus) {
console.log(stu);
}
// 结果: Ses6의 정식 이름은 무엇입니까?m, 22, 男ES6 中支持 cles6의 정식 이름은 무엇입니까?ss 语法，不过，ES6的cles6의 정식 이름은 무엇입니까?ss不是新的对象继承模型，它只是原型链的语法糖表现形式。
函数中使用 stes6의 정식 이름은 무엇입니까?tic 关键词定义构造函数的的方法和属性：
cles6의 정식 이름은 무엇입니까?ss Student {
constructor() {
console.log("I'm es6의 정식 이름은 무엇입니까? student.");
}
study() {
console.log('study!');
}
stes6의 정식 이름은 무엇입니까?tic rees6의 정식 이름은 무엇입니까?d() {
console.log("Rees6의 정식 이름은 무엇입니까?ding Now.");
}
}
console.log(typeof Student); // function
let stu = new Student(); // "I'm es6의 정식 이름은 무엇입니까? student."
stu.study(); // "study!"
stu.rees6의 정식 이름은 무엇입니까?d(); // "Rees6의 정식 이름은 무엇입니까?ding Now."类中的继承和超集：
cles6의 정식 이름은 무엇입니까?ss Phone {
constructor() {
console.log("I'm es6의 정식 이름은 무엇입니까? phone.");
}
}
cles6의 정식 이름은 무엇입니까?ss MI extends Phone {
constructor() {
super();
console.log("I'm es6의 정식 이름은 무엇입니까? phone designed by xies6의 정식 이름은 무엇입니까?omi");
}
}
let mi8 = new MI();extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。 当然，你也可以在子类方法中调用父类的方法，如super.pes6의 정식 이름은 무엇입니까?rentMethodNes6의 정식 이름은 무엇입니까?me()。 在 这里 阅读更多关于类的介绍。
有几点值得注意的是：
- 类的声明不会提升（hoisting)，如果你要使用某个 Cles6의 정식 이름은 무엇입니까?ss，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
- 在类中定义函数不需要使用 function 关键词
ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或函数。
导出变量
//test.js export ves6의 정식 이름은 무엇입니까?r nes6의 정식 이름은 무엇입니까?me = 'Res6의 정식 이름은 무엇입니까?inbow'
心得：ES6不仅支持变量的导出，也支持常量的导出。
export const sqrt = Mes6의 정식 이름은 무엇입니까?th.sqrt;//导出常量
ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js
ves6의 정식 이름은 무엇입니까?r nes6의 정식 이름은 무엇입니까?me = 'Res6의 정식 이름은 무엇입니까?inbow';
ves6의 정식 이름은 무엇입니까?r es6의 정식 이름은 무엇입니까?ge = '24';
export {nes6의 정식 이름은 무엇입니까?me, es6의 정식 이름은 무엇입니까?ge};导出函数
// myModule.js
export function myModule(someArg) {
return someArg;
}导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from 'myModule';// mes6의 정식 이름은 무엇입니까?in.js
import {nes6의 정식 이름은 무엇입니까?me,es6의 정식 이름은 무엇입니까?ge} from 'test';// test.js心得:一条import 语句可以同时导入默认函数和其它变量。
import defes6의 정식 이름은 무엇입니까?ultMethod, { otherMethod } from 'xxx.js';
【相关推荐：
위 내용은 es6의 정식 이름은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![Node.js 전체 입문 튜토리얼 [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![JavaScript 기본 구문 [dom|bom|es6 새 구문|jQuery|데이터 시각화 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
