Chọn mảng javascript

Với rất nhiều phương thức xử lý, Array API là một trong những phương thức lớn nhất trong JavaScript. Lúc đầu, nó được sử dụng rất nhiều, nhưng sau đó ngày càng được sử dụng nhiều hơn, cụ thể như phương thức như map() và forEach()

Hiểu và sử dụng đúng các phương thức là rất quan trọng. Việc sử dụng sai có thể dẫn đến những lỗi khó chịu. Trong bài viết này, chúng ta sẽ xem xét mười phương thức phiên bản hữu ích hơn của các đối tượng JavaScript Array

1. Lát cắt

Nếu bạn muốn tạo một bản sao của một mảng theo chỉ mục đầu và cuối, bạn có thể muốn sử dụng slice (). Phương thức này là một hàm thuần túy nên nó sẽ không có bất kỳ tác dụng phụ nào, cũng như không làm thay đổi mảng đích

“Phương thức slice() trả về một bản sao nông của một phần của mảng thành một đối tượng mảng mới được chọn từ đầu đến cuối (không bao gồm phần cuối) trong đó phần đầu và phần cuối biểu thị chỉ mục của các mục trong mảng đó. Mảng ban đầu sẽ không bị sửa đổi. ” — MDN“Phương thức slice() trả về một bản sao nông của một phần của mảng thành một đối tượng mảng mới được chọn từ đầu đến cuối (không bao gồm phần cuối) trong đó phần đầu và phần cuối biểu thị chỉ mục của các mục trong mảng đó. Mảng ban đầu sẽ không bị sửa đổi. ” — MDN

Cả hai thông số đều là tùy chọn. Nếu được gọi mà không có tham số nào, nó sẽ chỉ sao chép toàn bộ đối tượng. Nếu bạn gọi nó chỉ với một tham số, nó sẽ cung cấp cho bạn một mảng có độ dài = 1. Bạn có thể sử dụng hiệu ứng bù âm để lấy các phần tử cuối cùng của mảng

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.slice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.slice(0,3)) // output: array [1, 2, 3]
console.log(array.slice()) // output: array [1, 2, 3, 4, 5, 6, 7, 8, 9]

Phương pháp này hữu ích khi bạn cần tạo các tập hợp con trên một mảng và không muốn mảng đầu của bạn bị thay đổi

2. mối nối

Phương pháp này tương tự như phương pháp trước nhưng có một điểm khác biệt lớn. Nó sẽ thay đổi mảng ban đầu của bạn. Nó rất hữu ích khi bạn đang xử lý một mảng lớn và bạn cần sử dụng một phần các tập tin của nó

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

3. Bao gồm

Kiểm tra phần tử có trong mảng hay không và kết quả trả về là.

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

Để điều chỉnh hiệu suất, bạn có thể chuyển chỉ số bắt đầu làm tham số thứ hai. Chỉ số đó có thể âm hoặc dương. If sound, it will check the end of the x

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

Khi kết quả được tìm thấy, nó sẽ dừng tìm kiếm tiếp các phần tử còn lại giúp tiết kiệm điện năng hiệu quả hơn và rút gọn hơn là mã sau

function includes(array, target) {
  for (let i =0; i< array.length; i++) {
    if(array[i] === target) {
      return true;
    }
  }
  return false;
}

4. Một số

Phương thức

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

function includes(array, target) {
  for (let i =0; i< array.length; i++) {
    if(array[i] === target) {
      return true;
    }
  }
  return false;
}

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

5. Mọi

Phương thức này giống như

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

function includes(array, target) {
  for (let i =0; i< array.length; i++) {
    if(array[i] === target) {
      return true;
    }
  }
  return false;
}

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

6. Tìm thấy

Phương thức

function includes(array, target) {
  for (let i =0; i< array.length; i++) {
    if(array[i] === target) {
      return true;
    }
  }
  return false;
}

function includes(array, target) {
  for (let i =0; i< array.length; i++) {
    if(array[i] === target) {
      return true;
    }
  }
  return false;
}

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

7. Shift Phương thức này đơn giản và dễ hiểu. Nó xóa phần tử đầu tiên ra khỏi mảng và trả về phần tử đó. Hãy cẩn thận vì nó sẽ làm thay đổi mảng ban đầu. Do đó nó khác gì với phương thức

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

Ví dụ

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

8. Unshift Phương thức này được sử dụng để thêm các phần tử vào mảng giống phương thức

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

9. FlatMap Trước khi hiểu phương thức FlapMap là gì, ta sẽ xem định nghĩa phương thức flat() “Phương thức flat() tạo một mảng mới với tất cả các phần tử mảng con được nối vào nó theo cách đệ quy đến độ sâu đã chỉ định. ” — MDN Tạm dịch. phương thức

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

Do đó flapMap() là một phương thức kết hợp giữa

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

Phương thức flatMap() trả về một mảng mới được hình thành bằng cách áp dụng hàm gọi lại đã cho cho từng phần tử của mảng, sau đó làm phẳng kết quả theo một mức. Nó giống hệt với map() theo sau là flat() có độ sâu 1, nhưng hiệu quả hơn một chút so với việc gọi hai phương thức đó một cách riêng biệt. — MDN

Tạm dừng dịch. Phương thức flatMap() trrả về một mảng mới được cấu trúc bởi một hàm gọi lại cho trước mỗi phần tử của mảng và sau đó sẽ làm phẳng các kết quả thành một cấp độ. Nó được chỉ định thành một map() với cấp độ của phẳng() là 1, nhưng hiệu quả hơn là gọi 2 hàm riêng biệt. Ví dụ

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

10. Rút gọn Phương thức

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1,2,3,4,5];
>> undefined
array.includes(3)
>> true
array.includes(3,4)
>> false
array.includes(3,-3)
>> true
array.includes(3,-2)
>> false

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.splice(2)) // output: array [3, 4, 5, 6, 7, 8]
console.log(array.splice(0,3)) // output: array [1, 2]
console.log(array.splice()) // output: array []

Total results Có nhiều phương thức để xử lý mảng trong Javascript. Quan trọng là bạn phải hiểu rõ mục đích của chúng. Nên đặt câu hỏi trước khi sử dụng một phương thức, ví dụ như

• Đây phải là phương thức tốt nhất cho trường hợp mình đang cần hay chưa?
• Mình có cần thay đổi mảng hay không? . Trong trường hợp đơn giản, có thể không cần quan tâm đến nhiều hiệu suất, nhưng khi ứng dụng phát triển lớn lên, bạn phải chú ý đến nhiều hiệu suất của các phương thức này. Là những kỹ sư phần mềm, đây chính là công việc bạn cần phải chú ý đến hiệu quả hơn là công việc chỉ làm cho mã mình chạy được. Cảm ơn

Nguồn. https. // lập trình tốt hơn. pub/10-javascript-array-methods-to-boost-your-code-performance-acb57b455189