Vue常用数组方法

最新推荐文章于 2024-06-05 14:26:44 发布

Spirit_SHIYI

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量850

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Spirit_SHIYI/article/details/126082697

版权

push()

向数组尾端添加元素, 返回值为数组的新长度

const array = [1, 2, 3, 4]          //   length: 4
const length = array.push(5)  
//可以同时添加多个 array.push(5, 6, 7, 8) => array=[1, 2, 3, 4, 5, 6, 7, 8]
console.log(array)        //    [1, 2, 3, 4, 5]
console.log(length)       //    5   (方法返回值)

pop()

移除数组的最后一个元素, 返回值为该元素

const array = [1, 2, 3, 4]
const last = array.pop(array)
console.log(array)        //    [1, 2, 3]
console.log(last)         //    4     (返回值)

shift()

移除数组的第一个元素, 返回值为该元素

const array = [1, 2, 3, 4]
const first = array.shift(array)
console.log(array)        /    [2, 3, 4]
console.log(first)        //    1     (/返回值)

unshift()

向数组的头部添加元素, 返回值为数组的新长度

const array = [1, 2, 3, 4]          //   length: 4
const length = array.unshift(5)  
//可以同时添加多个 array.unshift(5, 6) => array=[5, 6, 1, 2, 3, 4]
console.log(array)        //    [5, 1, 2, 3, 4]
console.log(length)       //    5   (返回值)

splice()

通过移除或者替代已有元素或添加新的元素来改变数组(修改的数组本身)

//splice方法可以有三个参数splice(start, deleteCount, items) 对应=>(起始位置, 移除个数, 添加的元素)
const array = [1, 2, 3, 4, 5, 6, 7, 8]          //   length: 4

//splice(start)  => 从该位置起移除后面所有元素(包括该位置)
array.splice(2)
console.log(array)  //  [1, 2]

//splice(start, deleteCount)  => 从该位置起删除后面的deleteCount个数的元素
array.splice(3, 2)
console.log(array)  //  [1, 2, 3, 6, 7, 8] 

//splice(start, deleteCount, items) => 从该位置起删除后面的deleteCount个数的元素,并在该位置添加items
array.splice(1, 3, 10, 11)
console.log(array)     // [1, 10, 11, 5, 6, 7, 8]

slice()

从某指定位置拷贝数组元素, 返回一个新的数组(不改变原数组的值)

const array = [1, 2, 3, 4, 5, 6, 7, 8]
const new1 = array.slice(2)     // 从索引值为2的元素开始拷贝后面所有元素
const new2 = array.slice(2, 3)  // 从索引值为2的元素开始拷贝后面三个元素
console.log(new1)    //   [3, 4, 5, 6, 7, 8]
console.log(new2)    //   [3, 4, 5]

concat()

合并数组, 返回值为合并后的新数组

const array1 = [1, 2, 3, 4, 5]
const array2 = ['a', 'b', 'c']
const array3 = array1.concat(array2)   (array1和array2的值不会改变)
console.log(array3)      =>    [1, 2, 3, 4, 5, 'a', 'b', 'c']

indexOf() / lastIndexOf()

(indexOf)找到指定元素的位置, 返回值找到则返回该元素索引值找不到则返回-1

(lastIndexOf)找到指定元素的最后一个位置, 返回值找到则返回该元素索引值找不到则返回-1

const array = [1, 2, 3, 4, 5, 3, 6, 3]
const index1 = array.indexOf(3)
const index2 = array.lastIndexOf(3)
console.log(index1, index2)   //  2, 7  (元素3第一个位置的索引值为2, 最后一个位置为7)

includes()

判断该数组是否包含该元素,返回值包含返回true 不包含返回false

const array = [1, 2, 3, 4, 5]
console.log(array.includes(2))    // true 
console.log(array.includes(6))    //false

find(function)/filter(function)

(find) 通过方法过滤元素,返回符合条件的第一个元素没有返回undefined

(filter)通过方法过滤元素,返回符合条件的所有元素(为数组)

const array = [1, 2, 3, 4, 5]

const result1 = array.find(item => item > 3)
const result2 = array.find(item => item > 6)
console.log(result1, result2)  
// 结果:   4, undefined (大于3的第一个元素是4, 无大于6的元素故undefined)

const result3 = array.filter(item => item > 3)
const result4 = array.filter(item => item > 6)
console.log(result3, result4)  
// 结果:   [4, 5], []  (大于3的元素有4和5故返回[4, 5], 无大于6的元素故为[]空数组)

forEach(function)

(遍历数组)对数组的每一元素添加操作无返回值

const array = [1, 2, 3, 4, 5]
array.forEach(item => console.log(item))

map()

(遍历数组)对数组的每一个元素操作并返回一个新数组(不改变原数组的值)

const array = [1, 2, 3, 4, 5]
const result = array.map((item) => {
    return item*2
})
//若只有一个return的返回语句 可简写为
//array.map(item => item*2)
console.log(result);     // [2, 4, 6, 8, 10]

sort()

对数组进行元素进行排序返回排序后的数组(修改的数组本身)

const array = [2, 6, 1, 7, 3, 8, 10, 21]
array.sort()
console.log(array);
// 结果: [1, 10, 2, 21, 3, 6, 7, 8]

排序规则: 将每个元素转化为字符串,然后根据UTF-16代码单元值进行比较

split()/join()

(split)用指定分隔符将字符串转化为数组(不改变原字符串的值) (属于字符串方法, 但与数组相关)

(join)用指定符号将数组的每一个元素连接成一个字符串(不改变原数组的值)

const str = 'i am a student,hello,everyone'

split:
//例1
const result = str.split('')    //无分隔符
//result输出结果: ['i', ' ', 'a', 'm', ' ', 'a', ' ', 's', 't', 'u', 'd', 'e', 'n', 't', ',', 'h', 'e', 'l', 'l', 'o']

//例2
const result = str.split(' ')  //以空格分开
//result输出结果: ['i', 'am', 'a', 'student,hello']

//例3
const result = str.split(',')  //以,分开
//result输出结果: ['i am a student', 'hello']


join:
const array = [1, 2, 3, 4, 5]
//例1
const result = array.join('')    //无连接符
//result输出结果: '12345'

//例2
const result = array.join('-')  //以-为连接符
//result输出结果: '1-2-3-4-5'

every(function)

判断数组每个元素是否符合条件, 全部符合条件则返回true 否则返回false

const array = [1, 2, 3, 4, 5]
const result1 = array.every(item => item > 0)
const result2 = array.every(item => item > 4)
console.log(result1, result2);   //true, false