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

let arr = [1,2,3,4,5]; let str = arr.join(','); console.log(str) // -> '1,2,3,4,5'; 

let arr = ['张三','李四','王五']; let count = arr.push('马六'); console.log(arr) // -> ['张三','李四','王五','马六'] console.log(count) // -> 4 let item = arr.pop(); console.log(item) // -> 马六; 

let arr = ['张三','李四','王五']; let item = arr.shift(); console.log(arr) // -> ['李四','王五'] console.log(item); // -> 张三 let count = arr.unshift('马六'); console.log(arr) // -> ['马六','李四','王五'] console.log(count) // -> 3 

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

let arr = [12,2,43,5,2,5]; console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5] // 注意：通过上面的案例，你会发现 打印的数组和原数组比较还是有变化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有没有达到我们想要的结果，这是为什么呢？ // 因为排序是针对字符的排序，先使用数组的toString()方法转为字符串，再逐位比较，3是大于12的，因为首位3>1，不要与Number型的数据排序混淆。 5.1那如果需要数值排序怎么办呢？ // 如果需要数值排序，sort(callback) 需要传入一个回调涵数，该函数应该具有两个参数，比较这两个参数，然后返回一个用于说明这两个值的相对顺序的数字（a-b）； 例如： let arr = [12,2,43,5,2,5]; console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43] 

// 注意：slice（startIndex, endIndex）可以有两个参数，startIndex为必选，表示从第几位开始；endIndex为可选，表示到第几位结束(不包含endIndex位)，省略表示到最后一位；startIndex和endIndex都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。 let arr =  ['张三','李四','王五','马六']; console.log(arr.slice(1,3)); // -> ['李四', '王五'] console.log(arr) // -> ['张三','李四','王五','马六']; 原数组是没有改变的。 

// 注意：splice(start,num,val1,val2,...); 所有参数全部可选。和 slice 相比 splice 是会改变原数组的。 // start 是开始位置,可以为负数，-1就代表从最后一位开始，num代表要删除或者替换的长度，不能为负数。 let arr = ['张三','李四','王五','马六']; console.log(arr.splice(2,1)) // -> ['王五'] console.log(arr) // -> ['张三','李四','马六'] let arr = ['张三','李四','王五','马六']; console.log(arr.splice(2,1,'七郎')) // -> ['王五'] console.log(arr) // -> ['张三', '李四', '七郎', '马六'] 

let arr = [1,2,3,4,5,6]; console.log(arr.toString()) // -> '1,2,3,4,5,6' // 注意：没有参数。 

// 注意：indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1 let arr = ['张三','李四','王五','马六']; console.log(arr.indexOf('李四')) // -> 1 console.log(arr.indexOf('李四',2)) // -> -1 10.forEach() ES5新增的方法，用来遍历数组，没有返回值， // 注意：forEach(callback);callback默认有三个参数，分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。 let arr = ['张三','李四','王五','马六'] let a = arr.forEach((item,index,self)=>{ console.log(value + "--" + index + "--" + (arr === self)); }) // 打印结果为： // 张三--0--true // 李四--1--true // 王五--2--true // 马六--3--true console.log(a);  // -> undefined---forEach没有返回值 //该方法为遍历方法，不会修改原数组 

//注意：map(callback);callback默认有三个参数，分别为value，index，self。跟上面的forEach()的参数一样 let arr = ['张三','李四','王五','马六']; let arr1 = arr.map(item => { return '你好：'+item }) console.log(arr1) // -> ['你好：张三', '你好：李四', '你好：王五', '你好：马六'] 

// 注意：filter(callback);callback默认有三个参数，分别为value，index，self。 let arr = [1,2,3,4,5,6]; let arr1 = arr.filter((value,index,self)=>{ console.log(item) // -> 1,2,3,4,5,6 console.log(index) // -> 0,1,2,3,4,5 console.log(self) // -> [1,2,3,4,5,6] return item > 3 }) console.log(arr1) // -> [4,5,6] 

let arr = ['张三','李四','王五','马六']; let str = arr.find(item => item == '李四'); console.log(str); // -> '李四' 

let arr = ['张三','李四','王五','马六']; let index = arr.findIndex(item => item == '李四'); console.log(index); // -> 1; 

// 注意： every()接收一个回调函数作为参数，这个回调函数需要有返回值，every(callback);callback默认有三个参数，分别为value，index，self。 let arr = [1,2,3,4,5,6]; let bool = arr.every(item => item > 0); console.log(bool); // -> true; let bool = arr.every(item => item > 3); console.log(bool); // -> false; 

//注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);callback默认有三个参数，分别为value，index，self。 let arr = [1,2,3,4,5,6]; let bool = arr.some(item => item > 3); console.log(bool) // -> true; let bool = arr.some(item => item > 6); console.log(bool) // -> false; 

// 注意：　参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。 reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。 callback返回的任何值都会作为下一次执行的第一个参数。 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。 let arr = [10,20,30,40,50]; let sum = arr.reduce((prev,now) => prev+now) console.log(sum); // -> 150; let sum = arr.reduce((prev,now) => prev+now,110) console.log(sum)