Apakah ciri teras es6

Ciri teras es6 ialah: 1. Gunakan kata kunci Kelas untuk mencipta kelas, dan kemudian buat objek dengan membuat seketika kelas; Penstrukturan tugasan, yang boleh dilakukan mengikut Mod tertentu, mengekstrak nilai daripada tatasusunan dan objek, dan menetapkan nilai kepada pembolehubah 4. "Untuk...daripada" gelung, digunakan untuk melintasi data, tatasusunan dan tatasusunan-; seperti objek.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Ciri teras ES6

1 Kelas Kelas

ES6Didayakan secara rasmi Ayuh Class 关键字, 创建"类” mari buat 再通过实例化"类”. “对象”Kelas mengabstraksi bahagian awam objek dan objek khusus boleh diperolehi dengan membuat instantiat kelas.

• Gunakan 类名首字母. 大写
• Mesti guna 实例化类. New 关键字
• Berorientasikan objek 简化. 封装、继承、多态
• 关键字 boleh digunakan dengan extends. 创建一个子类
daripada kelas
• , boleh menjadi Constructor 函数 dan 接收实参. 返回实例对象
• , sama ada 子类继承父类后 atau 调用父类的方法. 重写父类的方法（优先调用）
• 关键字 boleh digunakan untuk super, 访问和调用对象父类上的函数 dan 构造函数. 普通函数
menggunakan
• akan menjadi New 创建实例时, 自动调用 Constructor 函数, 如果不写此函数. 类函数会自动生成
【Nota】
• terdapat dalam 子类, 构造函数中使用super, iaitu 必须放到 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 Fungsi anak panah

• digunakan untuk <.>箭头函数. 简化回调函数书写
memerlukan
• . 事件中简化箭头函数注意 this 指向为 window
Cara mengendalikan
• : , dalam , 省略function, () 和 {} 间添加 =>, jika 单形参省略 () terus 单语句函数体省略 {}. 单语句为 return 语句省略 {} 和 returnFungsi anak panah boleh digunakan bersama dengan pemusnahan pembolehubah.
• Memandangkan kurungan kerinting ditafsirkan sebagai blok kod, jika fungsi anak panah mengembalikan objek secara langsung, anda mesti menambah kurungan atas di luar objek, jika tidak, ralat akan dilaporkan.

Nota

.
• 箭头函数没有自己的this对象Arahan hasil tidak boleh digunakan, jadi fungsi anak panah tidak boleh digunakan sebagai fungsi penjana.
• tidak boleh digunakan sebagai pembina, iaitu arahan baharu tidak boleh digunakan untuk fungsi anak panah, jika tidak ralat akan dilaporkan.
• Objek argumen tidak boleh digunakan. Objek tidak wujud dalam badan fungsi dan boleh digantikan dengan parameter rehat.
• Peristiwa pertama adalah untuk mentakrifkan kaedah objek, dan kaedah itu termasuk ini secara dalaman.
• Peristiwa kedua ialah
.
• 需要动态this的时候，也不应使用箭头函数Dalam fungsi anak panah, anda juga boleh menggunakan fungsi anak panah sekali lagi. Di bawah ialah fungsi bersarang berbilang dalam sintaks ES5.

3. Memusnahkan tugasan

Memusnahkan tugasan ialah

, ES6 membenarkan

, 解析结构再赋值, 按照一定模式, ini dipanggil 从数组和对象中提取值, kaedah penulisan ini tergolong dalam 对变量进行赋值, asalkan 解构（Destructuring）, "模式匹配". 等号两边模式相同左边的变量就会被赋予对应的值

Tugasan pemusnah tatasusunan

Jika

ialah
• maka ia akan menjadi 等号的右边数据. 不可遍历结构报错
:
• , ia akan menjadi 完全解构. 等号左右两边的结构完全相同解析结构一一对应赋值
: tanda sama dengan
• , 不完全解构, 左边的模式. 只匹配一部分的等号右边的数组依旧可以解构成功 memusnahkan tugasan
,
• menggunakan 允许指定默认值, hanya ES6内部. 严格相等运算符（===）判断某一位置是否有值数组成员严格等于 undefined 默认值才会生效

Pemusnahan objek dan tugasan

• 如果解构失败，变量的值等于 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()的常见用途是为数值补全指定位数，也可以用于提示字符串格式。

// 补全长度方法提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12"
'08-31'.padStart(10, 'YYYY-MM-DD'); // "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运算符互为逆运算, 扩展运算符 ialah 将数组分割成独立的序列 dan rest运算符 ialah 将独立的序列合并成一个数组.
• Apabila 三个点 muncul dalam 函数形参上 atau 赋值等号左侧, ia adalah rest运算符.
• Apabila 三个点 muncul dalam 函数实参上或赋值等号右侧, ia adalah 扩展运算符.

Peluasan | Biarkan, Var, Perbezaan Const

• Let diisytiharkan 变量, wujud 块级作用域, 不存在变量提升, 值可更改.
• Var diisytiharkan 变量, wujud 函数作用域, 存在变量提升, 值可更改.
• Const diisytiharkan 常量, wujud 块级作用域, 值不可更改.

Dilanjutkan |. ES6 Lima Cara Melintasi Sifat Objek

• untuk…dalam

for…in digunakan untuk melintasi objek dan sifat terhitungnya sendiri dan diwarisi (tidak termasuk sifat Simbol).

• Object.keys(obj)

Fungsi Object.keys() mengembalikan tatasusunan yang mengandungi semua objek sendiri Harta terbilang, tidak termasuk harta warisan dan sifat Simbol.

• Reflect.ownKeys(obj)

Reflect.ownKeys(obj) fungsi mengembalikan tatasusunan, yang boleh mengandungi penghitungan Harta terhitung, sifat tidak terhitung dan sifat Simbol, tidak termasuk harta warisan.

• Object.getOwnPropertyNames(obj)

Fungsi Object.getOwnPropertyNames(obj) mengembalikan tatasusunan yang mengandungi objek itu sendiri sifat terbilang dan sifat tidak terhitung, tidak termasuk harta warisan dan sifat Simbol.

• Object.getOwnPropertySymbols(obj)

Fungsi Object.getOwnPropertySymbols(obj) mengembalikan tatasusunan yang mengandungi objek sendiri Semua atribut Simbol, tidak termasuk atribut lain.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah ciri teras es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!