Es6B - 箭头函数/set/map结构

箭头函数

注意：

1.只含有1个表达式

2.含有多条语句

3.this的指向问题

我们还是先来看Es5的函数定义写法：

运行结果如下：

再来看Es6用箭头定义函数的写法：

运行结果相同，如下：

Es6箭头函数要比Es5的普通写法简便许多

如果是多条语句，并且在传一定的参数情况下，该如何写：

传递参数：

运行结果如下：

如果后面有其他语句的话，不单单是返回这一个值：

例如，我们通过函数求a*b的值：

运行结果如下：

this指向问题【重点/难点】

还是先来看一下Es5和Es6编写的区别：

普通函数this是指向window的：

运行结果如下：

如果在对象里面使用的话：

运行结果如下：

如果我们来换一种Es6的函数写法：

运行结果如下：

这里面的this是指向定义时所在的作用域，而不是执行时所在的作用域

即：输出什么就指向什么！！！

我们再来举个例子：

此时用的function，返回Es5的结果，即Axl

运行结果如下：

我们添加一个console.log(this);来看一下返回什么：

我们来对比一下，运行结果如下：

我们来改成Es6的写法：

运行结果如下：

set结构

定义方式：

与定义数组差不多，但是它会自动去除重复的值

举个小例子：

运行结果如下：

会自动去除重复的2

… 扩展运算符：

可以将set结构转换为数组

运行结果如下：

这时set又转为了数组类型

set的遍历：

我们都知道数组可以通过for或for…in进行遍历

set的遍历，有另一种遍历方式：for…of

运行结果如下：

除了这些set还提供了一些属性和实用方法：

1.set.size  //长度

2.set.add (0)  //新增元素

3.set.delete (0)  //删除元素

5.set.has (0)  //是否含有某一个元素

6.set.clear ()  //清空

我们来具体看一下：

运行结果如下：

还有一些方法，有具体的返回值：

1.keys()  //返回键名的遍历器

2.values()  //返回键值的遍历器

3.entries()  //返回键值对的遍历器

4.forEach()  //使用回调函数遍历每个成员

我们来具体看一下：

运行结果如下：

map结构

定义方式：

set类似于数组结构，map类似于对象结构

运行结果如下：

在定义的时候我们就创建了name和age两个属性，如果我们想要追加的话：

map.set( )直接追加即可

运行结果如下：

它和set同样具有相同的属性和方法，不再具体细说，简单一写带过：

不同之处在于，他没有map.add添加元素，只有map.set追加元素

并且没有map.has查看

运行结果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web