ES6基础入门教程（四）简单的数据解构

数据解构

---

我记得我曾经在解释mvc和mvvm区别的文章里，不止一次说过，区别mvc和mvvc必须要搞清楚route在前端还是后端，另外一个就是，数据的解构是在哪里完成的。

那么，嘿，问题来了。我傻傻的问一句到底什么是数据解构？

把一个后端传递过来的json或者数组中的内容渲染到页面上，就叫数据解构。当然，json或者数组我们不能把array obj直接往页面上渲染，我们需要通过一个方法把他遍历出来。

是哪个方法？

for

---

for…of , for…in，forEach 是es6中常用的三种循环，用于替代es5中的for
其实在es6中 对于数组处理，有很多方法，会在后面一一介绍，现在先抛砖引玉：

三大遍历的区别

let arr=["a","b"]

// a = 下标
// for in的缺点是index的值是string 不但遍历值，还会遍历属性，某些情况下，会随机遍历
// 并且for in还不受 break终止循环的控制
for (let a in arr){
    console.log(a);//0，1 
    console.log(arr[a])//a,b
}

// a = 值
// for of的唯一缺点是不能获取到下标 除非对方是一个map元素
for (let a of arr){
    console.log(a);//a,b
}

// forEach得到下标和值 注意，forEach是一个数组方法，是es6中新增的，以前只能用for去循环
// 这里val和index的位置是必须的 val是值 index是下标
arr.forEach((val,index)=>{
    console.log(val);//a,b
    console.log(index);//0,1
})

如果使用for of就不会产生 for in中的所有问题，但是，他不能获取到下标。
for of还可以用来遍历字符串

let str = "abcdef";
for(let i of str){
    console.log(i);
}

如果想要获取下标 只能把数组转化为map对象。

// 这里会出现一个问题，那就是for of是无法获取下标的 只有map对象可以通过for of 获得下标
let arr=[1,"abc",3,"666",5]
// 把数组对象转化为map对象 通过new Map方法创建map对象
for(let [index,val] of new Map(arr.map((item,i)=>[i,item]))){
    console.log(index,val);
}

额外说明：

---

for of中还支持这几个函数，keys，values，entries，分别用来获取
下标，值和下标值组。

// 这几个都是遍历键和值的 遍历出来的keys是键的数组 values是值的数组
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"