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("不存在");
}