What are the core features of es6

es6 core features are: 1. Use the Class keyword to create a class, and then create an object by instantiating the class; 2. Arrow function, used to simplify the writing of callback functions; 3. Destructuring assignment, which can be done according to certain Mode, extract values ​​from arrays and objects, and assign values ​​to variables; 4. "For...of" loop, used to traverse data, arrays, and array-like objects.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

ES6 Core Features

1. Class Class

ES6 The Class keyword is officially enabled to create a "class" , and then create an "object" by instantiating the "class" . The class abstracts the public part of the object, and a specific object can be obtained by instantiating the class.

• Use capital for the first letter of the class name.
• Instantiated classes must use the New keyword.
• SimplifyObject-orientedEncapsulation, inheritance, polymorphism.
• Keywords extends can be used to create a subclass. The
Constructor function
• of the class can receive actual parameters and return the instance object .
• After a subclass inherits a parent class, it can call the parent class’s method, or override the parent class’s method (calling priority) .
• Keywords super Used to access and call functions , constructors and ## on the object’s parent class #Ordinary function can be used.
When using
• New to create an instance, will automatically call the Constructor function , If you do not write this function , the class function will be automatically generated.
[Note]
• SubclassWhen using super in the constructor, must be placed in front of this , that is, calls the parent class first The construction method,then use the subclass construction method.

// 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. Arrow function

• Arrow functionUse Simplify the writing of the callback function.
Simplified arrow function in event
• Need Note that this points to window.
Operation method
• : Omit function, add => between () and {}, omit single parameter ( ), Single statement function body omit {}, if the single statement is a return statementdirectly omit {} and return. Arrow functions can be used in conjunction with variable destructuring.
• Since curly braces are interpreted as code blocks, if the arrow function directly returns an object, you must add upper brackets outside the object, otherwise an error will be reported.

Notes

The arrow function does not have its own this object
• . The yield command cannot be used, so arrow functions cannot be used as Generator functions.
• Cannot be used as a constructor, that is, the new command cannot be used for arrow functions, otherwise an error will be reported.
• The arguments object cannot be used. The object does not exist in the function body and can be replaced by rest parameters.
• The first occasion is to define the method of the object, and the method includes this internally.
• The second occasion is when
requires dynamic this, arrow functions
• should not be used. Within the arrow function, you can also use the arrow function again. Below is a multiple nested function in ES5 syntax.

3. Destructuring assignment##Destructuring assignment is

analyzing the structure and then assigning the value

, ES6 allows

according to certain patterns, Extract values ​​from arrays and objects, Assign values ​​to variables, this is called Destructuring, this writing method belongs to "pattern matching" . As long as the pattern on both sides of the equal sign is the same , the variable on the left side of will be assigned the corresponding value .

Array destructuring assignment

If

the data on the right side of the equal sign

is a
• non-traversable structurewill report an error. Complete deconstruction
:
• The structures on the left and right sides of the equal sign are exactly the same, and the parsed structures will be assigned values ​​ one by one. Incomplete deconstruction
: The pattern on the left side of the equal sign
• , only matches part of the array on the right side of the equal sign, can still be deconstructed success. Destructuring assignmentAllows the default value to be specified
,
• ES6 internaluses the strict equality operator (===) to determine whether there is a value at a certain position , the default value will take effect only if the array members are strictly equal to undefined.

Object destructuring assignment

• 如果解构失败，变量的值等于 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, ...);

区分两种运算符

• The spread operator and the rest operator are the inverse operations of each other, The spread operator issplits the array into independent sequences , and the rest operator is merge independent sequences into an array.
• When three dots appear on the function parameter or on the left side of the assignment equal sign, it is rest operator.
• When three dots appear on the function argument or the on the right side of the assignment equal sign, it is the expansion operator.

Extension | Let, Var, Const difference

• ##LetDeclared variable, there is block-level scope , there is no variable promotion , the value can be changed .
• VarDeclared variable, exists function scope, exists variable promotion, value can be changed .
• ConstThe declared constant exists in block-level scope, and the value cannot be changed.

Extension | ES6 Five Ways to Traverse Object Properties

##for…in

for…in is used to traverse the object and its own and inherited enumerable properties (excluding Symbol properties).

Object.keys(obj)

Object.keys() function returns an array containing all the objects themselves Enumerable properties, excluding inherited properties and Symbol properties.

Reflect.ownKeys(obj)

Reflect.ownKeys(obj) function returns an array, which can contain Enumerated properties, non-enumerable properties and Symbol properties, excluding inherited properties.

Object.getOwnPropertyNames(obj)

The Object.getOwnPropertyNames(obj) function returns an array containing the object itself enumerable properties and non-enumerable properties, excluding inherited properties and Symbol properties.

Object.getOwnPropertySymbols(obj)

The Object.getOwnPropertySymbols(obj) function returns an array containing the object itself All Symbol attributes, excluding other attributes.

【Related recommendations:

javascript video tutorial

, web front-end】

The above is the detailed content of What are the core features of es6. For more information, please follow other related articles on the PHP Chinese website!