简单记录一下,常用的六种数组循环的方法,分别是for(),map(),forEach(),filter (),every(),some();
一、for循环
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
for (let i = 0; i < data.length; i++) {
console.log(data[i])
}
二、map循环
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
data.map((item, index) => {
console.log(item) //表示的是每一项
console.log(index) //表示的是数组的索引
})
三、forEach
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
data.forEach((item, index) => {
console.log(item) //表示的是每一项
console.log(index) //表示的是数组的索引
})
四、 filter (过滤掉不满足条件的元素,把满足条件的元素返回一个新的数组,不会改变原来的数组)
let data = [{
name: '张三'
}, {
name: '李四'
}, {
name: '王五'
}]
let a = data.filter((item, index) => {
return item.name == '张三'
})
console.log(a)
五、every(遍历数组,当每一项都为true时返回true,否则为false)(遇到false停止执行,必须要有return值)
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
let a = data.every((item, index) => {
return item.age > 20
})
console.log(a)//输出 false
六、some(遍历数组, 当有一项为真(true)时, 就会停止循环)
let data = [{
name: '张三',
age: 10
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 30
}]
let a = data.some((item, index) => {
return item.age > 20
})
console.log(a)//true
VUE中list的各种方法和运用
1、instanceof() : 检测一个对象是否是数组(用来对付复杂数据类型)
var arr = [1,2,3];
console.log(arr instanceof Array); // 返回值为: ture arr属不属于Array(数组)类型
2、valueOf(): 返回数组本身
var arr = ["aaa","bbb","ccc"];
console.log(arr.valueOf()); // 返回值为: ["aaa","bbb","ccc"]
3、toString():把数组变成字符串
(1).toString() var arr = ["aaa","bbb","ccc"];
console.log(arr.toString()); // 返回值为: aaa,bbb,ccc
(2).join() 把数组中的所有元素放入一个字符串
var arr = ["aaa","bbb","ccc"];
var array = arr.join(''); // ' ' 中加间隔符 为空默认不加
console.log(array); //返回值为:aaabbbccc
4-1、push(): 在数组的最末尾添加元素
var arr = [1,2,3];
var aaa = arr.push("abc"); //在数组的最末尾添加一个元素
console.log(arr); // 返回值为: [1,2,3,abc]
console.log(aaa); // 返回值为: 4 返回值是数组的长度
4-2、pop(): 在数组的最末尾删除一项(不需要参数)
var arr = [1,2,3];
var aaa = arr.pop(); // 在数组的最末尾删除一个元素
console.log(arr); // 返回值为: [1,2]
console.log(aaa); // 返回值为: 3 返回值是被删除的那一项
5-1、unshift(): 在数组的最前面添加一个元素
var arr = [1,2,3];
var aaa = arr.unshift("abc"); //在数组的最前面添加一个元素
console.log(arr); // 返回值为: [abc,1,2,3]
console.log(aaa); // 返回值为: 4 返回值是数组的长度
5-2、shift(): 在数组的最前面删除一项(不需要参数)
var arr = [1,2,3];
var aaa = arr.shift(); // 在数组的最前面删除一个元素
console.log(arr); // 返回值为: [2,3]
console.log(aaa); // 返回值为: 1 返回值是被删除的那一项
6、reverse(): 数组反向输出
var arr1 = [1,2,3,4,5];
var aaa = arr1.reverse(); // 返回值为: [5,4,3,2,1]
7、sort(): 数组排序 (默认顺序:按照首个字符的Unicode编码排序,从小到大)
(1).默认排序 var arr1 = [4,5,1,3,2,7,6];
var aaa =arr1.sort();
console.log(aaa); // 返回值为: [1, 2, 3, 4, 5, 6, 7]
(2).自定义排序 var arr2 = [4,5,1,13,2,7,6];
//回调函数里面返回值如果是: 参数1-参数2:升幂; 参数2-参数1:降幂
arr.sort(function (a,b) {
return a-b; // 升序
return b-a; // 降序
});
console.log(arr2); // a-b返回值为:[1, 2, 4, 5, 6, 7, 13] b-a返回值为:
8、concat(): 拼接数组
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3) // 返回值为: [1, 2, 3, "a", "b", "c"]
9、slice():数组截取 形式:slice(开始位置的数组下标 ,结束位置的数组下标)
var arr = [1, 2, 3, "a", "b", "c"];
console.log(arr.slice(3)); // 返回值为: ["a", "b", "c"] 从下标为3(包括第3个)的开始截取到最后
console.log(arr.slice(0,3)); // 返回值为:[1, 2, 3] 从下标为0(包括第0个)的开始截取3个
console.log(arr.slice(-2)); // 返回值为: ["b", "c"] 负数是从最后往前截取 -2就是截取到倒数第二个
js模拟list和map application/x-rar
3星 超过45%的资源 2KB
下载 console.log(arr.slice(3,0)); // 返回值为: [ ] 如果前面的比后面的大,那么就是[ ];
10、splice():数组的替换和删除 形式:splice(开始下标值,删除个数,替换内容1,替换内容2,...)
(1).删除 var arr = [1,2,3,4,5,6,"a", "b", "c"]
arr.splice(5); // 从下标值为5(包括第5个)的开始删除到最后
console.log(arr); // 返回值为: [1, 2, 3, 4, 5]
arr.splice(5,1);
console.log(arr); // 返回值为:[1, 2, 3, 4, 5, "a", "b", "c"]
(2).替换 var arr = [1,2,3,4,5,6,"a", "b", "c"];
console.log(arr.splice(3,3,"aaa","bbb","ccc")); //从下标值为3(包括第3个)的开始删除3个并且替换掉删除的
console.log(arr); // 返回值为:[1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
11、indexOf() / lastIndexOf():查元素在数组中的下标值
var arr = ["a","b","c","d"];arr.splice(1,2); // 从下标值为1(包括第1个)的开始删除2个(删除指定位置指定个数)
console.log(arr.indexOf("b")); //返回值为:1 (从前往后查询)查到以后立刻返回
console.log(arr.lastIndexOf("d")); //返回值为:6 (从后往前查询)查到以后立刻返回
console.log(arr.indexOf("xxx")); // 返回值为:-1 查不到就返回-1
12、filter():数组过滤函数
var arr = [111,222,333,444,555];
var newArr = arr.filter( function (element, index, array) {
//筛选能被2整除的元素 组成新数组
if( element%2 === 0 ){
return true;
}else{
return false;
}
})
console.log( newArr ); // 返回值为:[222, 444]
13、forEach(): 数组循环(和for循环一样;没有返回值;)
var arr = [111,222,333,444,555];
js中List、Tree互相转换 html
2星 超过35%的资源 2KB
下载 var sum = 0;
var aaa = arr.forEach(function (element,index,array) {
console.log(element); // 返回值为:输出数组中的每一个元素
console.log(index); // 返回值为:数组元素对应的索引值
console.log(array); // 返回值为:[111, 222, 333, 444, 555]
sum += element; // 数组中元素求和;
});
console.log(sum); // 返回值为:1665 数组元素加起来的和
console.log(aaa); // 返回值为:undefined 因为没有返回值 所以返回undefined
14、map(): 对数组中每一项运行回调函数,返回该函数的结果组成的新数组(return什么新数组中就有什么; 不return返回undefined; 对数组二次加工)
var arr = [111,222,333,444,555];
var newArr = arr.map(function (element, index, array) {
if(index == 2){
return element; // 这里return了 所以下面返回的值是333
}
console.log(newArr); // 返回值为: [undefined, undefined, 333, undefined, undefined]
return element*100; // 返回的元素值都乘上100后的值
})
console.log(newArr); // 返回值为:[11100, 22200, 333, 44400, 55500]
15、some():对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true
var arr = [111,222,333,444,555];
var bool = arr.some(function (ele,i,array) {
//判断数组中是否有3的倍数(只要有一个是就返回true)
if(ele%3 == 0){
return true;
}
return false;
})
console.log(bool); //返回值为:true ; 有一个成功就是true
16、find():查找数组里面的符合条件的项目
var arr = [111,222,333,444,555];
let obj = arr.find(it=>it==111)
console.log(obj) // 111
17、findIndex():查找数组里面的符合条件的项目
var arr = [111,222,333,444,555];
let obj = arr.findIndex(it=>it==333)
console.log(obj) // 2
18、join():将数组转为字符串
var arr = [111,222,333,444,555];
let obj = arr.join("---")
console.log(obj) // 111---222---333---444---555
19、copyWithin():将指定位置的元素复制到数组的其他位置
返回值为移动后数组。
原始数组的内容会被改变,原始数组的长度不会改变。
arr.copyWithin(index, startIndex, endIndex)
第一个参数为(必需),期望被复制的内容将要插入的位置。
第二个参数为(可选),数组中复制的内容起始的位置,默认为 0 。如果为负值,表示倒数。
第三个参数为(可选),数组中复制的内容截至的位置,默认等于数组长度。如果为负值,表示倒数。
var arr = [111,222,333,444,555];
arr.copyWithin(3,0,1) //将数组下标0-1的内容复制到数组下第三个及以后
console.log(arr) //[111, 222, 333, 111, 555]
arr.copyWithin(0,1) //[222,333,444,555,555]
arr.copyWithin(0,2) //[333,444,555,444,555]