vue实现数组排序,常用的几种方法

总结一下js常用的排序,不然老是找不到,满足开发使用就行了

1,sort排序

sort常规使用

var arry = [9,5,6,7,5,6,3,1,0]
arry.sort() //  [0, 1, 3, 5, 5, 6, 6, 7, 9]
var arry = ['CBC','BBC','DBC','ABC','KBC','EBC','MBC']
arry.sort() //  ['ABC', 'BBC', 'CBC', 'DBC', 'EBC', 'KBC', 'MBC']

注意:sort 默认会使用字符串的第一个字符来排序,当一个相等时,使用第二个以此类推,所以 ‘10’ 小于 ‘8’

var arry = ['10','8','4','3','20','0','12','11']
arry.sort() //  ['0', '10', '11', '12', '20', '3', '4', '8']

sort进阶(对象排序):
1:数组排序

var points = [
        {name:'KBC',data:9},
        {name:'CBC',data:8},
        {name:'BBC',data:6},
        {name:'EBC',data:1},
        {name:'MBC',data:5},
        {name:'ABC',data:7}
    ];
    points.sort(function(a, b){
        return a.data - b.data
    })

在这里插入图片描述
2,字符串排序 (如果不区分大小写就在sort方法name之后加上 .toUpperCase() 方

var points = [    <br>     {name:'KBC',data:9},
    {name:'CBC',data:8},
    {name:'BBC',data:6},
    {name:'EBC',data:1},
    {name:'MBC',data:5},
    {name:'ABC',data:7}
];
points.sort(function(a, b){
    return a.name > b.name?1:-1 // return a.name.toUpperCase() > b.name.toUpperCase()?1:-1<br>  })

在这里插入图片描述
2.快速排序

function quickSort(arr){
    if(arr.length<=1){ // 长度小于等于1 返回自己
        return arr
    }
    let centerIndex = Math.floor(arr.length/2) // 中间index
    let centerData = arr.splice(centerIndex,1)[0] // 中间index 对应的 之,并从arr中剔除
    let letArry = []
    let rightArry = []
    for(let i=0;i<arr.length;i++){
        if(arr[i]<centerData){ // 小于中间值放左数组 否则放右数组
            letArry.push(arr[i])
        }else{
            rightArry.push(arr[i])
        }
    }
    return quickSort(letArry).concat([centerData],quickSort(rightArry)) // 左数组快排后和中间值,右数组拼接
}
let arr = [1,5,6,2,4,8,7,9,6,3,2,2,0]
console.log(quickSort(arr))

3.冒泡排序

function maopao(arr){
    for(let i=0;i<arr.length-1;i++){
        for(let j=i;j<arr.length;j++){
            if(arr[i]>arr[j]){
                let changeData = arr[i]
                arr[i] = arr[j]
                arr[j] = changeData
            }
        }
    }
    return arr
}
let arr = [1,5,6,2,4,8,7,9,6,3,2,2,0]
console.log(maopao(arr))
Vue.js 提供了很多方便的指令来循环数组,以下是几种常见的方式: 1. 使用`v-for`指令 `v-for`指令是Vue.js中最常用的指令之一,它可以用来循环数组、对象或数字。对于数组的循环,可以这样写: ``` <div v-for="(item, index) in items" :key="index">{{ item }}</div> ``` 其中,`items`是要循环的数组,`item`是当前循环的元素,`index`是当前循环的索引。注意要为每个循环的元素设置一个唯一的`key`属性。 2. 使用`v-bind`指令 `v-bind`指令可以用来绑定DOM元素的属性,例如`class`、`style`等。对于数组的循环,可以这样写: ``` <div v-bind:class="{ active: item.isActive }" v-for="(item, index) in items" :key="index">{{ item }}</div> ``` 其中,`item.isActive`是一个布尔值,如果为`true`,则给当前循环的元素添加一个`active`类。 3. 使用`v-model`指令 `v-model`指令可以用来实现双向数据绑定,对于数组的循环,可以这样写: ``` <div v-for="(item, index) in items" :key="index"> <input type="text" v-model="items[index]"> </div> ``` 其中,`v-model`指令将输入框的值与数组中对应索引的元素进行双向绑定。 4. 使用`computed`属性 如果需要对数组进行一些计算,例如过滤、排序等,可以使用`computed`属性来处理。例如: ``` computed: { filteredItems: function() { return this.items.filter(function(item) { return item.isActive; }); } } ``` 其中,`filteredItems`是一个计算属性,它返回一个过滤后的数组。 以上是几种常见的循环数组的方式,根据不同的需求选择合适的方式可以使代码更加简洁、易读。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值