집 >
웹 프론트엔드 >
JS 튜토리얼 >
JavaScript ECMAScript 6의 모든 새로운 기능 요약
JavaScript ECMAScript 6의 모든 새로운 기능 요약
WBOY
풀어 주다： 2022-08-15 18:13:22
앞으로
1600명이 탐색했습니다.
이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript ECMAScript 6(ES2015~ES2022)의 모든 새로운 기능을 요약하여 소개합니다. 이 글은 특정 참고 가치가 있는 주제를 중심으로 내용을 자세히 소개합니다. 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.
ECMAScript가 2015년에 ES6를 공식 출시한 지 8년이 지났고, 2015년부터 매년 2019년에 새로운 버전이 출시될 예정입니다. 6월, 현재 연도를 버전 번호로 사용합니다.
이러한 여러 버전에는 많은 새로운 기능이 등장했습니다. 기억을 돕기 위해 이 기사에서는 모든 새로운 기능을 정리했습니다.
ps: 일부 정보에서는 ES2015 이후의 모든 버전을 통칭하여 ES6이라고 하며, 일부에서는 ES6이 ES2015, ES7이 ES2016을 의미한다고 하는데 이에 대해서는 여기서는 논의하지 않겠습니다.
ES2015 (ES6)
ES2015는 기본적으로 ES2015 이전의 모든 내용이 확장된 버전입니다. 대략 아래 그림과 같습니다.
let, const 핵심 단어와 블록 수준 범위
ES6 이전에는 변수를 선언하는 방법이 딱 하나 있었는데, ES2015에서는 let와 키워드를 사용하는 것이었습니다. > 추가되었습니다. const 키워드는 변수와 상수를 선언하는 데 사용됩니다. 코드는 다음과 같습니다. var关键字，在ES2015中新增了let和const关键字来声明变量与常量，
代码如下：
// 声明变量
let v = 100
v = 200
// 声明常量
const V = 200
// 修改常量
// V = 300 // 报错
로그인 후 복사
同时使用let和const关键字声明的变量或者常量是具有块级作用域的，
示例代码如下：
{
var v = 100
}
{
let val = 200
}
console.log(v)
console.log(val) // 报错 val is not defined
로그인 후 복사
值得注意的是使用let或者const关键字声明的变量不具有变量提升的特性，且存在暂时性死区的特性。
函数的扩展
在ES2015中允许函数使用默认值，示例代码如下：
// es2015之前
function foo(v) {
v = v ? v : 100
return v
}
// es2015
function bar(v = 100) {
return v
}
로그인 후 복사
值得注意的是如果有多个参数时，默认参数必须从后向前使用。
在ES2015中新增了箭头函数，这是函数的一种简写形式，示例代码如下：
function foo(v) {
return v``
}
// 箭头函数写法
const foo = (v) => {
return v
}
// 简写形式 1
const foo = v => { // 只有一个参数可以省略括号
return v
}
// 简写形式 2
const foo = v => v // 语句中只有return时可以省略return和花括号
로그인 후 복사
值得注意的是箭头函数的this是根据执行上下文决定的，内部并不会绑定this。
使用箭头函数时内部并不存在arguments对象，而是采用剩余参数的方式代替，
示例代码如下：
const foo = (...args) => {
// console.log(arguments) // ReferenceError: arguments is not defined
console.log(args) // args 是一个数组
}
foo(1, 2, 3, 4) // [ 1, 2, 3, 4 ]
로그인 후 복사
在ES2015中为函数增加的要给name属性，该属性指向函数的名称，
示例代码如下：
function foo(v) {
return v
}
const bar = v => v
console.log(foo.name) // foo
console.log(bar.name) // bar
let 및 const<를 모두 사용하여 선언된 변수 또는 상수. /code> 키워드는 블록 수준 범위에서 </tbody></table>🎜샘플 코드는 다음과 같습니다. 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // 复制数组
console.log(Math.max.call(null, ...arr)) // 将数组中的每一项作为参数使用</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜<code>let 또는 const</code를 사용하여 선언된 변수에 주목할 가치가 있습니다. > 키워드에는 가변적인 프로모션 특성이 없으며 일시적인 데드존이 있습니다. 🎜🎜함수 확장🎜🎜🎜을 통해 함수는 ES2015에서 기본값을 사용할 수 있습니다. 샘플 코드는 다음과 같습니다.🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">function foo() {
return Array.from(arguments) // 将 arguments 转换为数组
}
console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜주의할 점은🎜여러 매개변수가 있는 경우 기본 매개변수를 다음에서 사용해야 합니다. 다시 앞으로🎜. 🎜🎜ES2015에서는 🎜함수를 축약한 형태인 화살표 함수를 추가했습니다🎜, 🎜샘플 코드는 다음과 같습니다. 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">Array.of(1) // [1]
Array.of(true, 1, &#39;一碗周&#39;) // [true, 1, &#39;一碗周&#39;]</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜화살표 함수의 <code>this는 다음을 기반으로 한다는 점에 주목할 필요가 있습니다. 실행 컨텍스트 this는 내부적으로 바인딩되지 않을 것으로 결정되었습니다. 🎜🎜화살표 함수 사용시 내부 인자 객체는 없고 나머지 매개변수를 대신 사용합니다. 🎜🎜🎜샘플 코드는 다음과 같습니다. 🎜🎜
🎜숫자 값의 확장🎜🎜ES2015의 숫자 값 확장은 주로 두 개체 에 일부 값을 추가합니다. >수학 및 숫자 방법은 물론 이진수 및 8진수 표현도 가능합니다. 🎜🎜ES2015에서는 0b 또는 0B를 사용하여 이진수를 나타내고, 0o 또는 0O를 사용하여 8진수를 나타냅니다. 🎜🎜🎜샘플 코드는 다음과 같습니다. 🎜🎜
import a from 'm' // 导入模块 m 中的默认导出，将其命名为 a
import a, { b } from 'm' // 导入模块 m 中的默认导出以及单独导入成员 b
import * as A from 'm' // 导入模块中的所有成员
import 'm' // 执行 m 模块
export const b = 1 // 单独导出
export default b // 默认导出
export { b } // 按需导出
export { b as bb } // 改名导出
export { b } from 'm' // 导入模块 m 中的成员 b 并导出
로그인 후 복사
解构赋值
ES2015新增了解构赋值的语法，允许我们使用按照一定的模式，在数组或者对象中提取指定的值，
示例代码如下：
// 数组的解构赋值
let [name, age, hobby = 'coding' /* 结构赋值的默认值 */] = ['一碗周', 18]
// 交换两个变量的值
let a = 1
let b = 2
;[a, b] = [b, a]
console.log(a, b) // 2 1
// 对象的结构赋值
let { name: ObjName /* 解构赋值重命名 */, sex } = { name: '一碗周', sex: 1 }
// 函数参数的解构赋值
function bar({ name, age }) {
return name + age
}
bar({ name: '一碗周', age: 18 }) // 一碗周18
// 之前
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
var globals = getGlobal();
if (typeof globals.setTimeout !== 'function') {
// no setTimeout in this environment!
}
로그인 후 복사
// 之后
if (typeof globalThis.setTimeout !== 'function') {
// no setTimeout in this environment!
}
![TypeScript 소개 영상 [JavaScript를 배우지 않아도 이해할 수 있음]](https://img.php.cn/upload/course/000/000/068/6242c0fc4be39373.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)
