1. for 循环

for 循环在JavaScript 刚萌生的时候就出现了,for循环是使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。for循环没有返回值。

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])

2. forEach 循环

遍历数组中的每一项,没有返回值,对原数组没有影响,但不支持IE

arr.forEach((value, index, array) => {
	// 参数一是: 数组元素
	// 参数二是: 数组元素的索引
	// 参数三是:当前的数组

3. filter 数组过滤

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组。

注意:它不会改变原始数组,但是直接返回一个新数组。

let arr = [12, 66, 4, 88, 3, 7];
let res = arr.filter((value, index, array) => {
	// 参数一是:数组元素
	// 参数二是:数组元素的索引
	// 参数三是:当前的数组
	return value >= 20;
});
console.log(res); // [66,88] 返回值是一个新数组

4. map 循环

map() 的回调函数中支持 return 返回值,相当于把数组中的每一项改变,但并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了

let arr = [12,23,24,42,1]; 
let res = arr.map((item, index, ary) => { 
    return item*10; 
console.log(res); // [120,230,240,420,10];  原数组拷贝了一份,并进行了修改
console.log(ary); // [12,23,24,42,1];  原数组并未发生变化

5. some 循环

some() 是查找数组中是否有满足条件的元素,返回值是布尔值,如果查找到这个元素,就返回 true(有任意一项符合条件即返回true) , 如果查找不到就返回 false。

如果查询数组中唯一的元素,用 some 方法更合适,在 some 里面遇到 return true 就是终止遍历,迭代效率更高。

let arr = [10, 30, 4];
let flag = arr.some((value, index, array) => {
	return value < 3;
});
console.log(flag); // false 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

6. every 循环

every() 是对数组中的每一项运行给定函数,只有当该函数对每一项返回true,才返回true,否则返回false。

let arr = [1, 2, 3, 4, 5, 6];
let flag = arr.every((value, index, array) => {
	return value > 3;
});
console.log(flag); // false

7. for of 循环

for-of 循环是ES6新增特性,for-of 的功能不仅仅用于遍历数组,它还可以 遍历字符串、遍历类数组对象、支持 Map 和 Set 对象遍历。

let arr = [1, 2, 3, 4];
for (let item in arr) {
    console.log(item) // 遍历每个元素 1 2 3 4

8. find

find() 方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

let ary = [{
	id: 1,
	name:'张三'
}, {
	id: 2,
	name:'李四'
}];
let res = ary.find((item, index) => item.id === 2); 
console.log(res) // {id:2,name:'李四'}
// 找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个

9. findIndex

findIndex() 用于找出第一个符合条件的数组成员的位置,如果没有找到返回 -1。

对于数组中的每个元素,findIndex方法都会调用一次回调函数(采用升序索引顺序),直到有元素返回 true。只要有一个元素返回 true,findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true,则 findIndex 返回 -1。注意:findIndex不会改变数组对象。

let ary = [1, 5, 10, 15];
let resIndex = ary.findIndex((value, index) => value > 9);
console.log(resIndex); // 2
// 找数组里面符合条件的值的位置(索引),注意,只会匹配第一个

数组原型方法还有以下这些:

join():用指定的分隔符将数组每一项拼接为字符串,默认使用逗号作为分隔符
push():向数组的末尾添加新元素
pop():删除数组的最后一项
shift():删除数组的第一项
unshift():向数组首位添加新元素
slice():按照条件查找出其中的部分元素
splice():对数组进行增删改
concat():用于连接两个或多个数组
indexOf():检测当前值在数组中第一次出现的位置索引
lastIndexOf():检测当前值在数组中最后一次出现的位置索引
includes():判断一个数组是否包含一个指定的值
sort():对数组的元素进行排序,默认排序顺序为升序排列
reverse():对数组进行倒序,反转数组
fill(): 方法能使用特定值填充数组中的一个或多个元素
copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中
toLocaleString()、toString(): 将数组转换为字符串
flat()、flatMap():扁平化数组
entries() 、keys() 、values():遍历数组
                    JS遍历数组常用方法总结: 1. for 循环  2. forEach  3. filter 4. map  5. some 6. every  7. for of 循环  8. find  9. findIndex ......
				
1、普通for循环 ---循环一定的次数 2、for~of ---循环可迭代对象 3、.forEach(function(currentValue,index,arr){}) 4、for~in ---循环遍历对象的属性 5、.every(function(currentValue,index,arr){}) 6、.map(function(currentValue,index,arr){}) 7、.some(function(currentValue,index,arr){})
for 循环,大家在熟悉不过用来遍历数组或者json等对象数组 var arr = [1,2,3]; for(var i = 0; i < arr.length; i++) { console.log(i +'-'+ arr[i]); // 0-1 // 1-2 // 2-3 2. forEach 遍历 遍历数组 列出数组的每个元素 va...
第一种:for循环,也是最常见的 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); 打印结果: 第二种:forEach() 1.)forEach() 遍历普通数组 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; arr.forEach(item => {
文章目录1:前言2:解决办法2.1:采取this.$set(obj, '属性名', newval)更新对象数据2.2:采取this.$set(数组, 下标index, newval)更新数组数据 最近遇到需要前端自己大量处理数据,通过请求多个接口获取数据再整合展示。例如展示酒店列表吧,我采取的办法是获取酒店列表ID数组,而后通过遍历ID数组并同时将其中的hotelID作为参数发送同步请求获取酒店静态信息并更新到一个存储酒店列表数据的变量数组中,之后还需要在这个变量数组中进行遍历每个酒店的基本房型下
一般来说 我们for循环用后端接口数组需要返回的数据填充,但是返回后 发现 数组中的数据并没有接口返回的数据, 本人在vue项目中就遇到了这个问题,比如 test(arr) { for (let i = 0; i < (arr.length - 1); i++) { let url = arr[i].dataUrl; if (url != null) { let data = this.getData(url);