es6核心特性是什么

180 阅读 0 评论 119 点赞

我是靠谱客的博主缥缈帅哥，这篇文章主要介绍es6核心特性是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

ES6核心特性

1、类 Class

ES6正式启用 Class 关键字来创建"类”，再通过实例化"类”来创建“对象”。类抽象了对象的公共部分，通过实例化类可以得到一个具体的对象。

复制代码// 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() {
        函数体;
    }
    ...
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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、箭头函数

注意事项

3、解构赋值

数组解构赋值

对象解构赋值

字符串解构赋值

函数参数解构赋值

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

// 传入参数时，数组参数解构为x与y
sum([1, 2]);1
2
3
4
5
6
7
// 函数参数支持解构赋值
function sum([x, y]) {
    return x + y;
}

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

圆括号使用注意

4、For…of 循环

复制代码for (value of arr) {
    执行操作;
}1
2
3
for (value of arr) {
    执行操作;
}
登录后复制

Iterator

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

5、数值新增方法

Number.isInteger()

Math.trunc()

复制代码// 低版本浏览器兼容语法
Math.trunc = Math.trunc || function (x) {
    return x < 0 ? Math.ceil(x) : Math.f1oor(x);
};1
2
3
4
// 低版本浏览器兼容语法
Math.trunc = Math.trunc || function (x) {
    return x < 0 ? Math.ceil(x) : Math.f1oor(x);
};
登录后复制

Math.sign()

6、字符串新增方法

模板字符串

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

复制代码`文本${变量}文本${变量}文本`1
`文本${变量}文本${变量}文本`
登录后复制

includes()、startsWith()、endsWith()

padStart()、padEnd()

ES2017引入了字符串补全长度功能，padstart() 用于头部补全，padEnd() 用于尾部补全。

复制代码// 补全长度方法提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12"
'08-31'.padStart(10, 'YYYY-MM-DD'); // "YYYY-08-31"1
2
3
// 补全长度方法提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12"
'08-31'.padStart(10, 'YYYY-MM-DD'); // "YYYY-08-31"
登录后复制

trimStart()、trimEnd()

repeat()

replaceAll()

7、对象新增方法

Object.is()

复制代码console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true1
2
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true
登录后复制

Object.assign()

8、数组新增方法

Array.from()

Array.of()

复制代码// 兼容版本Arrayof()方法
function Arrayof() {
    return Array.prototype.slice.call(arguments);
}1
2
3
4
// 兼容版本Arrayof()方法
function Arrayof() {
    return Array.prototype.slice.call(arguments);
}
登录后复制

数组实例的fill()

数组实例的find()

findIndex()

includes()

9、Let & Const

Let

Const

暂时性死区

10、模块化开发

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];1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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运算符（剩余参数）

复制代码// 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, ...);1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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, ...);
登录后复制