JS高阶函数、JS数组响应式操作、JS判断数组是否包含某个元素、JS数组操作、JS数组排序，多条件排序 localeCompare

一个数组合并到一个数组：https://blog.csdn.net/qq_43071699/article/details/142409146
//Vue.set(this.letters,2,'xxx');//要修改的数组对象，索引值，修改后的值
//Vue.set(state.stu.,'address','xxx');//要修改的单个对象，对象属性名（key），修改后的值
//Vue.delete(state.stu,'address');//要修改的单个对象，对象属性名（key），删除stu里的属性

//如果想要自定义排序规则，需要重写sort，参考下面的代码。
高阶函数

1、filter过滤函数
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
filter把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
    //小于100就是true，进入newArray数组
    return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

2、map高阶函数
map函数同样会遍历数组每一项，传入回调函数为参数，num是map遍历的每一项，回调函数function返回值会被添加到新数组中

const nums = [2,3,5,1,77,55,100,200];
let new2Array = nums.map(function (num) {
    return n*2;//每过元素都乘2
})
console.log(new2Array);//[4,6,10,2,154,110,200,400];

3、reduce高阶函数
reduce函数同样会遍历数组每一项，传入回调函数和‘0’为参数，0表示回调函数中preValue初始值为0，回调函数中参数preValue是每一次回调函数function返回的值，currentValue是当前值

const nums = [2,3,5,1,77,55,100,200];
let new3Array = nums.reduce(function (preValue,currentValue) {
    //数组为[2,3,5,1,77,55,100,200]，则回调函数第一次返回值为0+2=2，第二次preValue为2，返回值为2+3=5，以此类推直到遍历完成
    return preValue+currentValue;
},0);//第二个参数0是preValue的初始值
console.log(new3Array);//443

4、sort排序算法
因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！

//要按数字大小排序，我们可以这么写：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

//如果要倒序排序，我们可以把大的数放前面：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

引用：https://www.cnblogs.com/bushui/p/12213689.html

JS判断数组是否包含某个元素
方法一：使用includes()方法
const array = [1, 2, 3, 4, 5];
const element = 3;
const isContained = array.includes(element);
console.log(isContained); // 输出 true
方法二：使用indexOf()方法
const array = [1, 2, 3, 4, 5];
const element = 3;
const isContained = array.indexOf(element) !== -1;
console.log(isContained); // 输出 true
方法三：使用some()方法
const array = [1, 2, 3, 4, 5];
const element = 3;
const isContained = array.some(item => item === element);
console.log(isContained); // 输出 true
方法四：使用find()方法
const array = [1, 2, 3, 4, 5];
const element = 3;
const isContained = array.find(item => item === element) !== undefined;
console.log(isContained); // 输出 true
方法五：使用filter()方法
const array = [1, 2, 3, 4, 5];
const element = 3;
const isContained = array.filter(item => item === element).length > 0;
console.log(isContained); // 输出 true
这些方法都可以用来判断数组是否包含某个元素，其中使用includes()方法和indexOf()方法更为直观和简洁。

JS数组操作
arrayObject.slice(start,end)
JavaScript中的slice()方法用于从数组中提取部分元素并创建一个新的数组，而不会修改原始数组。
slice()方法接受两个参数：`start`和`end`。start参数指定了截取的开始位置（包含该位置的元素），而end参数指定了截取的结束位置（不包含该位置的元素）。
如果省略end参数，则slice()方法会截取从start位置到数组末尾的所有元素。
如果start和end参数为正数，它们表示从数组的开头开始计数的索引位置。例如，arr.slice(1, 4)将提取数组中索引为1、2、3的元素（即包含索引1但不包含索引4的元素）。
如果start或end参数为负数，它们表示从数组的末尾开始计数的索引位置。例如，arr.slice(-2)将提取数组中倒数第二个元素。
如果不提供任何参数，slice()方法将复制整个数组并返回一个新的数组。
此外，slice()方法还支持从数组末尾开始计数的负索引。例如，arr.slice(-2, -1)将提取数组中倒数第二个元素（不包含最后一个元素）。
使用slice()方法时，需要注意的是它返回的是一个新的数组，原始数组不会被修改。这使得slice()方法在需要保留原始数据的同时，又能方便地获取数组的某一部分。
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
//this.letters.push('123');//在末尾添加一个元素
//this.letters.pop();//从末尾删除一个元素
//this.letters.unshift('111');//在开端添加一个元素
//this.letters.shift();//从开端删除一个元素
//this.letters.splice(1,2);//从下标为1的元素开始删除两个元素
//this.letters.splice(1,2,'777','888');//从下标为1的元素开始删除两个元素，并插入两个新元素
//this.letters.splice(1, 0, '777', '888'); //在下标为1处插入两个元素
//this.letters.splice(2);//保留前2个元素，其他的删除掉
//this.letters.splice(0,this.letters.length);//清除数组内所有元素
//Array.prototype.push.apply(this.letters, this.letters2);//把数组letters2中的元素插入到letters的尾端
//this.letters.sort()转为字符串后升序排序
//this.letters.reverse()转为字符串后降序排序
//数组对象排序，比较每个对象中的字符串

排序
//这里返回的是他们的差值，如果是大于0的值，就会将b排在前面，如果小于0,就会将a排在前面，如果是0的话，就随便。（冒泡排序法！！）
//升序排列

that.tableDataAll.sort((a, b) => {
  //字符串比较
   if(a.shopId == "" || a.shopId == null || b.shopId == "" || b.shopId == null){
        return (a.shopId == "" || a.shopId == null) ? 1 : -1;
    }
  return a.shopId.localeCompare(b.shopId);
});

 多条件排序

let items = [
  { name: 'Apple', type: 'fruit' },
  { name: 'Carrot', type: 'vegetable' },
  { name: 'Banana', type: 'fruit' },
  { name: 'Potato', type: 'vegetable' }
];
 
items.sort((a, b) => {
  if (a.type !== b.type) {
    // 如果类型不同，则按类型字母顺序排序
    return a.type.localeCompare(b.type);
  } else {
    // 如果类型相同，则按名称字母顺序排序
    return a.name.localeCompare(b.name);
  }
});

console.log(items);

在这个例子中，首先根据type属性排序，如果type相同，则根据name属性排序。localeCompare方法用于比较字符串，保证了排序是区分区域的（locale-aware）。
你可以根据需要增加更多的条件来进行排序，只需在排序函数中增加相应的逻辑即可。

多条件排序方法

//多条件排序
export function sortArr(dataArr: any, sortByList: any) {
    dataArr.sort(function (x: any, y: any) {
        for (let k = 0; k < sortByList.length; k++) {
            let key: any = sortByList[k]['key'];
            let order: any = sortByList[k]['order'];
            if (order == 'asc') {
                if (x[key] > y[key]) {
                    return 1;
                }
                if (x[key] < y[key]) {
                    return -1;
                }
            } else {
                if (x[key] > y[key]) {
                    return -1;
                }
                if (x[key] < y[key]) {
                    return 1;
                }
            }
        }
        return 0;
    });
    return dataArr;
}

测试代码

let arr1: any = [
    { id: 1, name: 'jay', age: 23 },
    { id: 2, name: 'ali', age: 12 },
    { id: 3, name: 'grace', age: 15 },
    { id: 4, name: 'blues', age: 33 },
    { id: 5, name: 'steven', age: 26 },
    { id: 6, name: 'steven', age: 8 },
  ];
  let sortByList: any = [{ key: 'name', order: 'asc' }, { key: 'age', order: 'asc' }];
  let arr2 = sortArr(arr1, sortByList);
  console.log(arr2);