JS数组查询详解

一、JS数组查询方法

查询在JS中常常用到，在处理数据的时候也经常要查询数据。JS提供了多种方法来查询数组中的元素，下面就来一一介绍它们。

二、JS数组条件查询

在实际开发中，我们常常需要根据某些条件来查询数组中的元素，比如查询大于某个数值的元素、查询特定字符串开头的元素等等。这时，我们可以使用JS的筛选方法filter()。

//筛选出大于10的元素
let arr = [1,15,3,19,7,23];
let res = arr.filter((item) => {
    return item > 10;
});
console.log(res); //[15,19,23]

//筛选出以字母a开头的元素
let strArr = ["apple","banana","avocado","orange"];
let res2 = strArr.filter((str) => {
    return str.startsWith("a");
});
console.log(res2); //["apple", "avocado"]

三、JS数组查询并生成新数组

有时候我们需要按照某种规则查询出数组中符合条件的元素并生成一个新的数组。这时，我们可以使用JS的map()方法。

//将大于10的元素平方后生成一个新数组
let arr = [1,15,3,19,7,23];
let res = arr.map((item) => {
    if (item > 10) {
        return item * item;
    } else {
        return item;
    }
});
console.log(res); //[1, 225, 3, 361, 7, 529]

//将数组中每个字符串的首字母改为大写并生成一个新数组
let strArr = ["apple","banana","avocado","orange"];
let res2 = strArr.map((str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
});
console.log(res2); //["Apple", "Banana", "Avocado", "Orange"]

四、JS数组查询指定元素

有时候我们需要查询数组中指定位置的元素，这时，我们可以使用JS的索引查询方法Array[index]。

let arr = [1,15,3,19,7,23];
console.log(arr[0]); //1
console.log(arr[2]); //3
console.log(arr[5]); //23

五、JS数组查询对象

在开发中，我们常常需要查询数组中符合某些属性的对象，这时，我们可以使用JS的find()方法。

let arr = [
    { name: "apple", price: 5 },
    { name: "banana", price: 3 },
    { name: "orange", price: 4 },
    { name: "avocado", price: 7 }
];
let res = arr.find((obj) => {
    return obj.name === "orange";
});
console.log(res); //{ name: "orange", price: 4 }

六、JS数组查询是否存在

有时候我们只需要知道某个元素是否存在于数组中，这时，我们可以使用JS的includes()方法。

let arr = [1,15,3,19,7,23];
console.log(arr.includes(3)); //true
console.log(arr.includes(5)); //false

七、JS数组查询indexof

在查询元素在数组中的位置及出现次数时，可以使用JS的indexOf()方法。

let arr = [1,2,3,2,1];
console.log(arr.indexOf(2)); //1
console.log(arr.indexOf(1)); //0
console.log(arr.indexOf(4)); //-1
console.log(arr.lastIndexOf(2)); //3
console.log(arr.lastIndexOf(1)); //4

八、JS数组查询指定字符

有时候我们需要查询数组中某个元素是否包含某个字符，这时，我们可以使用JS的search()方法。

let strArr = ["apple","banana","avocado","orange"];
console.log(strArr[0].search("p")); //1
console.log(strArr[1].search("z")); //-1

九、JS数组查询重复元素个数

在查询数组中某个元素重复出现的次数时，我们可以使用filter()方法和reduce()方法。

let arr = [1,2,3,2,1];
let res = arr.filter((item,index,arr) => {
    return arr.indexOf(item) === index;
}).map((item) => {
    return { key: item, count: arr.reduce((total,num) => {
        if (num === item) {
            return total + 1;
        } else {
            return total;
        }
    },0) };
}).sort((a,b) => {
    return b.count - a.count;
});
console.log(res); //[{key: 1, count: 2}, {key: 2, count: 2}, {key: 3, count: 1}]

十、JS数组查询不到key报错

在查询数组中某个元素是否存在时，如果未查询到该元素，JS将返回undefined，为了避免运行时报错，我们可以添加条件判断。

let arr = [1,15,3,19,7,23];
if (arr.indexOf(5) !== -1) {
    console.log("存在");
} else {
    console.log("不存在");
}