1.模板字符串
ES6中允许使用反引号 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}
//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
2.函数默认参数
在ES5中,我们是这样给函数定义参数默认值的:
function action(num) {
num = num || 200
//当传入num时,num为传入的值
//当没传入参数时,num即有了默认值200
return num
}
而在ES6中,我们是这样定义函数的默认参数的:
// 在定义函数时便初始化了这个参数
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
3.箭头函数
不需要通过function关键词来创建
可以省略掉return 关键词
继承当前上下文的this关键词
操作符左边为输入的参数,而右边则是进行的操作以及返回的值,这样的写法可以为我们减少大量的代码,看下面的实例:
let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];
4.解构
若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子:
function getVal() {
return [1, 2];
}
var [x,y] = getVal(); //函数返回值的解构
console.log('x:'+x+', y:'+y); //输出:x:1, y:2
5.定义函数
我们先来看一个基本的新特性,在javascript中,定义函数需要关键字function,但是在es6中,还有更先进的写法,我们来看:
es6写法:
var human = {
breathe(name) { //不需要function也能定义breathe函数。
console.log(name + ' is breathing...');
}
};
human.breathe('jarson'); //输出 ‘jarson is breathing...’
6.创建类
class Human {
constructor(name) {
this.name = name;
}
breathe() {
console.log(this.name + " is breathing");
}
}
var man = new Human("jarson");
man.breathe(); //jarson is breathing
所以我们看到,我们可以像java那样语义化的去创建一个类。另外,js中的继承父类,需要用prototype来实现。那么在es6中,又有什么新的方法来实现类的继承呢?继续看:
假如我们要创建一个Man类继承上面的Human类,es6代码:
class Man extends Human {
constructor(name, sex) {
super(name);
this.sex = sex;
}
info(){
console.log(this.name + 'is ' + this.sex);
}
}
var xx = new Man('jarson', 'boy');
xx.breathe(); //jarson is breathing
xx.info(); //arsonis boy
7.模块
在ES6标准中,javascript原生支持module了。将不同功能的代码分别写在不同文件中,各模块只需导出(export)公共接口部分,然后在需要使用的地方通过模块的导入(import)就可以了。下面继续看例子:
内联导出
ES6模块里的对象可在创建它们的声明中直接导出,一个模块中可无数次使用export。
export class Human{
constructor(name) {
this.name = name;
}
breathe() {
console.log(this.name + " is breathing");
}
}
export function run(){
console.log('i am runing');
}
function eat() {
console.log('i am eating');
}
导出一组对象
另外,其实如果需要导出的对象很多的时候,我们可以在最后统一导出一组对象。
class Human{
constructor(name) {
this.name = name;
}
breathe() {
console.log(this.name + " is breathing");
}
}
function run(){
console.log('i am runing');
}
function eat() {
console.log('i am eating');
}
export {Human, run};
Default导出
导出时使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出,也可以用于一组对象导出声明中。
... //创建类、函数等等
export default { //把Human类和run函数标注为default对象导出。
Human,
run
};
无对象导入
如果模块包含一些逻辑要执行,且不会导出任何对象,此类对象也可以被导入到另一模块中,导入之后只执行逻辑。如:
import './module1.js';
导入默认对象
使用Default导出方式导出对象,该对象在import声明中将直接被分配给某个引用,如下例中的“app”。
import app from './module1.js';
上面例子中,默认./module1.js文件只导出了一个对象;若导出了一组对象,则应该在导入声明中一一列出这些对象,如:
import {Human, run} from './app.js'