你必须知道的ES6

501 阅读5分钟

1.基本介绍

  1)es6的全称是:ECMAScript6.0,ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,于2015年6月正式发布。目标“使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言”

  2)为什么要学习ES6 es6的出现,给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。流行的js框架都使用了大量的es6语法。

2.加入了let和const

1).let

let与var一样都是用于定义变量。

区别

  • 块级作用域(第三种作用域)。let所声明的变量,只在let命令所在的代码块内有效。
  • let没有“变量提升”现象。
  • 不会成为window对象的属性
  • 暂时性死区(TDZ)

1.块级作用域

在此之前是没有块级作用域的,只能通过function来划分作用域。在es6中通过let关键字实现了块级作用域。

上面的代码中,let 定义的变量只在{ }范围内有效,出了{ }就无效了。

2.let定义的变量不会提升

3.不会成为window对象的属性

4.暂时性死区(TDZ)

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ),就是要先定义变量,再使用。

2).const

1.const:声明常量,值不能改变。

2.必须立即初始化

3.解构赋值

1)什么是解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

  • 作用:是对变量进行赋值。
  • 变量的值的来源:是数组或者对象
  • 规则:有一定的模式

2)数组的解构赋值

按下标一一对应地去赋值 :

左右数量不等:
跳过部分 :
默认值:
嵌套:

3)对象的解构赋值

1,按属性名的一一对应关系来进行赋值

2,将现有对象的属性,赋值到某个变量

只要数据实现迭代器接口就可以用解构赋值。包括:数组、对象、字符串

4.数组扩展

1,Array.isArray()判断是否是一个数组: Array.isArray(arr) //ture或者false

2,forEach()对数组进行循环。

     数组.foreach( function(item,index ,arr){
        // item : 当前的数组元素,相当于arr[index]	  
        // index:数组元素的索引
        // arr 当前的数组
        } );

item,index,arr只是形参名,可以自己定义。

3,map()映射:逐一处理原数组元素,返回到一个新数组

4,filter()逐一过滤原数组元素,留下符合条件的元素得到一个新数组。

5,reduce()不断地将前一项和后一项的值进行运算(具体规则是由回调函数决定的,每次的运算会涉及两项),把前一轮运算的结果作为当前运算的前一项。返回最后结果。

数组元素是对象的例子:

6,some()只要数组中的某一个元素符合指定的条件,就会返回真,否则返回假。

7,every()如果数组中的所有元素都符合指定的条件,才返回true,否则返回false。只要有一个满足,则整体的结果就是false。

8,Array.from()是Array构造器的静态方法,将类数组对象转成真正的数组,以arguments为例

9,Array.of()将一组值转换为数组,与Array.from功能相似,可以理解用来创建数组。

5.函数扩展

1,ES6之后可以设置参数默认值

由于参数变量是默认声明的,所以不能用let或const再次声明 2,rest参数

注意:

  • f中有两个变量,a,rest
  • rest是一个数组
  • rest只是一个变量名,它是可以自己定义的
  • 最后一个必须是形参
  • rest取代了arguments对象

3,调用函数时…和定义函数时…是不一样的

上面的代码中,…是拓展运算符,是用来把一个数组“打散”

上面在定义函数时使用的…称为rest运算符,它的功能是把零散的参数列表打包成一个数组。

箭头函数

1,作用 :简化函数的定义,让我们写函数时更加的方便,快捷。

这里把function省略了,用=>来代替。

        只有一个参数可省掉():let f=x=>{return x*x}
        如有多个形参,或者没有形参,则()不能少
        如果只有一句函数体(非return),则可以不写{}:let f=x=>console.log(x*x)
        如果只有一句函数体,并它是return语句 ,则return也可以省,{}也可以省:let f=x=>x*x

2,箭头函数的一些特性

  • 不可以使用new命令,否则会出错误,如下:

  • arguments在函数体内不存在:

  • 如果要用实参列表,可以用 rest 参数代替:

  • 箭头函数没有自己的this:

可以看到上面的箭头函数由obj所调用,但是this并没有指向obj。所以箭头函数是没有this的。

下一篇将浅析this。