ES6常用语法
ES6 常用语法
- 新增 let、const 命令 来声明变量，和var 相比，let 声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const 声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。
- 新增解构赋值、rest 语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
- 新增模块化机制，这是 JavaScript 走向规范比较重要的一步，让前端更方便的实现工程化。
- 新增类和继承的概念，配合模块化，JavaScript 也可以实现高复用、高扩展的系统架构。
- 新增模板字符串功能，高效简洁，结束拼接字符串的时代。
- 新增 Promise 机制，解决异步回调多层嵌套的问题。
- 更多学习：点击
一、声明变量const let var
- var，变量提升,是全局作用域或函数作用域，var声明的变量存在覆盖现象
- let，表示变量，是块级作用域，比如一个函数内部，代码块{}内部，let不允许在相同作用域内，重复声明同一个变量。属于局部作用域，没有覆盖现象。不会污染全局变量
- const，表示常量,是块级作用域，比如一个函数内部，代码块{}内部，常量一旦声明不可修改，属于局部作用域。
- ES5 只有全局作用域和函数作用域，没有块级作用域
二、模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
?| 1 2 3 4 5 6 7 8 9 10 |
|
三、箭头函数
- 如果参数只有一个，可以省略小括号
- 如果不写return，可以不写大括号
- 没有arguments变量
- 不改变this指向
- 其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
- 箭头函数，this指向外层代码块的this
- 普通函数，this指向调用它的对象，也就是person对象
四、对象
1、属性简洁表示法
2、Object.assign()
- Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是源对象。
- 参数必须都是对象，否则抛出TypeError错误。
- Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。
var x = {name: "Q1mi", age: 18}; var y = x; var z = Object.assign({}, x); x.age = 20; x.age // 20 y.age // 20 z.age // 18对象
五、类
ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。
类之间通过extends继承，继承父类的所有属性和方法。
super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，
否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
六、import和export
import 导入模块、export导出模块
?| 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 |
// main.js
// 导出多个声明
export var name = "alex"
export var age = "18"
export function aa() {
return 1
}
// 批量导出
export {name, age, aa}
// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
// 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var app = new Vue({
});
export default app
// test.js
// import app from "./main"
import my_app from "./main"
|
七、解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。
八、字符串函数
- 在此之前，JavaScript中只有str.indexOf(char)方法可用来确定一个字符串是否包含在另一个字符串中。
- ES6中又提供了3种新方法：
- includes()：返回布尔值，表示是否找到了参数字符串。
- stratsWith()：返回布尔值，表示参数字符串是否在源字符串的开始位置。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾位置。
九、Promise
- Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了
Promise对象。 - 使用Promise的优势是有了
Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。其实Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
const promiseObj = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } });
十、其他
Symbol Set & Map 数组的扩展方法 迭代器 Interator() & 生成器 Generator() Promise async class模块化