HomeLập trìnhJavaScriptCách thao tác...

Cách thao tác mảng trong JavaScript


Một phần quan trọng của bất kỳ ngôn ngữ lập trình nào. Hầu hết chúng ta cần thực hiện một số thao tác trên mảng, do đó có bài viết này.

Trong bài viết này, tôi sẽ chỉ cho bạn các phương pháp khác nhau để thao tác với mảng trong JavaScript [^^]

Mảng trong JavaScript là gì?

Trước khi chúng tôi tiếp tục, bạn cần hiểu ý nghĩa thực sự của mảng.

Trong JavaScript, một mảng là một biến được sử dụng để lưu trữ các loại dữ liệu khác nhau. Về cơ bản, nó lưu trữ các phần tử khác nhau trong một hộp và sau đó có thể được đánh giá bằng biến.

Khai báo một mảng:

let myBox = [];   // Initial Array declaration in JS

Mảng có thể chứa nhiều kiểu dữ liệu

let myBox = ['hello', 1, 2, 3, true, 'hi'];

Mảng có thể được thao tác bằng cách sử dụng một số hành động được gọi là các phương pháp. Một số phương thức này cho phép chúng ta thêm, xóa, sửa đổi và thực hiện nhiều thao tác khác đối với mảng.

Tôi sẽ giới thiệu cho bạn một số trong bài viết này, hãy bắt đầu nào 🙂

Lưu ý: Tôi đã sử dụng chức năng mũi tên trong bài đăng này, Nếu bạn không biết điều này có nghĩa là gì, bạn nên đọc ở đây. Chức năng mũi tên là một tính năng ES6.

toString()

Phương pháp Javascript toString() chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

tham gia()

JavaScript join() phương thức kết hợp tất cả các phần tử mảng thành một chuỗi.

Nó tương tự như toString() nhưng ở đây bạn có thể chỉ định dấu phân cách thay vì dấu phẩy mặc định.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

concat

Phương thức này kết hợp hai mảng với nhau hoặc thêm nhiều mục vào một mảng rồi trả về một mảng mới.

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

đẩy()

Phương thức này thêm các phần tử vào cuối một mảng và thay đổi mảng ban đầu.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

nhạc pop()

Phương pháp này loại bỏ phần tử cuối cùng của một mảng và lợi nhuận nó.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

sự thay đổi()

Phương pháp này loại bỏ mục đầu tiên của một mảng và lợi nhuận nó.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

bỏ dịch ()

Phương thức này thêm (các) mục vào đầu một mảng và thay đổi mảng ban đầu.

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

Bạn cũng có thể thêm nhiều mục cùng một lúc

nối()

Cái này phương pháp thay đổi một mảng, bằng cách thêm, loại bỏ và chèn các phần tử.

Cú pháp là:

array.splice(index[, deleteCount, element1, ..., elementN])
  • Index đây là điểm bắt đầu để loại bỏ các phần tử trong mảng
  • deleteCount là số phần tử bị xóa khỏi chỉ mục đó
  • element1, …, elementN là (các) phần tử được thêm vào

Xóa các mục

sau khi chạy nối() nó trả về mảng với (các) mục đã bị xóa và xóa nó khỏi mảng ban đầu.

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

NB: deleteCount không bao gồm chỉ mục cuối cùng trong phạm vi.

Nếu tham số thứ hai không được khai báo, mọi phần tử bắt đầu từ chỉ mục đã cho sẽ bị xóa khỏi mảng:

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

Trong ví dụ tiếp theo, chúng ta sẽ xóa 3 phần tử khỏi mảng và thay thế chúng bằng nhiều phần tử hơn:

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

Thêm mục

Để thêm các mục, chúng ta cần đặt deleteCount về không

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

lát cắt()

Phương pháp này tương tự như splice() nhưng rất khác. Nó trả về mảng con thay vì chuỗi con.

Phương pháp này bản sao một phần đã cho của một mảng và trả về phần đã sao chép đó dưới dạng một mảng mới. Nó không thay đổi mảng ban đầu.

Đọc thêm  Cách sử dụng các phương thức flat() và flatMap() để làm phẳng mảng trong JavaScript

Cú pháp là:

array.slice(start, end)

Đây là một ví dụ cơ bản:

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // returns the original array

Cách tốt nhất để sử dụng slice() là gán nó cho một biến mới.

let message="congratulations"
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // returns "congrats!"

tách ra()

Phương pháp này được sử dụng cho dây. Nó chia một chuỗi thành các chuỗi con và trả về chúng dưới dạng một mảng.

Đây là cú pháp:string.split(dấu phân cách, giới hạn);

  • Các separator ở đây xác định cách tách một chuỗi bằng dấu phẩy.
  • Các limit xác định số lượng phân chia được thực hiện
let firstName="Bolaji";
// return the string as an array
firstName.split() // ["Bolaji"]

một vi dụ khac:

let firstName="hello, my name is bolaji, I am a dev.";
firstName.split(',', 2); // ["hello", " my name is bolaji"]

Lưu ý: Nếu chúng ta khai báo một mảng trống, như thế này firstName.split(''); sau đó mỗi mục trong chuỗi sẽ được chia thành các chuỗi con:

let firstName="Bolaji";
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

Chỉ số()

Phương thức này tìm kiếm một mục trong một mảng và trả về chỉ số nơi nó được tìm thấy khác nó trở lại -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

Phương pháp này hoạt động theo cùng một cách Chỉ số() ngoại trừ việc nó hoạt động từ phải sang trái. Nó trả về chỉ mục cuối cùng nơi mục được tìm thấy

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

lọc()

Phương thức này tạo một mảng mới nếu các phần tử của mảng vượt qua một điều kiện nhất định.

Cú pháp là:

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

Ví dụ:

Kiểm tra người dùng từ Nigeria

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

bản đồ()

Phương thức này tạo một mảng mới bằng cách thao tác các giá trị trong một mảng.

Ví dụ:

Hiển thị tên người dùng trên một trang. (Hiển thị danh sách bạn bè cơ bản)

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
return '<li>' + item + '</li>';
})
const render="<ul>" + display.join('') + '</ul>';
document.write(render);
1*obuBZKFb5vKmUP7D4TX2XA

một vi dụ khac:

// adds dollar sign to numbers
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

giảm()

Phương pháp này là tốt để tính toán tổng số.

Đọc thêm  Đảo ngược chuỗi trong JavaScript – Đảo ngược chuỗi bằng Phương thức JS .reverse()

giảm() được sử dụng để tính toán một giá trị duy nhất dựa trên một mảng.

let value = array.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

ví dụ:

Để lặp qua một mảng và tính tổng tất cả các số trong mảng, chúng ta có thể sử dụng vòng lặp for.

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
sum += n;
}
console.log(sum);

Đây là cách làm tương tự với reduce()

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
accummulator + value
, 0);
console.log(sum); // 970

Nếu bạn bỏ qua giá trị ban đầu, toàn bộ theo mặc định sẽ bắt đầu từ mục đầu tiên trong mảng.

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

Đoạn trích dưới đây cho thấy cách giảm() phương thức hoạt động với cả bốn đối số.

nguồn: Tài liệu MDN

1*Cbd9qR_vy71qZjEQCFpCLQ

Những hiểu biết sâu sắc hơn về giảm() phương pháp và nhiều cách sử dụng nó có thể được tìm thấy ở đây và ở đây.

cho mỗi()

Phương pháp này tốt cho việc lặp qua một mảng.

Nó áp dụng một chức năng trên tất cả các mục trong một mảng

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

phép lặp có thể được thực hiện mà không cần chuyển đối số chỉ mục

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

mọi()

Phương thức này kiểm tra xem tất cả các mục trong một mảng có vượt qua điều kiện đã chỉ định hay không và trả vềtrue nếu thông qua, khác false.

kiểm tra xem tất cả các số đều dương

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

một số()

Phương thức này kiểm tra xem một mục (một hoặc nhiều) trong một mảng có vượt qua điều kiện đã chỉ định hay không và trả về true nếu được thông qua, nếu không thì trả về false.

cchết tiệt nếu ít nhất một số là dương

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

bao gồm()

Phương thức này kiểm tra xem một mảng có chứa một mục nhất định hay không. Nó tương tự như .some()nhưng thay vì tìm kiếm một điều kiện cụ thể để vượt qua, nó sẽ kiểm tra xem mảng có chứa một mục cụ thể hay không.

let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

Nếu mục không được tìm thấy, nó sẽ trả về false


Có nhiều phương pháp mảng hơn, đây chỉ là một vài trong số đó. Ngoài ra, có rất nhiều hành động khác có thể được thực hiện trên mảng, hãy thử kiểm tra tài liệu MDN tại đây để có thông tin chi tiết sâu hơn.

Tóm lược

  • toString() chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy.
  • tham gia() kết hợp tất cả các phần tử mảng thành một chuỗi.
  • concat kết hợp hai mảng với nhau hoặc thêm nhiều mục vào một mảng rồi trả về một mảng mới.
  • đẩy() thêm (các) mục vào cuối một mảng và thay đổi mảng ban đầu.
  • nhạc pop() loại bỏ mục cuối cùng của một mảng và lợi nhuận
  • sự thay đổi() loại bỏ mục đầu tiên của một mảng và lợi nhuận
  • bỏ dịch () thêm một (các) mục vào đầu một mảng và thay đổi mảng ban đầu.
  • nối() ctreo cổ một mảng, bằng cách thêm, loại bỏ và chèn các phần tử.
  • lát cắt() bản sao một phần đã cho của một mảng và trả về phần đã sao chép đó dưới dạng một mảng mới. Nó không thay đổi mảng ban đầu.
  • tách ra() chia một chuỗi thành các chuỗi con và trả về chúng dưới dạng một mảng.
  • Chỉ số() tìm kiếm một mục trong một mảng và trả về chỉ số nơi nó được tìm thấy khác nó trở lại -1
  • lastIndexOf() tìm kiếm một mục từ phải sang trái và trả về chỉ mục cuối cùng mà mục đó được tìm thấy.
  • lọc() tạo một mảng mới nếu các phần tử của mảng vượt qua một điều kiện nhất định.
  • bản đồ() tạo một mảng mới bằng cách thao tác các giá trị trong một mảng.
  • giảm() tính toán một giá trị duy nhất dựa trên một mảng.
  • cho mỗi() lặp qua một mảng, nó áp dụng một hàm trên tất cả các mục trong một mảng
  • mọi() kiểm tra xem tất cả các mục trong một mảng có vượt qua điều kiện đã chỉ định hay không và trả về true nếu vượt qua, nếu không thì trả về false.
  • một số() kiểm tra xem một mục (một hoặc nhiều) trong một mảng có vượt qua điều kiện đã chỉ định hay không và trả về true nếu vượt qua, nếu không thì trả về false.
  • bao gồm() kiểm tra xem một mảng có chứa một mục nào đó không.
Đọc thêm  Các kỹ năng JavaScript bạn cần để phản ứng (+ Ví dụ thực tế)

Hãy gói nó ở đây; Mảng rất mạnh và việc sử dụng các phương thức để thao tác với chúng sẽ tạo ra Thuật toán mà các ứng dụng trong thế giới thực sử dụng.

Hãy tạo một hàm nhỏ, một hàm chuyển đổi tiêu đề bài đăng thành urlSlug.

sên URL là địa chỉ chính xác của một trang hoặc bài đăng cụ thể trên trang web của bạn.

Khi bạn viết một bài báo về Freecodecamp Tin tức hoặc bất kỳ nền tảng viết nào khác, tiêu đề bài đăng của bạn sẽ tự động được chuyển thành sên với khoảng trắng bị xóa, các ký tự được chuyển thành chữ thường và mỗi từ trong tiêu đề được phân tách bằng dấu gạch nối.

Đây là một hàm cơ bản thực hiện điều đó bằng cách sử dụng một số phương thức chúng ta vừa học.

const url="https://bolajiayodeji.com/"
const urlSlug = (postTitle) => {
let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle="Introduction to Chrome Lighthouse"
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

Trong postUrlchúng tôi chuyển đổi chuỗi thành chữ thường, sau đó chúng tôi sử dụng tách ra()phương thức để chuyển đổi chuỗi thành chuỗi con và trả về nó trong một mảng

["introduction", "to", "chrome", "lighthouse"]

Trong post slug chúng tôi nối mảng được trả về bằng dấu gạch nối và sau đó nối nó với chuỗi danh mục và chính url.

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

Vậy là xong, khá đơn giản đúng không? 🙂


Nếu bạn mới bắt đầu với JavaScript, bạn nên kiểm tra kho lưu trữ này tại đây, tôi đang soạn một danh sách các đoạn mã JavaScript cơ bản từ

  • Mảng
  • Kiểm soát dòng chảy
  • Chức năng
  • Các đối tượng
  • nhà điều hành

Đừng quên Star và chia sẻ! 🙂

PS: Bài viết này được xuất bản lần đầu trên blog của tôi tại đây



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status