html5遍历数组,Vue中遍历数组的新方法

1、foreach

foreach循环对不能使用return来停止循环

1 search(keyword){

2 var newlist = []

3 this.urls.foreach(item =>{

4 if(item.name.indexof(keyword) != -1){

5 newlist.push(item)

6 }

7 })

8 return newlist

9 }

2、filter

item对象就是遍历数组中的一个元素，includes是es6中的新方法，在search方法中直接返回新数组

1 search(keyword){

2 return this.urls.filter(item =>{

3 if(item.name.includes(keyword)){

4 return item

5 }

6 })

7 }

3、findindex

返回true后index就可以获取到匹配的元素在进行删除

del(row){

this.$confirm("确定要删除吗？", "删除").then(action=>{

var index = this.urls.findindex(item =>{

if(item.name == row.name){

return true;

}

})

this.urls.splice(index, 1)

});

4、some

如果匹配成功就return true跳出some的循环

del(row){

this.$confirm("确定要删除吗？", "删除").then(action=>{

this.urls.some((item, i) =>{

if(item.name == row.name){

this.urls.splice(i, 1)

return true;

}

})

});

}

5、上例子，在一个vue的data中存入一个固定的数组，对数组进行遍历，实现搜索功能，删除功能

在el-table中 :data中绑定一个方法，方法中对固定的数组urls进行遍历，返回一个新的数组实现搜索功能

搜索关键字：

{{slot.row.name}}

表格操作

批量删除

export default {

data() {

return {

keyword:'',

selections: [],

urls: [{

name: "新浪",

url: "http://www.sina.com",

type: "资讯",

country: "中国"

},

{

name: "腾讯",

url: "http://www.tencent.com",

type: "聊天",

country: "中国"

},

{

name: "谷歌",

url: "http://www.google.com",

type: "资讯",

country: "美国"

},

{

name: "韬睿",

url: "http://www.51i-star.com",

type: "教育",

country: "中国"

}

]

};

},

methods: {

del(row){

this.$confirm("确定要删除吗？", "删除").then(action=>{

/* this.urls.some((item, i) =>{

if(item.name == row.name){

this.urls.splice(i, 1)

return true;

}

}) */

var index = this.urls.findindex(item =>{

if(item.name == row.name){

return true;

}

})

this.urls.splice(index, 1)

});

},

select(selections, row) {

this.selections = selections;

},

batchdelete() {

this.$confirm("确定要删除吗？", "删除")

.then(action => {

for (var i = this.urls.length - 1; i >= 0; i--) {

for (var j = this.selections.length - 1; j >= 0; j--) {

if (this.urls[i].name == this.selections[j].name) {

this.urls.splice(i, 1);

break;

}

}

}

})

.catch(error => {

alert(error);

this.$message('删除取消');

});

},

search(keyword){

/* var newlist = []

this.urls.foreach(item =>{

if(item.name.indexof(keyword) != -1){

newlist.push(item)

}

})

return newlist */

return this.urls.filter(item =>{

if(item.name.includes(keyword)){

return item

}

})

}

}

}

6、效果图为