vue foreach 循环数据 - vue

forEach方法使用：

ES6写法，除抛出异常可中断外，不可使用break，continue等方法

JavaScript Code复制内容到剪贴板

let listItems = this.tagList;//定义需要循环的数据
listItems.forEach(function(item) {
console.log(item.tagName);
});

JavaScript Code复制内容到剪贴板

Array.forEach(element => {
console.log(element.publishId);
});

改为箭头函数

JavaScript Code复制内容到剪贴板

Array.forEach((item,index) =>{
});

JavaScript Code复制内容到剪贴板

var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];
ary.forEach(function(value, index, _ary) {
console.log(index + ": " + value);
return false;
});

循环后，组成新数组：

JavaScript Code复制内容到剪贴板

import Vue from 'vue'
let listItems = this.tagList;//定义需要循环的数据
let newItems = [];
listItems.forEach(function(item) {
newItems.push({"label":item.lessonName,"value":item.lessonName});
});
console.log(newItems); //打印新的数组
Vue.set(this,"selectedLessonList", selectedLessonList); // 重新渲染循环的dom

如果Vue.set还是不生效，那只能强制更新

JavaScript Code复制内容到剪贴板

this.$forceUpdate();

foreach输出索引/下标：

JavaScript Code复制内容到剪贴板

this.lists.forEach((item,index) => {
...
})

在数组中作匹配：

JavaScript Code复制内容到剪贴板

this.tagList.forEach(function(item,index) {
if(tags.indexOf(item.tagName) !== -1){
Vue.set(that.tagList[index], 'isA', true);
}
});

查询在指定数组中，是否含有指定值，如果有，则删除它

在列表中作绑定：

XML/HTML Code复制内容到剪贴板

<div class="class-item clear" v-for="item in teachPlanLibrary" v-show="!item.show">{{item.planName}}</div>

多选删除：

JavaScript Code复制内容到剪贴板

let vm = this;
// 删除教学计划
if(!this.selectedPlanIds.length) {
this.$toast("请先勾选要删除的计划");
return false;
}
//teachPlanLibrary是在模板中渲染的时候用的
this.selectedPlanIds.forEach(function(item) {
vm.removeByValue(vm.teachPlanLibrary,item);
});

for循环，使用break可跳出循环：

PHP Code复制内容到剪贴板

removeByValue(arr, val) {
let vm = this;
// 查询value中是否有这个值，如果有就去除这个数组
for(var i = 0; i < arr.length; i++) {
//这里要注册是在匹配数组中的哪个值，这里的情况是planId
if(arr[i].planId == val) {
vm.$set(arr[i], 'show', true);
break;
}
}
},

foreach给数组增加键值对：

JavaScript Code复制内容到剪贴板

let vm = this;
let data = JSON.parse(res.data.gsonStr); // 返回的结果数组
let total = res.data.tot; // 返回的总条数
// console.log(data);
if(data){
for(var i = 0; i < data.length; i++) {
let item = data[i];
let timeStatus = vm.global.getStatusByTime(item.startTime,item.endTime); //是否开始状态
let timeStatusTxt = vm.global.getStatusByTimeShowTxt(timeStatus); //是否开始状态文字
let publishTypeTxt = vm.global.getPublishType(item.publishType); //类型
let statusTxt = vm.global.getPublishStatus(item.status);//草稿、未审核、已审核
vm.$set(item, 'statusTxt', statusTxt);
vm.$set(item, 'publishTypeTxt', publishTypeTxt);
vm.$set(item, 'timeStatus', timeStatus);
vm.$set(item, 'timeStatusTxt', timeStatusTxt);
};
}

for循环如果是多层循环可以将循环命名，跳出指定的循环。

JavaScript Code复制内容到剪贴板

first://需要将循环命名
for(var i=0;i<10;i++){
for(var j=0;j<5;j++){
if(i==3 && j==4){
break first;//跳出循环first
}
}
}

forEach 如果要提前终止

需要将forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止：

JavaScript Code复制内容到剪贴板

var myerror = null;
try{
arr.forEach(function(el,index){
if (el==20) {
console.log("try中遇到20,能退出吗?");//
foreach.break=new Error("StopIteration");
}else{
console.log(el);
}
});
}catch(e){
console.log(e.message);
if(e.message==="foreach is not defined") {
console.log("跳出来了?");//
return;
}else throw e;
}//可以跳出来

不规则数据循环：

JavaScript Code复制内容到剪贴板

var arr = [4, 6, 9, 1, 20, 11];
$.each(arr, function(i, elem) {
if(i != 0) {
console.log(i, elem);
}
})

对象遍历

1、for in

JavaScript Code复制内容到剪贴板

for (let key in obj) {
console.log(obj[key]) // foo, bar
}

可以看到对象原型上的属性也被循环出来了，在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性

JavaScript Code复制内容到剪贴板

for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]) // foo
}
}

这时候原型上的 bar 属性就被过滤掉了

2、Object.keys

Object.keys() 是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性，然后可以通过数组的 forEach() 方法来遍历

JavaScript Code复制内容到剪贴板

Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})

另外还有 Object.values() 方法和 Object.entries() 方法，这两方法的作用范围和 Object.keys() 方法类似，因此不再说明

for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性，就要用到前面提到的 Object.getOwnPropertyNames() 方法了

3、Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的 forEach 方法来遍历

JavaScript Code复制内容到剪贴板

// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
bar: 'bar'
}, {
baz: {
value: 'baz',
enumerable: false
}
})
obj.foo = 'foo'

// 不包括不可枚举的 baz 属性

JavaScript Code复制内容到剪贴板

Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})

// 包括不可枚举的 baz 属性

JavaScript Code复制内容到剪贴板

Object.getOwnPropertyNames(obj).forEach((key) => {
console.log(obj[key]) // baz, foo
})

ES2015 新增了 Symbol 数据类型，该类型可以作为对象的键，针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法

4、Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性

JavaScript Code复制内容到剪贴板

Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(obj[key])
})

什么都没有，因为该对象还没有 Symbol 属性

// 给对象添加一个不可枚举的 Symbol 属性

JavaScript Code复制内容到剪贴板

Object.defineProperties(obj, {
[Symbol('baz')]: {
value: 'Symbol baz',
enumerable: false
}
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(obj[key]) // Symbol baz, Symbol foo
})

5、Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性

JavaScript Code复制内容到剪贴板

Reflect.ownKeys(obj).forEach((key) => {
console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

方式	基本属性	原型链	不可枚举	Symbol
for in	是	是	否	否
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	是	是
Reflect.ownKeys()	是	否	是	是

顺便加一点遍历Map对象

JavaScript Code复制内容到剪贴板

var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
//方法一：
m.forEach(function (item) {
console.log(item.toString());
});
//方法二：
m.forEach(function (value, key, map) {
console.log(value)
})
// 输出:
// black
// red
// 2
//方法三：
for (var [key, value] of m) {
console.log(key + ' = ' + value);
}
// 输出:
// 1 = black
// 2 = red
// colors = 2

本文来自于：http://www.yoyo88.cn/study/vue/210.html

上一篇 vue router-link

下一篇 vue css，js引入方式