집 >웹 프론트엔드 >프런트엔드 Q&A >es6의 핵심 기능은 무엇입니까

es6의 핵심 기능은 무엇입니까

青灯夜游원래의: 2022-04-19 19:27:183089검색

es6의 핵심 기능은 다음과 같습니다. 1. Class 키워드를 사용하여 클래스를 생성한 다음 클래스를 인스턴스화하여 객체를 생성합니다. 2. 콜백 함수 작성을 단순화하는 데 사용되는 화살표 함수 3. 구조 분해 할당; 특정 패턴에 따라 배열에서 얻을 수 있습니다. 및 개체에서 값을 추출하고 변수에 값을 할당합니다. 4. 데이터, 배열 및 배열과 같은 개체를 탐색하는 데 사용되는 "For...of" 루프.

es6의 핵심 기능은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6 핵심 기능

1. Class Class

ES6는 공식적으로 Class 키워드를 사용하여 "class"를 생성합니다. >, 그런 다음 "class"를 인스턴스화하여 "object"를 생성합니다. 클래스는 객체의 공개 부분을 추상화하며, 클래스를 인스턴스화하여 특정 객체를 얻을 수 있습니다. ES6正式启用 Class 关键字来创建"类”，再通过实例化"类”来创建“对象”。类抽象了对象的公共部分，通过实例化类可以得到一个具体的对象。

类名首字母使用大写。

实例化类必须使用 New 关键字。

简化面向对象的封装、继承、多态。

关键字 extends 可以用于创建一个子类。

类的 Constructor 函数，可以接收实参，并返回实例对象。

子类继承父类后，可以调用父类的方法，也可重写父类的方法（优先调用）。

关键字 super 用于访问和调用对象父类上的函数，构造函数和普通函数皆可。

使用 New 创建实例时会自动调用 Constructor 函数，如果不写此函数，类函数会自动生成。

【注】子类在构造函数中使用super，必须放到 this 前面，即先调用父类的构造方法，再使用子类构造方法。

// 1.使用Class关键字创建类
class 类名 {
    // 自有属性
    constructor(形参1, 形参2, ...) {
        this.属性名1 = 形参1;
        this.属性名2 = 形参2;
        ...
    }
    // 共有属性
    init() {
        函数体;
    }
    ...
}

// 2.利用类结合New关键字实例化对象
let Object = new 类名(实参1, 实参2, ...);

// 3.在已有类基础上创建子类
class 子类 extends 类名 {
    // 自有属性（与父类相同）
    constructor(形参1, 形参2, 新形参1...) {
        //super函数调用父类的constructor
        super(形参1, 形参2, ...);
        // 子类新增属性需要单独定义
        this.新属性1 = 新形参1;
        ...
    }
    // 共有属性（子类函数位于自身父级原型上，优先调用，父类同名函数在更上层原型链上)
    init() {
        函数体;
    }
    ...
}

2、箭头函数

箭头函数用于简化回调函数的书写。

事件中简化箭头函数需要注意 this 指向为 window。

操作方法：省略function，在 () 和 {} 间添加 =>，单形参省略 ()，单语句函数体省略 {}，若单语句为 return 语句直接省略 {} 和 return 。

箭头函数可以与变量解构结合使用。

由于大括号被解释为代码块，如果箭头函数直接返回对象，必须在对象外面加.上括号，否则会报错。

注意事项

箭头函数没有自己的this对象。

无法使用yield命令，因此箭头函数不能用作Generator函数。

无法当作构造函数，即不能对箭头函数使用new命令，否则报错。

无法使用arguments对象，该对象在函数体内不存在，可以用rest参数代替。

第一个场合是定义对象的方法，且该方法内部包括this。

第二个场合是需要动态this的时候，也不应使用箭头函数。

箭头函数内部，还可以再使用箭头函数。下面是一个ES5语法的多重嵌套函数。

3、解构赋值

解构赋值即解析结构再赋值，ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring），这种写法属于"模式匹配"，只要等号两边模式相同，左边的变量就会被赋予对应的值。

数组解构赋值

如果等号的右边数据是不可遍历结构则会报错。

完全解构：等号左右两边的结构完全相同，就会解析结构一一对应赋值。

不完全解构：等号左边的模式，只匹配一部分的等号右边的数组，依旧可以解构成功。

解构赋值允许指定默认值，ES6内部使用严格相等运算符（===）判断某一位置是否有值，只有数组成员严格等于 undefined 默认值才会生效

클래스 이름의 첫 글자는 대문자여야 합니다.

인스턴스화된 클래스는 새 키워드를 사용해야 합니다.

단순화 객체 지향 캡슐화, 상속, 다형성.

키워드 확장을 사용하여 하위 클래스를 생성할 수 있습니다.

클래스의 생성자 함수는 실제 매개변수를 수신하고 인스턴스 객체를 반환할 수 있습니다.

하위 클래스가 상위 클래스를 상속한 후 상위 클래스의 메서드를 호출하거나 상위 클래스의 메서드를 재정의(먼저 호출)할 수 있습니다. 코드>.

키워드 super는 객체의 상위 클래스, 생성자 및 에 대한 함수에 액세스하고 호출하는 데 사용됩니다. code>일반 기능이 허용됩니다. 🎜

새 인스턴스 생성을 사용하면 생성자 함수가 자동으로 호출됩니다. 이 함수를 작성하지 않으면 클래스 함수가 자동으로 생성됩니다. 🎜

[참고] subclass가 생성자에서 super를 사용할 때 이 앞에 위치해야 합니다. 즉, 상위 클래스 생성자를 먼저 호출한 다음 하위 클래스 생성자를 사용합니다. 🎜🎜🎜

// 函数参数支持解构赋值
function sum([x, y]) {
    return x + y;
}

// 传入参数时，数组参数解构为x与y
sum([1, 2]);

🎜🎜🎜2. 화살표 함수🎜🎜🎜🎜

화살표 함수는 간단한 콜백 함수 작성에 사용됩니다. 🎜
이벤트의 단순화된 화살표 기능은 이것이 창을 가리킨다는 점에 유의해야 합니다. 🎜
연산 방법: 함수 생략, ()와 {} 사이에 => 추가, 단일 형식 매개변수 생략( ), 단일 문의 함수 본문에서 {}를 생략합니다. 단일 문이 return 문인 경우, 직접 {}를 생략하고 return합니다. . 🎜
화살표 함수는 변수 구조분해와 함께 사용할 수 있습니다. 🎜
중괄호는 코드 블록으로 해석되므로 화살표 함수가 직접 객체를 반환하는 경우 객체 외부에 대괄호를 추가해야 하며, 그렇지 않으면 오류가 보고됩니다. 🎜🎜🎜🎜🎜Notes🎜🎜🎜
- 화살표 함수에는 자체 this 객체가 없습니다. 🎜
- yield 명령을 사용할 수 없으므로 화살표 함수를 생성기 함수로 사용할 수 없습니다. 🎜
- 생성자로 사용할 수 없습니다. 즉, 새 명령을 화살표 함수에 사용할 수 없습니다. 그렇지 않으면 오류가 보고됩니다. 🎜
- 인수 객체는 사용할 수 없습니다. 해당 객체는 함수 본문에 존재하지 않으며 나머지 매개변수로 대체될 수 있습니다. 🎜
- 첫 번째 경우는 객체의 메소드를 정의하는 것인데, 메소드에는 이를 내부적으로 포함하고 있습니다. 🎜
- 두 번째 경우는 에 동적 this가 필요한 경우 화살표 기능을 사용하면 안 됩니다. 🎜
- 화살표 함수 안에 화살표 함수를 사용할 수도 있습니다. 다음은 ES5 구문의 다중 중첩 함수입니다. 🎜🎜🎜🎜🎜🎜3. 구조 분해 할당은 구조를 구문 분석한 다음 값을 할당하는 것을 의미합니다. 특정 패턴에 따라 code>배열과 객체로부터 에서 값을 추출하고 변수에 값을 할당하는 것을 Destructuring이라고 합니다. "패턴 일치" >, 등호 양쪽의 모드가 동일한 한, 왼쪽의 변수에 해당 값이 할당됩니다. 🎜🎜🎜🎜배열 구조 분해 할당🎜🎜🎜<ul><li> <code>등호 오른쪽의 데이터가 순회할 수 없는 구조인 경우 오류
가 보고됩니다. 🎜
완전한 해체: 등호 왼쪽과 오른쪽의 구조는 정확히 동일하며 구조는 파싱되어 값이 할당됩니다. 하나씩. 🎜
불완전한 분해: 등호 왼쪽의 패턴, 등호 오른쪽 배열의 일부만 일치합니다, <code>는 여전히 작동합니다. 해체에 성공했습니다. 🎜
구조 분해 할당은 기본값 지정을 허용하고, ES6 내부는 엄격한 항등 연산자(===)를 사용하여 값이 있는지 확인합니다. 특정 위치의 경우, 기본값은 배열 멤버가 정의되지 않음과 정확히 동일한 경우에만 적용됩니다. 🎜🎜🎜🎜🎜객체 구조 분해 및 할당🎜🎜
- 如果解构失败，变量的值等于 undefined。
- 对象属性没有次序，但变量必须与属性同名，才能解析到正确的值。
- 对象解构可以指定默认值，默认值生效的条件是对象的属性值严格等于undefined。
- 对象解构时，由于JavaScript引擎会将{}理解成一个代码块，从而发生语法错误，需要将整个解构赋值语句放在圆括号()里面，即可正确执行。
字符串解构赋值
- 字符串也支持解构赋值，此时字符串被转换成了类数组对象。
- 类数组对象都有一个Length属性，因此可以对这个属性解构赋值。
函数参数解构赋值
```
// 函数参数支持解构赋值
function sum([x, y]) {
    return x + y;
}

// 传入参数时，数组参数解构为x与y
sum([1, 2]);
```
圆括号使用注意
- 函数参数禁用圆括号。
- 变量声明语句禁用圆括号。
- 赋值语句的模式匹配部分禁用圆括号。
- 只有赋值语句的非模式匹配部分，可以使用圆括号。
4、For…of 循环
- 优点，支持Break，Continue 和 Return关键字， for-of循环用于遍历数据、数组、类数组对象。
- 缺点，没有提供下标，不能修改原数组，只能遍历索引数组，不能遍历 Hash 数组（对象）。
```
for (value of arr) {
    执行操作;
}
```
Iterator

一种新的遍历机制，拥有两个核心。
1. 迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next()方法获取迭代之后的结果。
2. 迭代器是用于遍历数据结构的一个指针（类似于数据库的游标）
5、数值新增方法

Number.isInteger()
- Number.isInteger()，用来判断数值是否为整数。
- 如果参数不是数值返回false。
- JavaScript内部整数和浮点数采用同样的储存方法，所以25和25.0被视为同一个值。
- JavaScript数值存储为64位双精度格式，数值精度最多可以达到53个二进制位(1个隐藏位与52个有效位)，如果数值的精度超过这个限度，第54位及后面的位就会被丢弃，方法失效。
Math.trunc()
- Math.trunc()方法用于去除一个数的小数部分，返回整数部分。
- 对于非数值，Math.trunc()内部使用Number方法将其先转为数值。
- 对于空值和无法截取整数的值，返回NaN。
```
// 低版本浏览器兼容语法
Math.trunc = Math.trunc || function (x) {
    return x < 0 ? Math.ceil(x) : Math.f1oor(x);
};
```
Math.sign()
- Math. sign()方法用来判断一个数到底是正数、负数、还是零。
- 如果参数是非数值，会自动转为数值，对于无法转为数值的值，会返回NaN。
- 它会返回五种值，参数为正数返回+1，参数为负数返回-1，参数为0返回0，参数为-0返回-0，其他值返回NaN。
6、字符串新增方法

模板字符串

模板字符串用于简化字符串拼接，模板字符串支持解析变量、换行、调用函数。

模板字符串（template string）是增强版的字符串，用反引号标识，可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
```
`文本${变量}文本${变量}文本`
```
includes()、startsWith()、endsWith()
- includes()，返回布尔值，表示是否找到了参数字符串。
- startsWith()，返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()，返回布尔值，表示参数字符串是否在原字符串的尾部。
  -【注】这三个方法都支持第二个参数，表示开始搜索的位置。
padStart()、padEnd()

ES2017引入了字符串补全长度功能，padstart() 用于头部补全，padEnd() 用于尾部补全。
- padstart() 和 padEnd() 共接受两个参数，第一个参数是字符串补全生效的最大长度第二个参数是用来补全的字符串，如果省略第二个参数，默认使用空格补全长度。
- 如果原字符串的长度等于或大于最大长度，则字符串补全不生效，返回原字符串。
- 如果用来补全的字符串与原字符串两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
- padstart()的常见用途是为数值补全指定位数，也可以用于提示字符串格式。
```
// 补全长度方法提示字符串格式
&#39;12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;); // "YYYY-MM-12"
&#39;08-31&#39;.padStart(10, &#39;YYYY-MM-DD&#39;); // "YYYY-08-31"
```
trimStart()、trimEnd()

trimStart()消除字符串头部的空格，trimEnd()消除字符串尾部的空格，它们返回的都是新字符串，不会修改原始字符串，两个方法对字符串头部（尾部）的tab键、换行符等不可见的空白符号也有效。

repeat()
- repeat方法表示将原字符串重复n次，返回一个新字符串。
replaceAll()

ES2021引入了replaceAll()方法，可以一次性替换所有匹配，它的用法与 replace()相同，返回一个新字符串，不会改变原字符串。

7、对象新增方法
- 在ES6中，可以直接在对象中写入变量，key相当于变量名，value相当于变量值，并且可以直接省略value，通过key表示一个对象的完整属性。
- 除了属性可以简写，函数也可以简写，即省略掉关键字function。
Object.is()

它用来比较两个值是否严格相等，与严格比较运算符(===) 的行为基本- -致。
```
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true
```
Object.assign()
- object. assign()方法用于对象的合并,将源对象(source) 的所有可枚举属性,复制到目标对象(target) 。
- obiect. assign()方法的第一个参数是目标对象.后面的参数都是源对象。注意，如果目标对象与源对象有，同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
8、数组新增方法

Array.from()
- Array.from()用于将类数组对象和可遍历对象（包括Set和Map）转为真正的数组。
- Array.from()方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.of()
- Array.of()用于将一组值转换为数组。
- Array. of()返回参数值组成的数组，如果没有参数就返回一个空数组。
- 此方法可以弥补数组构造函数Array()因为参数个数的不同的差异。
- Array.of()基本上可以替代Array()或new Array()，它不存在由于参数不同而导致的重载。
```
// 兼容版本Arrayof()方法
function Arrayof() {
    return Array.prototype.slice.call(arguments);
}
```
数组实例的fill()
- fill()方法使用给定值，填充一个数组。
- 用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
- 方法支持第二个和第三个参数，用于指定填充的起始位置和结束位置。
- 如果填充的类型为对象，那被赋值的是同一个内存地址的对象，而不是深拷贝对象。
数组实例的find()
- 用于找出第一个符合条件的数组成员，如果没有找到返回undefined。
findIndex()
- 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。
includes()
- 表示某个数组是否包含给定的值，返回布尔值。
9、Let & Const

ES6中，除了全局和局部作用域，新增了块级作用域。

Let
- 语法：let 变量名 = 变量值;
- let禁止在相同作用域内重复声明同一个变量，所以不能在函数内部重新声明参数。
- let声明的变量只在 let 命令所在的代码块内有效，带有{块级作用域}，不会导致声明提升，可以记录触发鼠标事件元素的下标。
Const
- 语法：const 常量名 = 常量值;
- 常量不占内存空间，常量名一般使用纯大写。
- const声明变量必须立即初始化，不能留到以后赋值。
- const声明的常量只在所在的块级作用域内有效，带有{块级作用域}，不会导致声明提升，同样存在暂时性死区，且同一常量禁止重复声明，常量值无法改变。
- const声明的变量，可以保证变量的内存地址不变，对于简单类型的数据来说相当于常量，对于引用类型的数据只能保证其内存地址中指向实际数据的指针不变，而无法保证数据结构不变，将对象声明为常量需要特别注意！
暂时性死区

暂时性死区（TDZ）一种语法规则，只要块级作用域内存在 let 或 const 命令，内部声明的变量就会"绑定"这个区域，形成封闭作用域，即代码块内的变量必须先声明再使用。

10、模块化开发
- 用于分工合作，每一个js都是一个模块，每个工程师都可以单独开发自己的模块，主模块最后引入调用
- 1、子模块要公开暴露
  export var obj={};
  2、主模块引入并且使用
  import {obj as 别名} from “./文件路径”
  3、HTML页面引入时需要将type更换为module
- ES6模块功能主要有两个命令构成，export和import，export用于规定独立的对外接口，import用于输入其他模块提供的功能，一个模块就是一个独立的文件，引入模块的script标签的type要设置为module。
11、扩展运算符 & Rest运算符

ES6中新增了扩展运算符和 Rest运算符，它们可以很好地解决函数参数和数组元素长度未知情况下的编码问题，使得代码能更加健壮简洁。

扩展运算符
- 扩展运算符用3个点表示...。
- 作用：将数组或类数组对象转换为用逗号分隔的值序列，基本用法是拆解数组和字符串。
```
// 1.扩展运算符代替apply()函数获取数组最大值
let arr = [1, 4, 2, 5, 3];

// apply()方法
Math.max.apply(null, arr);
// 扩展运算符方法
Math.max(...arr);

// 2.扩展运算符代替concat()函数合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat()方法
arr1.concat(arr2);
// 扩展运算符方法
[...arr1, ...arr2];
```
Rest运算符（剩余参数）
- Rest运算符使用3个点表示...。
- 作用：与扩展运算符相反，用于将以逗号分隔的值序列转换成数组。
- 使用rest运算符进行解构时，res运算符对应的变量必须放在最后一位，否则变量无法识别读取多少个数值，就会抛出错误。
- 函数的参数是一个使用逗号分隔的值序列，可以使用rest运算符转换成数组以代替arguments的使用。
```
// 1.Rest运算符与解构组合使用拆分数组
let arr = [1, 2, 3, 4, 5];
// 将数组拆分，第一个元素赋值到arr1，其余元素赋值到arr2
let [arr1, ...arr2] = arr;
// 将数组拆分，前两个元素赋值到arr1与arr2，其余元素赋值到arr3
let [arr1, arr2, ...arr3] = arr;

// 2.Rest运算符代替arguments
function sum(...arg) {
    // 获取形参数组
    console.log(arg);
}
// 传入形参
sum(形参1, 形参2, ...);
```
区分两种运算符
- 확산 연산자와 나머지 연산자는 서로 역연산이며, 확산 연산자는 배열을 독립된 시퀀스로 분할하는 것입니다. , 그리고 나머지 연산자

독립적인 시퀀스를 배열로 병합

扩展运算符和rest运算符互为逆运算

扩展运算符

将数组分割成独立的序列

rest运算符

将独立的序列合并成一个数组

当三个点出现在函数形参上或赋值等号左侧，则为rest运算符。
当三个点出现在函数实参上或赋值等号右侧，则为扩展运算符。

拓展 | Let、Var、Const区别

Let声明的变量，存在块级作用域，不存在变量提升，值可更改。
Var声明的变量，存在函数作用域，存在变量提升，值可更改。
Const声明的常量，存在块级作用域，值不可更改

함수 매개변수

대입 등호 왼쪽

점 3개

나머지 연산자

`함수 매개변수나 대입 등호`에 `점 3개`가 나타나면 `확장 연산자`입니다.

확장 | Let, Var 및 Const의 차이점

Let이 변수를 선언했으며, 블록 수준 범위가 있습니다. 변수 승격은 없습니다, 값은 변경될 수 있습니다.

Var에 의해 선언된 변수에는 함수 범위가 있고 변수 승격이 존재하며 값이 변경될 수 있습니다. .

Const가 선언한 상수는 블록 수준 범위를 가지며 값은 변경할 수 없습니다.

Extension | 객체 속성을 탐색하는 ES6의 다섯 가지 방법

for…in

for…in은 객체와 그 자체 및 상속된 열거 가능 속성(Symbol 속성 제외)을 탐색하는 데 사용됩니다.

Object.keys(obj)

Object.keys() 함수는 상속된 속성과 기호 속성을 제외하고 객체 자체의 모든 열거 가능한 속성을 포함하는 배열을 반환합니다.

Reflect.ownKeys(obj)

Reflect.ownKeys(obj) 함수는 열거 속성, 열거 불가능 속성 및 기호 속성을 포함할 수 있지만 상속 속성은 포함하지 않는 배열을 반환합니다.

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj) 함수는 상속된 속성과 기호 속성을 제외하고 객체 자체의 열거 가능한 속성과 열거 불가능한 속성을 포함하는 배열을 반환합니다.

🎜🎜🎜Object.getOwnPropertySymbols(obj)🎜🎜🎜🎜🎜Object.getOwnPropertySymbols(obj) 함수는 다른 속성을 제외한 객체 자체의 모든 기호 속성을 포함하는 배열을 반환합니다. 🎜🎜🎜【관련 추천: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜】🎜

위 내용은 es6의 핵심 기능은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：es6에서 두 배열의 교차점을 찾는 방법다음 기사：es6에서 두 배열의 교차점을 찾는 방법

es6의 핵심 기능은 무엇입니까

ES6 핵심 기능

拓展 | Let、Var、Const区别

함수 매개변수나 대입 등호에 점 3개가 나타나면 확장 연산자입니다.

관련 기사

`함수 매개변수나 대입 등호`에 `점 3개`가 나타나면 `확장 연산자`입니다.