ES6新特性总结篇

置顶甜甜的嘛.

已于 2023-07-27 15:36:51 修改

阅读量91

点赞数

分类专栏： ES6 文章标签：前端 es6

于 2023-07-19 14:57:34 首次发布

本文链接：https://blog.csdn.net/weixin_49734970/article/details/131809041

版权

ES6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

8、扩展运算符（...）、可选链运算符（？.）、函数绑定运算符（：：）

9、箭头函数

10、通过class关键字定义类

11、模块化import导入、export导出

12、promise

13、proxy

1、常量定义const、变量定义let

ES6新语法之let和const、Symbol、字符串新方法_甜甜的嘛.的博客-CSDN博客

2、新的数据类型symbol

ES6新语法之let和const、Symbol、字符串新方法_甜甜的嘛.的博客-CSDN博客

3、模板字符串

在ES6之前，要通过（反斜杠 / ）和（加号 + ）来构建模板，在ES6中，直接用（反引号` `）就可以搞定，变量放在${}中。

url="xxxxxx"
// es6之前
let html="<div>"+" <a>"+url+"</a>"+"</div>";

//es6
let eshtml=`<div>
               <a>${url}</a>
            </div>`

9、箭头函数

箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数。

箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this。(重点)

10、通过class关键字定义类

class 作为对象的模板被引入ES6，可以通过 class关键字定义类。class的本质依然是一个函数。

class person {
	constructor(name) {
        this.name=name
    }           
	say() {
		console.log("hello");
	}
}

var p = new person('p');
p.say(); 
console.log(p.name); // 输出结果为'hello'

类的继承通过extends关键字实现，子类必须在constructor中调用super

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	say() {
		console.log(this.name + ":" + this.age);
	}
}
class Student extends Person {
	constructor(name, age, sex) {
		super(name, age);
		this.sex = sex;
	}
}
var student = new Student("admin", 12, "male");
console.log(student.name);   // 输出结果为'admin'
console.log(student.sex);    // 输出结果为'male'
console.log(student.say());  // 输出结果为'ren:12'

11、模块化import导入、export导出

export命令规定模块的对外接口

一个模块是一个独立的文件，该文件内部的所有变量，外部无法获取，如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。所以我们通常在vue项目中引入第三方js文件（比如粒子动画）时，往往需要改动此文件，并将最终的变量或者函数或者类暴露出来才能在vue文件中通过import引入。
export可以输出变量、函数和类。一个模块只能有一个export输出。

import命令输入其他模块提供的功能

import的{}内的变量必须与export输出的变量名称相同，否则无法加载。输入的变量都是只读的，因为它的本质是输入接口，所以不允许在加载模块的脚本里面改写接口。

export default

在第三点中，我们已经知道了，import的变量必须与export输出的变量名称相同，这个规则导致我们必须知道输出的变量名称是什么才能顺利import，这就增加了我们阅读文档的时间，不利于快速上手。export default的出现就是为了让用户不用知道模块内定义的变量就能加载模块，它为模块指定了默认输出。