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

Array method trong javascript. Ngôn ngữ nào cũng vậy, phải nắm những chức năng quan trọng để giải quyết nhanh hơn chư không riêng gì về javascript. Giờ đây qua bài viết này các bạn lịa co thể trang bị thêm cho mình những bí kíp tuy nhỏ nhưng võ công lại thượng thừa.

Trong bài viết này như tiêu đề của nó, tôi sẽ trình bày cho các bạn tìm hiểu sâu hơn về các JavaScript array methods mà bất kỳ các devloper javascript nào cũng nên biết và sử dụng chúng như thế nào cho hiệu quả và đơn giản.  Và update những tính năng mới của Array javascript bao gồm:  copyWithin(), entries()

Và đây là những method array trong javascript được sử dụng rộng rãi nhất và có nhiều tài liệu để nói về vấn đề này trên internet. 

1. forEach javascript

Về method này, chắc tôi không cần phải nói nhiều. Vì tôi cá rằng các bạn còn am hiểu hơn tôi. Phương pháp này có thể giúp bạn lặp qua các item trên mảng.

  const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(item => {
    console.log(item); // output: 1 2 3 4 5 6
  });

2. includes javascript

Method này giúp các bạn check sự tồn tại của item nào trong mảng, cà đương nhiên nếu bạn muốn :D. Và đây là một method mà
tôi rất thích dùng. Nó dạng như điểm danh vậy đó. Thầy hô "Nam" có mặt hay không thì xài method này. Nhanh chóng và tiện lợi.

  const arr = ['Nam', 2, 3, 4, 5, 6];

arr.includes('Nam'); // output: true
arr.includes(7); // output: false

3. filter javascript

Thật ra method này nó cũng dạng dạng như reduce, map. Nhưng dựa vào điều kiện của bài toán mà xử lý.
Đọc thêm về cách sử dụng: Sự khác biệt giữa filter(), map(), reduce() và cách sử dụng?
Phương thức này nhằm tạo ra mộ mảng mới với các điều kiện mà các lập trình viên ai ai cũng biết.

const arr = [1, 2, 3, 4, 5, 6];

// thằng nào lớn hơn 2 thì chơi 
const filtered = arr.filter(num => num > 2);
console.log(filtered); // output: [3, 4, 5, 6]

4. map javascript

Đó thấy chưa mới nhắc method này xong, có ai đó nói với tôi rằng thằng này giống thằng filter() không? Không, okay :)
Nhưng hãy nhìn kỹ và xem xét nó. Map() nó tạo ra một array mới bằng việc ta xử lý những item của array cũ bằng phương thức của chúng ta xử lý.

  const arr = [1, 2, 3, 4, 5, 6];

// bonus cho mỗi em một kẹo mút
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

console.log(arr); // output: [1, 2, 3, 4, 5, 6]

5. reduce javascript

Có thể nói đây là method đại ca. Vì sao tôi lại nói như vậy?
Tôi đoán có nhiều developer javascript chỉ áp dụng reduce này trong việc tính tổng của array mà quên mất rằng Reduce() có thể giúp cho chúng ta nhiều hơn thế nữa như:
+ Đếm các instances của các giá trị trong một đối tượng
+ Làm phẳng mảng
+ Nhóm đối tượng theo thuộc tính
+ Các mảng liên kết chứa trong một mảng các đối tượng sử dụng toán tử spread và initialValue
+ Reduce() có thể làm được những gì?
Nhiều lắm đây là sơ bộ nói qua cho các bạn nắm thêm chứ mình xài cũng chưa hết được :), bạn nào muốn tìm hiểu kỹ hơn thì đọc thêm bài.

Javascript Reduce Nâng Cao || Array.Prototype.Reduce() Tutorial

Ví dụ về total:

  const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21

6. some javascript

Method này đơn giản hơn nhiều so với người anh em filter().
Dạng như là kiểm tra xem có ít nhất thằng nào trong array vượt qua được cuộc kiểm tra không. Giống như check thằng nào thi trượt môn vậy đó

  const arr = [3, 9, 7, 6];

// thằng nào thi < 5 trượt 
const idiot = arr.some(num => num < 5);
console.log(idiot); // output: true // có thằng trượt :D

7. every javascript

Thằng method này lại khác với anh em họ hàng some().
Nó check hết item trong mảng thoả mãn điều kiện rồi trả về true or false.

  const arr = [1, 2, 3, 4, 5, 6];

// check tất cả có > 4 không
const greaterFour = arr.every(num => num > 4);
console.log(greaterFour); // output: false sai rồi

// vậy thì nhỏ hơn 10 
const lessTen = arr.every(num => num < 10);
console.log(lessTen); // output: true đúng vl 

8. sort javascript

Method này ghi cho vui thôi chứ khỏi giải thích. nghe tên là biết rồi, sort luôn số và ký tự.

  const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

// sắp xếp theo thứ tự giảm dần
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sắp xếp theo thứ tự tăng dần
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

9. Array.from javascript

Có thể để hỗ trợ cho map(). filter()...
Cho phép bạn tạo các array từ một kiểu dữ liệu khác,
vì vậy bạn có thể nắm bắt thêm được tính năng nâng cao của Array mà nó không có sẵn trong các collection.

  const name = 'javascript';
const nameArray = Array.from(name);

console.log(name); // output: javascript
console.log(nameArray); // output: ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']

Hoặc có thể làm việc với DOM khi không có method nào support về điều này.  DOM là gì trong javascript?  thì tôi sẽ nói sau.

  // tìm hết element li.

const lis = document.querySelectorAll('li');
const lisArray = Array.from(document.querySelectorAll('li'));

// nó là array hay không?
console.log(Array.isArray(lis)); // output: false
console.log(Array.isArray(lisArray));  // output: true

10. Array.of javascript

Có thể hiểu nôm na là khi truyền vào một số đơn,
sẽ tạo giá trị đó như một element trong array, thay vì tạo ra số lượng các element đó.

  const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

11. Array.prototype.entries()

var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);
/*
    Array Iterator {}
         __proto__:Array Iterator
         next:ƒ next()
         Symbol(Symbol.toStringTag):"Array Iterator"
         __proto__:Object
*/

for (let e of iterator) {
    console.log(e);
}

// [0, "a"]
// [1, "b"]
// [2, "c"]

12. Array.prototype.copyWithin() javascript

let numbers = [1, 2, 3, 4, 5];

numbers.copyWithin(-2);
// [1, 2, 3, 1, 2]

numbers.copyWithin(0, 3);
// [4, 5, 3, 4, 5]

numbers.copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

numbers.copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[].copyWithin.call({ length: 5, 3: 1 }, 0, 3);
// {0: 1, 3: 1, length: 5}

// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant:
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

morioh.com

developer.mozilla.org