17个vue常用的数组方法总结与实例演示

我们来详细讲解一下“17个vue常用的数组方法总结与实例演示”的完整攻略。

一、前言

在Vue中，我们经常需要操作数组。而对于数组的操作，Vue提供了许多方便快捷的方法。本文将对Vue中17个常用的数组方法进行总结和实例演示，方便大家学习和使用。

二、数组方法

1. push

向数组添加一个或多个元素，并返回新的长度。

let arr = [1,2,3];
let length = arr.push(4,5);
console.log(arr); //[1,2,3,4,5]
console.log(length); //5

2. pop

删除数组中的最后一个元素，并返回该元素的值。

let arr = [1,2,3];
let last = arr.pop();
console.log(arr); //[1,2]
console.log(last); //3

3. unshift

向数组的开头添加一个或多个元素，并返回新的长度。

let arr = [1,2,3];
let length = arr.unshift(1,0);
console.log(arr); //[0,1,2,3]
console.log(length); //4

4. shift

删除数组的第一个元素，并返回该元素的值。

let arr = [1,2,3];
let first = arr.shift();
console.log(arr); //[2,3]
console.log(first); //1

5. slice

返回一个新的数组，包含从开始到结束（不包括结束）的原数组中的元素。

let arr = [1,2,3,4,5];
let sliceArr = arr.slice(1,4);
console.log(sliceArr); //[2,3,4]

6. splice

向/从数组中添加/删除项目，然后返回被删除的项目。

let arr = [1,2,3,4,5];
let removedArr = arr.splice(2,2,6,7);
console.log(arr); //[1,2,6,7,5]
console.log(removedArr); //[3,4]

7. concat

返回一个新数组，将两个或多个数组连接在一起。

let arr1 = [1,2];
let arr2 = [3,4];
let newArr = arr1.concat(arr2);
console.log(newArr); //[1,2,3,4]

8. join

将所有数组元素连接成一个字符串。

let arr = ["Hello","World"];
let str = arr.join(" ");
console.log(str); //"Hello World"

9. reverse

反转数组中的元素顺序。

let arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); //[5,4,3,2,1]

10. sort

对数组的元素进行排序。

let arr = [5,3,4,1,2];
arr.sort((a,b)=>a-b);
console.log(arr); //[1,2,3,4,5]

11. indexOf

返回数组中第一个找到的元素的下标。

let arr = [1,2,3,4,5];
let index = arr.indexOf(3);
console.log(index); //2

12. lastIndexOf

返回数组中最后一个找到的元素下标。

let arr = [1,2,3,4,5,3];
let index = arr.lastIndexOf(3);
console.log(index); //5

13. filter

创建一个新数组，包含通过所提供函数实现的测试的所有元素。

let arr = [1,2,3,4,5];
let filterArr = arr.filter(value=>value>3);
console.log(filterArr); //[4,5]

14. map

创建一个新数组，其中包含当前数组中所有元素，每个元素都经过所提供的函数处理后得到的结果。

let arr = [1,2,3,4,5];
let mapArr = arr.map(value=>value*2);
console.log(mapArr); //[2,4,6,8,10]

15. forEach

对数组中的每个元素执行一次提供的函数。

let arr = [1,2,3,4,5];
arr.forEach((value,index)=>{
    console.log(`Index:${index} Value:${value}`);
});

16. every

检测数组中的所有元素是否都符合指定条件。

let arr = [1,2,3,4,5];
let flag = arr.every(value=>value>0);
console.log(flag); //true

17. some

检测数组中是否有元素符合指定条件。

let arr = [1,2,3,4,5];
let flag = arr.some(value=>value>3);
console.log(flag); //true

三、结语

以上就是本文对Vue中17个常用数组方法的总结和示例演示。希望对大家有所帮助，加深对Vue数组操作方法的理解和使用。如有错误或需要改进之处欢迎指出。