for, forEach, for-in, for-of(es6)
let arr = [1,2,3,4,5];
arr.b = '100'; // 自定义私有属性
// for循环 速度最快
for (let i = 0; len = arr.length, i < len; i++) { // 编程式
console.log("for循环"+arr[i]);
}
// forEach 不支持return和break,无论如何都会遍历完,
arr.forEach(function(item){
console.log("forEach循环"+item);
});
Vue 循环map对象拿到key值和value值
适用场景:
vue
中定义的map对象 map : { name : 'xxx' }
接口回显map格式的数据 data :{ key : value}
都可以通过以下方式拿到key
和value
的值
// for-in 遍历的是 key 值,且 key 会变成字符串类型,包括数组的私有属性也会打印输出
for(let key in arr){
console.log("for in循环"+key);
console.log(typeof key);
}
for(const key in map){
console.log("key名称是:"+key+",key的值是:"+map[key])
}
// for-of 遍历的是值 val,只能遍历数组 (不能遍历对象)
for(let val of arr){
console.log("for of循环"+val);
}
// Object.keys 将对象的 key 作为新的数组,这样 for-of 循环的就是原数组的 key 值
let obj = {school:'haida',age:20};
// 变成 ['school','age']
for(let val of Object.keys(obj)){
console.log(obj[val]);
}
eg:(使用for-in ) 组装下拉框需要的数据格式
接口返回的格式
// 获取产线列表
getLine() {
linePullDown().then((res) => {
for (let key in res.data) {
this.lineOptions.push({
name: key,
id: key,
});
}
});
},
组装后数据格式
页面下拉框 渲染效果
eg2 循环对象,拿到对应的key及value值,组装成新数组
数据格式
res:{data:{001:1}}
for (let key in res.data) {
this.expireData.push({
name: key,
num: res.data[key],
});
}
this.expireData.push({
name: 'Other',
num: '1'
})
console.log(this.expireData)
//[{name:'001',num:'1'},{name:'orther',num:'1'}]