জাভাস্ক্রিপ্ট অ্যারে মেথড
জাভাস্ক্রিপ্ট অ্যারের মূল শক্তি হলো অ্যারে মেথড।
অ্যারেকে স্ট্রিং-এ রূপান্তর
জাভাস্ক্রিপ্ট toString () মেথডটি অ্যারে থেকে স্ট্রিং-এ রূপান্তর করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>toString() মেথডে একটি কমা দিয়ে স্ট্রিং-কে পৃথক করা হয়। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals.toString();
</script>
</body>
</html>
ফলাফল
join() মেথড সকল অ্যারে এলিমেন্টকে একটি স্ট্রিং-এ যুক্ত করে।
এটা toString() এর মত কাজ করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> join() মেথড একটি স্ট্রিং-কে অ্যারে এলিমেন্টে সংযুক্ত করে। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals.join(" * ");
</script>
</body>
</html>
ফলাফল
pop() এবং push()
অ্যারে নিয়ে কাজ করার সময় খুব সহজেই এলিমেন্ট বাদ দিতে এবং নতুন এলিমেন্ট যোগ করতে পারবেন।
pop() মেথড দিয়ে অ্যারে থেকে এলিমেন্ট বাদ দেয়া হয় এবং push() মেথড দিয়ে অ্যারেতে এলিমেন্ট যোগ করা হয়।
pop() মেথড
pop() মেথড দিয়ে অ্যারের শেষ এলিমেন্ট বাদ দেয়া হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> pop মেথড একটি অ্যারে থেকে শেষ এলিমেন্টকে সরায়। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.pop();
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
pop() মেথড বাদ দেওয়া ভ্যালুকে রিটার্ন করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> pop মেথড সরানো আইটেমকে রিটার্ন করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
document.getElementById("test").innerHTML = animals.pop();
}
</script>
</body>
</html>
ফলাফল
Push()
push() মেথড দ্বারা একটি অ্যারের শেষে নতুন এলিমেন্ট যুক্ত করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> push মেথড একটি অ্যারে নতুন এলিমেন্টকে সংযুক্ত করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.push("Elephant");
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
push() মেথড অ্যারে এর নতুন দৈর্ঘ্য রিটার্ন করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> push মেথড নতুন array লেন্থকে রিটার্ন করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
document.getElementById("test").innerHTML = animals.push("Elephant");
}
</script>
</body>
</html>
ফলাফল
shift() মেথড এবং unshift() মেথড
shift() মেথড এবং pop() মেথড একই রকম কাজ করে, শুধুমাত্র শেষের এলিমেন্টের পরিবর্তে প্রথম এলিমেন্টকে বাদ দেয়ঃ
shift() মেথড অ্যারের প্রথম এলিমেন্ট বাদ দেয় এবং সকল এলিমেন্টের ইনডেক্স কমিয়ে দেয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>shift মেথড একটি অ্যারের প্রথম এলিমেন্ট এবং অন্য সকল এলিমেন্টকে একটি একটি করে মুছে ফেলে </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.shift();
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
unshift() মেথড অ্যারের শুরুতে একটি নতুন এলিমেন্ট যুক্ত করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> unshift মেথড একটি অ্যারের শুরুতে নতুন এলিমেন্টকে সংযুক্ত করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.unshift("Elephant");
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
unshift() মেথড অ্যারের নতুন দৈর্ঘ্য রিটার্ন করে।
এলিমেন্ট পরিবর্তন
অ্যারে এলিমেন্ট ইনডেক্স নম্বর ব্যবহার করে এক্সেস করা হয়ঃ
অ্যারে ইনডেক্স ০ দিয়ে শুরু হয়, [০] হচ্ছে অ্যারের প্রথম এলিমেন্ট, [১] হচ্ছে দ্বিতীয়, [২] হচ্ছে তৃতীয়...
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>অ্যারে এলিমেন্ট তাদের ইনডেক্স নাম্বার অনুযায়ী এক্সেস হয়। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals[0] = "Elephant";
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
অ্যারেতে নতুন এলিমেন্ট যোগ করার আরেকটি সহজ পদ্ধতি হচ্ছে length প্রোপার্টি ব্যবহার করাঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> length প্রোপার্টি push() মেথড ছাড়াই একটি অ্যাারেতে নতুন এলিমেন্ট সহজ পদ্ধতিতে সংযুক্ত করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals[animals.length] = "Elephant";
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
এলিমেন্ট ডিলেট করা
যেহেতু জাভাস্ক্রিপ্ট অ্যারে একটি অবজেক্ট, তাই জাভাস্ক্রিপ্ট delete অপারেটর ব্যবহার করে অ্যারের এলিমেন্ট ডিলেট করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> মুছে ফেলা এলিমেন্টগুলো একটি অ্যারেতে ছেড়ে দিলে undefined হয়। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
delete animals[0];
document.getElementById("test").innerHTML = animals[0];
}
</script>
</body>
</html>
ফলাফল
splice() মেথড
splice() মেথড একটি অ্যারেতে নতুন এলিমেন্ট যোগ করার জন্য ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> splice() মেথড একটি এরেতে নতুন এলিমেন্টকে সংযুক্ত করে। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.splice(3, 0, "Elephant", "Goat");
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
প্রথম প্যারামিটারে এলিমেন্টের ইনডেক্স নম্বর নির্ধারন করা হয় যেখানে এলিমেন্টকে রাখা হবে।
দ্বিতীয় প্যারামিটারে কতটি এলিমেন্ট বাদ দেওয়া হবে তা নির্দেশ করা হয়।
splice() ব্যবহার করে এলিমেন্ট বাদ দেওয়া
বুদ্ধিমত্তার সাথে প্যারামিটার সেটিং-এর মাধ্যমে আপনি splice() মেথড ব্যবহার করে অ্যারের "undefined" এঁরর ছাড়াই এলিমেন্ট বাদ দিতে পারবেনঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> splice() মেথড এরে এলিমেন্টকে সরাতে ব্যবহৃত হয়। </h3>
<button onclick="myFunc()">নিজে চেষ্টা করি</button>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
function myFunc() {
animals.splice(0, 1);
document.getElementById("test").innerHTML = animals;
}
</script>
</body>
</html>
ফলাফল
প্রথম প্যারামিটারে এলিমেন্টের ইনডেক্স নম্বর নির্ধারন করা হয় যেখানে এলিমেন্টকে রাখা হবে।
দ্বিতীয় প্যারামিটারে কতটি এলিমেন্ট বাদ দেওয়া হবে তা নির্দেশ করা হয়।
বাকি প্যারামিটার বাদ দেওয়া হয়েছে। তার মানে নতুন কোন এলিমেন্ট যোগ করা হবে না।
অ্যারে যুক্ত করা
concat() মেথড দুইটি অ্যারেকে যুক্ত করে একটি নতুন অ্যারে তৈরি করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h2>দুইটি অ্যারেকে সংযুক্ত করা</h2>
<p id="test"></p>
<script>
var girls = ["Safa", "Rimu"];
var boys = ["Sarif", "Motiur","Imran"];
var children = girls.concat(boys);
document.getElementById("test").innerHTML = children;
</script>
</body>
</html>
ফলাফল
concat() মেথড আর্গুমেন্ট হিসেবে একাধিক অ্যারেও নিতে পারেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h2>তিনটি অ্যারেকে সংযুক্ত করবে </h2>
<p id="test"></p>
<script>
var arr1 = ["Safa", "Rimu"];
var arr2 = ["Sarif", "Motiur","Imran"];
var arr3 = ["Tamim", "Tahmid"];
var children = arr1.concat(arr2, arr3);
document.getElementById("test").innerHTML = children;
</script>
</body>
</html>
ফলাফল
অ্যারে আলাদা(slice) করা
slice() মেথড একটি অ্যারের অংশকে আলাদা করে নতুন একটি অ্যারে তৈরি করে।
এই উদাহরণে একটি অ্যারের প্রথম এলিমেন্ট("Lion") থেকে আলাদা করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>এই slice() মেথড উদাহরণে একটি অ্যারের প্রথম এলিমেন্ট (জাম) থেকে আলাদা করা শুরু করে। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
var sli = animals.slice(1);
document.getElementById("test").innerHTML = animals + "<br>" + sli;
</script>
</body>
</html>
ফলাফল
slice() মেথড একটি নতুন অ্যারে তৈরী করে। এটি সোর্স অ্যারে থেকে কোনো এলিমেন্ট বাদ দেয় না।
slice() মেথড দুইটি আর্গুমেন্টও নিতে পারেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>slice() মেথড slice(1,3) এর মত দুইটি আরগুমেন্ট নিতে পারেঃ</h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
var sli = animals.slice(1,2);
document.getElementById("test").innerHTML = animals + "<br>" + sli;
</script>
</body>
</html>
ফলাফল
যদি শেষ আর্গুমেন্ট না দেওয়া হয় তাহলে slice() মেথড অ্যারের বাকি এলিমেন্টকে আলাদা করে নেয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>এই slice() উদাহরণস্বরূপ একটি অ্যারেকে অ্যারের এলিমেন্ট 2 ( "Tiger") থেকে শুরু করে একটি অংশ আলাদা করবেঃ
</h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
var sli = animals.slice(2);
document.getElementById("test").innerHTML = animals + "<br>" + sli;
</script>
</body>
</html>
ফলাফল
valueOf() মেথড
valueOf() মেথড অ্যারের একটি ডিফল্ট মেথড। এটি একটি অ্যারেকে প্রিমিটিভ ভ্যালুতে রুপান্তর করে।
যখন একটি প্রিমিটিভ ভ্যালুর দরকার হয় জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে একটি অ্যারেকে একটি স্ট্রিং-এ রূপান্তর করে।
এই কারণে, নিচের সকল উদাহরণ একই ফলাফল দেখায়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে একটি প্রত্যাশিত পুরনো ভ্যালুকে অ্যারে থেকে স্ট্রিং-এ পরিবর্তন করে। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals;
</script>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3> valueOf() একটি অবজেক্টে পুরনো ভ্যালুকে রিটার্ন করে। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals.valueOf();
</script>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h3>toString() মেথডে একটি কমা দিয়ে স্ট্রিং-কে পৃথক করা হয়। </h3>
<p id="test"></p>
<script>
var animals = ["Lion", "Tiger", "Horse", "Hen"];
document.getElementById("test").innerHTML = animals.toString();
</script>
</body>
</html>
ফলাফল
সকল জাভাস্ক্রিপ্ট অবজেক্টের একটি valueOf() এবং একটি toString() মেথড আছে।
অ্যারে শ্রেণীবদ্ধকরণ
অ্যারে শ্রেণীবদ্ধকরণ পরবর্তী পরিচ্ছেদে আলোচনা করা হয়েছে।
সম্পুর্ন অ্যারে রেফারেন্স
সম্পূর্ণ অ্যারে রেফারেন্সের জন্য আমাদের সম্পুর্ণ জাভাস্ক্রিপ্ট অ্যারে রেফারেন্স পড়ুন।