ES6新特性(常用的)
1.类(class)
ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。
2.模块化(Module)
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或函数。
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
3.箭头(Arrow)函数
这是ES6中最令人激动的特性之一。 =>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个 this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如 var self = this;或 var that =this这种引用外围this的模式。但借助 =>,就不需要这种模式了。
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)
5.模板字符串
ES6支持 模板字符串,使得字符串的拼接更加的简洁、直观。
不使用模板字符串:
var name ="your name is"+fist+last"
使用模板字符串:
var name ="your name is ${fist} ${last}"
在ES6中通过 ${}就可以完成字符串的拼接,只需要将变量放在大括号之中。
解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。
var foo=["one","two","three","four"]
var [one,two,three]=foo
console.log(one)
console.log(two)
console.log(three)
//如果你要忽略某些值,你可以按照下面的写法获取你想要的值
var [first,,,last]=foo
console.log(first)
console.log(last)
var a,b
//如果没有从数组中的获取到值,你可以为变量设置一个默认值。
[a=5,b=7]=[1]
console.log(a)
console.log(b)
7.延展操作符(Spread operator)
延展操作符(三点)…
可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-value的方式展开。
语法
函数调用:
myFunction(...iterableObj)
构造数组
没有展开语法的时候,只能组合使用 push,splice,concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅:
和参数列表的展开类似, … 在构造字数组时, 可以在任意位置多次使用。
数组操作
var myarr = [1, 2, 3,];
var myarr2=[...myarr] //[1, 2, 3,]
myarr2.push(77)
var myarr3=[...myarr,...myarr2]
console.log(myarr3) //[1, 2, 3, 1, 2, 3, 77]
在ECMAScript 2018中延展操作符增加了对对象的支持
8.对象属性简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名。
//不使用es6
const stuname="张三",stuage=18,city="成都";
var student={
stuname:stuname,stuage:stuage,city:city
}
console.log(student)
//使用es6
var student2={
stuname,stuage,city
}
console.log(student2)
10.支持let与const
在之前JS是没有块级作用域的,const与let填补了这方便的空白,const与let都是块级作用域。
使用var定义的变量为函数级作用域:
//使用var定义的变量为函数级作用域:
{var a=10}
console.log(a) //10
//使用let与const定义的变量为块级作用域:
{let ab=20}
console.log(ab) //报错