Giới thiệu
Ở phần 1 chúng ta cũng đã tìm hiểu qua về cách khai báo mảng cũng như tìm hiểu về cách thức hoạt động của mảng rồi. Ở phần 2 này chúng ta sẽ tìm hiểu sâu hơn các phương thức (method) của mảng nhé.
Bạn nào chưa đọc thì hãy học trước phần 1 đó nhé >> Phần 1 👈👈
Video Học lập trình về 17 phương thức của mảng
Nguồn DoableDanny Youtube - 17 Method Array()
Trong bài viết này chúng ta sẽ tìm hiểu 17 Method của mảng trong JavaScript
- some()
- every()
- reduce()
- map()
- flat()
- filter()
- forEach()
- findIndex()
- find()
- sort()
- concat()
- fill()
- includes()
- reverse()
- flatMap()
- toString()
- join()
Phương Thức some()
Phương thức some() dùng để kiểm tra các phần tử trong mảng thỏa điều kiện cho trước
Cú pháp: array.some(function(value, index, arr), this);
- Sử dụng callBack cho mỗi phần tử chỉ được gọi một lần để thực thi
- Trả về true nếu chỉ cần có một phần tử thỏa điều kiện true còn ngược lại là false
- Trả về false nếu tất cả phần từ trả về false
- Không thay đổi giá trị trong mảng ban đầu
- không thực thi nếu hàm cho các phần tử mảng rỗng
cosnt numbers= [1,2,8,5,6,9,3,4,5,2]; // kiểm tra xem mảng có chứa số chẳn nào hay không const isEven= numbers.some( n=> n % 2 == 0 ) console.log(isEven) // true; const chiaHetCho10= numbers.some( n=> n % 10 == 0 ) console.log(chiaHetCho10) // false;
Phương Thức every()
Phương thức every() dùng để kiểm tra các phần tử trong mảng thỏa điều kiện cho trước
Cú pháp: array.every(function(value, index, arr), this);
- Duyệt qua từng phần tử
- Trả về true nếu tất cả phần từ đều trả về true
- Trả về false nếu chỉ một phần tử trả về false
- Không thay đổi giá trị trong mảng ban đầu
const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") //-------> Kết quả : false const myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Kết quả : true
Phương Thức reduce()
Phương thức reduce() là một hàm nhận 2 đối số và đối số thứ nhất là bộ tích lũy, đối số thứ 2 là giá trị ngoài ra thì có giá trị khỏi tạo ban đầu (mảng, object, number,...)
Cú pháp: array.reduce( function(total, currentValue, currentIndex, arr), initialValue)
- Duyệt qua các phần tử và thực thi trong hàm rút gọn
- Trả về một giá trị duy nhất trong bộ tích lũy
- Không thực thi các phần tử mảng trống
- Không thay đổi giá trị của mảng ban đầu
// Xây dựng hàm tính tổng số lẻ và tổng số chẳn
const scores = [4, 5, 8, 7, 10];
const result = scores.reduce(
(total, n) => {
total[n % 2 == 0 ? "even" : "odd"] += n;
return total;
},
{ even: 0, odd: 0 }
);
console.log(result); // {even:28, odd:12}
Phương Thức map()
Phương thức Map() dùng để duyệt qua các phần tử của mảng và ánh xạ với ban đầu
Cú pháp: array.map(function(currentValue, index, arr), thisValue)
- Tạo mảng mới và gọi một hàm cho các phần tử
- Không thực thi chức năng cho phần tử rỗng
- Không thay đổi giá trị của mảng ban đầu
const arr = [5, 4, 3, 2, 1]; // Bình phương const newArr = arr.map((x) => x x); console.log(newArr); //[ 25, 16, 9, 4, 1 ] // ánh xạ gấp 10 const x10 = arr.map((x) => x 10); console.log(x10); //[ 50, 40, 30, 20, 10 ]
Phương Thức flat()
Phương thức Flat() dùng để tạo ra mảng mới đã làm phẳng các mảng con có chứa phần tử là các mảng
const arr = [0, [2, 3, 4, 5, 6], [7, 8]]; const newArr = arr.flat(); console.log(newArr); //[ 0, 2, 3, 4, 5, 6, 7, 8]
Phương Thức filter()
Phương thức filter() này nhận một hàm làm tham số. Hàm này sẽ thực hiện lọc lần lượt các phần tử của mảng, nếu true nó sẽ nhét chúng vào một mảng mới.
Cú pháp: array.filter(function(currentValue, index, arr), thisValue)
- Trả về mảng mới thỏa mãn điều kiện cho trước
- Không thực thi chức năng cho các phần tử rỗng
- Không làm thay đổi mảng ban đầu
const arr = [
{ id: 1, name: "Hải" },
{ id: 2, name: "zecky" },
{ id: 3, name: "Việt" },
{ id: 4, name: "zecky" },
];
const newarr = arr.filter((element) => element.name === "zecky");
console.log(newarr); //[ { id: 2, name: 'zecky' }, { id: 4, name: 'zecky' } ]
Phương Thức forEach()
Phương thức forEach() dùng để duyệt các phần tử của mảng
Cú pháp: array.forEach(function(currentValue, index, arr), thisValue)
const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
]
myAwesomeArray.forEach(element => console.log(element.name))
Phương thức findIndex()
Phương thức findIndex() này nhận một hàm làm tham số và sẽ áp dụng nó cho mảng.
- Nó trả về chỉ mục của một phần tử được tìm thấy và thỏa mãn hàm kiểm tra được truyền dưới dạng đối số hoặc trả về -1 nếu không thỏa mãn nó.
- Không thay đổi giá trị mảng ban đầu
const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
]
myAwesomeArray.findIndex(element => element.id === 3)
//-------> Kết quả : 2
myAwesomeArray.findIndex(element => element.id === 7)
//-------> Kết quả : -1
Phương thức find()
Phương thức find() này nhận một hàm làm đối số và sẽ áp dụng nó cho mảng.
- Nó trả về giá trị của một phần tử được tìm thấy trong mảng và thỏa mãn hàm kiểm tra. Nếu không, nó trả về undefined.
const myAwesomeArray = [
{ id: 1, name: "Hải" },
{ id: 2, name: "Doanh" },
{ id: 3, name: "Việt" },
]
myAwesomeArray.find(element => element.id === 3)
//-------> Kết quả : {id: 3, name: "Việt"}
myAwesomeArray.find(element => element.id === 7)
//-------> Kết quả : undefined
Phương thức sort()
Phương thức sort() này nhận được một hàm như một số. Nó sắp xếp các phần tử của một mảng, và trả nó về.
- Phương thức sort() thay đổi mảng gốc.
- Ghi đè lên mảng ban đầu
- Sắp xếp mảng theo bảng chữ cái thứ tự tăng dần
>> Sắp xếp chữ cái
const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); console.log(fruits); //[ 'Apple', 'Banana', 'Mango', 'Orange' ]
>> Sắp xếp số
const myAwesomeArray = [5, 4, 3, 2, 1] // Sắp xếp từ Nhỏ nhất đến Lớn nhất myAwesomeArray.sort((a, b) => a - b) //-------> Kết quả : [1, 2, 3, 4, 5] // Sắp xếp từ Lớn nhất đến Nhỏ nhất myAwesomeArray.sort((a, b) => b - a) //-------> Kết quả : [5, 4, 3, 2, 1]
- Khi phương thức sort() so sánh hai giá trị, nó sẽ gửi các giá trị cho hàm so sánh và sắp xếp các giá trị theo giá trị trả về (Âm, 0, Dương)
Phương thức concat()
Phương thức concat() này sẽ hợp nhất hai hoặc nhiều mảng / giá trị bằng cách ghép nó. Nó trả về một mảng mới.
const myAwesomeArray1 = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray1.concat(myAwesomeArray2) //-------> Kết quả : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
Phương thức fill()
Phương thức fill() này điền vào tất cả các phần tử của một mảng nhất định có cùng giá trị, từ chỉ mục bắt đầu (mặc định 0) đến chỉ mục kết thúc (mặc định array.length)
const myAwesomeArray = [1, 2, 3, 4, 5] // Đối số đầu tiên (0) là giá trị // Đối số thứ hai (1) là chỉ mục bắt đầu // Đối số thứ ba (3) là chỉ mục kết thúc (không bao gồm) myAwesomeArray.fill(0, 1, 3) //-------> Kết quả : [1, 0, 0, 4, 5]
Phương thức includes()
Phương thức includes() này sẽ trả về true nếu mảng chứa một phần tử nhất định và false nếu không.
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Kết quả : true myAwesomeArray.includes(8) //-------> Kết quả : false
Phương thức reverse()
Phương thức reverse() này đảo ngược một mảng.
Chú ý:
- Phương thức reverse() này sẽ thay đổi mảng gốc.
const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() //-------> Kết quả : ['a', 'b', 'c', 'd', 'e']
Phương thức flatMap()
Phương thức flatMap() áp dụng một hàm cho từng phần tử của mảng và sau đó làm phẳng kết quả thành một mảng. Nó là kết hợp của hai phương thức flat() và map().
const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr 10) //-------> Kết quả : [10, 20, 30, 40, 50] // Sử dụng .flat() và .map() myAwesomeArray.flat().map(arr => arr 10) //-------> Kết quả : [10, 20, 30, 40, 50]
Phương thước toString()
Phương thước toString() chỉ biến đổi mảng thành chuỗi string và bỏ 2 dấu [ ] này đi
const arr = [1, 2, 6, 5, 3, 5, 4, 2, 4]; const newarr = arr.toString(); console.log(newarr); //1,2,6,5,3,5,4,2,4
Phương thức join()
Phương thức join() dùng để tạo ra một chuỗi string được xây dựng bởi phần tử của mảng được ngăn cách theo quy ước nhất định
Cú pháp : array.join(separator)
- separator là ký tự sẽ ngăn cách các giá trị của mảng với nhau, mặc định là dấu ,
- Không làm thay đổi giá trị mảng ban đầu
var a = ['Wind', 'Water', 'Fire'];
a.join(); // 'Wind,Water,Fire'
a.join(', '); // 'Wind, Water, Fire'
a.join(' + '); // 'Wind + Water + Fire'
a.join(''); // 'WindWaterFire'
Tổng kết
Bạn đã tiến một bước xa với 15 Phương thức rất cần thiết để thao tác với Mảng trong Javascript. Đến đây đã kết thúc tất tần tật về mảng trong lập trình Javascript của mình.
Nếu các bạn chưa xem phần 1 có thể nhấn vào đây! 👈👈
Chúc các bạn thành công !
