Loading... ~~已经要被TypeScript干麻了,怎么全是Error。~~ # ECMAScript 2015 又称ES6,JavaScript 语言的一个重要版本。加入了许多新特性和功能,主要包括:let 和 const 关键字、箭头函数、模块、Promise 和异步编程、类、解构赋值、模板字符串、默认参数、剩余参数和展开操作符等。 ## ES6重要语法 ### arrow_function 箭头函数 ```JavaScript // 传统函数 function test(a, b) { return a + b; } const test2 = function (a, b) { return a + b; } // 箭头函数 const test3 = (a, b) => { return a + b; } // 省略return关键字和函数体的花括号 const test3 = (a, b) => a + b; // 也可以有更复杂的函数体 const test4 = x => { // content }; ``` ### 上下文 函数中的 this 关键字代表了它的上下文 ```JavaScript let obj = { name: 'Dracowyn', greet: function() { console.log('Hello, ' + this.name); } }; obj.greet(); // 打印 "Hello, Dracowyn" ``` ### 无arguments ```JavaScript const test = function (teacher) { console.log(arguments); } const test1 = teacher => { console.log(arguments); } ``` ### class 用于创建相同或相似对象的蓝图。一个类定义了一种特定类型的对象应该包含哪些属性和方法(函数)。 ```JavaScript // 传统对象 - function function Dragon(name, color) { this.name = name; this.color = color; } Dragon.prototype.getDragon = function () { return `name: ${this.name}, color: ${this.color}`; } const dragon = new Dragon('Dracowyn', 'white'); // ES6 class Dragon { constructor(name, color) { this.name = name; this.color = color; } static getDragon() { return `name: ${this.name}, course: ${this.color}`; } } const dragon = new Dragon('Dracowyn', 'white'); ``` **属性定义** ```JavaScript // 封装能力 - 适配器模式 // 封装底层core class utils { constructor(core) { this._main = core; this._name = 'Dracowyn'; } get name() { return { ...this._main.name, name: '${this._name}' } } set name(val) { this._name = val; } } // 静态方法 class Dragon { constructor(dName, color) { this.dName = dName; this.color = color; } static getColor() { return `name: ${this.dName}, color: ${this.color}`; } getName() { return `name: ${this.color}`; } } const dragon = new Dragon('Dracowyn', 'white') dragon.getName() Dragon.getColor() ``` ### 继承 ```JavaScript function Child() { Dragon.call(this, 'Dracowyn', 'white'); this.start = function () { // …… } } Child.prototype = Course.prototype; // ES6 class class Child extends Dragon { constructor() { super('Dracowyn', 'white'); } start() { // …… } } ``` ### const 1. **标识常量** ```JavaScript const LIMIT = 10; const OBJ_MAP = { a: 'A', A: 'a' }; const QUEUE = [1, 2, 3, 5, 6] ``` 2. **不允许重复声明赋值** ```JavaScript // 变量 var arg1 = 'es'; arg1 = 'esNext'; // 常量 // ES5 Object.defineProperty(window, 'arg2', { value: 'aa', writable: false }); console.log(arg2); arg2 = 'bb1'; console.log(arg2); // ES6 // 赋值 const arg3 = 'aa'; console.log(arg3); arg3 = 'aa1'; // 声明 const arg4; arg4 = 'aa'; // 重复声明 const arg5 = 'aa'; const arg5 = 'bb'; ``` 3. **块级作用域** ```JavaScript if (true) { var arg1 = 'yy' } if (true) { const arg2 = 'yy1' } console.log(arg1) console.log(arg2) ``` 4. **无变量提升** ``` console.log(arg1) var arg1 = 'yy' // 相当于 var arg1 console.log(arg1) arg1 = 'yy' // 无变量提升 console.log(arg2) const arg2 = 'yy' ``` ### deconstruction 解构 ```JavaScript const Dragon = { name: 'Dracowyn', color: 'white' } const name = Dragon.name; const color = Dragon.color; const { name, color } = Dragon; ``` Last modification:December 20, 2023 © Reprint prohibited Support Appreciate the author AliPayWeChat Like If you think my article is useful to you, please feel free to appreciate