本篇内容主要讲解“es6核心特性有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6核心特性有哪些”吧!
我们提供的服务有：成都网站设计、网站制作、外贸营销网站建设、微信公众号开发、网站优化、网站认证、个旧ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的个旧网站制作公司
es6核心特性有：1、使用Class关键字创建类，再通过实例化类来创建对象；2、箭头函数，用于简化回调函数的书写；3、解构赋值，可按照一定模式，从数组和对象中提取值，对变量进行赋值；4、“For…of”循环，用于遍历数据、数组、类数组对象。
本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
ES6核心特性
1、类 Class
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 默认值才会生效。
对象解构赋值
如果解构失败，变量的值等于 undefined。
对象属性没有次序，但变量必须与属性同名，才能解析到正确的值。
对象解构可以指定默认值，默认值生效的条件是对象的属性值严格等于undefined。
对象解构时，由于JavaScript引擎会将{}理解成一个代码块，从而发生语法错误，需要将整个解构赋值语句放在圆括号()里面，即可正确执行。
字符串解构赋值
函数参数解构赋值
// 函数参数支持解构赋值
function sum([x, y]) {
return x + y;
}
// 传入参数时，数组参数解构为x与y
sum([1, 2]);圆括号使用注意
函数参数禁用圆括号。
变量声明语句禁用圆括号。
赋值语句的模式匹配部分禁用圆括号。
只有赋值语句的非模式匹配部分，可以使用圆括号。
4、For…of 循环
for (value of arr) {
执行操作;
}Iterator
一种新的遍历机制，拥有两个核心。
迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next()方法获取迭代之后的结果。
迭代器是用于遍历数据结构的一个指针（类似于数据库的游标）
5、数值新增方法
Number.isInteger()
Number.isInteger()，用来判断数值是否为整数。
如果参数不是数值返回false。
JavaScript内部整数和浮点数采用同样的储存方法，所以25和25.0被视为同一个值。
JavaScript数值存储为64位双精度格式，数值精度最多可以达到53个二进制位(1个隐藏位与52个有效位)，如果数值的精度超过这个限度，第54位及后面的位就会被丢弃，方法失效。
Math.trunc()
// 低版本浏览器兼容语法
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()
replaceAll()
ES2021引入了replaceAll()方法，可以一次性替换所有匹配，它的用法与 replace()相同，返回一个新字符串，不会改变原字符串。
7、对象新增方法
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.of()
Array.of()用于将一组值转换为数组。
Array. of()返回参数值组成的数组，如果没有参数就返回一个空数组。
此方法可以弥补数组构造函数Array()因为参数个数的不同的差异。
Array.of()基本上可以替代Array()或new Array()，它不存在由于参数不同而导致的重载。
// 兼容版本Arrayof()方法
function Arrayof() {
return Array.prototype.slice.call(arguments);
}数组实例的fill()
fill()方法使用给定值，填充一个数组。
用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
方法支持第二个和第三个参数，用于指定填充的起始位置和结束位置。
如果填充的类型为对象，那被赋值的是同一个内存地址的对象，而不是深拷贝对象。
数组实例的find()
findIndex()
includes()
9、Let & Const
ES6中，除了全局和局部作用域，新增了块级作用域。
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运算符，它们可以很好地解决函数参数和数组元素长度未知情况下的编码问题，使得代码能更加健壮简洁。
扩展运算符
// 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声明的常量，存在块级作用域，值不可更改。
拓展 | ES6遍历对象属性五种方法
for…in用于遍历对象和自身和继承的可枚举属性(不包含Symbol属性)。
Object.keys()函数返回一个数组，包含对象自身所有可枚举属性,不包含继承属性和Symbol属性。
Reflect.ownKeys(obj)函数返回一个数组，可包含枚举属性,不可枚举属性以及Symbol属性,不包含继承属性。
Object.getOwnPropertyNames(obj)函数返回一个数组，包含对象自身的可枚举属性和不可枚举属性，不包含继承属性和Symbol属性。
Object.getOwnPropertySymbols(obj)函数返回一个数组，包含对象自身所有Symbol属性,不包含其他属性。
到此，相信大家对“es6核心特性有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
新闻名称：es6核心特性有哪些
URL标题：
http://www.cdkjz.cn/article/podopg.html
