Home-theater-designers
Các nhà phát triển web ở mọi cấp độ kỹ năng, từ các lập trình viên tân binh đến các chuyên gia mã hóa, đều thấy tầm quan trọng của JavaScript trong việc phát triển các trang web hiện đại. JavaScript chiếm ưu thế đến mức đó là một kỹ năng cần thiết để biết liệu bạn có định tạo ứng dụng web hay không.
Một trong những khối xây dựng mạnh mẽ nhất được tích hợp sẵn trong ngôn ngữ JavaScript là mảng. Mảng thường được tìm thấy trong nhiều ngôn ngữ lập trình và rất hữu ích để lưu trữ dữ liệu.
JavaScript cũng bao gồm các tính năng hữu ích được gọi là phương thức mảng. Dưới đây là mười lăm bạn nên xem xét kỹ để phát triển kỹ năng của mình với tư cách là một nhà phát triển.
Phương thức mảng là gì?
Phương thức mảng là các hàm được tích hợp sẵn trong JavaScript mà bạn có thể áp dụng cho các mảng của mình. Mỗi phương thức có một hàm duy nhất thực hiện thay đổi hoặc tính toán trên mảng của bạn, giúp bạn không cần phải viết mã các hàm phổ biến từ đầu.
Các phương thức mảng trong JavaScript được chạy bằng ký hiệu dấu chấm được đính kèm với biến mảng của bạn. Vì chúng chỉ là các hàm JavaScript nên chúng luôn kết thúc bằng dấu ngoặc đơn có thể chứa các đối số tùy chọn. Đây là một phương thức được đính kèm với một mảng đơn giản được gọi là myArray .
let myArray = [1,2,3]; myArray.pop();Mã này sẽ áp dụng một phương pháp được gọi là nhạc pop vào mảng.
Mảng mẫu
Đối với mỗi ví dụ, hãy sử dụng một mảng mẫu mà chúng tôi sẽ gọi myArray , để thực hiện các phương pháp trên. Hãy thoải mái kéo bảng điều khiển và mã của bạn lên.
let myArray = [2,4,5,7,9,12,14];Những ví dụ này sẽ giả sử bạn biết nền tảng của JavaScript là gì và nó hoạt động như thế nào . Nếu bạn không thấy thì không sao cả, tất cả chúng ta đều ở đây để học hỏi và phát triển.
Đi sâu vào mười lăm phương thức mảng mạnh mẽ này!
1. Array.push ()
Những gì nó làm: xô() lấy mảng của bạn và thêm một hoặc nhiều phần tử vào cuối mảng, sau đó trả về độ dài mới của mảng. Phương pháp này sẽ sửa đổi mảng hiện có của bạn.
Thêm số 20 vào mảng bằng cách chạy xô() , sử dụng 20 làm đối số.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Kiểm tra xem nó có hoạt động không:
console.log(myArray); [2,4,5,7,9,12,14,20]Chạy xô() phương thức trên myArray đã thêm giá trị được cho trong đối số vào mảng. Trong trường hợp này, 20. Khi bạn kiểm tra myArray trong bảng điều khiển, bạn sẽ thấy giá trị hiện đã được thêm vào cuối mảng.
2. Array.concat ()
Những gì nó làm: concat () có thể hợp nhất hai hoặc nhiều mảng thành một mảng mới. Nó không sửa đổi các mảng hiện có mà tạo một mảng mới.
Cầm lấy myArray và hợp nhất một mảng được gọi là newArray vào nó.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Phương pháp này hoạt động kỳ diệu khi xử lý nhiều mảng hoặc giá trị bạn cần kết hợp, tất cả chỉ trong một bước khá đơn giản khi sử dụng các biến.
3. Array.join ()
Những gì nó làm: tham gia() lấy một mảng và nối các nội dung của mảng, được phân tách bằng dấu phẩy. Kết quả được đặt trong một chuỗi. Bạn có thể chỉ định dấu phân tách nếu bạn muốn sử dụng thay thế cho dấu phẩy.
Hãy xem cách này hoạt động bằng cách sử dụng myArray. Đầu tiên, sử dụng phương thức mặc định không có đối số dấu phân tách, phương thức này sẽ sử dụng dấu phẩy.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript sẽ xuất ra một chuỗi, với mỗi giá trị trong mảng được phân tách bằng dấu phẩy. Bạn có thể sử dụng một đối số trong hàm để thay đổi dấu phân cách. Quan sát nó với hai đối số: một khoảng trắng và một chuỗi.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Ví dụ đầu tiên là khoảng trắng, tạo một chuỗi bạn có thể dễ dàng đọc được.
Ví dụ thứ hai sử dụng (' và ') , và có hai điều cần biết ở đây.
Đầu tiên, chúng tôi đang sử dụng từ 'và' để tách các giá trị. Thứ hai, có một khoảng trắng ở cả hai bên của từ 'và'. Đây là điều quan trọng cần lưu ý khi sử dụng tham gia() . JavaScript đọc các đối số theo nghĩa đen; vì vậy nếu không gian này bị bỏ trống, mọi thứ sẽ được tập hợp lại với nhau (ví dụ: '2and4and5 ...', v.v.) Không phải là đầu ra rất dễ đọc!
4. Array.forEach ()
Những gì nó làm: cho mỗi() (phân biệt chữ hoa chữ thường!) thực hiện một chức năng trên mỗi mục trong mảng của bạn. Hàm này là bất kỳ hàm nào bạn tạo, tương tự như việc sử dụng vòng lặp 'for' để áp dụng một hàm cho một mảng nhưng với ít công việc hơn đối với mã.
Còn một chút nữa để cho mỗi() ; nhìn vào cú pháp, sau đó thực hiện một chức năng đơn giản để chứng minh.
myArray.forEach(function(item){
//code
});
Đang sử dụng myArray , cho mỗi() được áp dụng với ký hiệu dấu chấm. Bạn đặt hàm bạn muốn sử dụng bên trong dấu ngoặc đơn đối số, hàm này chức năng (mục) trong ví dụ.
Hãy xem chức năng (mục) . Đây là hàm được thực thi bên trong forEach () và nó có đối số riêng. Chúng tôi đang gọi đối số bài báo . Có hai điều cần biết về lập luận này:
- Khi forEach () lặp lại trên mảng của bạn, nó sẽ áp dụng mã cho đối số này. Hãy coi nó như một biến tạm thời chứa phần tử hiện tại.
- Bạn chọn tên của đối số, nó có thể được đặt tên bất cứ thứ gì bạn muốn. Thông thường, điều này sẽ được đặt tên là một cái gì đó dễ hiểu hơn, chẳng hạn như 'item' hoặc 'element'.
Với hai điều đó trong tâm trí, hãy xem ví dụ đơn giản này. Thêm 15 vào mọi giá trị và để bảng điều khiển hiển thị kết quả.
myArray.forEach(function(item){
console.log(item + 15);
});
Đang sử dụng bài báo trong ví dụ này là biến, vì vậy hàm được viết để thêm 15 vào mỗi giá trị thông qua bài báo . Bàn điều khiển sau đó sẽ in kết quả. Đây là giao diện của nó trong bảng điều khiển Google Chrome.
Kết quả là mọi số trong mảng, nhưng với 15 được thêm vào nó!
5. Array.map ()
Những gì nó làm: bản đồ() thực hiện một hàm trên mọi phần tử trong mảng của bạn và đặt kết quả vào một mảng mới.
Chạy một hàm trên mọi phần tử giống như forEach (). Sự khác biệt ở đây là bản đồ() tạo một mảng mới khi chạy. forEach () không tự động tạo một mảng mới, bạn sẽ phải viết mã một hàm cụ thể để làm như vậy.
Sử dụng map () để nhân đôi giá trị của mọi phần tử trong myArray và đặt chúng vào một mảng mới. Bạn sẽ thấy như vậy chức năng (mục) cú pháp để thực hành nhiều hơn một chút.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Kiểm tra kết quả trong bảng điều khiển.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray là không thay đổi:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Nó hoạt động như thế nào: Tương tự như cách hoạt động của phương thức push (), unshift () phương thức nhận mảng của bạn và thêm một hoặc nhiều phần tử vào phần đầu của mảng thay vì phần cuối và trả về độ dài mới của mảng. Phương pháp này sẽ sửa đổi mảng hiện có của bạn.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Khi ghi mảng vào bảng điều khiển, bạn sẽ thấy số 0 ở đầu mảng.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Công dụng: Sắp xếp là một trong những thao tác phổ biến nhất được thực hiện trên một mảng và rất hữu ích. JavaScript của loại() Phương thức mảng có thể được sử dụng để sắp xếp một mảng số hoặc thậm chí các chuỗi chỉ với một dòng mã. Thao tác này được thực hiện và trả về mảng đã sắp xếp bằng cách sửa đổi mảng ban đầu. Lấy một bộ số khác cho myArray thời gian này.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Vì việc sắp xếp được thực hiện tại chỗ, bạn không cần phải khai báo một biến riêng biệt cho mảng đã sắp xếp.
console.log(myArray); [10, 12, 34, 55, 65]Theo mặc định, mảng được sắp xếp theo thứ tự tăng dần, nhưng bạn có thể tùy ý chuyển một hàm tùy chỉnh cho loại() để sắp xếp mảng theo cách mong muốn. Trong trường hợp này, tôi đã thông qua một tùy chỉnh chức năng mũi tên để sắp xếp mảng theo số thứ tự tăng dần.
8. Array.reverse ()
Những gì nó làm: Như tên cho thấy, đảo ngược() dùng để đảo ngược thứ tự của các phần tử trong mảng. Lưu ý rằng điều này không đảo ngược nội dung của mảng mà chỉ là thứ tự của chính nó. Dưới đây là một ví dụ để hiểu rõ hơn về phương pháp này:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Ghi đầu ra vào bảng điều khiển để xác minh hoạt động.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Như bạn có thể thấy, thứ tự của các phần tử đã bị đảo ngược. Trước đây, phần tử ở chỉ mục cuối cùng (phần tử 14 ở chỉ mục 6) bây giờ là phần tử ở chỉ mục thứ 0, v.v.
9. Array.slice ()
Những gì nó làm: lát cắt() được sử dụng để truy xuất bản sao cạn của một phần của mảng. Nói một cách đơn giản hơn, phương pháp này cho phép bạn chọn các phần tử cụ thể từ một mảng bằng chỉ mục của chúng. Bạn có thể chuyển chỉ mục bắt đầu của phần tử mà bạn muốn truy xuất và các phần tử cũng như chỉ mục cuối tùy chọn.
Nếu bạn không cung cấp chỉ mục kết thúc, tất cả các phần tử từ chỉ mục đầu đến cuối mảng sẽ được truy xuất. Phương thức này trả về một mảng mới và không sửa đổi mảng hiện có.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);Trong đoạn mã trên, tất cả các phần tử từ chỉ mục thứ hai đến chỉ mục cuối cùng được truy xuất vì tham số chỉ mục cuối không được chuyển. Đăng nhập cả hai mảng vào bảng điều khiển.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Rõ ràng là mảng ban đầu không bị phương thức slice () sửa đổi và thay vào đó trả về một mảng mới được lưu trữ trong SliceArray Biến đổi. Đây là một ví dụ trong đó tham số chỉ mục cuối cũng được chuyển cho lát cắt() phương pháp.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Những gì nó làm: mối nối () là một phương thức mảng hữu ích được sử dụng để xóa hoặc thay thế các phần tử trong mảng tại chỗ. Bằng cách chỉ định chỉ mục và số phần tử cần xóa, nó sẽ sửa đổi mảng.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Trong ví dụ trên, myArray mảng được nối từ chỉ mục 2 và 3 phần tử bị xóa khỏi nó. Mảng bây giờ bao gồm:
[2, 4, 12, 14]Để thay thế các phần tử thay vì chỉ xóa chúng, bạn có thể chuyển bất kỳ số lượng tham số tùy chọn nào với các phần tử mà bạn muốn thay thế, như sau:
làm thế nào để có được thông tin về một người nào đó
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Những gì nó làm: lọc() phương thức là một phương thức mảng hữu ích nhận một hàm chứa một bài kiểm tra và trả về một mảng mới với tất cả các phần tử vượt qua bài kiểm tra đó. Đúng như tên gọi của nó, phương pháp này được sử dụng để lọc các phần tử bạn cần từ các phần tử khác. Quá trình lọc được thực hiện bằng cách sử dụng một hàm trả về giá trị boolean.
Đây là một ví dụ về lọc() phương thức được sử dụng để chỉ nhận những phần tử từ mảng chia hết cho 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);Trong ví dụ trên, một hàm mũi tên được truyền dưới dạng tham số lấy từng số từ mảng ban đầu và kiểm tra xem nó có chia hết cho 2 hay không bằng cách sử dụng modulo ( % ) và bình đẳng ( === ) nhà điều hành. Đây là kết quả đầu ra trông như thế nào:
[2, 4, 12, 14]12. Array.reduce ()
Những gì nó làm: giảm() là một phương thức mảng nhận một hàm giảm thiểu và thực thi nó trên mỗi phần tử mảng để xuất ra một giá trị duy nhất trong khi trả về. Nó có một chức năng giảm thiểu với một biến tích lũy và một biến phần tử hiện tại làm tham số bắt buộc. Giá trị của bộ tích lũy được ghi nhớ qua tất cả các lần lặp và cuối cùng được trả lại sau lần lặp cuối cùng.
Một trường hợp sử dụng phổ biến của phương pháp này là tính tổng của tất cả các phần tử trong mảng. Việc triển khai chức năng này như sau:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 được chuyển làm tham số thứ hai trong ví dụ trên, được sử dụng làm giá trị ban đầu của biến tích lũy. Các sumOfNums biến sẽ chứa giá trị trả về của giảm() phương thức được mong đợi là tổng của tất cả các phần tử trong mảng.
console.log(sumOfNums); 5313. Array.includes ()
Tác dụng: Tìm kiếm một phần tử trong một mảng để kiểm tra xem nó có hiện diện hay không là một thao tác được sử dụng khá thường xuyên và do đó, JavaScript có một phương thức tích hợp cho điều này ở dạng bao gồm() phương thức mảng. Đây là cách bạn có thể sử dụng nó:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Phương thức này nhận một tham số bắt buộc, phần tử cần tìm kiếm và một tham số tùy chọn, chỉ mục mảng mà từ đó bắt đầu tìm kiếm. Tùy thuộc vào việc phần tử đó có hiện diện hay không, nó sẽ trả về thật hoặc sai tương ứng. Do đó, kết quả đầu ra sẽ là:
true
false
true
false14. Array.indexOf ()
Những gì nó làm: Chỉ số() được sử dụng để tìm ra chỉ mục mà tại đó sự xuất hiện đầu tiên của một phần tử được chỉ định có thể được tìm thấy trong mảng. Mặc dù nó tương tự như phương thức include (), phương thức này trả về chỉ số số hoặc -1 nếu phần tử không có trong mảng.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));Chỉ số() phương thức sử dụng bình đẳng nghiêm ngặt để kiểm tra xem một phần tử có tồn tại hay không, có nghĩa là giá trị cũng như kiểu dữ liệu phải giống nhau. Tham số thứ hai tùy chọn nhận chỉ mục để bắt đầu tìm kiếm. Dựa trên các tiêu chí này, đầu ra sẽ giống như sau:
1
-1
415. Array.fill ()
Công dụng: Thông thường, bạn có thể cần đặt tất cả các giá trị trong mảng thành giá trị tĩnh chẳng hạn như 0. Thay vì sử dụng vòng lặp, bạn có thể thử lấp đầy() cho cùng một mục đích. Bạn có thể gọi phương thức này trên một mảng với 1 tham số bắt buộc: giá trị để điền vào mảng và 2 tham số tùy chọn: chỉ số bắt đầu và kết thúc để điền vào giữa. Phương thức này sửa đổi mảng thoát.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Khi ghi đầu ra vào bảng điều khiển, bạn sẽ thấy:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Các bước tiếp theo trong hành trình JavaScript của bạn
Mảng là một phần mạnh mẽ của ngôn ngữ JavaScript, đó là lý do tại sao có rất nhiều phương pháp được tích hợp sẵn để giúp cuộc sống của bạn trở nên dễ dàng hơn với tư cách là một nhà phát triển. Cách tốt nhất để nắm vững mười lăm phương pháp này là thực hành.
Khi bạn tiếp tục học JavaScript, MDN là một nguồn tài nguyên tuyệt vời để có tài liệu chi tiết. Hãy thoải mái trong bảng điều khiển, sau đó nâng cao kỹ năng của bạn với các trình chỉnh sửa JavaScript tốt nhất dành cho lập trình viên. Sẵn sàng để xây dựng trang web của bạn với JavaScript? Tại sao không xem qua một số khuôn khổ mà bạn có thể xem xét.
Đăng lại Đăng lại tiếng riu ríu E-mail 6 khung JavaScript đáng học hỏiCó rất nhiều khung JavaScript trên mạng để giúp phát triển. Dưới đây là một số bạn nên biết.
Đọc tiếp Chủ đề liên quan- Lập trình
- JavaScript
- Mẹo mã hóa
Nitin là một nhà phát triển phần mềm đam mê và là một sinh viên kỹ thuật máy tính đang phát triển các ứng dụng web bằng công nghệ JavaScript. Anh ấy làm việc như một nhà phát triển web tự do và thích viết cho Linux và Lập trình khi rảnh rỗi.
Xem thêm từ Nitin RanganathTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký