vue中数组常用的六种循环方法、VUE中list的各种方法和运用

简单记录一下，常用的六种数组循环的方法，分别是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