es6核心特性有哪些

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容主要讲解“es6核心特性有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6核心特性有哪些”吧!

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引擎会将{}理解成一个代码块，从而发生语法错误，需要将整个解构赋值语句放在圆括号()里面，即可正确执行。

字符串解构赋值

字符串也支持解构赋值，此时字符串被转换成了类数组对象。
类数组对象都有一个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

一种新的遍历机制，拥有两个核心。

迭代器是一个接口，能快捷的访问数据，通过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()内部使用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, ...);

区分两种运算符