es6
1.类(class)
对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。
2.模块化(Module)
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export):
ES6允许在一个模块中使用export来导出多个变量或函数。
export const name = 'Rainbow'; // 导出1个
const name = 'Rainbow';
const age = '24';
export {
name, age}; // 导出多个
export function myModule(val) {
return val;
}
export const myModule = val => val; // 箭头函数
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {
myModule} from 'myModule';
import {
name,age} from 'test';
3.箭头(Arrow)函数
这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。
但是:【箭头函数不能用于匿名函数;】
与普通function函数的区别:
1.箭头函数不能用于匿名函数
2.箭头函数不具有arguments对象,每一个普通函数调用后都具有一个arguments对象,用来存储实际传递的参数。但是箭头函数并没有此对象。
3.箭头函数不能用于Generator(生成器)函数。
4.箭头函数不具有prototype原型对象。
5.箭头函数不具有super。
箭头函数的结构:
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
4.函数参数默认值
ES6支持在定义函数的时候为其设置默认值:
function foo(height = 50, color = 'red') {
...
}
不使用默认值:
function foo(height, color) {
var height = height || 50;
var color = color || 'red';
}
5.模板字符串
ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。
不使用模板字符串:
var name = 'Your name is ' + first + ' ' + last + '.'
使用模板字符串:
var name = `Your name is ${
first} ${
last}.`
在ES6中通过${}就可以完成字符串的拼接,只需要将变量放在大括号之中。
6.解构赋值
解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
//如果你要忽略某些值,你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
//你也可以这样写
var a, b; //先声明变量
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
获取对象中的值
const student = {
name:'Ming',
age:'18',
city:'Shanghai',
};
const {
name, age, city } = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"
7.延展操作符(Spread operator)
延展操作符…可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-value的方式展开。
语法
函数调用:
myFunction(...iterableObj);
数组构造或字符串:
[...iterableObj, '4', ...'hello', 6];
构造对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):
let objClone = {
...obj }