数组的一些方法笔记

稍微整理一下数组的常用方法

一.push

可以给数组结尾添加一个，有意思的是他返回的是个length长度

<template>
    <div>{{ data }}</div>
    <div>{{ changevalue }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const changevalue=ref([])
const changeinfo=()=>{
    changevalue.value=data.value.push(1)
    console.log(changevalue.value)
    console.log(data.value)
}
</script>

二.pop

可以删掉数组最后一位，会返回你所删掉的值，当数组删完的时候只剩下一个值，再调用一次会返回undefined,还挺有意思

<template>
    <div>{{ data }}</div>
    <div>{{ changevalue }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const changevalue=ref([])
const changeinfo=()=>{
    changevalue.value=data.value.pop()
    console.log(changevalue.value)
    console.log(data.value)
}
</script>

三.unshift

<template>
    <div>{{ data }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const changeinfo=()=>{
    data.value.unshift(1)
}
</script>

四.shift

和pop差不多意思，会返回一个你所删掉的值，最后没了为undefined

<template>
    <div>{{ data }}</div>
    <div>{{ changevalue }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5,99])
const changevalue=ref([])
const changeinfo=()=>{
    changevalue.value=data.value.shift(1)
    console.log(changevalue.value)
    console.log(data.value)
}
</script>

五.concat

<template>
    <div>{{ data }}</div>
    <div>{{datachange}}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const data2=ref([6,7,8])
const data3=ref([9])
const datachange=ref()
const changeinfo=()=>{
datachange.value=data.value.concat(data2.value,data3.value)
}
</script>

六.splice

由以下例子可以大概把其看做splice（从x截到最后，给截到的位置设定个值，插入新值1，插入新值2），截到的值会在原数组中消失

<template>
    <div>{{ data1 }}</div>
    <div>{{ data2 }}</div>
    <div>{{ data3 }}</div>
    <div>{{ splicevalue1 }}</div>
    <div>{{ splicevalue2 }}</div>
    <div>{{ splicevalue3 }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
const data=ref([1,2,3,4,5])
const data1=ref([1,2,3,4,5])
const data2=ref([1,2,3,4,5])
const data3=ref([1,2,3,4,5])
const splicevalue1=ref([])
const splicevalue2=ref([])
const splicevalue3=ref([])
import {ref} from 'vue'
const changeinfo=()=>{
    splicevalue1.value=data1.value.splice(1,1)
    splicevalue2.value=data2.value.splice(2)
    splicevalue3.value=data3.value.splice(2,2,'帅气','越越')
}
</script>

七.slice

<template>
    <div>{{ data1 }}</div>
    <div>{{ changevalue1 }}</div>
    <div>{{ changevalue2 }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const data1=ref([1,2,3,4,5])
const data2=ref([1,2,3,4,5])
const changevalue1=ref([])
const changevalue2=ref([])
const changeinfo=()=>{
    changevalue1.value=data1.value.slice(2,4)
    changevalue2.value=data1.value.slice(2)
}
</script>

八.sort（）

排序，可以分别按一位位比，也可以比大小

<template>
    <div>{{ data1 }}</div>
    <div>{{ changevalue1 }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const data1=ref([1,2,3,4,5,111])
const changevalue1=ref([])
const changeinfo=()=>{
    changevalue1.value=data1.value.sort()
}
</script>

九.reverse()

反转数组

<template>
    <div>{{ data1 }}</div>
    <div>{{ changevalue1 }}</div>
    <div>{{ changevalue2 }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const data1=ref([1,2,3,4,5,111])
const data2=ref([1,2,3,4,5,111,101])
const changevalue1=ref([])
const changevalue2=ref([])
const changeinfo=()=>{
    changevalue1.value=data1.value.reverse()
    changevalue2.value=data2.value.reverse()
}
</script>

十.join()

拼接。默认为逗号

<template>
    <div>{{ data1 }}</div>
    <div>{{ changevalue1 }}</div>
    <div>{{ changevalue2 }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5])
const data1=ref([1,2,3,4,5,111])
const data2=ref([1,2,3,4,5,111])
const changevalue1=ref([])
const changevalue2=ref([])
const changeinfo=()=>{
    changevalue1.value=data1.value.join()
    changevalue2.value=data2.value.join('')
}
</script>

十一.includes

判断是否含某个值，还是比较常用的，会返回一个布尔值，

<template>
    <div>{{ data }}</div>
    <div>{{ changevalue }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5,99])
const changevalue=ref([])
const changeinfo=()=>{
    changevalue.value=data.value.includes(1)
    console.log(changevalue.value)
    console.log(data.value)
}
</script>

十二.indexOf

返回目标的索引值，没有的话会返回-1

<template>
    <div>{{ data }}</div>
    <div>{{ changevalue }}</div>
    <button @click="changeinfo">改变</button>
</template>
<script setup>
import {ref} from 'vue'
const data=ref([1,2,3,4,5,99])
const changevalue=ref([])
const changeinfo=()=>{
    changevalue.value=data.value.indexOf(3)
    console.log(changevalue.value)
    console.log(data.value)
}
</script>

十三.······

    push()
    pop()
    unshift()
    shift()
    concat()-----💢不改变原始数组
    splice()
    slice()------💢不改变原始数组
    sort()
    reverse()
    join()-------💢不改变原始数组
    includes()-------💢不改变原始数组
    indexOf()-------💢不改变原始数组

参考博主：数组的常用方法总结（一）_总结绑定到数组的方法-CSDN博客