前端开发中常用的ES6新特性

前端开发中常用的ES6新特性

​ 在日常的前端开发中，ES6已然成为了不可或缺的一部份。其中有以下几个特性，对开发者有着十分显著的帮助。

1. 使用箭头函数来解决指向问题；

var that = this ===> () => {};

2. 使用 let/const 取代 var声明变量，更好的解决变量的作用域、值变更等问题；

var number = 123;
let number2 = 456;
const NUMBER = 789；

3. 用数组/对象的解构赋值来命名变量，结构更清晰，语义更明确，可读性更好；

let student = {name:"小明",age:18};
let {name,age} = student;

4. 在长字符中插入变量的组合场景里，使用模板字符串来取代字符串的累加，能取得更好的效果和阅读体验；

let year = 2022;

console.log("今天是"+year+"年");
console.log("今天是${year}年")；

5. 使用 Class类取代传统的构造函数，来生成实例化对象；

class Person {
			constructor(name, age, gender) {
				this.name = name;
				this.age = age;
				this.gender = gender;
			}
			said() {
				console.log("hello world1");
			}
			call() {
				console.log("hello class");
			}
		};

		const STU1 = new Person();
		STU1.name = '小明';
		STU1.age = 18;
		STU1.gender = "男";

6. 在大型应用开发中，要保持 module模块化的开发思维，分清模块间的关系，常用 import、export方法来对模块进行导出导入。

   • 其中 module、import、export是 ES6中用来统一前端模块化方案的设计思路和实现方案；

   • export、import的出现统一了前端模块化的实现方案，整合规范了浏览器、服务端的模块化方法，用来取代传统的 AMD/CMD、requireJS、seaJS、commondJS等一系列前端模块的不同实现方案，使前端模块化更加统一规范。使得 JS也更加能适用在大型的应用程序开发中；

   • import引入的模块是静态加载（编译阶段加载），而不是动态加载（运行时加载）；

   • import引入 export导出的接口值是动态绑定关系。即通过该接口，可以取到模块内部实时的值。

   /* 暴露数据文件 name*/
   const name = "万物之恋";
   export default name;
   
   /* 引用模块文件 user*/
   import name from "./name";
   

这里是万物之恋，我们下次再见了！