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 = [];
posted @ 2021-07-07 18:51  陌路y  阅读(123)  评论(0编辑  收藏  举报