Giriş

Dizi, değişkenlerin numaralandırılmış bir listesidir. Programcıların bunu değiştirmesine izin veren bir programlama yapısıdır…

x0=0;
x1=1;
x2=2;
x3=3;
x4=4;
x5=5;

Yukarıdaki yapı dizi mantığında şöyle tanımlanır.

x[0]=0;
x[1]=1;
x[2]=2;
x[3]=3;
x[4]=4;
x[5]=5;

Dizin (parantez içindeki sayı [ ] ) bir değişkenle referans alınabilir ve bu sayede veri yapısı içinde kolayca dolaşılabilir.

Aşağıdaki çıktıyı verecektir…

0
1
2
3
4
5

Yeni Bir Dizi Oluşturma

Çoğu eğitim size dizileri şu şekilde tanıtarak başlar…

Mevcut en iyi uygulama, Javascript ilkellerinde yeni anahtar sözcüğünü reddeder . Yeni bir Dizi oluşturmak istiyorsanız, bunun gibi parantezleri [] kullanmanız yeterlidir…

Dizinin boyutunun kaç öğe için belirleneceğini Javascript'e söylemenize gerek yok. Javascript, diziye öğeler ekledikçe, gerektiği gibi Dizinin boyutunu otomatik olarak artıracaktır. New oluşturucu yerine parantezlerle bir Dizi oluşturmak, yalnızca bir tam sayıyı başlatmak istediğinizde biraz karışıklığı önler. Örneğin.

Gördüğünüz gibi bu iki satır iki çok farklı şey yapıyor. Birden fazla öğe eklemek isteseydiniz, Javascript o zaman eklemek istediğiniz öğe sayısını belirtmek yerine diziyi başlattığınızı bilecek kadar akıllı olacağından, badArray doğru şekilde başlatılırdı.

Dizilerde yeni oluşturucuya gerek olmadığından ve yeni oluşturucuyu kullanmanın istenmeyen sonuçlara yol açma olasılığı düşük olduğundan, Dizi oluşturmak için new Array() kullanmamanız önerilir .

 

Bir Diziyi Tanımlama

Dizinizi önceden tanımlanmış verilerle başlatabilirsiniz…

Boş bir dizi oluşturulduktan sonra dizinizi verilerle başlatabilirsiniz…

Bir öğeyi atlarsanız, boş Dizi öğeleri tanımsız tipte olacaktır

Verileri Bir Dizide Depolama

Bir dizi, bir değişkene atayabileceğiniz her şeyi depolayabilir: Boole değerleri, sayılar, dizeler, fonksiyonlar, nesneler, diğer Diziler, hatta normal ifadeler…

Çok Boyutlu Diziler

Bir Dizi diğer Dizileri depolayabildiğinden çok boyutlu dizilerin avantajını elde edebilirsiniz.

Yukarıdaki örnekte x adlı bir dizi oluşturduk ve bunu y dizisindeki ilk eleman olarak atadık . y[0] değerini sorarsak, bir dizin belirtmediğimiz için x'in içeriğini bir dize olarak döndürecektir.

Üçüncü indeksi isteseydik şu şekilde erişirdik…

Bu şekilde iç içe yerleştirebileceğiniz Dizi sayısı için tanımlanmış bir sınır yoktur. Örneğin …

…bigArray'in 5. indeksinin bir dizi tuttuğunu, 8. indeksinin bir dizi tuttuğunu, 12. indeksinin bir dizi tuttuğunu, 1. indeksinin ise istediğimiz veriyi içerdiğini gösterir.

Javascript Dizileri Referansla Aktarılabilir

Diziler fonksiyonlara referansla veya orijinaline bir işaretçi(pointer) olarak aktarılır. Bu, fonksiyon içindeki Diziye yaptığınız her şeyin orijinali etkilediği anlamına gelir.

Javascript Dizileri Referansla Atanabilir

Bir Diziyi yeni bir değişkene atamak orijinal Diziye bir işaretçi oluşturur. Örneğin…

Dizileri Değer Olarak Aktarmak

Bir Diziyi referansa göre değil de değere göre aktarmak için Array.slice() metodunu kullanın.

Dizi Eleman Sayısı (Array.length)

Her Dizinin bir length özelliği vardır. Bu her zaman dizideki eleman sayısını içerir. Diziler her zaman sıfırdan başladığından, length özelliği döngüler için kullanışlıdır çünkü her zaman gerçek indeksten bir fazla olacaktır. Örneğin, Dizinin 10 elemanı varsa, indeksler 0-9 olacaktır, bu nedenle sayacımız Array.length'ten küçük olduğu sürece tüm Diziyi kapsayacağız…

Yukarıdaki tanımsız (undefined) örneğimize geri dönelim . Dizi öğelerinden 3'ü tanımsız (undefined) olsa bile , length özelliği bunları yine de sayacaktır çünkü her zaman en yüksek erişilebilir dizin değerinden bir fazladır.

Array.length salt okunur bir değer DEĞİLDİR , istediğiniz gibi ayarlayabilirsiniz. Bir dizide 100 öğeniz varsa ve length değerini 50 olarak ayarlarsanız, Javascript dizideki son 50 öğeyi keser (etkili bir şekilde siler). Bir dizide 10 öğeniz varsa ve Array.length değerini 100 olarak ayarlarsanız, dizinin uzunluğu 100'e genişletilir ve orijinal 10 öğeden sonra 90 tanımsız öğe oluşturulur.

Javascript İlişkisel Dizileri Desteklemez

İlişkisel dizi, indeks olarak sayı yerine bir dize kullanan bir dizidir.

Javascript'te İlişkili Diziler yoktur ve bunları desteklemez. Ancak... Javascript'teki tüm diziler nesnedir ve Javascript'in nesne sözdizimi, ilişkisel bir Dizinin temel bir emülasyonunu verir. Bu nedenle yukarıdaki örnek kod gerçekten işe yarayacaktır. Bunun gerçek bir dizi olmadığı ve kullanmaya çalışırsanız gerçek tuzaklar içerdiği konusunda uyarıda bulunun. Örnekteki 'person' öğesi, tıpkı .length, .sort(), .splice() ve diğer tüm yerleşik özellikler ve yöntemler gibi, Dizi nesnesinin özelliklerinin ve yöntemlerinin bir parçası haline gelir.

Aşağıdaki döngü ile bir nesnenin özellikleri arasında dolaşabilirsiniz…

Yukarıdaki örnekte, associativeArray.length sıfır olacaktır çünkü Dizi'ye aslında hiçbir şey koymadık, onu associativeArray'in nesnesine koyduk. associativeArray[0] tanımsız olacaktır.

Yukarıdaki örnekteki döngü, diziye eklenen tüm yöntemleri, özellikleri ve prototipleri ve yalnızca verilerinizi değil, aynı zamanda alacaktır. İnsanların Prototype kütüphanesiyle yaşadığı birçok sorun, ilişkisel dizilerinin bozulmasıdır çünkü Prototype, Array nesnesine birkaç yararlı Prototype işlevi ekler ve x döngülerinde i , bu ek yöntemleri alır. Array/nesneleri fakir bir adamın ilişkisel dizisi olarak kullanmanın tuzağı budur.

Son bir örnek olarak, önceki kod, associativeArray'i bir Dizi ([]), bir Nesne ({}), bir Düzenli İfade (//), Dize("") veya herhangi başka bir Javascript nesnesi olarak tanımlamanızdan bağımsız olarak çalışacaktır .

Özetle, ilişkisel dizileri kullanmaya çalışmayın, bunlar aslında dizi değil, nesne olarak tanımlanır.

 

Dizi Metot Referans Listesi

 

Javascript Dizileri değiştirilmiş nesneler olduğundan, oluşturduğunuz her Dizinin birkaç çekirdek yöntemi vardır. Gerçekten ilginç olan şey, bu yöntemlerden bazılarının normalde kendiniz yazmanız gereken yığınlar (push, pop) ve kuyruklar (shift, unshift) gibi temel veri yapılarını uygulamasıdır.

Method	IE Version	Mozilla Version	Notlar
concat	4.0	4.0	Birden fazla Diziyi Birleştirir
every	*	FF 1.5	Dizinin her elemanı için false döndürülene kadar bir fonksiyon çağırır.
filter	*	FF 1.5	Tanımlanan fonksiyonda doğru değerlendirilen her bir elemandan oluşan bir dizi oluşturur.
forEach	*	FF 1.5	Bir Dizinin her bir öğesinde belirtilen fonksiyonu yürütür
join	3.0	3.0	Dizinin tüm elemanlarını bir dizgede birleştirir
indexOf	*	FF 1.5	Dizi içinde belirli öğeleri arar.
lastIndexOf	*	FF 1.5	Arama kriterleriyle eşleşen Dizideki son öğeyi döndürür.
map	*	FF 1.5	Dizinin her bir elemanı üzerinde tanımlanan fonksiyonu çağırmanın sonucunu içeren yeni bir dizi oluşturur.
pop	5.5	4.0	Dizideki son öğeyi döndürür ve onu Diziden kaldırır.
push	5.5	4.0	Öğeyi Dizinin sonuna ekler.
reverse	3.0	3.0	Diziyi tersine çevirir, böylece son öğe ilk öğe olur veya tam tersi
shift	5.5	4.0	Returns the first item in the Array and removes it from the Array.
slice	4.0	4.0	Belirtilen indeks ve uzunlukta yeni bir dizi döndürür.
some	*	FF 1.5	"true" döndürülene kadar her bir öğeyi verilen fonksiyondan geçirir .
sort	3.0	3.0	Diziyi alfabetik olarak veya verilen fonksiyona göre sıralar.
splice	5.5	4.0	Belirtilen dizini(leri) Dizi'den siler.
toSource		FF 1.5	Dizinin "kaynak kodunu" döndürür .
toString	3.0	3.0	Diziyi bir metin olarak döndürür.
unshift	5.5	4.0	Öğeyi/öğeleri Dizinin başına ekler.
valueOf	3.0	3.0	toString gibi, Dizi'yi bir metin olarak döndürür.

* Bu yöntemi Internet Explorer ve daha eski tarayıcılarda kullanılabilir hale getirmek için prototip işlevler mevcuttur.

Dizileri Birleştirme

concat yöntemi, geçirilen değerleri Dizinin sonuna ekler ve birleştirilen değerleri içeren YENİ  (NEW) bir dizi geri gönderir. concat yöntemine geçirilen değerler, Javascript'te bir değişkene atayabileceğiniz herhangi bir şey olabilir.

Array.every(function)

Every metodu, bir fonksiyonu argüman olarak kabul eden bir Firefox metodudur. Dizinin her değeri, fonksiyon false döndürene kadar bu fonksiyona geçirilir. Hiçbir eleman false döndürmezse every true döndürür, bir eleman false döndürdüyse every false döndürür. Bir Diziyi test etmenin ve örneğin her elemanın bir sayı olup olmadığını görmenin kullanışlı bir yoludur.

Bu yöntem, geçerli değeri, geçerli indeksi ve diziye bir işaretçiyi fonksiyonunuza geçirecektir. myfunction(curValue, curIndex, curArray)

Bu yöntem , Internet Explorer ve eski tarayıcıların bu yöntemi kullanmasına izin verecek şekilde prototiplenebilir . Aşağıdaki kodu Javascript araç kutunuza kopyalamanız yeterlidir ve .every() yöntemi tarayıcı sürümünüzden bağımsız olarak kullanılabilir olacaktır.

Array.filter(function)

Filter, sağlanan işlevde doğru olarak değerlendirilen öğelerden oluşan yeni bir Dizi oluşturur. Array.every() yönteminde, tüm Dizinin Sayılardan oluşup oluşmadığını test ettik. Array.filter()'da tüm sayıları çıkarabilir ve bu süreçte yeni bir Dizi oluşturabiliriz.

Bu yöntem, geçerli değeri, geçerli indeksi ve diziye bir işaretçiyi fonksiyonunuza geçirecektir. myfunction(curValue, curIndex, curArray)

Burada diziyi .every() isNumeric ile aynı fonksiyondan geçiriyoruz ve eğer eleman bir sayı ise yeni oddArray Dizisine yerleştiriyoruz .

Bu yöntem, Internet Explorer ve eski tarayıcıların bu yöntemi kullanmasına izin verecek şekilde prototiplenebilir . Aşağıdaki kodu Javascript araç kutunuza kopyalamanız yeterlidir ve .filter() yöntemi tarayıcı sürümünüzden bağımsız olarak kullanılabilir olacaktır.

 

Array.forEach(function)

Bu tuhaf bir yöntemdir. Tek yaptığı, Dizinin her bir öğesini geçirilen işleve geçirmektir. İşlevden gelen tüm sonuçları görmezden gelir ve kendisi hiçbir şey döndürmez. Tüm Dizi içeriklerini seçtiğiniz işlevden geçirecektir ancak Dizinin kendisi etkilenmeyecek ve kendisi hiçbir şey döndürmeyecektir.

Bu yöntem, geçerli değeri, geçerli indeksi ve diziye bir işaretçiyi fonksiyonunuza geçirecektir. myfunction(curValue, curIndex, curArray)

This method can be prototyped to allow Internet Explorer and older browsers to use this method. Simply copy the following code into your Javascript toolbox and the .forEach() method will be available regardless of your browser version.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        fun.call(thisp, this[i], i, this);
    }
  };
}

Supported Since: Firefox 1.5, Internet Explorer:

Array.join(delimeter)

The join method will output your Array as a string with a delimiter of your choice. This is a very useful function if you need to convert an Array into something you can send back to the server. Simply pick a unique delimiter which is not likely to appear inside the data in your Array then you can turn it back into an Array on the server side.

var myArray = [1,'two',3,'four',5,'six',7,'eight',9,'ten'];
var test1 = myArray.join();
var test2 = myArray.join(', ');
var test3 = myArray.join('+');

document.writeln(test1+'<BR>'); // outputs: 1,two,3,four,5,six,7,eight,9,ten
document.writeln(test2+'<BR>'); // outputs: 1, two, 3, four, 5, six, 7, eight, 9, ten
document.writeln(test3+'<BR>'); // outputs: 1+two+3+four+5+six+7+eight+9+ten

Supported Since: Netscape 3.0, Internet Explorer: 3.0

Array.indexOf(searchStr[, startIndex])

The indexOf method will search the array until it matches your search critera. It will then return the index where the item was found. It will match only one item and the match must be exact. This is not as useful as the custom .find() method provided below in the Useful Prototypes section.

var myArray = [1,'two',3,'four',5,'six',7,'eight',9,'ten'];
document.writeln(myArray.indexOf('six'));      // outputs: 5
document.writeln(myArray.indexOf('not here')); // outputs: -1

To find and return all occurrences of an item you can use the following code…

var foundItems = [];
var index = array.indexOf(element)
while (index != -1)
{
  foundItems.push(index);
  index = array.indexOf(element, ++index);
}

This will create an array of indexes which match your search criteria (element) and store them in foundItems[].

This method can be prototyped to allow Internet Explorer and older browsers to use this method. Simply copy the following code into your Javascript toolbox and the .indexOf() method will be available regardless of your browser version.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Supported Since: Firefox 1.5, Internet Explorer:

Array.lastIndexOf(searchStr[, startIndex])

Array.indexOf() searches from first to last, lastIndexOf searches from last to first.

var myArray = [1,'two',3,'four',5,'six',7,'eight',9,5,'ten'];
document.writeln(myArray.lastIndexOf(5));          // outputs: 9
document.writeln(myArray.lastIndexOf('not here')); // outputs: -1

This method can be prototyped to allow Internet Explorer and older browsers to use this method. Simply copy the following code into your Javascript toolbox and the .lastIndexOf() method will be available regardless of your browser version.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.lastIndexOf)
{
  Array.prototype.lastIndexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]);
    if (isNaN(from))
    {
      from = len - 1;
    }
    else
    {
      from = (from < 0)
           ? Math.ceil(from)
           : Math.floor(from);
      if (from < 0)
        from += len;
      else if (from >= len)
        from = len - 1;
    }

    for (; from > -1; from)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Supported Since: Firefox 1.5, Internet Explorer:

Array.map(function)

The map method will call the provided function for each value of the array and it will return an array containing the results of those function calls.

The callback function is called with three arguments: the value, the index, and a pointer to the array being used respectively.

In the following example each element of the array is tested to see if it is numeric, if it is, it's passed into the new array, otherwise a zero is inserted.

var isNumeric = function(x) {
   // returns true if x is numeric and false if it is not.
   var RegExp = /^)?(d*)(.?)(d*)$/; 
   return String(x).match(RegExp);
}
var testElement = function(x) {
   if (isNumeric(x)) {
      return x;
   } else {
      return 0;
   }
}

var myArray = [1,'two',3,'four',5,'six',7,'eight',9,'ten'];
var newArray= myArray.map(testElement);
document.writeln(newArray); // outputs: 1,0,3,0,5,0,7,0,9,0

This method can be prototyped to allow Internet Explorer and older browsers to use this method. Simply copy the following code into your Javascript toolbox and the .map() method will be available regardless of your browser version.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
if (!Array.prototype.map)
{
  Array.prototype.map = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        res[i] = fun.call(thisp, this[i], i, this);
    }

    return res;
  };
}

Supported Since: Firefox 1.5, Internet Explorer:

Array.pop()

The pop() method implements a basic stack structure in Javascript Arrays. Array.pop() will return the last element of an Array and delete it from the Array.

var myArray = [1,2,3,4,5,6,7,8,9,10];

document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10
document.writeln(myArray.length+'<BR>');  // outputs: 10

var popped = myArray.pop();

document.writeln(popped+'<BR>');         // outputs: 10
document.writeln(myArray+'<BR>');        // outputs: 1,2,3,4,5,6,7,8,9
document.writeln(myArray.length+'<BR>'); // outputs: 9

Supported Since: Netscape 4.0, Internet Explorer: 5.5

Array.push(value[,value2[, value...]])

The push() method adds the passed value(s) to the end of the array. In addition to being incredibly useful for adding items to the array, it also allows the Array to emulate a basic stack structure.

var myArray = [1,2,3,4,5];

document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5
document.writeln(myArray.length+'<BR>');  // outputs: 5

myArray.push(6);

document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6
document.writeln(myArray.length+'<BR>');  // outputs: 6

myArray.push(7,8,9,10);
document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10
document.writeln(myArray.length+'<BR>');  // outputs: 10

Supported Since: Netscape 4.0, Internet Explorer: 5.5

Array.reverse()

The reverse() method takes the array and reverses the order so the first item becomes the last and the last item becomes the first.

var myArray = [1,2,3,4,5,6,7,8,9,10];
document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10

myArray.reverse();
document.writeln(myArray+'<BR>');         // outputs: 10,9,8,7,6,5,4,3,2,1

Supported Since: Netscape 3.0, Internet Explorer: 3.0

Array.shift()

The shift() method returns the first item in the Array, removing it from the Array in the process. Together with Array.unshift, Shift implements a basic queue structure in Javascript Arrays.

var myArray = [1,2,3,4,5,6,7,8,9,10];
document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10

theItem = myArray.shift();
document.writeln(theItem+'<BR>');         // outputs: 1
document.writeln(myArray+'<BR>');         // outputs: 2,3,4,5,6,7,8,9,10

Supported Since: Netscape 5.5, Internet Explorer: 4.0

Array.slice([begin[, end]])

The slice() method copies a block of the array and returns it to your new variable. If you don't specify a beginning index the slice will begin at zero. If you don't specify and ending index the splice will continue to the end of the Array. So to make a copy of the array simply don't pass any arguments to the method.

var myArray = [1,2,3,4,5,6,7,8,9,10];
document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10

var newArray = myArray.slice();
document.writeln(newArray+'<BR>');        // outputs: 1,2,3,4,5,6,7,8,9,10

var newArray = myArray.slice(5);
document.writeln(newArray+'<BR>');        // outputs: 6,7,8,9,10

var newArray = myArray.slice(5,7);
document.writeln(newArray+'<BR>');        // outputs: 6,7

Supported Since: Netscape 4.0, Internet Explorer: 4.0

Array.some(function)

The some() method will pass each element of the Array through the supplied function until true has been returned. If the function returns true some will in turn return true. If the entire array has been traversed and no true condition was found then some() will return false.

var isNumeric = function(x) {
   // returns true if x is numeric and false if it is not.
   var RegExp = /^)?(d*)(.?)(d*)$/; 
   return String(x).match(RegExp);
}
var myArray = ['one', 'two', 'three', 'four', 'five'];

document.writeln(myArray.some(isNumeric));   // outputs: false

var myArray = ['one', 'two', 3, 'four', 'five'];

document.writeln(myArray.some(isNumeric));   // outputs: true

This method can be prototyped to allow Internet Explorer and older browsers to use this method. Simply copy the following code into your Javascript toolbox and the .some() method will be available regardless of your browser version.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.some)
{
  Array.prototype.some = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          fun.call(thisp, this[i], i, this))
        return true;
    }

    return false;
  };
}

Supported Since: Firefox 1.5, Internet Explorer:

Array.sort([function])

The sort() method, by default, will sort an Array alphabetically. If you would like to create your own sorting criteria, supply a function for the sort method to call. Sort will pass your function (a,b). If a is less than b then return -1, if a is equal to b then return 0, if a is greater than b then return 1. Sort will take it from there.

var myArray=[8,10,50,5,7,83,24,19,168];
myArray.sort()
document.writeln(myArray);  // 10,168,19,24,5,50,7,8,83  (sorted alphabetically)

myArray.sort( function (a,b) { return a-b });  // Sort Numerically
document.writeln(myArray); //5,7,8,10,19,24,50,83,168

function compare(a, b) {
   // psudeo code.
   if (a < b) {
      return -1;
   }
   if (a > b) {
      return 1;
   }
   if (a == b) {
      return 0;
   }
}

myArray.sort(compare);

Supported Since: Netscape 3.0, Internet Explorer: 3.0

Array.splice(start[, howmany[, element1[,element...]]])

The splice() method at it's most basic allows you to delete an element from the array by simply specifying the index you'd like to delete and then how many elements you'd like to delete from that point. You can also specify any number of elements to insert into the array at that point.

splice() returns a new array containing the removed items. If you specify a starting number but don't specify how many, splice will truncate the array.

You can insert elements into the array without deleting anything by specifying zero for howmany.

var myArray=[1,2,3,4,5,6,7,8,9,10];
var newArray=[];

//delete one item at the 5th index.
newArray = myArray.splice(5,1);
document.writeln(myArray);  // outputs: 1,2,3,4,5,7,8,9,10
document.writeln(newArray); // outputs 6

//truncate the array at the 5th index.
myArray=[1,2,3,4,5,6,7,8,9,10];
newArray = myArray.splice(5);
document.writeln(myArray);  // outputs: 1,2,3,4,5
document.writeln(newArray); // outputs 6,7,8,9,10

// do nothing at all.
myArray=[1,2,3,4,5,6,7,8,9,10];
newArray = myArray.splice();
document.writeln(myArray);  // outputs: 1,2,3,4,5,6,7,8,9,10
document.writeln(newArray); // outputs undefined

// cut out the middle and insert 'blue', and 'green'
myArray=[1,2,3,4,5,6,7,8,9,10];
newArray = myArray.splice(1,8, 'blue', 'green');
document.writeln(myArray);  // outputs: 1,blue,green,10
document.writeln(newArray); // outputs 2,3,4,5,6,7,8,9

// Insert without deleting.
myArray=[1,2,3,4,5,6,7,8,9,10];
newArray = myArray.splice(5,0, '*');
newArray = myArray.splice(4,0, '*');
document.writeln(myArray);  // outputs: 1,2,3,4,*,5,*,6,7,8,9,10

Supported Since: Netscape 4.0, Internet Explorer: 5.5

Array.toSource()

The toSource() method is a Firefox only extension which takes the contents of an Array and returns the source code. That is, if you were to use the toSource() method and pass it through an eval statement you could rebuild the array. This is a useful debugging method and can be useful in Ajax/JSON applications. There is no prototype for this method, it works only in Firefox.

var myArray = ["a", "b", "c", {'sky':'blue', 'grass':'green'}];
var theSource = myArray.toSource() 
document.writeln(theSource);  // outputs: ["a", "b", "c", {sky:"blue", grass:"green"}]

Supported Since: Firefox 1.5, Internet Explorer:

Array.toString()

This method outputs the contents of the Array as a string. It's not as powerful as toSource() since it doesn't expand objects but it is supported by browsers other than firefox.

var myArray = ["a", "b", "c", {'sky':'blue', 'grass':'green'}];
var theSource = myArray.toString() 
document.writeln(theSource);  // outputs: a,b,c,[object Object]

Supported Since: Netscape 3.0, Internet Explorer: 3.0

Array.unshift(value1[, value2[, value...]])

The unshift method inserts the value(s) passed in the method's arguments into the start of the Array. Together with the shift(), unshift() implements a basic queue structure in Javascript Arrays.

var myArray = [1,2,3,4,5,6,7,8,9,10];
document.writeln(myArray+'<BR>');         // outputs: 1,2,3,4,5,6,7,8,9,10

myArray.unshift('a','b','c');
document.writeln(myArray+'<BR>');         // outputs: a,b,c,1,2,3,4,5,6,7,8,9,10

Supported Since: Netscape 5.5, Internet Explorer: 4.0

Array.valueOf()

See Array.toString().

Howto Delete An Element From An Array

You can delete an item from an Array with the splice() method. Simply supply the index of the item you wish to delete and how many items you want to delete and the item(s) will be removed for you.

var myArray=[1,2,3,4,5,6,7,8,9,10];

myArray.splice(5,1);        //delete one item at the 5th index.
document.writeln(myArray);  // outputs: 1,2,3,4,5,7,8,9,10

Howto Easily Add Items To An Array

There are three ways to easily add items to an array. First you can use the Array.length property. Since Arrays start with index 0, then Array.length is always equal to the first empty index at the end of the Array.

var myArray = [];
myArray[0] = 'January';
myArray[1] = 'February';

document.writeln(myArray.length);          // Will output: 2

myArray[myArray.length] = 'March';         // Adds Item to end of Array

document.writeln(myArray.length);          // Will output: 3

document.writeln('0>'+myArray[0]+'<BR>');          // Will output: 0>January
document.writeln('1>'+myArray[1]+'<BR>');          // Will output: 1>February
document.writeln('2>'+myArray[2]+'<BR>');          // Will output: 2>March

You can add the .push() method of the Array. This will add the requested items to the end of the Array.

var myArray = [];
myArray[0] = 'January';
myArray[1] = 'February';

myArray.push('March');         // Adds Item to end of Array

document.writeln('0>'+myArray[0]+'<BR>');          // Will output: 0>January
document.writeln('1>'+myArray[1]+'<BR>');          // Will output: 1>February
document.writeln('2>'+myArray[2]+'<BR>');          // Will output: 2>March

You can use the .unshift() method to insert an item at the BEGINNING of the array!

var myArray = [];
myArray[0] = 'February';
myArray[1] = 'March';

myArray.unshift('January');         // Adds Item to beginning of Array

document.writeln('0>'+myArray[0]+'<BR>');          // Will output: 0>January
document.writeln('1>'+myArray[1]+'<BR>');          // Will output: 1>February
document.writeln('2>'+myArray[2]+'<BR>');          // Will output: 2>March

Howto Clear-out/Reset An Array

Clearing out or resetting an array is as simple as assigning it a new empty bracket.

var myArray=[1,2,3,4,5,6,7,8,9,10];

document.writeln(myArray);  // outputs: 1,2,3,4,5,6,7,8,9,10

myArray = [];               // clear-out the array
document.writeln(myArray);  // outputs null

Alternatively you can set the length of the array to zero (myArray.length=0), likewise if you just need to clear out a few items at the end of the array, lower the length property by the number of items you would like removed from the end of the array.

Howto Tell The Difference Between An Array And An Object

Because Javascript's Array is just a modified Javascript object, it's actually not that easy to differentiate an Array and an Object, even when you absolutely need to. So here's a little function that will let you ask the array itself what it is. isArray() will return true if it's an array and false if it is not an Array.

function isArray(testObject) {   
    return testObject && !(testObject.propertyIsEnumerable('length')) && typeof testObject === 'object' && typeof testObject.length === 'number';
}

Usage…

var tmp = [5,9,12,18,'blue',30,7,97,53,33,30,35,27,30];
var tmp2 = {0:5,1:9,2:12}

test1 = isArray(tmp);    // returns true
test2 = isArray(tmp2);   // returns false;

Howto Pass An Array Via Ajax

If you have an Array you need to package up and send via Ajax, you need to use the join method to turn your Array into a string. Find a unique character that is unlikely to appear inside your Array and use it as your delimiter. For most applications the tildie (~) character is a safe delimeter to use.

var myArray=[1,2,3,4,5,6,7,8,9,10];
var theData = myArray.join('~');     // theData=1~2~3~4~5~6~7~8~9~10
theData=encodeURIComponent(theData); // Optional but safe!  Escape the data

Now just send theData through your ajax routine. On the server just do a split('~') in php to turn it back into an Array.

Howto Receive An Array Via Ajax

On the server side convert the Array into a string using a unique delimiter implode in php. (We're assuming a string with a tildie [~] delimiter in this example).

Once you've received the string from your Ajax handler simply use the string's split method to bust the string into an Array.

var ajaxStr = '1~2~3~4~5~6~7~8~9~10';
var myArray = ajaxStr.split('~');
document.writeln(myArray); // outputs: 1,2,3,4,5,6,7,8,9,10

Useful Prototypes

With prototypes you can extend the Array object and include any additional functionality you wish. For instance, the Array.sort() method sorts alphabetically by default but adding a numerical sort is as simple as including the following snippet of code in your toolbox.

Array.prototype.sortNum = function() {
   return this.sort( function (a,b) { return a-b; } );
}

All this does is make sortNum a method of Array just like sort and splice and join and all the other default methods. Any array can access it, even arrays that haven't been assigned to variables…

document.writeln([5,8,12,50,25,80,93].sortNum()); // outputs 5,8,12,25,50,80,93

Since the Javascript Array object is already so rich, there's not much left that needs to be done. However, there are a few snippets people have found helpful.

Useful Prototypes: Array.sortNum()

As stated above, just use the sortNum() method when you want to sort an array numerically instead of alphabetically.

Array.prototype.sortNum = function() {
   return this.sort( function (a,b) { return a-b; } );
}

Useful Prototypes: Array.find(searchStr)

Array.indexOf() is a nice method but this extension is a little more powerful and flexible. First it will return an array of all the indexes it found (it will return false if it doesn't find anything). Second in addition to passing the usual string or number to look for you can actually pass a regular expression, which makes this the ultimate Array prototype in my book.

Array.prototype.find = function(searchStr) {
  var returnArray = false;
  for (i=0; i<this.length; i++) {
    if (typeof(searchStr) == 'function') {
      if (searchStr.test(this[i])) {
        if (!returnArray) { returnArray = [] }
        returnArray.push(i);
      }
    } else {
      if (this[i]===searchStr) {
        if (!returnArray) { returnArray = [] }
        returnArray.push(i);
      }
    }
  }
  return returnArray;
}

Usage…

var tmp = [5,9,12,18,56,1,10,42,'blue',30, 7,97,53,33,30,35,27,30,'35','Ball', 'bubble'];
//         0/1/2 /3 /4/5 /6 /7     /8  /9/10/11/12/13/14/15/16/17/  18/    19/      20
var thirty=tmp.find(30);             // Returns 9, 14, 17
var thirtyfive=tmp.find('35');       // Returns 18
var thirtyfive=tmp.find(35);         // Returns 15
var haveBlue=tmp.find('blue');       // Returns 8
var notFound=tmp.find('not there!'); // Returns false
var regexp1=tmp.find(/^b/);          // returns 8,20    (first letter starts with b)
var regexp1=tmp.find(/^b/i);         // returns 8,19,20 (same as above but ignore case)

Useful Prototypes: Array.shuffle()

The anti-sort, this shuffle() method will take the contents of the array and randomize them. This method is surprisingly useful and not just for shuffling an array of virtual cards.

Array.prototype.shuffle = function (){ 
        for(var rnd, tmp, i=this.length; i; rnd=parseInt(Math.random()*i), tmp=this[i], this[i]=this[rnd], this[rnd]=tmp);
};

Usage…

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
myArray.shuffle();
document.writeln(myArray); // outputs~: 8,1,13,11,2,3,4,12,6,14,5,7,10,15,9

Useful Prototypes: Array.compare(array)

If you need to be able to compare Arrays this is the prototype to do it. Pass an Array you want to compare and if they are identical the method will return true. If there's a difference it will return false. The match must be identical so '80' is not the same as 80.

Array.prototype.compare = function(testArr) {
    if (this.length != testArr.length) return false;
    for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { 
            if (!this[i].compare(testArr[i])) return false;
        }
        if (this[i] !== testArr[i]) return false;
    }
    return true;
}

Usage…

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var yourArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
document.writeln(myArray.compare(yourArray)); // outputs: true;

yourArray[0]='1';
document.writeln(myArray.compare(yourArray)); // outputs: false;
yourArray[0]='one';
document.writeln(myArray.compare(yourArray)); // outputs: false;
yourArray[0]=1;
document.writeln(myArray.compare(yourArray)); // outputs: true;

 

Kaynak

• www.hunlock.com/blogs/Mastering_Javascript_Arrays