JavaScript không chỉ là chuỗi và số. JavaScript cho phép bạn tạo các đối tượng và mảng. Các đối tượng tương tự như các lớp.

Bạn đang xem : mảng và đối tượng trong javascript

JavaScript không chỉ là chuỗi và số. JavaScript cho phép bạn tạo các đối tượng và mảng. Các đối tượng tương tự như các lớp. Các đối tượng được đặt tên, sau đó bạn xác định các thuộc tính và giá trị thuộc tính của đối tượng. Mảng cũng là một đối tượng, ngoại trừ mảng hoạt động với một số giá trị cụ thể mà bạn có thể lặp lại. Bài viết này thảo luận về cách tạo và làm việc với các đối tượng bao gồm cả mảng.

Làm việc với các đối tượng JavaScript

Trước khi bạn có thể viết một biến đối tượng, bạn nên hiểu tiền đề của một đối tượng. Một đối tượng xác định một tập hợp các thuộc tính liên quan đến một phần cụ thể của ứng dụng của bạn. Ví dụ: nếu bạn có trang web thương mại điện tử, bạn có các phần khác nhau của trang web liên quan đến cửa hàng. Bạn có khách hàng, đơn đặt hàng, sản phẩm và thông tin liên quan đến những đối tượng này. Ví dụ, hãy lấy một khách hàng. Một khách hàng có địa chỉ, số điện thoại, họ và tên. Số lượng thuộc tính cho khách hàng là tùy thuộc vào bạn và cách bạn thiết kế ứng dụng của mình. Tuy nhiên, hãy bắt đầu với việc tạo đối tượng khách hàng với một số thuộc tính tiêu chuẩn.

var customer = {

first_name: ‘Joe’,

last_name: ‘Smith’,

điện thoại: ‘999-999-9999’

};

Chúng tôi đã thấy từ khóa “var” trước đây. Từ khóa này cho JavaScript biết rằng chúng tôi đang tạo một biến. Trong ví dụ này, chúng tôi đã tạo một đối tượng tùy chỉnh có tên là “khách hàng”. Sau đó, chúng tôi đã tạo các thuộc tính có tên “first_name”, “last_name” và “phone”. Sau dấu hai chấm, chúng tôi đã xác định các giá trị cho các thuộc tính này.

Điều gì xảy ra nếu bạn không có dữ liệu mà bạn muốn sử dụng cho một đối tượng? Không vấn đề gì. JavaScript cho phép bạn tạo các đối tượng tiêu chuẩn mà không cần xác định nhanh bất kỳ dữ liệu tùy chỉnh nào. Đoạn mã sau cũng tạo một đối tượng khách hàng, nhưng dữ liệu không được lấp đầy cho đến khi đối tượng được tạo.

var customer = new Object ();

customer.first_name = ‘Joe’;

customer.last_name = ‘Smith’;

customer.phone = ‘999-999-9999’;

Lưu ý rằng mã này khởi tạo đối tượng “Object ()” bên trong. Đây là đối tượng cơ sở để tạo các đối tượng tùy chỉnh trong mã của bạn. Đối tượng này cung cấp cho bạn khả năng khởi tạo một đối tượng mà không cần cung cấp cho nó bất kỳ dữ liệu nào. Cả hai phương pháp đều hoạt động cho mã JavaScript của bạn và bạn có thể khởi tạo một đối tượng nhiều lần nếu bạn cần để điền thông tin vào cơ sở dữ liệu. Bạn cũng có thể trả lại dữ liệu cho trang web và in nó trên trình duyệt của người dùng. Điều này sẽ liên quan đến việc sử dụng một phương pháp mới mà chúng tôi chưa thấy.

Đối tượng “tài liệu” chứa một số phương pháp giúp bạn tương tác với HTML của trang web. Chúng ta sẽ thảo luận về JavaScript với HTML trong các chương sau, nhưng phương thức “document.write ()” rất tiện lợi khi bạn muốn kiểm tra mã JavaScript của mình. Hãy lấy đối tượng khách hàng trước và in lên trang web.

document.write (customer.first_name);

document.write (“& lt; br / & gt;”);

document.write (customer.last_name);

Câu lệnh trên ghi họ và tên của khách hàng vào trang web. Đoạn mã này được sử dụng để cung cấp cho bạn một ví dụ về cách bạn có thể trả lại dữ liệu bạn đã lưu trữ trong các thuộc tính của đối tượng. Nếu bạn để ý sẽ thấy mã in chữ trên trang web giống với đối tượng khách hàng. Đó là bởi vì đối tượng tài liệu có nguồn gốc từ ngôn ngữ JavaScript. Đối tượng này chứa một số thuộc tính và phương thức mà bạn sẽ sử dụng để tương tác với mô hình đối tượng tài liệu (DOM) của một trang web. Chúng ta sẽ thảo luận về DOM trong các bài học sau.

Đối tượng mảng

Nếu bạn đã thực hiện bất kỳ loại lập trình nào trước đây, bạn có thể quen thuộc với các mảng. Trong JavaScript, một mảng là một đối tượng khác mà bạn sử dụng để lưu giữ các giá trị. Thay vì gán và gọi các thuộc tính, một mảng cho phép bạn gọi các giá trị bằng cách sử dụng một chỉ mục. Một chỉ mục mô tả vị trí của một giá trị được lưu trữ trong bộ nhớ. Với một đối tượng mảng, bạn đã xác định số lượng giá trị bạn muốn lưu trữ và truy xuất các giá trị này dựa trên chỉ mục được liên kết của chúng. Điều quan trọng cần nhớ là các mảng bắt đầu từ chỉ số 0. Chỉ số 0 là phần tử đầu tiên của một mảng, chỉ số 1 là phần tử thứ hai, chỉ số 2 là giá trị thứ ba, v.v.

Hãy bắt đầu với việc xác định một mảng. Đoạn mã sau xác định một mảng sẽ chứa ba giá trị.

var customer = new Array (3);

Lưu ý rằng số 3 trong dấu ngoặc đơn của mảng cho biết số lượng giá trị mà mảng có thể giữ. Tuy nhiên, một lần nữa các giá trị bắt đầu bằng chỉ số 0. Khái niệm này rất quan trọng cần nhớ khi gán và truy xuất giá trị. Bạn cũng có thể gán giá trị cho một mảng giống như cách bạn gán chúng ngay lập tức trong một đối tượng. Đoạn mã sau cũng tạo một mảng “khách hàng” nhưng cũng chỉ định dữ liệu cho mỗi chỉ mục mảng.

Xem Thêm  Cách sử dụng AJAX trong PHP và jQuery - cách sử dụng ajax trong php

var customer = [

‘Joe’,

‘Smith’,

‘999-999-9999’

];

Một lần nữa, đoạn mã trên chứa ba giá trị. Tên đầu tiên được gán chỉ số 0, họ được gán chỉ số 1 và số điện thoại được gán chỉ số 2.

Hãy quay lại mã mảng đầu tiên. Chúng tôi đã gán một biến có tên “khách hàng” cho đối tượng “Mảng” cho phép ba giá trị. Bây giờ, hãy gán các giá trị dựa trên số chỉ mục. Nhìn vào đoạn mã sau.

var customer = new Array (3);

customer [0] = ‘Joe’;

khách hàng [1] = ‘Smith’;

khách hàng [2] = ‘999-999-9999’;

Lưu ý rằng thay vì chỉ định các giá trị một cách nhanh chóng, chúng tôi đã chỉ định các giá trị dựa trên các số chỉ mục. Số chỉ mục này không chỉ phục vụ mục đích gán giá trị mà còn phục vụ mục đích lặp. Bạn có thể sử dụng cấu trúc vòng lặp để hợp lý hóa quá trình viết mã của mình và lặp lại qua từng giá trị mảng dựa trên chỉ mục của nó. Hãy lấy đoạn mã sau làm ví dụ.

cho (int j = 0; j & lt; 3; j ++)

{

Bạn muốn tìm hiểu thêm? Tại sao không tham gia khóa học JavaScript trực tuyến

document.write (customer [j]);

}

Chúng ta đã thảo luận về các vòng lặp trong chương trước. Đối với các vòng lặp liên kết với các mảng trong hầu hết các ngôn ngữ lập trình. Lưu ý rằng thay vì gọi một chỉ mục bằng số, chúng ta sử dụng biến j. Biến j được khởi tạo với giá trị 0 trong cấu trúc vòng lặp for mở đầu của bạn, vì vậy vòng lặp đầu tiên trả về giá trị được giữ trong chỉ mục của mảng khách hàng 0. Vòng lặp trả về và j được tăng thêm 1. Bây giờ, j có giá trị là 1, vì vậy mã JavaScript in ra giá trị được giữ trong chỉ mục 1 của mảng hoặc giá trị thứ hai, là họ của khách hàng. Cuối cùng, vòng lặp trở lại một lần nữa, j lại được tăng lên, và bây giờ j có giá trị là 2. Giá trị (số điện thoại) được in ra trang web. Bây giờ j được tăng lên 3, nó không còn nhỏ hơn ba, đó là điều kiện cần phải đáp ứng để vòng lặp for tiếp tục. Vòng lặp for thoát ra và bạn đã lặp qua tất cả các giá trị của mảng của mình. Loại vòng lặp này và logic của nó được sử dụng rộng rãi trên JavaScript và các ngôn ngữ lập trình khác, vì vậy bạn nên thực hành với loại mã hóa này khi bạn là người mới bắt đầu.

Mảng nhiều chiều cũng là một phần quan trọng của lập trình. Bạn có thể coi mảng nhiều chiều như một ma trận. Đối với mỗi hàng, có một số cột. Hãy sử dụng bảng cửu chương làm ví dụ. Hãy giữ cho nó đơn giản và chỉ sử dụng ba hàng và ba cột. Với ma trận này, chúng ta có 9 giá trị. Bạn sẽ sử dụng mảng nhiều chiều với các vòng lặp for được nhúng. Hãy xem ví dụ mã sau đây.

var row = new Array (3);

cho (int j = 0; j & lt; 3; j ++)

{

row [j] = new Mảng (3);

cho (int k = 0; k & lt; 3; k ++)

{

row [j] [k] = j * k;

}

}

Đoạn mã trên phức tạp hơn ví dụ trước. Dòng mã đầu tiên xác định số hàng của bảng cửu chương. Hãy nhớ rằng, số 3 xác định số lượng giá trị nhưng số chỉ mục là 0 đến 2.

Vòng lặp for tạo một mảng mới cho mỗi hàng. Mảng mới này được sử dụng cho các cột trong ma trận nhân của chúng ta. Vòng lặp nhúng với k biến lặp qua mỗi cột và gán giá trị cho các cột của hàng. Vòng lặp chính bên ngoài tiếp tục thêm 2 lần chạy nữa và tạo ra một bảng cửu chương.

Mảng và đối tượng phổ biến trong hầu hết các ứng dụng JavaScript. Khi bạn làm việc với các thư viện như AngularJs hoặc KnockoutJs, bạn sẽ sử dụng rộng rãi các đối tượng. Các đối tượng cũng cho phép bạn tùy chỉnh các cấu trúc JavaScript khi bạn xác định chúng trên các trang web của mình. Sử dụng các đối tượng để đại diện cho các thuộc tính và thông tin trên các trang của bạn để chúng dễ đọc hơn khi bạn cần lập tài liệu hoặc chỉnh sửa mã của mình.

Xác định các chức năng và phương pháp

Các hàm là một phần chính của mã mô-đun. Các hàm thường được sử dụng khi bạn có mã JavaScript cần chạy trên nhiều trang. Xây dựng một hàm và bạn chỉ cần đưa tệp hàm một lần vào mã của mình. Sau đó, tất cả những gì bạn cần làm là gọi hàm đó từ mỗi trang trong ứng dụng web của bạn. Các phương thức tương tự như các hàm, ngoại trừ các phương thức là các hàm được bao gồm trong một lớp. Các phương thức có thể được kế thừa như một phần của lớp hướng đối tượng. Một số lớp JavaScript được tạo sẵn trong ngôn ngữ JavaScript hoặc bạn sẽ cần phải làm việc với các phương thức từ các thư viện bên ngoài. Bài học này thảo luận về các hàm và phương pháp cũng như cách bạn có thể vận dụng chúng vào mã JavaScript của mình.

Xem Thêm  Python chia chuỗi bằng dấu phẩy - cách chia chuỗi trong python bằng dấu phẩy

Tạo và gọi một hàm

Phần cơ bản hơn trong hai mục mà chúng ta sẽ học trong bài học này là các hàm JavaScript. Các hàm là các đoạn mã bạn muốn chạy nhiều lần trong một hoặc nhiều trang web. Ví dụ: nếu bạn cần tính toán nhân hai số biến nhiều lần trong mã của mình, có lẽ tốt hơn nên xây dựng một hàm nhận hai biến, nhân hai số và sau đó trả về kết quả.

Hãy xem đoạn mã sau.

hàm MultiplyNumbers (n1, n2) {

trả về n1 * n2;

}

Dòng mã đầu tiên xác định hàm. Từ “hàm” cho JavaScript biết rằng bạn sắp xác định một hàm. Phần tiếp theo “MultiplyNumbers” là tên của hàm. Bạn sẽ cần tên này mỗi khi bạn muốn gọi hàm. Hai biến trong ngoặc đơn là những biến bạn phải chuyển cho hàm. Nếu bạn không chuyển hai biến khi bạn gọi hàm, một lỗi sẽ được hiển thị. Tiếp theo, mã chức năng được xác định. Trong ví dụ này, chỉ có một dòng mã trong hàm. Câu lệnh return trả về tích của hai biến.

Bây giờ bạn cần gọi hàm từ mã JavaScript của mình. Vì hàm này trả về một giá trị nên bạn cần gán kết quả của hàm cho một biến. Nhìn vào đoạn mã sau.

var result = MultiplyNumbers (8, 6);

Đoạn mã trên xác định một biến mới có tên “result” và gọi hàm MultiplyNumbers. Trong ví dụ này, hai số được chuyển cho hàm, 8 và 6. Hai biến được nhân lên, và kết quả 48 được trả về và gán cho biến kết quả.

Không phải lúc nào bạn cũng cần trả lại một giá trị. JavaScript cũng hỗ trợ các hàm chỉ thực hiện các biểu thức và không trả về giá trị cho mã JavaScript đang gọi. Ví dụ, giả sử bạn chỉ muốn nhân hai số và in kết quả ra màn hình. Đoạn mã sau sử dụng cùng một quy trình hàm nhưng không trả về kết quả.

MultiplyNumbers (8, 6);

hàm MultiplyNumbers (n1, n2) {

document.write (n1 * n2);

}

Lưu ý rằng không có câu lệnh trả về trong ví dụ trên. Hàm có cùng tên và nó vẫn nhân hai giá trị mà bạn chuyển cho nó. Sự khác biệt duy nhất là hàm này ghi một kết quả ra màn hình so với trả về giá trị cho hàm đang gọi để gán kết quả cho một biến.

JavaScript hướng đối tượng: Phương pháp tạo

JavaScript hỗ trợ mã hướng đối tượng. Điều này có nghĩa là bạn có thể xây dựng các lớp với các thuộc tính và phương thức tương tự như Java, C ++ hoặc C #. Sự khác biệt duy nhất là cú pháp. Trong ví dụ mã trước, hàm sử dụng “document.write ()”. Hàm “write” là một phương thức trong đối tượng lớp “document”. Bạn cũng có thể tạo các đối tượng tùy chỉnh và thêm các phương pháp để làm việc với các phần cụ thể của mã và trang web của bạn.

Hãy lấy một đối tượng “khách hàng”. Một khách hàng có thể có họ và tên, và khách hàng này có thể muốn chỉnh sửa thông tin. Các biến họ và tên của khách hàng là các thuộc tính của đối tượng. Chỉnh sửa thông tin là một phương pháp. Bạn biết cách xây dựng các lớp của mình với các thuộc tính và phương thức bằng cách đánh giá cái nào thực hiện một hành động và cái nào là thuộc tính tĩnh của đối tượng. Nếu định nghĩa là một hành động được thực hiện, bạn tạo một phương thức. Nếu giá trị mô tả đối tượng, hãy sử dụng một thuộc tính.

Đầu tiên, hãy tạo lớp học. Đoạn mã sau đây tạo ra một lớp khách hàng đơn giản.

var Customer = function (first_name, last_name) {

this.first_name = first_name;

this.last_name = last_name;

};

Đoạn mã trên tạo thuộc tính cho đối tượng “Khách hàng”, nhưng bạn vẫn cần tạo hành động “Chỉnh sửa”. Trong ví dụ này, hành động sẽ thay đổi họ và tên của khách hàng. Đoạn mã sau thêm một phương thức vào đối tượng Khách hàng.

var Customer = function (first_name, last_name) {

this.first_name = first_name;

this.last_name = last_name;

};

Customer.prototype.Edit = function (first_name, last_name) {

this.first_name = first_name;

this.last_name = last_name;

};

Lưu ý rằng phần thứ hai của mã xác định chức năng “Chỉnh sửa”. Hàm này cũng lấy thông tin họ và tên và gán thông tin mới cho các biến cục bộ của phương thức, first_name và last_name. Chúng tôi đặt cho phương thức này một tên hành động, bởi vì các phương thức được cho là thực hiện các hành động trên một đối tượng lớp.

Bây giờ, khi chúng tôi muốn sử dụng phương pháp này, trước tiên chúng tôi xác định đối tượng Khách hàng trong mã JavaScript của mình và sau đó gọi đối tượng đó bằng tên phương thức. Đoạn mã sau đây cho bạn biết cách làm việc với một đối tượng tùy chỉnh và phương thức của nó.

var myCustomer = new Customer (‘Jim’, ‘Smith’);

myCustomer.Edit (‘James’, ‘Smith’);

Trong đoạn mã trên, đối tượng Khách hàng được tạo với tên “Jim Smith”, nhưng sau đó khách hàng đổi tên thành “James”. Phương thức “Chỉnh sửa” được gọi trong lớp Khách hàng nơi khách hàng có thể thay đổi tên của mình.

Phạm vi từ vựng

Khi bạn làm việc với mã hóa hướng đối tượng, phạm vi là quan trọng đối với các biến của bạn. Các biến của bạn có thể là cục bộ hoặc toàn cục. Một biến toàn cục có sẵn ở bất kỳ đâu trong mã, nhưng một biến cục bộ chỉ có thể truy cập được trong hàm. Đầu tiên chúng ta hãy xem xét các biến toàn cục. Chúng tôi thậm chí có thể sử dụng chức năng MultiplyNumbers. Nhìn vào mã chức năng sau đây.

Xem Thêm  Laravel 8 có gì mới? - laravel 5 tieng viet

var number1 = 8;

MultiplyNumbers (6);

hàm MultiplyNumbers (n2) {

document.write (number1 * n2);

}

Lưu ý lần này chúng tôi đã khai báo một biến “number1”. Biến này là toàn cục, vì nó không chứa trong bất kỳ mã hàm nào. Hàm vẫn sử dụng biến và ghi 48 ra màn hình. Hàm có thể sử dụng biến vì nó toàn cục. Một lần nữa, các biến toàn cục có thể được sử dụng ở bất kỳ đâu trong mã.

Bây giờ chúng ta hãy xem xét một biến cục bộ bằng cách sử dụng hàm trên.

var number1 = 8;

MultiplyNumbers (6);

hàm MultiplyNumbers (n2) {

var number1 = 6;

document.write (number1 * n2);

}

Như bạn có thể thấy, chúng tôi có hai biến “number1”. Đầu tiên là biến toàn cục mà chúng ta đã sử dụng trong ví dụ trước. Cái tiếp theo là một biến cục bộ. Các biến cục bộ chỉ có thể được sử dụng trong hàm cục bộ, vậy những gì được ghi ra màn hình khi bạn chạy phương thức document.write ()? Câu trả lời là 64. Biến cục bộ ghi đè các biến toàn cục. Trong một số ngôn ngữ, sẽ xảy ra lỗi khi bạn xác định hai biến có cùng tên. Tuy nhiên, với JavaScript, bạn có thể sử dụng cùng một tên biến cục bộ và tạo một biến chỉ có thể truy cập trong hàm.

Phạm vi của các biến của bạn rất quan trọng khi làm việc với các hàm. Nếu bạn gọi một biến hoặc hàm không thể truy cập được, thì công cụ JavaScript sẽ xảy ra lỗi. Loại mã hóa này được phân loại trong JavaScript hướng đối tượng, nhưng bạn sẽ cần đi sâu hơn vào các lớp và mã hóa hướng đối tượng để hiểu đầy đủ cách hoạt động của các biến này. Bạn cần làm việc với các hàm tạo và kế thừa, chúng ta sẽ đề cập đến vấn đề này trong bài học tiếp theo.

Hiểu cách làm việc với các hàm giúp mã của bạn hiệu quả hơn nhiều. Thay vì nhân các số biến nhiều lần, bạn chỉ cần gọi hàm này một lần. Bạn cũng có thể đặt các hàm của mình trong một tệp JavaScript riêng và thêm tệp đó vào mã HTML của bạn. Đoạn mã sau chỉ cho bạn cách thêm tệp .js hàm vào các trang HTML của bạn.

& lt; script src = “myfunctions.js” & gt; & lt; / script & gt;

Bạn sẽ đặt mã hàm của mình trong tệp JS và sau đó gọi hàm ở bất kỳ đâu trong JavaScript. Việc thêm mã trên vào các trang của bạn cho phép bạn gọi bất kỳ hàm nào được lưu trữ trong tệp như thể hàm được viết trên trang. Phương pháp này cũng làm cho mã của bạn dễ đọc hơn và nếu bạn quyết định thay đổi bất kỳ chức năng nào trong một chức năng, bạn chỉ cần thay đổi chức năng một lần và không phải trên một số trang.

Thực hành với các hàm và trả về giá trị để hiểu rõ hơn về cách các hàm này hoạt động để thao tác các giá trị trong mã của bạn.


Xem thêm những thông tin liên quan đến chủ đề mảng và đối tượng trong javascript

JavaScript JSON Array and JSON Object MP4

  • Tác giả: CodeZero – Channel for GEEKS
  • Ngày đăng: 2021-08-04
  • Đánh giá: 4 ⭐ ( 6092 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON | JSON Array | JSON Object | Arrays in JavaScript

Mảng và đối tượng — như sách với báo

  • Tác giả: www.noron.vn
  • Đánh giá: 4 ⭐ ( 5426 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Noron – Mạng hỏi đáp Việt

Mảng trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 6954 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở phần hằng và biến trong javascript mình cũng có nói qua về cách khai báo mảng trong javascript rồi. Nhưng đó mới chỉ là mức độ khai báo còn sử dụng thì mình chưa nói, nên bài này mình sẽ giới thiệu lại với mọi người về mảng trong javascript một cách chi tiết hơn.

JavaScript: Đối tượng Array

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 7816 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Array: Trong JavaScript thì mảng là đối tượng được xây dựng sẵn và có sẵn các thuộc tính và phương thức để thao tác mảng. Lưu ý là một biến thông

cách thức làm việc với mảng các đối tượng trong JavaScript

  • Tác giả: hhmacademy.vn
  • Đánh giá: 5 ⭐ ( 7248 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cách khai báo mảng các đối tượng

Khai báo và duyệt mảng trong javascript (nhập xuất mảng …)

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 5380 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách khai báo mảng và duyệt mảng trong Javascript, sử dụng các vòng lặp để duyệt qua các phần tử của mảng, truy xuất các phần tử của mảng và in lên console

Mảng Và Đối Tượng Trong JavaScript Thực Tế Như Những Cuốn Truyện Và Tờ Báo

  • Tác giả: techmaster.vn
  • Đánh giá: 4 ⭐ ( 8457 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php