Web Design - JavaScript Array Part 04

JavaScript array

javaScript এ array এক ধরণের data type যা একটি single variable এ একাধিক value সংরক্ষণের সুযোগ দেয়।

আরেকটু ভালো ভাবে বুঝে নেয়া যাক , ধরুন আপনার কাছে যদি একাধিক value এর একটি list থাকে (উদাহরণস্বরুপঃ SAtech360 ছাত্রদের নামের লিস্ট) এবং সেই লিস্ট যদি শত সহস্র হয়ে থাকে , তাহলে সেগুলোকে আলাদা আলাদা ভ্যারিয়েবলের মধ্যে রেখে পরবর্তীতে ব্যবহার অনেক কষ্ট সাধ্য। আর এই কাজটি আমরা array তে খুব সহজে করতে পারি। কারণ array একই নামের অধীনে একাধিক ভ্যালু রাখতে পারে এবং আপনি index নম্বর ব্যবহার করে ভ্যালু এক্সেস করতে পারেন।

Note: JavaScript array এর index গুলো শুধুমাত্র nummerical হয়ে থাকে, এবং কোনো ধরণের associative array বা string index support করেনা।

JavaScript এ কিভাবে array তৈরি করা হয় ?

• array literal উপায়ে

• সরাসরি array class এর Object তৈরি করে (new keyword ব্যবহার করে)

JavaScript এ array literal উপায়ে array তৈরি

Syntax:

var array_name = [item1, item2, ...];

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

var students = ["Azhar", "Sahin", "Rakib","Abdullah","Shanto"];

document.getElementById("student_list").innerHTML = students;

</script>

</body>

</html>

new keyword ব্যবহার করে

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

var students = new Array("Azhar", "Sahin", "Rakib","Abdullah","Shanto");

document.getElementById("demo").innerHTML = students;

</script>

</body>

</html>

JavaScript এর কোন পদ্ধতিতে array declaration ভালো ?

এক কোথায় প্রথম পদ্ধতিতে অর্থাৎ [ ] দিয়ে এবং new Array() দিয়ে এরে তৈরী না করাই ভালো। এর কারণ হলো অনেক সময় new Array() দিয়ে তৈরী কোনো array তে শুধু একটা value থাকে তখন সেটি আমাদেরকে unexpected রেজাল্ট দেখায়।

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>Avoid using new Array().</p>

var numbers1 = new Array(40);

var numbers2 = [50];

document.getElementById("demo1").innerHTML = numbers1[0];

document.getElementById("demo2").innerHTML = numbers2[0];

</script>

</body>

</html>

ব্যাখ্যা: লক্ষ্য করবেন, আমাদের প্রথম numbers1 array টি new Array দিয়ে তৈরী , এবং সেখানে শুধু একটা value থাকায় আমাদের কে undefined index error দেখাচ্ছে। কিন্তু দ্বিতীয় array numbers2 তে এই ধরণের কোনো সমস্যা নাই।

Length property

JavaScript এ একটা array তে কতগুলো এলিমেন্ট আছে তা জানতে হলে আপনাকে JavaScript এর array Object এর length property টি ব্যবহার করতে হবে।

<!DOCTYPE html>

<html>

<body>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.length;

</script>

</body>

</html>

toString() Method and join() Method

JavaScript এ একটা array এর value গুলোকে string আকারে প্রদর্শন করতে হলে আপনাকে toString() Method অথবা join() Method ব্যবহার করতে হবে। এক্ষেত্রে toString() মেথড বাই ডিফল্ট array এর value গুলোকে কমা (,) দিয়ে প্রদর্শন করে , অন্যদিকে join() Method এ আপনি চাইলে নিজস্ব separator ব্যবহার করতে পারেন।

toString() Method and join() Method

<!DOCTYPE html>

<html>

<body>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = "<b>toString() Method Result:</b> "+fruits.toString();

document.getElementById("demo2").innerHTML = "<b>join() Method Result:</b> "+fruits.join("*");

</script>

</body>

</html>

JavaScript এ একটা array তে কিভাবে নতুন Element যুক্ত অথবা remove করবেন?

JavaScript এ একটা array তে কোনো Element যুক্ত অথবা রিমুভ করার জন্য JavaScript এর push,pop,shift,unshift এবং splice এই মেথড গুলো ব্যবহৃত হয়।

JavaScript push() Method

<!DOCTYPE html>

<html>

<body>

<button onclick="pushValue()">Add value to the end</button>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = "<b>Current Array Before Push:</b> "+ fruits;

function pushValue() {

fruits.push("Kiwi");

document.getElementById("demo1").innerHTML = "<b>Current Array After Push:</b> "+fruits;

}

</script></body></html>

JavaScript pop() Method

<!DOCTYPE html>

<html>

<body>

<button onclick="popValue()">Romve value from end</button>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = "<b>Current Array Before POP:</b> "+ fruits;

function popValue() {

fruits.pop();

document.getElementById("demo1").innerHTML = "<b>Current Array After Pop:</b> "+fruits;

}

</script>

</body>

</html>

JavaScript shift Method

<!DOCTYPE html>

<html>

<body>

<button onclick="shiftValue()">Romve value from Start</button>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = "<b>Current Array Before Shift:</b> "+ fruits;

function shiftValue() {

fruits.shift();

document.getElementById("demo1").innerHTML = "<b>Current Array After Shift:</b> "+fruits;

}

</script></body></html>

JavaScript unshift Method

<!DOCTYPE html>

<html>

<body>

<button onclick="unShiftValue()">Add value to Start</button>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = "<b>Current Array Before Unshift:</b> "+ fruits;

function unShiftValue() {

fruits.unshift("Guava","Pineapple");

document.getElementById("demo1").innerHTML = "<b>Current Array After Unshift:</b> "+fruits;

}

</script>

</body>

</html>

সাম্প্রতিক

Header Ads Widget

Web Design - JavaScript Array Part 04