ES6学习(0)

前言

在业务的开发过程中,我们做的最多的事情就是复制粘贴,但是在向往成为一名IT技术大牛的路上,显然这样是不行的,开发了这么久了,也发现了自己不少的弊端,所以决定敞开心扉去拥抱ES6,毕竟马上ES7就要出来了…

for-of循环

ES6的到来或多或少会改变我们的编码风格,但是你完全不用担心你写的那些又丑又长的旧代码是否会在ES6中出现这样或者那样的问题,首先ES6是一个划时代的Javascript的进化,但这并表明它就抛弃了原有的东西,所以你那些又丑又长的代码是可以通过部分的改装成ES6尽量变得美观起来。

我们在JS中经常会用的for去遍历数组、或者对象之类的。
那时候的天很蓝,我们没有那么多的小心思。

1
2
3
for (var i = 0; i < arr.length; i++) {
console.log('小呆呆' + arr[i]);
}

从ES5正式发布后,我们的小心思就多了,你可能不会再像之前那样按部就班的写代码了,我们会去尝试更多的新鲜元素

1
2
3
arr.forEach(function (value) {
console.log('新鲜的元素' + value);
})

使用forEach可以让代码更简洁,但是有一个小弊端,就是你不能使用break来中断循环,同样的也不能使用return来退出循环到外层函数。
你可能会想到for-in循环,但是用它来遍历数组这绝对是一个糟糕的决定,

1
2
3
for (var i in arr) {
console.log(arr[i]);
}

  • okay我们先来猜一猜i的值,是0,1,2...这样的数字? actually,事情并没有向我们想的的那样,实际上赋给i的值是字符串"0","1",这很有可能会造成字符串算数计算,例如: "3" + 1 == "31",这给我们的额编码过带来额极大的不便。
  • 作用于数组的for-in循环除了遍历数组元素外,还会比那里自定义属性,例如,我们在数组中添加一个arr.name的属性,那么for-in循环就会额外执行一次,遍历到名为“name”的索引。就连数组原型链上的属性都能被访问到。
  • 最意外的是,这段代码有可能并不是像你想的那样按照顺序执行,有可能是随机的顺序遍历数组元素。
  • 简单的说:for-in是为普通对象设计的,你可以遍历得到字符串类型的键,所以不适用于遍历数组。

okay,既然如此for-in并没有像我们想的那样强大,其实对于初学者的我们,for-in已经很有用了,减少了我们不少的编码工作,弹一山更比一山高,接下来就为大家介绍更加强大的家伙

for-of 循环

首先我们来看一个栗子

1
2
3
for (var i of arr) {
console.log(i);
}

  • 这是最简洁的、最直接的遍历数组元素的语法
  • 这个方法避开了for-in循环的所有缺陷
  • 与forEach()不同的是,它可以正确的响应breakcontinuereturn语句

你以为这样就完了吗?no,no,no,for-of循环不仅支持数组,还支持大多数的类数组对象,例如DOM NodeList对象
也支持遍历字符串,它将字符串视为Unicode字符来进行遍历

1
2
3
for (var chr of "123") {
console.log(chr);
}

同样的对于ES6中新增的MapSet也支持
举个栗子,Set对象可以自动排除重复项
生成Set对象后我们可以随意的遍历它所包含的内容

1
2
3
4
var newArr = new Set(arr);
for (var key in newArr) {
console.log(key);
}

Map对象有些许不同:它内含的数据由键值对组成,所以那你需要使用到解构(destructuring)来将键值对拆解为两个对立的变量:

1
2
3
for (var [key, value] of arrMap) {
console.log(key + '-----' + value);
}

for-of循环不支持普通对象,但如果你需要迭代一个普通对象的属性,是可以使用for-in循环或者内建的Object.keys()方法:

1
2
3
for (var key of Object.keys(obj)){
conosole.log(key + '------' + obj[key]);//输出的是可枚举的属性
}

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 前言
  2. 2. for-of循环
  3. 3. for-of 循环