Home Variable Types

Kiểu dữ liệu

Wednesday, 15 April 2009 09:45 Anhxtanh3087
E-mail Print PDF
User Rating: / 2
PoorBest 

(PHP Code Vn Group) - Trong bài viết này sẽ nhắc lại về các kiểu dữ liệu trong JavaScript, để giúp cho các bạn có thể sử dụng jQuery một cách dễ dàng nhất.

  Trước khi đọc bài này, mình khuyên các bạn dùng Firefox và Firebug để thực hành cho tiện.

Copy các lệnh vào đây và enter là thấy kết quả ngay! Smile

Test phát nào:

  1. var x = ""
  2.  if ( x )
  3.    console.log("x defaulted to true")
  4.  else
  5.    console.log("x defaulted to false")
 
 

=> Kết quả là "x defaulted to false" đúng chưa nào? Cool

  Giờ chúng ta sẽ bắt đầu!

  Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Điều này có nghĩa là không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu được tự động chuyển thành kiểu phù hợp khi cần thiết. Chúng ta sẽ xem xét các kiểu dữ liệu trong JS cụ thể.

1. String:

là các chuỗi, có thể là chuỗi rỗng. VD:

  1. "I'm a String in JavaScript!"
  2.  'So am I!'
 
 

  1. typeof "some string"; // "string"
 
 

cũng giống như một số ngôn ngữ khác, nếu trong chuỗi có các ký tự như: ' hay " thì tùy chuỗi của ta đặt trong "" hay trong ' '  mà cần hoặc không cần phải thêm dấu: \ ở trước. VD:

 

  1. "You make 'me' sad."
  2.  'Holy "cranking" moses!'
  3.  "<a href=\"home\">Home</a>"
 

 

  Các phương thức của String:

1 string cũng là một đối tượng, và đối tượng này có sẵn các phương thức. VD:

  1. "hello".charAt(0) // "h"
  2.  "hello".toUpperCase() // "HELLO"
  3.  "Hello".toLowerCase() // "hello"
  4.  "hello".replace(/e|o/g, "x") // "hxllx"
  5.  "1,2,3".split(",") // ["1", "2", "3"]
 
 

 Thuộc tính của String:

 Tất cả các chuỗi có 1 thuộc tính: length

 

  1. "Hello".length // 5
  2.  "".length // 0
 

 Chuyển sang kiểu Boolean:

  1. "Hello".length // 5
  2.  "".length // 0
 
 

2. Number:

 Gồm có kiểu số nguyên và số dấu phẩy động. VD:

  1. 12
  2.  3.543
 
 

Số trong JS có độ chính xác 64 bit (8 byte cơ đấy -_-). Và chúng có các toán tử giống như trong ngôn ngữ C (+, -, *, /, %, =, +=, -=, *=, /=, ++, --).

  1. typeof 12 // "number"
  2.  typeof 3.543 // "number"
 
 

  Chuyển sang kiểu Boolean:

  Số 0 mặc định có giá trị là false trong trường hợp bị "ép kiểu" thành boolean, còn các số khác có giá trị là true:

  1. !0 // true
  2.  !1 // false
  3.  !-1 // false
 
 

Bạn thử giải thích điều này nhé:

  1. 0.1 + 0.2 // 0.30000000000000004
 
 

Mình đoán là do số trong JS chỉ có 64 bit ... (???)

  Math:

JS hỗ trợ công cụ để làm việc với đối tượng number này, đó là đối tượng Math.

  1. Math.PI // 3.141592653589793
  2.  Math.cos(Math.PI) // -1
 
 

 Chuyển sang kiểu Number:

JS hỗ trợ các hàm chuyển string sang number:

  1. parseInt("123") = 123 (implicit decimal)
  2.  parseInt("010") = 8 (implicit octal)
  3.  parseInt("0xCAFE") = 51966 (implicit hexadecimal)
  4.  parseInt("010", 10) = 10 (explicit decimal)
  5.  parseInt("11", 2) = 3 (explicit binary)
  6.  parseFloat("10.10") = 10.1
 
 

 Chuyển Number sang String:

Khi gắn Number vào String thì kết quả luôn luôn là 1 string:

  1. "" + 1 + 2; // "12"
  2. "" + (1 + 2); // "3"
 
 

hoặc:

  1. String(1) + String(2); //"12"
  2. String(1 + 2); //"3"
 

 Không xác định và vô cùng:

Chuyển đổi các đối tượng mà không phải là số sang số sẽ cho kết quả là NaN (ko xác định) , và JS cho phép kiểm tra việc đó với hàm isNaN. VD:

  1. parseInt("hello", 10) // NaN
  2.  isNaN(parseInt("hello", 10)) // true
 
 

 Chia cho 0 sẽ cho kết quả vô cùng:

  1. 1 / 0 // Infinity
 
 

Cả NaN và Infinity đều có kiểu dữ liệu là number:

  1. typeof NaN // "number"
  2.  typeof Infinity // "number"
 
 

 Chú ý : 2 đối tượng ko xác định thì có thể ko bằng nhau, còn 2 đối tượng vô cùng thì bằng nhau nên:

  1. NaN == NaN // false (!)
  2.  Infinity == Infinity // true
 
 

3. Boolean:

Kiểu logic, có 2 giá trị: true,false. (Đúng và Sai)

  1. if ( true ) console.log("always!")
  2.  if ( false ) console.log("never!")
 
 

  1. $("...").somePlugin({
  2.   hideOnStartup: true,
  3.   onlyOnce: false
  4. });
 
 

4. Object:

Mọi thứ trong JS đều là đối tượng (Object) ! Ta có thể tạo ra đối tượng với từ khóa var:

  1. var x = {};
  2.  var y = {
  3.    name: "Pete",
  4.    age: 15
  5.  };
 
 

Kiểu của 1 đối tượng là "object":

  1. typeof {} // "object"
 
 

 Dot notation: giống Java hay C#, JS dùng dấu chấm (.) để thực thi 1 phương thức hay đọc, ghi thuộc tính cho 1 đối tượng.

 

  1. y.name // "Pete"
  2.  y.age // 15
  3.  x.name = y.name + " Pan" // "Pete Pan"
  4.  x.age = y.age + 1 // 16
 

 Array notation: Bạn có thể đọc hoặc ghi thuộc tính của đối tượng sử dụng ký hiệu mảng:

  1. var operations = {
  2.    increase: "++",
  3.    decrease: "--"
  4.  }
  5.  var operation = "increase";
  6.  operations[operation] // "++";
  7.  operations["multiply"] = "*"; // "*"
 
 

rất linh động!

 Iteration:

Bạn cũng có thể sử dụng vòng lặp for để đọc - ghi các thuộc tính của đối tượng:

  1. var obj = { 
  2.   name: "Pete",
  3.   age: 15
  4. };
  5. for(key in obj) {
  6.  alert("key is "+[key]+", value is "+obj[key]);
  7. }
 
 

 jQuery hỗ trợ 1 hàm để lặp qua các thuộc tính của 1 đối tượng: each

  1. jQuery.each(obj, function(key, value) {
  2.    console.log("key", key, "value", value);
  3.  });
 
 

 Prototype:

Tất cả các đối tượng đều có thuộc tính nguyên mẫu. Khi trình biên dịch tìm 1 thuộc tính của đối tượng thì nó cũng kiểm tra thuộc tính nguyên mẫu. jQuery sử dụng điều đó để thêm các thuộc tính cho các đối tượng jQuery:

  1. var form = $("#myform");
  2.  form.clearForm; // undefined
  3.  form.fn.clearForm = function() {
  4.    return this.find(":input").each(function() {
  5.      this.value = "";
  6.    }).end();
  7.  };
  8.  form.clearForm() // works for all instances of jQuery objects, because the new method was added to the prototype
 
 

 Options:

Options trong jQuery là các đối tượng JavaScript rõ ràng. VD:

  1. $("#myform").ajaxForm();
 
 

  1. $("#myform").ajaxForm({
  2.    url: "mypage.php",
  3.    type: "POST"
  4.  });
 
 

5. Array:

Mảng trong JS là các danh sách có thể thay đổi được với 1 vài phương thức có sẵn. Bạn có thể định nghĩa mảng:

  1. var x = [];
  2.  var y = [1, 2, 3];
 
 

Kiểu của 1 mảng là "object" :

  1. typeof []; // "object"
  2.  typeof [1, 2, 3]; // "object"
 
 

Đọc và ghi các phần tử của một mảng:

  1. x[0] = 1;
  2.  y[2] // 3
 
  

 Iteration: Dùng thuộc tính length của mảng là nhanh nhất:

  1. for (var i = 0; i < a.length; i++) {
  2.    // Do something with a[i]
  3.  }
 

hoặc cũng có thể sử dụng cách:

  1. for (var i = 0, item; item = a[i]; i++) {
  2.    // Do something with item
  3.  }
 
 

với jQuery thì các bạn đã biết rồi đúng ko,mới đọc xong:

  1. var x = [1, 2, 3];
  2.  jQuery.each(x, function(index, value) {
  3.    console.log("index", index, "value", value);
  4.  });
 
 

Cũng giống như một ngăn xếp (stack) mảng có các phương thức pop,push là hay dùng:

  1. var x = [];
  2.  x.push(1);
  3.  x[x.length] = 2;
  4.  x // 1, 2
 
 

 và một số phương thức khác:

  1. var x = [0, 3, 1, 2];
  2.  x.reverse() // [2, 1, 3, 0]
  3.  x.join(" – ") // "2 - 1 - 3 - 0"
  4.  x.pop() // [2, 1, 3]
  5.  x.unshift(-1) // [-1, 2, 1, 3]
  6.  x.shift() // [2, 1, 3]
  7.  x.sort() // [1, 2, 3]
  8.  x.splice(1, 2) // [2, 3]
 
 

 Chuyển sang Boolean:

Một mảng có hay không có phần tử nào đều có giá trị true nếu bị ép kiểu sang boolean:

  1. ![] // false
 
 

6. Function:

Hàm trong JS có thể có tên hoặc ko. Định nghĩa hàm:

  1. function named() {}
  2. var handler = function() {}
 
 

Bạn sẽ nhìn thấy rất nhiều hàm không tên trong jQuery:

  1. $(document).ready(function() {});
  2.  $("a").click(function() {});
  3.  $.ajax({
  4.    url: "someurl.php",
  5.    success: function() {}
  6.  });
 
 

Kiểu của 1 hàm là "function" .

 Tham số:

Cũng giống như các ngôn ngữ khác thôi:

  1. function log(x) {
  2.   console.log(typeof x, arguments.length);
  3. }
  4. log(); // "undefined", 0
  5. log(1); // "number", 1
  6. log("1", "2", "3"); // "string", 3
 
 

 Đối tượng arguments:

  1. var awesome = function() { return arguments.callee }
  2.  awesome() == awesome // true
 
 

 Context, Call and Apply :

Trong JS biến "this" chỉ đến thuộc tính, đối tượng hiện tại. Mặc định, biến "this" chỉ đến đối tượng window. VD trong jQuery:

  1. $(document).ready(function() {
  2.   // this refers to window.document
  3. });
  4. $("a").click(function() {
  5.   // this refers to an anchor DOM element
  6. });
 
 

Hàm có sẵn 2 thuộc tính: call và apply. Sự khác nhau giữa chúng là cách truyền tham số. VD:

 

  1. function scope() {
  2.   console.log(this, arguments.length);
  3. }
  4. scope() // window, 0
  5. scope.call("foobar", [1,2]); // "foobar", 1
  6. scope.apply("foobar", [1,2]); // "foobar", 2
 

 Phạm vi:

 Trong JS cũng như nhiều ngôn ngữ khác, biến được định nghĩa trong hàm chỉ có tác dụng trong hàm đó. VD:

  1. // global
  2.  var x = 0;
  3.  (function() {
  4.    // private
  5.    var x = 1;
  6.    console.log(x); // 1
  7.  })();
  8.  console.log(x); // 0
 
 

 Callback:

 Là một hàm, đóng vai trò như 1 tham số hay là 1 option của 1 phương thức (của đối tượng nào đó). Thường đi liền với sự kiện (event) của JS,sẽ được gọi khi sự kiện xảy ra. VD trong jQuery:

  1. $("body").click(function(event) {
  2.    console.log("clicked: " + event.target);
  3.  });
 
 

hay

  1. $("#myform").submit(function() {
  2.    return false;
  3.  });
 
 

 Selector:

Được sử dụng để "bắt" (chọn) 1 phần tử DOM trong tài liệu HTML của bạn. Chúng ta sẽ không đi sâu ở đây!

 Event:

Sự kiện trong jQuery nói chung giống sự kiện theo chuẩn W3C.

 Element:

Một phần tử trong Document Object Model (DOM) có thuộc tính, text, và có các phần tử con.

  1. $(":text").blur(function() {
  2.   if(!this.value) {
  3.    alert("Please enter some text!");
  4.   }
  5. });
 
 

 

Đậu Ngọc Huy - Đại học Bách khoa HN

Tham  khảo: http://docs.jquery.com/Types

< Prev
Last Updated ( Wednesday, 15 April 2009 15:42 )  

Đề cử phpLemon

POLLS

Bạn thích sử dụng JavaScript Framework nào nhất?
 

Alexa Rank


Who's Online

We have 1 guest online