ES6定义那些新属性

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) //报错
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章