vue的常用的数组 api

圆脸骑士7

于 2023-11-21 17:22:38 发布

阅读量126

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76466191/article/details/134536906

版权

数组的变异方法（这些方法都会影响到数组原始数据，都会被vue处理成响应式方式，都会影响到页面中模板变化；既就是会被vue双向绑定）

push : 会往数组的最后面添加一个元素，成功后会返回当前数组长度（虽然push进去的数据是已经双向绑定的，但是如果添加的数据是一个复杂数据类型的话就不会被双向数据绑定，需要 this.$set() 一下）-----会改变原数组
pop : 会删除数组的最后一个元素，成功会返回删除元素的值-----会改变原数组
shift : 会删除数组的第一个元素，成功会返回删除元素的值-----会改变原数组
unshift : 可向数组的开头添加一个或更多元素，并返回新的长度-----会改变原数组
splice : 从数组中添加/删除元素，然后返回被删除的元素(数组类型)-----会改变原数组 eg：1. splice(　index,　lenth,　[item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变原始数组）
参数：index：数组开始下标-----lenth：替换/删除的长度------item：替换的值，删除操作的话item为空
sort : 方法用于对数组的元素进行排序,会按照unicode编码顺序排序，返回值是排序后的数组-----会改变原数组
reverse ：按照编码默认降序排列，成功后返回成功后的数组

let arr = [1,2,3,4,5,6,7]

// push方法
let arrPush = arr.push('a')
// 如果是一个复杂数据类型的话需要 另外处理
this.$set(target, key, value);
// target 是目标对象，即要操作的数组或对象。
// key 是要设置的属性的键或数组的索引。
// value 是要设置的值
console.log(arrPush,arr) // 8 [1,2,3,4,5,6,7,'a']

// pop 方法
let arrPop = arr.pop()
console.log(arrPop,arr) // 'a' [1,2,3,4,5,6,7,]

// shift 方法
let arrShift = arr.shift()
console.log(arrShift,arr) // '1' [2,3,4,5,6,7,]

// unshift 方法
let arrUnshift = arr.unshift('w','s')
console.log(arrUnshift,arr) // '7' ['w','s',2,3,4,5,6,7,]

// splice  方法
let arrSplice = arr.arrSplice(3,2,'ooo')
console.log(arrSplice,arr) // [4,5] ['w','s',2,3,'ooo',6,7,]

// sort 方法 比较特殊，他接受一个回调函数最为参数，回调函数有两个参数，假设第一个为 a
// 第二个为 b 那么 a一定比 b 大

let numArr = [2,5,9,3,1,4,5,7,2,3,2,1,96]

numArr.sort( (a,b) =>{               
  // 如果返回值大于零 那么就会交换位置
  return a- b  // 这时候就是升序
})

numArr.sort( (a,b) =>{                
  // 如果返回值小于零 那么就不会交换位置
  return b - b  // 这时候不会交换位置  等于零同理
})

let arrNumDown = [1,2,3,4,5,6,7,8]

arrNumDown.reverse()
console.log(arrNumDown.reverse(),arrNumDown) // [8,7,6,5,4,3,2,1]

数组的遍历方法

不会影响原数组，会重新返回一个新数组
1. filter : 创建新数组,返回值是满足条件的数组
2. concat：合并两个数组，返回值合并后的新数组（在进行数组合并时，要确保两个数组的类型和结构是相同的，否则可能会导致数据类型错误或结构不匹配的问题）（和 … 展开运算符相同的效果）（属于浅拷贝效果，如果数组内部有复杂数据类型的话修改原数组，新数组也会被修改）
3. slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素（和splice不同的是 splice是删除，slice是截取且不会影响原数组）
4. map : 不改变原数组，会生成新的数组
5. every：若数组每一个对象都符合条件，则返回true ，只要有一个不符合条件就返回false
6. some：若数组中的对象只要有一个对象符合条件就返回true，全部对象都不符合条件才返回false
7. reduce : 循环接收一个函数作为累加器,最终计算为一个值 (reduce 循环对于空数组是不会执行回调函数的)
```JavaScript let arr = [1,2.3,4,5,6,9]

let arrFilter = arr.filter((item,index,arr) => { // item 当前元素,index 当前元素下表,arr 数组本身 // 必须有一个返回值 return item > }) console.log(arrFilter,arr) [6,9] [1,2.3,4,5,6,9]

// concat 合并数组不会影响原数组等于是浅拷贝 let arr1 = [1,2] let arr2 = [3,5,6]

let arr3 = arr1.concat(arr2) let arr4 = […arr1,..arr2] console.log(arr3,arr4) [1,2,3,5,6] [1,2,3,5,6]

// slice 截取数组不会影响原数组 let arr = [1,2,3,4,5]; console.log(arr.slice(1));//[2,3,4,5] 选择序列号从1到最后的所有元素组成的新数组。 console.log(arr.slice(1,3))//[2,3] 不包含end，序列号为3的元素

let arr = [1,8,5,1,32,6,9] let arr2 = arr.map( (item,index) => { // 必须有一个返回值 retrue item = 3 }) console.log(arr,arr2) //[1,8,5,1,32,6,9] [3,3,3,3,3,3,3]

let arr = [1,2,3,6,5,4,9,8,7]

let resultEvery = arr.every( (item,index) => { // 必须有返回值 return item > 5 }) let resultSome = arr.every( (item,index) => { // 必须有返回值 return item > 5 }) console.log(resultEvery,resultSome) // false true

// reduce api 接受两个参数，第一个是回调函数，第二个初始值（数字类型）（可不设置，不设置就是0） // 回调函数接受四个参数第一个是累加变量第二个是每一项第三个是下标第四个是数组本身后两个是可选择设置前两个是必须有的

let arr = [1,2,3,6]

let sum = arr.reduce( (num,item,index,arr) => { // 必须有返回值 return num + item },5 )

console.log(sum) // 17

- 数组的其他常用的api

  1. join: 将数组转换成字符串，用指定的分隔符隔开 --- 不会改变原数组的方法

  2. findIndex: 查找对应值在数组里面的位置，参数是一个回调函数，如果找到就会返回对应的元素索引，没有找到的话就是返回 -1----不会改变原数组的方法

JavaScript // join 方法 const arr = [1,2,3,'a','b'] let string = arr.join('/') console.log(string) // '1/2/3/a/b'

// findIndex let arr = [1, 2, 3, 4, 5, 6]; let item = arr.findIndex((item) => { return item > 2; }); console.log(item); // 2 console.log(arr); // [1, 2, 3, 4, 5, 6]

```