js、vue前端常用遍历方法

1.for

var arr = [1,2,4,6]

for(var i = 0, len = arr.length; i < len; i++){

console.log(arr[i])

}

2.forEach

var arr = [1,5,8,9]

arr.forEach(function(item) { 也可以用箭头函数：(item)=>{}

console.log(item);

})

3.for-in 一般用于遍历对象属性

var obj = {

name: 'test',

color: 'red',

day: 'sunday',

number: 5

}

for (var key in obj) {

console.log(obj[key])

}

test

red

sunday

5

4.for-of

var arr = [{name:'bb'},5,'test']

for (item of arr) {

console.log(item)

}

{name: 'bb'}

5

test

for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.

for-of 语句只遍历可迭代对象的数据。

5.map(不改变原数组)

var arr = [1,2,3]

var firearr = arr.map(current => current * 5)

6.reduce

6.reduce

数组求和: const arr = [1,2,3,4,5,6,7] const sum = arr.reduce((pre,cur)=>{ return pre +cur }) console.log(sum)

7.filter(不改变原数组)

多用于过滤：var arr = [2,3,4,5,6] var morearr = arr.filter(function (number) { return number > 3 })

8.every

检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false

var arr = [1,2,3,4,5] var result = arr.every(function (item, index) { return item > 0 })

9.some

检查数组中是否有某些项符号条件,如果有一项就返回true,否则返回false,有点像遍历数组或者操作.

10.扩展运算符 （...）

1.数组展开

var arr = [1, 2, 3]; test(...arr); // 打印结果 // 1 // 2 // 3

2.数据插入

var arr1 = [1, 2, 3]; var arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // 打印结果 // [1, 2, 3, 4, 5, 6]

3.字符串转数据

var str='test'; var arr3= [...str]; console.log(arr3); // 打印结果 // ["t", "e", "s", "t"]

4.当函数参数不确定时

function rest1(...arr) { for (let item of arr) { console.log(item); } } rest1(1, 2, 3); // 打印结果 // 1 // 2 // 3

function rest2(item, ...arr) { console.log(item); console.log(arr); } rest2(1, 2, 3, 4, 5); // 打印结果 // 1 // [2, 3, 4, 5]

5.解构

var [a,...temp]=[1, 2, 3, 4]; console.log(a); console.log(temp); // 打印结果 // 1 // [2, 3, 4]