روش Array.find() – انجمن DEV

Find Method چیست؟

را find() متد اولین عنصر آرایه را برمی گرداند که شرایط ارائه شده را برآورده می کند. در غیر این صورت، undefined برگردانده می شود. آرایه اصلی را تغییر نمی دهد.

نحو

در اینجا نحو برای استفاده است find():

const findFirst = arr.find((element, index, array) => {
    // Return true to return the element, false otherwise
});

را callback تابع برای هر عنصر در آرایه فراخوانی می شود و آرگومان های زیر را می گیرد:

• element: عنصر فعلی در حال پردازش در آرایه
• index (اختیاری): شاخص عنصر فعلی
• array (اختیاری): آرایه ای که find() در حال اعمال است

را find() متد تابع callback را یکبار برای هر عنصر در آرایه به ترتیب فراخوانی می کند تا زمانی که عنصری را پیدا کند که برمی گردد. true. اگر چنین عنصری را پیدا کند، مقدار آن عنصر را برمی‌گرداند و تابع callback را برای هیچ یک از عناصر باقی‌مانده فراخوانی نمی‌کند. اگر عنصری را پیدا نکرد که برگردد true، برمی گردد undefined.

در اینجا مثالی از نحوه استفاده آورده شده است find() برای پیدا کردن اولین عدد زوج در یک آرایه:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const firstEven = numbers.find(function (number) {
    return number % 2 === 0;
});

console.log(firstEven); // prints 2

در مثال بالا، تابع callback یک تابع ناشناس است که یک آرگومان، عدد و برمی‌گرداند true اگر عدد زوج باشد و false در غیر این صورت. را find() متد این تابع را برای هر عنصر در آرایه اعداد فراخوانی می کند و اولین عنصری را که برمی گرداند برمی گرداند true

همچنین می توانید از یک تابع پیکان به عنوان تابع برگشت به تماس استفاده کنید، مانند این:

const firstEven = numbers.find((number) => number % 2 === 0);

console.log(firstEven); // prints 2

را find() این روش برای یافتن یک عنصر واحد در یک آرایه که شرایط خاصی را برآورده می کند مفید است.

مثال ها

در اینجا چند نمونه دیگر از نحوه استفاده شما آورده شده است find():

اولین عنصر بزرگتر از 10 را پیدا کنید

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const firstGreaterThan10 = numbers.find((number) => number > 10);

console.log(firstGreaterThan10); // prints 11

اولین عنصری که یک رشته است را پیدا کنید

const mixedArray = [1, 2, 3, "a", "b", "c", 4, 5, 6];

const firstString = mixedArray.find((element) => typeof element === "string");

console.log(firstString); // prints 'a'

اولین عنصری که یک شی است را پیدا کنید

const mixedArray = [1, 2, 3, "a", "b", "c", 4, 5, 6, { name: "John" }];

const firstObject = mixedArray.find((element) => typeof element === "object");

console.log(firstObject); // prints { name: 'John' }

عملکرد ورود به سیستم را پیاده سازی کنید

در اینجا مثالی از نحوه استفاده از آن آورده شده است find() روشی برای پیاده سازی تابع ورود برای یک وب سایت تجارت الکترونیک.

تصور کنید که آرایه ای از کاربران دارید و هر کاربر با یک شی با ویژگی های زیر نشان داده می شود:

• id: شناسه منحصر به فرد کاربر
• name: نام کاربر
• email: آدرس ایمیل کاربر
• password: رمز عبور کاربر

می توانید استفاده کنید find() روشی برای پیدا کردن کاربر با آدرس ایمیل و رمز عبور داده شده، و در صورت موفقیت آمیز بودن ورود، یا تعریف نشده در صورت ناموفق بودن ورود، شی کاربر را برمی گرداند.

این کدی است که این کار را انجام می دهد:

let users = [
    { id: 1, name: "Alice", email: "alice@example.com", password: "password1" },
    { id: 2, name: "Bob", email: "bob@example.com", password: "password2" },
    {
        id: 3,
        name: "Charlie",
        email: "charlie@example.com",
        password: "password3",
    },
];

function login(email, password) {
    const user = users.find(
        (user) => user.email === email && user.password === password
    );

    if (user) {
        console.log(`Welcome, ${user.name}!`);
        return user;
    } else {
        console.log("Incorrect email or password");
        return undefined;
    }
}

const loggedInUser = login("alice@example.com", "password1");
// prints 'Welcome, Alice!' and returns the user object

const loggedInUser = login("abc@gmail.com", "password1");
// prints 'Incorrect email or password' and returns undefined

یافتن محصول با شناسه

تصور کنید که آرایه ای از محصولات دارید و هر محصول با یک شی با ویژگی های زیر نمایش داده می شود:

• id: شناسه منحصر به فرد محصول
• name: نام محصول
• price: قیمت محصول
• categories: مجموعه ای از دسته هایی که محصول به آن تعلق دارد

می توانید استفاده کنید find() روش برای یافتن یک محصول با شناسه آن، و برگرداندن شی محصول در صورت یافتن، یا undefined اگر پیدا نشد

این کدی است که این کار را انجام می دهد:

let products = [
    {
        id: 1,
        name: "Product 1",
        price: 10,
        categories: ["Category 1", "Category 2"],
    },
    {
        id: 2,
        name: "Product 2",
        price: 15,
        categories: ["Category 2", "Category 3"],
    },
    {
        id: 3,
        name: "Product 3",
        price: 20,
        categories: ["Category 1", "Category 3"],
    },
];

function getProductById(id) {
    const product = products.find((product) => product.id === id);

    if (product) {
        console.log(`Product found: ${product.name}`);
        return product;
    } else {
        console.log("Product not found");
        return undefined;
    }
}

let product = getProductById(2);
// prints 'Product found: Product 2' and returns the product object

product = getProductById(4);
// prints 'Product not found' and returns undefined

در مثال بالا، تابع callback یک تابع ناشناس است که یک آرگومان واحد می گیرد. product، و برمی گردد true اگر product.id برابر با داده شده است id، و false در غیر این صورت. را find() متد این تابع را برای هر عنصر در آرایه محصولات فراخوانی می کند و اولین عنصری را که برمی گرداند برمی گرداند true. اگر هیچ عنصری برنگردد true، برمی گردد undefined.

findIndex()

را findIndex() روش مشابه است find() متد، با این تفاوت که به جای خود عنصر، شاخص عنصری را که شرط را برآورده می کند، برمی گرداند.

در اینجا مثالی از نحوه استفاده آورده شده است findIndex() برای پیدا کردن شاخص اولین عدد زوج در یک آرایه:

const numbers = [2, 4, 6, 8, 10];

const firstEvenIndex = numbers.findIndex((number) => number % 2 === 0);

console.log(firstEvenIndex); // prints 1

const firstOddIndex = numbers.findIndex((number) => number % 2 === 1);

console.log(firstOddIndex); // prints -1

در مثال بالا، تابع callback یک تابع ناشناس است که یک آرگومان واحد می گیرد. number، و برمی گردد true اگر number یکنواخت است و false در غیر این صورت. را findIndex() متد این تابع را برای هر عنصر در آرایه اعداد فراخوانی می کند و شاخص اولین عنصری را که برمی گرداند برمی گرداند true. اگر هیچ عنصری برنگردد true، برمی گردد -1.

چه موقع باید استفاده کرد find()

را find() این روش زمانی مفید است که بخواهید یک عنصر واحد را در یک آرایه پیدا کنید که شرایط خاصی را برآورده کند. به عنوان مثال، می توانید از آن برای پیدا کردن اولین عنصر بزرگتر از 10 یا اولین عنصر که یک رشته یا اولین عنصر که یک شی است استفاده کنید.

نتیجه

در این مقاله با find() و findIndex() روش‌هایی که برای یافتن یک عنصر واحد در یک آرایه که شرایط خاصی را برآورده می‌کند استفاده می‌شوند. همچنین یاد گرفتید که چگونه از این روش‌ها برای پیاده‌سازی عملکرد ورود به وب‌سایت تجارت الکترونیک و یافتن یک محصول با شناسه آن استفاده کنید.