Methods array you need to know

Methods array you need to know

·

6 min read

1. forEach

The forEach() method executes a provided function once for each array element.

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

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

2. find

The find() method return về một element ngay khi đúng điều kiện.

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

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

3. filter

return về một Array mà thoả mãn điểu kiện. Nghĩa là filter sẽ loop hết những elements. Mỗi phần tử của mảng được truyền cho hàm callback. Trên mỗi lần lặp, nếu cuộc callback trả về true, thì phần tử đó sẽ được thêm vào mảng mới, nếu không, nó không được thêm vào mảng mới.

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

const filtered = arr.filter(num => num > 2);
console.log(filtered);  // output: [3, 4, 5, 6]

4. map

Nếu chúng ta muốn thực hiện cùng một thao tác / chuyển đổi trên từng phần tử của mảng và lấy lại một array mới có cùng length với các value được chuyển đổi. 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

array.reduce((prev, next, index, array) => {...}, initialValue);

reducedValue chứa nhiều value trong reduce, thông thường thì sẽ trả về một number, nhưng ở trường hợp khác nâng cao hơn. Bạn có thể tìm thấy những ví dụ Tìm hiểu sâu về array reduce trọng javascript

Trong đó:

prev: hay còn gọi là accumulator - biến tích lũy, truyền giá trị trả về của mỗi lần gọi callback; nó là giá trị tích lũy được trả về trong lần gọi callback trước, hoặc giá trị của tham số initialValue, nếu được cung cấp

next: hay còn gọi là currentValue Phần tử trong mảng hiện tại đang được xử lý.

index (Optional): Chỉ mục (index) của phần tử đang được xử lý. Bắt đầu tại 0, nếu giá trị initialValue được cung cấp, và tại 1 nếu không có initialValue.

array (Optional): Mảng đang được gọi với reduce().

initialValue: Giá trị cho tham số thứ nhất (accumulator) của hàm callback trong lần gọi đầu tiên. Nếu giá trị ban đầu này không được cung cấp, phần tử đầu tiên của mảng sẽ được dùng. Do đó, gọi reduce() trên một mảng rỗng và không có giá trị ban đầu sẽ gây ra lỗ.

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue;
}, 10);

Xem giải thích dưới đây.

Exploring Array Reduce in JavaScript

Rất đơn giản phải không? Chúng ta tiếp tục xem một ví dụ nữa,/p>

const reduced = [1, 2, 3, 4, 5].reduce((prev, next) => {
  console.log(prev, next);
  return prev + next;
}, 0);

Ouput console ta thấy tiếp

0   1   // 0  = initial value,             1 = first array item
1   2   // 1  = previous result (0 + 1)    2 = second array item
3   3   // 3  = previous result (1 + 2)    3 = third array item
6   4   // 6  = previous result (3 + 3)    4 = fourth array item
10  5   // 10 = previous result (6 + 4)    5 = fifth array item

Giờ đây qua rõ ràng, nếu bạn cảm thấy còn bế tắc nữa thì chúng ta sẽ tách nó ra như thế này.

// native reduce function

const numbers = \[1, 2, 3, 4, 5\]

const sumReducer = (initialValue, current) => initialValue + current;

const sumOfNumbersNative = numbers.reduce(sumReducer, 0)

console.log('Native reduce function, ' + sumOfNumbersNative)

6. some

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

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. from

  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']

10.of

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

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

11.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.copyWithin()

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]