ES6(2015)新特性:类、模块化、箭头、函数参数默认值、模板字符串
1. 类(class)
ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。
class Man {
constructor(name) {
this.name = 'fly63前端';
}
console() {
console.log(this.name);
}
}
const man = new Man('fly63前端');
man.console(); // fly63前端
2. 模块化(ES Module)
ES6模块在编译时就能确定模块的依赖关系,以及输入和输出的变量。这种加载称为“编译时加载”或者静态加载,效率更高,使静态分析成为可能,比如引入宏和类型检验功能。这也导致了没法引用ES6模块本身,因为它不是对象。
ES6模块自动采用严格模式。尤其需要注意this的限制,顶层的this指向undefined。
ES6模块通过export命令规定模块的对外接口,通过import命令输入其它模块提供的功能。
// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3
http://www.xihuanfan.com 手机游戏下载
3. 箭头(Arrow)函数
ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。
const func = (a, b) => a + b;
func(1, 2); // 3
4. 函数参数默认值
在ES6如果函数参数没有值或未定义的,默认函数参数允许将初始值初始化为默认值。
function foo(age = 25,){ // ...}
5. 模板字符串
模板字面量是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。
const name = 'fly63前端';
const str = `Your name is ${name}`;
6. 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
let a = 1, b= 2;
[a, b] = [b, a]; // a 2 b 1
7. 延展操作符
延展操作符 = ...可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开,还可以在构造对象时,将对象表达式按key-value的方式展开。
let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
8. 对象属性简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名。对象中直接写变量,非常简洁。
const name='fly63前端',
const obj = { name };
9. Promise
Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。
Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ,再打印 2
10. let和const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
let name = 'fly63';
const arr = [];