Mng trong JavaScript

Mng trong JavaScript

V Mnh Cng
Email: VuManhCuong2006@gmail.com

Ni dung
Array v struct trong JavaScript

Ch
Khi copy cc m JavaScript chy phi thay th cc du nhy kp cho ng nu khng s khng
chy c.

Mng trong JavaScript

Mc lc
1.Mng trong JavaScript........................................................................................................................3
C bao nhiu cch vit mng trong JavaScript?................................................................................3
Cch 1: S dng lp 'Array'..........................................................................................................3
Cch 2: S dng cp ngoc vung '[]'...........................................................................................3
Cch 3: S dng cp ngoc bao '{}'..............................................................................................4
S khc nhau gia cc cch vit mng..............................................................................................4
S dng mng vit lp..................................................................................................................5
2.Lp Array............................................................................................................................................6
Cch s dng.....................................................................................................................................6
Khi to mng nh to mt object trong C++, C# hay Java........................................................6
Ly kch thc (tng s phn t) ca mng.................................................................................6
Ni cc phn t trong mng thnh 1 chui dng hm join ca Array..........................................6
Cc chc nng ca Array...................................................................................................................6
Ging nh 1 mng thng thng..................................................................................................6
Stack..............................................................................................................................................7
Queue............................................................................................................................................8
Hashtable......................................................................................................................................9
3.To lp Map c bit.........................................................................................................................11
Cch dng........................................................................................................................................11
Khi to.......................................................................................................................................11
Gn gi tr....................................................................................................................................11
Ly 1 phn t..............................................................................................................................12
Tm kim 1 phn t.....................................................................................................................13
X kt qu tr v.........................................................................................................................13
Xa 1 phn t..............................................................................................................................14
Benchmark.......................................................................................................................................14
M ngun (file SMap.js 1.43KB/ 61 lines)..................................................................................15

Mng trong JavaScript

1. Mng trong JavaScript

C bao nhiu cch vit mng trong JavaScript?

C 3 cch nh sau:

Cch 1: S dng lp 'Array'

V Array l 1 object nn phi dng t kha 'new' to mng.

// Khai bo mng
var arr = new Array();

Nu mun a gi tr vo cc phn t ca mng th hy khai bo nh sau:

// Khai bo mng
var arr = new Array(xin cho, 100, bn l ai th?, 0.911);
// kim tra cc gi tr c trong arr th dng on m sau:
for (var x in arr) alert(arr[x]);
// x l index, arr[x] l value
// Hoc tng ng vi on m trn:
for (var i=0; i<arr.length; i++) alert(arr[i]);
// C 2 lnh 'for' trn u cho cng 1 kt qu.

C th a mi loi gi tr vo trong mng Array.

Chi tit v lp Array xem phn 2. Lp Array.

Cch 2: S dng cp ngoc vung '[]'

Thc ra y l mt kiu vit khc ca lp Array. Khi khai bo mng bng cp ngoc vung '[]'
th cng s dng c cc phng thc c trong lp Array (xem phn 2. Lp Array).
// Khai bo mng
var arr = [];

Nu mun a gi tr vo cc phn t ca mng th hy khai bo nh sau:

// Khai bo mng
var arr = [xin cho, 100, bn l ai th?, 0.911];

// kim tra cc gi tr c trong arr th dng on m sau:

for (var x in arr) alert(arr[x]);
// x l index, arr[x] l value
// Hoc tng ng vi on m trn:
for (var i=0; i<arr.length; i++) alert(arr[i]);
// C 2 lnh 'for' trn u cho cng 1 kt qu.

C th a mi loi gi tr vo trong mng Array.

V '[]' ging lp 'Array' nn xem phn 2. Lp Array bit v kh nng ca '[]'.
3

Mng trong JavaScript

Cch 3: S dng cp ngoc bao '{}'

Cch ny hay dng khi mun to 1 bng hash (hash-map):

// Khai bo mng
var arr = {item1: xin cho, item2: 100, item3: bn l ai th?,
item4: 0.911};
// s dng lnh 'for' duyt mng hash th ch c 1 cch thi:
for (var x in arr) alert(arr[x]);
// x l key, arr[x] l value

Khai bo tng qut ca mng hash nh sau:

// Khai bo chung
var arr1 = {key1: value1, key2: value2, ...};
// Hoc tch cc cp (key, value) ra tng dng ring r:
var arr2 = {
key1: value1,
key2: value2,
...
}
// Khi duyt mng hash th dng 'for (var x in...
for (var x in arr) {
// X l x y
}
// Ly tng phn t ca mng hash qua key ca n nh sau:
var value = arr[key];

Tuy nhin mng hash khng s dng c cc phng thc ca lp Array. B li, cch vit ny
rt l th khi to lp.

S khc nhau gia cc cch vit mng

So snh qua bng sau:

Ni dung so snh

Array

[]

{}

Phn loi

Mng+Hash

Mng+Hash

Hash

H tr cc phng thc duyt mng nh:

C
push, pop, shift... (nhiu y, google tm
nh)

Khng

for (var x in array)

for (var i=0; i<array.length; i++)

Khng

Ly kch thc bng: array.length

Khng

H tr vit lp

Khng

Khng

Mng trong JavaScript

S dng mng vit lp

Vic dng mng vit lp ch p dng cho cch khai bo th 3 (xem li mc trn).
C th khai bo lp nh sau:

// Khai bo lp khng dng mng hash

function Class() {
this.thuoc_tinh1 = 'thuc tnh1';
this.thuoc_tinh2 = 1000;

// gi tr ty
// gi tr ty

/* Khai bo phng thc 1 cho lp Class */

this.phuong_thuc1 = function(){
// x l y
alert(this.thuoc_tinh2);
alert(this.thuoc_tinh1);
}

/* Khai bo phng thc 2 cho lp Class */

this.phuong_thuc2 = function(){
// x l y
}

Nu dng mng hash th c th tch ring phn hm to ca lp vi phn khai bo cc thuc tnh
v cc phng thc cn li nh sau:
// Khai bo lp c dng mng hash
function Class() {} // Ch l hm to thi, ko cha g c
/* Khai bo thuc tnh v phng thc ca lp bng mng hash */
Class.prototype = {
thuoc_tinh1: 'thuc tnh1',
// gi tr ty
thuoc_tinh2: 1000,
// gi tr ty
phuong_thuc1: function() {
// x l y
alert(this.thuoc_tinh2);
alert(this.thuoc_tinh1);
},
phuong_thuc2: function(param1, param2...) {
// x l y
},
}

Lu l v dng mng nn phi c du phy ',' ngn cch cc thuc tnh v phng thc ca
lp. Khi dng mng hash th ko cn dng n khai bo 'this' nhng khi tham chiu th phi dng
'this'.
Hon ton c th kt hp 2 cch khai bo lp trn khi vit lp.

Mng trong JavaScript

2. Lp Array
Lp Array trong JavaScript rt mnh. N lm c mi th:

Mng

Stack

Queue

Hashtable

Cch s dng

Khi to mng nh to mt object trong C++, C# hay Java

// Array trong JavaScript l 1 object

// t tn Array ging tn bin
var arr = new Array();

hoc
// To mng c kch thc 100
var arr = new Array(100);

Nu bit trc kch thc mng th khai bo theo cch th 2 s chy nhanh hn.
Ko phi xa b nh cho mng v JavaScript c b dn dp ring (ging Java hoc C#).

Ly kch thc (tng s phn t) ca mng

var size = arr.length;

Ni cc phn t trong mng thnh 1 chui dng hm join ca Array

Khi dng Array nh 1 Hashtable th ko dng c hm join.

// Mun ngn cc phn t bng chui g th t chui vo gia

// 2 du nhy kp
var s = arr.join();

Cc chc nng ca Array

Ging nh 1 mng thng thng

// C th gn mi gi tr cho Array
// v trong JavaScript khng phn bit kiu d liu
arr[i] = value;

S dng nh mng thng thng:

arr[i] = arr[i+1]; ...

V d:
<html>
<title>Array</title>
<head>
<script language=JavaScript>
// Khai bo mng ko xc nh kch c

Mng trong JavaScript

var arr = new Array();
// Gn
arr[0]
arr[1]
arr[2]
arr[5]

gi tr cho mng
= 100;
= Array;
= 57.98;
= true;

// ni cc phn t trong mng dng

var s = arr.join( - );
alert(Mng arr = [+s+]);
</script>
</head>
<body></body>
</html>

Stack

Array cung cp 2 phng thc l push v pop thc hin nhim v ca Stack.
// Khai bo stack
var stack = new Array();
// Thm 1 phn t vo stack
// value l d liu bt k cn a vo stack
stack.push(value);
// Ly 1 phn t t stack
var element = stack.pop();

V d:

<html>
<head>
<title>Stack</title>
<script language=JavaScript>
// To stack
var stack = new Array();
// Thm phn t vo stack
stack.push(Value 1);
stack.push(Value 2);
stack.push(Value 3);
// S dng log hin th stack
var log = stack = [+stack.join( -> )+]\n;
// Ly d liu t stack
// Ko t stack.length trong vng for v sau
// mi vng lp kch thc stack s thay i
var max = stack.length;
for (var i=0; i<max; i++)

Mng trong JavaScript

log += pop: +stack.pop()+\n;
// stack sau khi ly ht d liu
log += stack = [+stack.join( - )+];
// Hin th stack
alert(log);
</script>
</head>
<body></body>
</html>

Queue

Array cung cp 2 phng thc lm nhim v ca Queue l push v shift.

// Khai bo queue
var queue = new Array();
// Thm 1 phn t vo stack
// value l d liu bt k cn a vo queue.
// Ging y trang stack, huh?
queue.push(value);
// Ly 1 phn t t queue
var element = queue.shift();

V d:
<html>
<head>
<title>Queue</title>
<script language=JavaScript>
// To queue
var queue = new Array();
// Thm phn t vo queue
queue.push(Value 1);
queue.push(Value 2);
queue.push(Value 3);
// S dng log hin th queue
var log = queue = [+queue.join( -> )+]\n;
// Ly d liu trong queue
// Ko t queue.length trong vng for v sau
// mi vng lp kch thc queue s thay i
var max = queue.length;
for (var i=0; i<max; i++)
log += shift: +queue.shift()+\n;
// Queue sau khi ht d liu

Mng trong JavaScript

log += queue = [+queue.join( -> )+];
// Hin th queue
alert(log);
</script>
</head>
<body></body>
</html>

Hashtable

Thay ch s (s th t cc phn t trong Array) bng chui s c bng hash.

// To bng hash
var hashtable = new Array();

// Gn gi tr (key, value) cho bng hash

hashtable[key] = value;

Vic to bng hash ch c 1 mc:

hashtable[key1][key2] = value;
hashtable[key1] = value;
hashtable[key2] = value;

// error v c 2 mc
// ok
// ok

Khi to bng hash th ko dng c phng thc join v thuc tnh length.
c tt c cc (key, value) trong bng hash ko dng vng lp for nh sau:
for (var value in hashtable){
// x l value y
}

V d:
<html>
<head>
<title>Hash Table</title>
<script language=JavaScript>
// To bng hash
var hashtable = new Array();
// Thm gi tr vo bng hash
hashtable[key1] = value1;
hashtable[key2] = 2;
// Hin th tng value theo key
alert(hashtable[key1]);
alert(hashtable[key2]);
alert(hashtable[key3]); // kq: undefined
// Hin th tt c cc gi tr trong bng hash
var log = ;
for (var value in hashtable)

Mng trong JavaScript

log += value+;
alert(log);
</script>
</head>
<body></body>
</html>

10

Mng trong JavaScript

3. To lp Map c bit
Lp SMap (Special Map) thc hin ging nh lp Properties trong Java nh th ny:

Nhp vo 1 cp (key, value) ci SMap s t ng ghi li theo mc nh sau

level1.level2...levelN = value

Khi ly gi tr ca SMap c th ly bng cch phc: map[level1][level2]...[levelN]

Mt mc (level) c th c nhiu gi tr.

V d:
staff l 1 bn ghi cha cc thuc tnh (name, age, company) s c ghi li trong
SMap theo dng
SMap = {staff: {name, age, company},...};

iu l th SMap l n cha mng ca mng.

L do to ra SMap l v JavaScript ko cho php khai bo theo kiu:
var map = new Array();
map[staff][name] = V Mnh Cng;// error
map[staff][age] = 25;
// error
map[staff][company] = abc-soft; // error

Ko nhiu nhng trong mt s tnh hung cn dng n SMap.

Cch dng

Khi to

Khi to SMap nh 1 object thng thng trong JavaScript

var map = new SMap();

Gn gi tr

C 2 cch
Gn gi tr qua phng thc push(key, value) ca SMap
map.push(key, value);

key l 1 chui (c th l UNICODE hoc m k t khc, ty ) c dng nh sau

level1.level2...levelN

Gia cc mc ca key c du chm '.'

V d 1

// Lu thng tin 1 nhn vin

map.push(cuongvm.tn, V Mnh Cng);
map.push(cuongvm.tui, 25);
map.push(cuongvm.cngty, abc-soft);

Trong v d 1 ch c 2 level: cuongvm l level1; tn, tui, cngty l level2.

S lng level l ko hn ch v cc bn ghi c th khc cu trc ty thch.
11

Mng trong JavaScript

V d 2

// Lu thng tin 1 nhn vin

map.push(cuongvm.tn, V Mnh Cng);
map.push(cuongvm.tui, 25);
map.push(cuongvm.cngty, abc-soft);
// Lu thng tin cng ty
map.push(abc-soft.tn, Cng ty phn mm ABC);
map.push(abc-soft.lnh-vc, Gia cng phn mm);

Trong v d 2, cuongvm v abc-soft l 2 bn ghi c cu trc khc nhau.

Gn gi tr trc tip qua thuc tnh SMap.array

Trong SMap c hai lai phn t: Array v value.
Cc level trung gian l 1 Array, cn value (ch duy nht cc l) l nhng g khng phi l
Array nh chui, s, gi tr boolean, object,...
V level trung gian l Array nn c th gn gi tr trc tip cho n. Tuy nhin vic gn
gi tr cho level trung gian ch thc hin c khi level tn ti, nu cha tn ti
s b li.
V d
// Gi s trong SMap tn ti bn ghi cuongvm nh trn.
// Do nhu cu, cn b sung thng tin v cng vic cho anh
// chng ny nh sau: cuongvm.cngvic
map.array[cuongvm][cngvic] = Lp trnh vin;

Cch ny n gin hn l dng du chm '.' nhng ch thc hin c khi cuongvm l
1 nt trung gian.

Ly 1 phn t

C 2 cch
Ly qua hm get(key) ca SMap
var result = map.get(key);

V d

// Ni tip cc v d bn trn
var name = map.get(cuongvm.tn);
// name = V Mnh Cng
var nhan_vien = map.get(cuongvm);
// Array
// nhan_vien = cuongvm{V Mnh Cng, 25, abc-soft}

Ly trc tip qua thuc tnh SMap.array

var result = map.array[level1][level2]...[levelN];

V d
12

Mng trong JavaScript

var name = map.array[cuongvm][tn];// name = V Mnh Cng
var nhan_vien = map.array[cuongvm]; // Array
// nhan_vien = cuongvm{V Mnh Cng, 25, abc-soft}

Trong trng hp ko chc chn kt qu tr v l Array hay value th cn kim tra n. Chi
tit ni trong phn: X l kt qu tr v.

Tm kim 1 phn t

Tm 1 phn t chnh l ly 1 phn t trong SMap. Xem trong phn Ly 1 phn t.

X kt qu tr v

C 3 lai gi tr tr v khi ly (hoc tm) 1 phn t trong SMap

Array (level trung gian)

null

value (cc gi tr cn li)

Kim tra kt qu tr v
Sau khi ly 1 phn t trong SMap m ko r n thuc lai no th lm nh sau:
var result = map.get(level1.level2...levelN);
// Tng ng:
// var result = map.array[level1][level2]...[levelN];
if (result == null){
// Khng tm thy key ny trong SMap
} else if (result instanceof Array){
// X l mng result
// Ton t instanceof ging instanceof trong Java
} else{
// X l gi tr: mi th khng phi l Array
}

Duyt tt c cc ni dung ca 1 bn ghi

Khi mun x l tan b cc trng ca 1 bn ghi lm nh sau:
for (var field in record){
// X l tng field y
}

(xem thm phn Array -> Hashtable)

V d
// Ni tip cc v d bn trn

// Gi s tn ti bn ghi sau:
// cuongvm{V Mnh Cng, 25, abc-soft}
var record = map.array[cuongvm]; // hoc map.get(cuongvm);
var kq = ;
// kt qu

13

Mng trong JavaScript

for (var field in record)
kq += field+\n;
// In kt qu ra mn hnh
alert(kq);

=> Kt qu sau khi chy v d trn:

V Mnh Cng
25
abc-soft

Xa 1 phn t

Ch c duy nht 1 cch l xa trc tip qua thuc tnh SMap.array:

map.array[level1][level2]...[levelN] = null;

Thc cht l bo cho b dn dp ca JavaScript bit thu hi vng nh cha gi tr ny

khi cn (ging nh trong Java hoc C#).
V d

// Ni tip cc v d bn trn
map.array[cuongvm][tn] = null;
var name = map.array[cuongvm][tn];
// name = null
// Tng ng: var name = map.get(cuongvm.tn);
map.array[cuongvm] = null;
var nhan_vien = map.array[cuongvm];
// nhan_vien = null
// Tng ng: var nhan_vien = map.get(cuongvm);

Benchmark
Test performance cho SMap.
Test 2 chc nng

Thi ghi d liu vo SMap

Thi gian tm kim d liu

C 2 test-case

Test-case 1: Ghi vo SMap 1000 bn ghi, sau tm bn ghi cui cng (bn ghi 999)

Test-case 2: Ghi vo SMap 10,000 bn ghi, sau tm bn ghi gia (bn ghi 5000)

Bn ghi c dng nh sau: company{name, address, country, field}

Cu hnh my

Pentium 4 CPU 3.00GHz/ 1GB RAM/ WindowsXP SP2

Kt qu
Firefox 2

14

Mng trong JavaScript

IE 6

Kt lun

SMap chy tt khi lu khong 1000->2000 bn ghi (c ghi ln tm kim)

Array trong Firefox chy nhanh hn Array trong IE

M ngun (file SMap.js 1.43KB/ 61 lines)

// Special Map class, by VuManhCuong2006@gmail.com, Sept-2007.
// Feel free to use and distribute without any warranty.
function SMap(){
this.array = new Array();
// class attributes
this._el;
this._pos;
this._keys;
this._klen;

15

Mng trong JavaScript

// add new (key, value) to SMap
this.push = function(key, value){
if (typeof value == "undefined") return;

// key not found

if (!this.get(key) && (this._pos < this._klen--)){
if (!this._pos) this._el = this.array;
for (var i=this._pos, e=null; i < this._klen; i++){
// i-th level key
this._el[this._keys[i]] = new Array();
this._el = this._el[this._keys[i]];
}
this._el[this._keys[this._klen]] = value;
} else this._el = value;
// key found

// find existing (key, value) from SMap

this.get = function(key){
if (!this._toArray(key)) return null;
// key is empty
if (this._klen < 1) return (this._el=null);
this._el = this.array[this._keys[this._pos]];
if (!this._el) return null;
// not found
++this._pos;
for (var e=null; this._pos < this._klen; this._pos++){
e = this._el[this._keys[this._pos]];
// not found
if (typeof e == "undefined") return null;
this._el = e;

}
return this._el;

// convert key (dot-separated string) to array

this._toArray = function(key){
this._pos = 0;
if (typeof key != "string"){
this._klen = 0;
return false;
}
this._keys = key.split(".");
this._klen = this._keys.length;
return true;
}
}

16