Nodejs.vn

vananh.dao0809

Bài viết ngày hôm nay chúng ta cùng tìm hiểu về innerHTML trong Javascript , một thuộc tính cực kỳ thông dụng trong Javascript .

1 Tác dụng của innerHTML trong Javascript

Tác dụng của thuộc tính innerHTML là lấy nội dung và thiết lập nội dung cho một node HTML nào đó ,Nếu bạn sử dụng jQuery thì có phương thức $(node).html() .

2. Cú pháp innerHTML trong javascript

Cú pháp của innerHTML như sau:

// lấy nội dung
let content = node.innerHTML;
 
// Gán nội dung
node.innerHTML = newContent;

Trong đó:
• newContent chính là nội dung bạn muốn gán vào node
• node chính là đối tượng cần lấy hoặc cần gán nội dung.

3. Cách dùng innerHTML trong javascript
Ví dụ innerHTML javascript:
Giả sử ta có đoạn code HTML như sau.

<div id="node">
    Học JS tại Nodemy.vn 
</div>

Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML.

let node = document.getElementById('node');
// lấy nội dung
let content = node.innerHTML;
 
// Gán nội dung
node.innerHTML = "Học JS Node tại Nodemy.vn";

Tài liệu tham khảo :

vananh.dao0809

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về DOM Element Javascript cách để truy xuất đến các tài liệu trong HTML .Khi nhắc đến DOM Element Javascript gồm các hàm sau : getElementById,
getElementsByTagName, getElementsByClass và querySelectorAll .

1 Sử dụng getElementById để tìm theo ID

var element = document.getElementById('idname');

Ví dụ :

// Lấy thẻ input
var element = document.getElementById('website');
 
// Lấy giá trị của thẻ input
document.write(element.value);

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html
Tên thẻ HTML chính là tên các thẻ như p, a, div, ... Và ta sẽ truy xuất tới nó bằng cú pháp sau:

var element = document.getElementsByTagName('tagname');

// Lấy thẻ input
var element = document.getElementsByTagName('input');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

Trong một trang web có thể có nhiều thẻ HTML giống nhau (ví dụ có hai thẻ div) nên hàm getElementsByTagName() sẽ trả về một mảng các object (xem bài mảng trong javascript) chứ không phải là một object nữa. Vì mình muốn lấy thẻ input thứ nhất và nó là phần tử đầu tiên trong mảng nên nhập số 0 vào.

3. Sử dụng getElementsByClassName để tìm theo tên class
Để tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau:
var element = document.getElementsByClassName('input');
Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy.

Ví dụ :

// Lấy thẻ input
var element = document.getElementsByClassName('website');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

4. Sử dụng querySelectorAll để tìm theo CSS selector

Khi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy javascript DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll.
Và đây là cú pháp sử dụng:

var element = document.querySelectorAll("selector css");

Ví dụ:

<html>
  <body>
    <input type="text" value="thẻ không cần lấy" class="website"/>
    <div>
        <input type="text" value="Thẻ Cần Lấy" class="website"/>
        <input type="text" value="thẻ không cần lấy"/>
    </div>
  </body>
</html>

Làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có class="website"?

Trước tiên ta quay lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ div và có class="website" thì cú pháp là:
div input.website
Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy.

var element = document.querySelectorAll("div input.website");

Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects.

Nguồn tài liệu tham khảo : freetuts.net

vananh.dao0809

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về cách lấy nội dung và cách thay đổi thuộc tính thẻ HTML nhé . Cùng khám phá bài viết này nhé .

1 Cách lấy nội dung trong thẻ HTML bằng JS

Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:

document.getElementById("content").innerHTML

Trong đó innerHTML chính là thuộc tính của đối tượng html, công dụng của nó là dùng để lấy hoặc gán giá trị cho một thẻ html.
Để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:

document.getElementById("content").innerHTML = "<h1>Nội dung</h1>";

Để hiểu hơn chúng ta có ví dụ sau :
Viết chương trình thay đổi nội dung bên trong của một thẻ div, và lấy nội dung bên trong của thẻ div đó.

<html>
  <body>
    <script language="javascript">
      // Hàm thiết lập nội dung cho thẻ div#content
      function set_content()
      {
        document.getElementById("content").innerHTML = "<h1>Nội dung đã được thay đổi</h1>";  
      }
       
      // Hàm lấy nội dung cho thẻ div#content
      function get_content()
      {
        var html = document.getElementById("content").innerHTML;
        alert("Nội dung cần lấy là: " + html);        
      }
       
    </script>
    <div id="content">Nội dung của thẻ DIV</div>
    <input type="button" value="Lấy nội dung" id="get_content" onclick="get_content()" />
    <input type="button" value="Thay đổi nội dung" id="set_content" onclick="set_content()" />
  </body>
</html>

2 Thay đổi thuộc tính thẻ html bằng Javascript

Để thay đổi giá trị của thuộc tính HTML thì ta sử dụng cú pháp như sau:

document.getElementById("element").attributeName = "new value";

Để lấy giá trị của thuộc tính HTML ta sử dụng cú pháp sau:

document.getElementById("element").attributeName;

Trong đó attributeName là tên của thuộc tính mà bạn cần xử lý. Tùy vào mỗi thẻ html mà có các thuộc tính khác nhau. Dưới đây là danh sách các thuộc tính thường dùng nhất.

Từ đây có thể suy ra rằng trong Javascript để thiết lập (set) và lấy (get) thì sử dụng chung một cú pháp, chỉ khác nhau ở chỗ gán bằng và không có gán bằng.

Để hiểu hơn chúng ta có ví dụ sau :

Xây dựng chương trình khi click vào một button thì chuyển nó thành textbox, và tiếp tục click vào textbox thì sẽ đổi thành button .

<html>
    <body>
        <script language="javascript">
          function change()
          {
             // Lấy đối tượng
             var object = document.getElementById("object");
          
             // lấy thuộc tính type
             var type = object.type;
         
             // kiểm tra thuộc tính type và thay đổi
            if (type == "button"){
           
               object.type = 'text';
            }
            else{
                object.type = "button";
            }
         
          }
        </script>
        <input type="button" value="CLick me" onclick="change()" id="object" />
    </body>
</html>

vananh.dao0809

Trong bài viết ngày hôm nay cúng ta cùng tìm hiểu về phép chia lấy phần dư và chia phần nguyên trong Javascript nhé . Cùng tìm hiểu bài viết này nhé .

tải xuống.png
Phép chia lấy phần dư :

Để chia lấy phần dư chúng ta sử dụng toán tử % . Để hiểu hơn chúng ta có ví dụ sau :

var chiaPhanDu2 = 7 % 2;
 
console.log(chiaPhanDu2); // Kết quả là 3

Ngoài ra chúng ta cũng có thể dùng toán tử % để kiểm tra một số có thể chia hết cho một số khác hay không .

Ví dụ :

if (S % 3 == 0){
    console.log(S + " chia het cho 3");
}

Phép chia lấy phần nguyên

Để chia lấy phần nguyên ta sử dụng phương thức Math.floor, đây là hàm dùng để làm tròn một số xuống cận dưới, tức là mọi số nó sẽ được làm tròn bỏ đi giá trị sau dấu phẩy động.

Math.floor(3); // Kết quả: 3
Math.floor(3.1); // Kết quả: 3
Math.floor(3.5); // Kết quả: 3
Math.floor(3.8); // Kết quả: 3

Ngoài ra chúng ta cũng thể sử dụng công thức sau để làm tròn :
Gọi a là số bị chia, b là số chia, thì phần nguyên của a chia b sẽ là:

var phan_nguyen = (a - (a % b));

Ví dụ: Lấy phần nguyên của phép 23 / 4.
```
var phan_nguyen = (23 - (23 % 4));

vananh.dao0809

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về thẻ a trong HTML nhé , cùng khám phá bài này nhé .

1 Thẻ a trong HTML là gì ?

Thẻ a trong html được dùng để tạo link, tức là các đường dẫn của một website nào đó trên internet.
Cú pháp của thẻ a như sau:

<a href="https://nodemy.vn">nodemy.vn</a>

Ví dụ ta tạo liên kết có nội dung “ Học lập trình tại Nodemy “ trỏ đến đường dẫn nodemy.vn chúng ta làm như sau .

<a href="https://nodemy.vn">Học lập trình tại Nodemy</a>

2 Các thuộc tính của thẻ a

Thuộc tính title của thẻ a

Thuộc tính title dùng để mô tả ý nghĩa của đường liên kết. Khi bạn hover chuột vào link thì sẽ xuất hiện một dòng chữ, đó chính là nội dung mà ta đã đặt vào thuộc tính title.
Ví dụ :

<a href="https://nodemy.vn" title="học lập trình  thực chiến">Nodemy lập trình thực chiến </a>

Thuộc tính rel của thẻ a

Nếu người bình thường thì sẽ ít quan tâm đến thuộc tính này. Nhưng nếu bạn là dân SEO thì sẽ cần chú ý đấy.
Thuộc tính rel dùng để khai báo cho các công cụ search engine biết là có dò đường link này hay không. Nó có hai giá trị như sau:
• follow là có dò
• nofollow là không dò
Ví dụ: Khai báo cho các bot search không dò vào đường link ở ví dụ trên.

<a href="https://nodemy.vn" rel="nofollow">Nodemy lập trình thực chiến</a>

Thuộc tính target của thẻ a

Khi bạn click vào link thì trình duyệt sẽ chuyển hướng đến trang đích ngay lập tức và ngay trên tab hiện tại. Nếu bạn muốn chuyển đến một tab khác thì có thể sử dụng thuộc tính target.
• _blank thì nó sẽ chuyên link trên tab mới
• _self thì nó sẽ chuyển link trên tab hiện tại (giá trị mặc định)
• _parent thì nó sẽ chuyển link tới tab mở tab hiện tại. Ta còn hay gọi là tab cha của tab hiện tại
• _top thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc luôn.

Thuộc tính download của thẻ a

Nếu bạn muốn khi click vào đường link, thay vì truy cập vào link đó thì trình duyệt sẽ tải nội dung của đường link đó về thì hãy khai báo thuộc tính download nhé.

<a href="https://nodemy.vn" download>Nodemy lập trình thực chiến</a>

3. Giá trị href # của thẻ a trong HTML
Khi bạn khai báo một thẻ a mà không muốn trỏ đến một liên kết nào thì hãy thiết lập giá trị href="#" nhé.

<a href="#">học javascript</a>

Ngoài ra, nếu bạn muốn khi click vào thẻ a thì trình duyệt sẽ di chuyển đến một vị trí nào đó trong trang web thì hãy làm theo cách sau.

Bước 1: Đặt ID cho vị trí bạn cần di chuyển đến. Giả sử đó là thẻ div, và mình sẽ đặt id cho nó như sau:

<div id="moveto"></div>

Bước 2: Khi click vào thẻ a thì sẽ nhảy tới thẻ div#moveto, ta sẽ thiết lập như sau:

<a href="#moveto" >Đi tới div#moveto</a>

4. Các trạng thái của thẻ a trong HTML
Thẻ a gồm có 4 trạng thái chính đó là:
• link: Chưa có hành động nào trên link
• visited: Đã click vào link và đi đến trang đích
• hover: Di chuyển qua link
• active: Link đã được active

Nguồn tham khảo : freetuts.net.

vananh.dao0809

Phương thức string.charAt() trong Javascript là gì ? Tác dụng của hàm string.charAt() như thế nào ? … trong bài viết ngày hôm nay chúng ta cùng khám phá câu trả lời cho những câu hỏi trên nhé .

tải xuống.png

Phương thức string.charAt() trong Javascript là gì ?

Phương thức string.charAt() có chức năng tìm kiếm kí tự ở một vị trí nào đó trong chuỗi, vị trí tìm kiếm đó sẽ do người dùng xác định.
Lưu ý rằng vị trí của một chuỗi sẽ bắt đầu từ vị trí 0, vị trí thứ 2 có chỉ số là 1 .... vị trí cuối cùng là string.length -1.

Cú pháp

Cú pháp:

string.charAt(index)

Trong đó:
index là vị trí muốn tìm kiếm trong chuỗi.

Cách sử dụng :

Ví dụ: sử dụng phương thức string.charAt() để tìm kiếm các kí tự ở vị trí mong muốn.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
  
        <button onclick="myFunction()">Run</button>
  
        <p id="demo"></p>
  
        <script>
            function myFunction() {
                var str = "nodemy.vn";
                var content = '';
                content = content + 'Vị trí đầu tiên - ' + str.charAt(0) + '<br>';
                content = content + 'Vị trí thứ 2 - ' + str.charAt(1) + '<br>';
                content = content + 'Vị trí thứ 3 - ' + str.charAt(2) + '<br>';
                content = content + 'Vị trí thứ 4 - ' + str.charAt(3) + '<br>';
                document.getElementById("demo").innerHTML = content;
            }
        </script>
    </body>
</html>

Kết quả :

Vị trí đầu tiên - F
Vị trí thứ 2 - r
Vị trí thứ 3 - e
Vị trí thứ 4 - e

Ví dụ 2: Sử dụng kết hợp với string.length để tìm các kí tự ở cuối chuỗi.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình thực chiến tại nodemy.vn</h1>
  
        <button onclick="myFunction()">Run</button>
  
        <p id="demo"></p>
  
        <script>
            function myFunction() {
                var str = "Freetuts.net";
                var content = '';
                var len = str.length;
                content = content + 'Vị trí đầu tiên - ' + str.charAt(0) + '<br>';
                content = content + 'Vị trí thứ 2 - ' + str.charAt(1) + '<br>';
                content = content + 'Vị trí kế cuối - ' + str.charAt(len-2) + '<br>';
                content = content + 'Vị trí cuối cùng - ' + str.charAt(len-1) + '<br>';
                document.getElementById("demo").innerHTML = content;
            }
        </script>
    </body>
</html>

Kết quả :

Vị trí đầu tiên - F
Vị trí thứ 2 - r
Vị trí kế cuối - e
Vị trí cuối cùng - t

vananh.dao0809

Sự kiện onmouseout trong Javascript là gì ? Tác dụng của sự kiện onmouseout trong Javascript như thế nào ? … trong bài viết ngày hôm nay chúng ta cùng tìm câu trả lời cho các câu hỏi trên nhé .

tải xuống.png

1 Sự kiện onmouseout trong Javascript là gì ?
Sự kiện onmouseout là sự kiện khi người dùng di chuyển con trỏ chuột ra ngoài phạm vi hiển thị của thẻ HTML .
2 Thêm sự kiện onmouseout như thế nào ?
Để thêm sự kiện onmouseout vào một thẻ HTML nào đó thì ta có một số cách như sau:

Cách 1 : Thêm trực tiếp vào thẻ HTML

<input type="button" onmouseout="callMouseOutEvent()" value="Di chuyển vào đây"/>
<script>
    function callMouseOutEvent(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    }
</script>

Cách 2 : Gắn hàm vào sự kiện onmouseout bằng mã Javascript

<input type="button" id="btn" value="Di chuyển vào đây"/>
<script>
    var obj = document.getElementById('btn');
    obj.onmouseout = function(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    };
</script>

Hoặc chún ta có thể sử dụng addEventListener.

<input type="button" id="btn" value="Di chuyển vào đây"/>
<script>
    var obj = document.getElementById('btn');
    obj.addEventListener('mouseout', function(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    });
</script>

vananh.dao0809

Date trong Javascript là gì ? Tác dụng của đối tượng date trong Javascript ? Các phương thức của Date trong Javascript ? … trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về đối tượng date trong Javascript nhé , cùng khám phá bài viết này nào !

tải xuống.png

Date trong Javascript là gì ?

-Đối tượng date trong javascript là nơi xử lý các vấn đề về thời gian.
Khởi tạo :

Theo thời gian hiện tại :

new Date();

Khởi tạo ngày giờ từ giá trị time millisecond:

new Date(milliseconds);

Trong đó: milliseconds là thời gian chúng ta muốn khởi tạo đơn vị mili giây.

Khởi tạo ngày giờ từ một dateString:

new Date(dateString);

Trong đó: dateString có dạng "tháng ngày, năm giờ:phút:giây" trong đó tháng là tên tiếng anh.
Ví dụ : September 08 , 2022 12:00:00

Khởi tạo ngày giờ từ một date string dạng atrribute:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Trong đó:
• year là năm.
• month là tháng.
• hours là giờ.
• minutes là phút.
• seconds là giây.
• milliseconds là mili giây.

Các phương thức của Date trong Javascript

Các phương thức get dữ liệu

• getDate() trả về ngày trong tháng (1 - 31).
• getDay() trả về ngày trong tuần (0-6), với chủ nhật là 0, thứ 2 là 1, thứ 3 là 2 ,...
• getMonth() trả về tháng trong năm (0 - 11).
• getFullYear() trả về năm dạng đầy đủ (YYYY).
• getHours() trả về số giờ dạng 24h (0 - 23).
• getMinutes() trả về phút trong giờ (0 - 59).
• getSeconds() trả về số giây trong phút (0 - 59).
• getMilliSeconds() trả về tích tắc trong giây (0 - 999).
• getTime() Trả về thời gian dạng mili giây.

Các phương thức set :
• setDate(x) thiết lập ngày trong tháng (1 - 31).
• setMonth(x) thiết lập tháng trong năm (0 - 11).
• setFullYear(x) thiết lập năm dạng đầy đủ (YYYY).
• setHours(x) thiết lập số giờ dạng 24h (0 - 23).
• setMinutes(x) thiết lập phút trong giờ (0 - 59).
• setSeconds(x) thiết lập số giây trong phút (0 - 59).
• setMilliSeconds(x) thiết lập tích tắc trong giây (0 - 999).
• setTime(x) thiết lập thời gian dạng mili giây.

Ví dụ 1 :

function get() {
            var date = new Date(2017,04,06,12,08,05,150);
            document.getElementById('result').innerText = date;
     }
// Sat May 06 2017 12:08:05 GMT+0700 (Giờ Đông Dương)

Ví dụ 2 :

function get() {
            var date = new Date();
            var data = 'Ngày trong tháng: ' + date.getDate() + '<br />';
            data += 'Ngày trong tuần: ' + date.getDay() + '<br />';
            data += 'Tháng trong năm: ' + date.getMonth() + '<br />';
            data += 'Năm đầy đủ: ' + date.getFullYear() + '<br />';
            data += 'Giờ: ' + date.getHours() + '<br />';
            data += 'Phút: ' + date.getMinutes() + '<br />';
            data += 'Giây: ' + date.getSeconds() + '<br />';
            data += 'Mili Giây: ' + date.getMilliseconds() + '<br />';
            data += 'Time dạng mili giây: ' + date.getTime() + '<br />';
            document.getElementById('result').innerHTML = data;
        }
//Ngày trong tháng: 10
//Ngày trong tuần: 2
//Tháng trong năm: 4
//Năm đầy đủ: 2022
//Giờ: 11
//Phút: 51
//Giây: 20
//Mili Giây: 518
//Time dạng mili giây: 1652158280518

Ví dụ 3 :

function set() {
            var date = new Date();
            date.setDate(06);
            date.setMonth(04);
            date.setFullYear(2017);
            date.setHours(15);
            date.setMinutes(05);
            date.setSeconds(5);
            date.setMilliseconds(120);
        }
        function get() {
            set();
            var date = new Date();
            var data = 'Ngày trong tháng: ' + date.getDate() + '<br />';
            data += 'Ngày trong tuần: ' + date.getDay() + '<br />';
            data += 'Tháng trong năm: ' + date.getMonth() + '<br />';
            data += 'Năm đầy đủ: ' + date.getFullYear() + '<br />';
            data += 'Giờ: ' + date.getHours() + '<br />';
            data += 'Phút: ' + date.getMinutes() + '<br />';
            data += 'Giây: ' + date.getSeconds() + '<br />';
            data += 'Mili Giây: ' + date.getMilliseconds() + '<br />';
            document.getElementById('result').innerHTML = data;
        }
//Kết quả  
//Ngày trong tháng: 10
//Ngày trong tuần: 2
//Tháng trong năm: 4
//Năm đầy đủ: 2022
//Giờ: 11
//Phút: 56
//Giây: 38
//Mili Giây: 985

vananh.dao0809

Array Filter trong Javascript là gì ? tác dụng của hàm filter() trong Javascript là gì ? … đừng lo lắng trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về hàm filter trong Javascript nhé .

tải xuống.png
Hàm filter trong Javascript là gì ?

Hàm filter trong Javascript là hàm dùng để lặp qua các phần tử trong mảng, dùng để lọc các phần tử trong mảng theo một điều kiện nào đó .
Hàm filter được tích hơp sẵn trong đối tượng mảng giống như hàm map trong javascript. Về cách thức hoạt động thì nó giống hàm map, nghĩa là nó sẽ có một tham số dạng function và function này sẽ xử lý cho mỗi lần lặp. Nếu function return true thì phần tử lần lặp đó được chấp nhận, ngược lại sẽ không được chấp nhận.

Hàm filter có công dụng là sẽ lặp qua qua các phần tử, sau đó tùy vào từng bài toán mà sẽ quyết định chọn phần tử đó hay không. Cuối cùng hàm này sẽ trả về một mảng các phần tử đã chọn .

Cú pháp của filter trong Javascript :

objectArray.filter(function(value){
    return true / false;
});

Nếu return true thì phẩn tử được chọn, ngược lại return false thì phần tử không được chọn. Còn value chính là giá trị của mỗi phần tử trong mỗi lần lặp.

Để hiểu hơn chúng ta có các ví dụ sau :

Ví dụ 1 : Tìm số chia hết cho 5 trong một array

var arr1 = [5, 10, 20, 22, 62, 75, 90];
 
var ketQua = arr1.filter(function(item){
    return (item % 5 == 0);
});
 
console.log(ketQua);
// Kết quả: [5,10, 20,75, 90]

Ví dụ 2 : Tìm các phần tử > 20 trong Arr2

var arr2 = [1, 10, 22, 24, 5, 35, 15];
 
var ketQua2 = arr2.filter(function(item){
    return (item > 20);
});
 
console.log(ketQua2);
// Kết quả: [22,24,35]

vananh.dao0809

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về hàm sort() trong Javascript , một hàm vô cùng thú vị trong Javascript .

tải xuống.png
Hàm sort trong javascript là gì?

Khi nhấc đến Hàm Sort() ta biế đến đây là hàm dùng để sắp xếp các phần tử trong chính mảng đó, đồng thời sẽ kết quả đã sắp xếp đó vào một mảng mới .

Thứ tự sắp xếp mặc định được tính là tăng dần. Tuy nhiên, bạn có thể can thiệp vào quá trình sắp xếp bằng cách truyền tham số là một mảng so sánh.

Cú pháp của hàm Sort trong JS :

// Functionless
array.sort()
 
// Arrow function
array.sort((firstEl, secondEl) => { ... } )
 
// Compare function
array.sort(compareFn)
 
// Inline compare function
array.sort(function compareFn(firstEl, secondEl) { ... })

Trong đó: compareFn là tham số không bắt buộc. Đây là một callback function dùng để quyết định thứ tự sắp xếp của các phần tử trong mảng. Hai tham số firstEl và secondEl đại diện cho hai phần tử kề nhau trong mảng, và ta sẽ sử dụng nó để quyết định cách sắp xếp.

• Nếu hàm callback trả về số lớn hơn 0 thì secondEl sẽ đứng trước firstEl.
• Nếu hàm callback trả về số bé hơn hoặc bằng 0 thì thứ tự được giữ nguyên, tức là firstEl sẽ đứng trước secondEl.

Để hiểu hơn chúng ta có một vài ví dụ sau :
Ví dụ 1 :

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// output: Array ["Dec", "Feb", "Jan", "March"]
 
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// output: Array [1, 100000, 21, 30, 4]

Ví dụ 2 :

var score = [700, 8, 9, 10, 3];
 
console.log(score.sort( (firstEl, secondEl) => {
    if (secondEl > firstEl){
        return -1;
    }
    else {
        return 0;
    }
} ));
 
// Kết quả: [3, 8, 9, 10, 700]

Đào Văn Anh

@vananh.dao0809

Latest posts made by vananh.dao0809