Video học lập trình mỗi ngày

Splice javascript là gì?

 Trong bài viết này tôi và developer javascript cùng tìm hiểu về khái niệm của những method như split(), slice(), splice(). Thoáng qua thì tôi có cảm giác ai cũng hiểu về những method này. Nhưng có thể nói đối với những bạn mới bước vào javascript thì đây là những method mập mờ nhất, bởi vì nó khác là giống nhau. Và một lần nữa tôi và các bạn có thể cùng nhau dừng lại hãy xem câu hỏi sau đây. Câu hỏi: Lưu ý các bạn đừng run code bây giờ. Hãy đoán xem mình đã hiểu tới đâu.

teams = [1,2,3,4,5]
console.log(teams.splice(3, 0, 6,7)); // output ra gì?
console.log('>>>>>>', teams); // output ra gì?

Và tôi để đây và bây giờ chúng ta sẽ đi tìm hiểu về các method splice(), split(), slice() trong javascript. 

split javascript

Khái niệm: các bạn có thể tham khảo ở đây: developer.mozilla.org 

Đại khái là : split() là dùng để tách các chuỗi con, sử dụng một ký hiệu hay chuỗi phân tách được chỉ định để xác định nơi tạo ra mỗi phân tách. Mảng ban đầu không bị thay đổi. Khó hiểu và diễn đạt thật, thôi đi vào ví dụ cho dễ hiểu =]].

 - Cú pháp:

    string.split(separator, limit)

Trong đó: 

+ separator là chuỗi phân tách, nếu chuỗi đó là ('') thì nó sẽ phân tách các chuỗi thành ký tự. Chú ý split() không làm thay đổi giá trị ban đầu. 

+ limit là một kiểu số nguyên được xác định lấy bao nhiêu chuỗi con. Không bắt buộc :D 

- Ví dụ để dễ hình dung hơn.

   let str = 'Cộng đồng javascript, reactjs, mongodb, vuejs';
   // set limit
   console.log(str.split(' ', 4));//["Cộng", "đồng", "javascript,", "reactjs,"]
   //khong set limit, get all 
   console.log(str.split(' ')); //["Cộng", "đồng", "javascript,", "reactjs,", "mongodb,", "vuejs"]

   //tach cac ky tu voi ('')
   console.log(str.split('')); //["C", "ộ", "n", "g", " ", "đ", "ồ", "n", "g", " ", "j", "a", "v", "a", "s", "c", "r", "i", "p", "t", ",", " ", "r", "e", "a", "c", "t", "j", "s", ",", " ", "m", "o", "n", "g", "o", "d", "b", ",", " ", "v", "u", "e", "j", "s"]
   // không có tham số
   console.log(str.split()); //["Cộng đồng javascript, reactjs, mongodb, vuejs"]

slice javascript.

Slice trong javascript là một khái niệm không mới so với  phương thức trên kia. Bạn cũng có thể đọc thêm về "Slice javascript là gì?" tham khảo tại đây: developer.mozilla.org 

Phương thức slice() trả về một bản sao tham chiếu (shallow copy) một phần của một mảng dưới dạng một mảng nhận các giá trị có chỉ số từ begin dến end (không bao gồm end). Mảng ban đầu không bị thay đổi.

- Cú pháp:

   arr.slice(begin, end)

Trong đó: 

+ begin là chỉ số của phần tử mà bạn muốn bắt đầu lấy. 

+ end là chỉ số của phần tử mà bạn muốn kết thúc (không lấy) 

- Ví dụ:

   var dota2 = ["ronaldo","messi","kunka","lina","riki","sniper"];
   // lấy từ phần tử thư 1 đến 4 nhớ là không bao gồm phần tủ thứ 4
   /*
      Nói rõ hơn cho các bạn mới vào ngành nắm luôn
     arr dota2 có các chỉ sô bắt đầu là 0 -> ronaldo, 1 -> messi, 2 -> kunka....
     slice(1,4) có nghía là bắt đầu từ 1 là messi , đến 4 là riki 
      thì kết quả trả về là từ 1 đến 4, nhưng không lấy phần tử cuối cùng là 4, vậy là
     messi(1), kunka(2), lina(3)
   */
   console.log(dota2.slice(1,4)); //Trích xuất: [messi, kunka, lina]
   // tiếp tục nếu 
   console.log(dota2.slice(1)); //thì trích xuất từ messi cho đến hết mảng ["messi", "kunka", "lina", "riki", "sniper"]
 

Nhưng vậy số âm thì hiểu thế nào? ví dụ tiếp:

   /*
      var dota2 = ["ronaldo","messi","kunka","lina","riki","sniper"];
      Nếu begin = -4 thì có nghĩa là array trên sẽ được đảo ngược lại là -1 -> sniper,
     -2 -> riki, -3 -> lina ... -6 -> ronaldo. Dừng lại đây một chút rồi đọc tiếp nha.
     
     vậy begin = -4 thì lấy từ phần từ -4 là kunka đến end là 4 là riki. end được tính như lúc đầu
   */
   dota2.slice(-4, 4)
   console.log(dota2.slice(-4, 4));//["kunka", "lina"]

splice javascript

Khái niệm: developer.mozilla.org 

Hiểu nôm na là: splice() có thể dùng để xoá một phần tử tồn tại OR thêm mới một phần tử.

- cú pháp:

   array.splice(index, howmany, item1, ....., itemX)

Trong đó: 

+ index là Chỉ mục để bắt đầu thay đổi mảng (có gốc 0) (bắt buộc) 

+ howmany là số lượng các phần tử sẽ được gỡ bỏ. Nếu được đặt thành 0 hoặc âm, sẽ không có mục nào bị xóa (không bắt buộc :D) 

+ item1 là các phần tử được thêm nếu bạn không chỉ định bất kỳ phần tử nào, splice () sẽ chỉ xóa các phần tử khỏi mảng. 

Ví dụ: Ở phần này mình chỉ nói về cách thêm thôi, chứ xoá thì ai cũng hiểu hết rồi :D

   Xóa 0 phần tử từ vị trí số 2, và thêm "drum"
   var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
   var removed = myFish.splice(2, 0, 'drum');

   // myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] 
   // removed is [], không có phần tử nào bị xóa

   Xóa 1 phần tử từ vị trí số 3
   var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
   var removed = myFish.splice(3, 1);

   // removed is ["mandarin"]
   // myFish is ["angel", "clown", "drum", "sturgeon"]
   
   Xóa 2 phần tử mảng từ vị trí số 0, và thêm "parrot", "anemone" và "blue"
   var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
   var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

   // myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
   // removed is ["angel", "clown"]

Remove item in array javascript

Quá những ví dụ trên thì chúng ta cũng thật sự đã hiểu hơn về 3 phương thức slice(), split(), splice() trong javacsript. Ngoài ra chúng còn nhiều tác dụng và được sử dụng nhiều hơn khi remove item in array javascript.

Kết luận.

Mỏi tay qúa, kết luận là hãy cố gắng tìm hiểu kỹ hơn nưã. Dùng mà không hiểu bản chất thì có khi sai gắng chịu. Hết ạ. Cảm ơn mọi người đã đọc.