Trong JavaScript, khi bạn nghe thuật ngữ "vòng lặp", có lẽ bạn sẽ nghĩ đến việc sử dụng các phương thức vòng lặp khác nhau như vòng lặp
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
6, vòng lặp
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
7,
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
Nhưng thật không may, trong trường hợp của các đối tượng, các phương thức này không hoạt động vì các đối tượng không thể lặp lại
Điều này không có nghĩa là chúng ta không thể lặp qua một đối tượng – nhưng điều này có nghĩa là chúng ta không thể lặp trực tiếp qua một đối tượng giống như cách chúng ta làm với một mảng
let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅
for (val of arr) {
console.log(val); // ✅✅✅
}
let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌
for (val of obj) {
console.log(val); // ❌❌❌
}
Trong bài viết này, Bạn sẽ tìm hiểu cách bạn có thể lặp qua một đối tượng trong JavaScript. Có hai phương pháp bạn có thể sử dụng - và một trong số đó có trước ngày giới thiệu ES6
Cách lặp qua một đối tượng trong JavaScript bằng vòng lặp const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
9
Trước ES6, chúng tôi dựa vào phương thức
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
0 bất cứ khi nào chúng tôi muốn lặp qua một đối tượng
Vòng lặp
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
0 lặp qua các thuộc tính trong chuỗi nguyên mẫu. Điều này có nghĩa là chúng ta cần kiểm tra xem thuộc tính có thuộc về đối tượng hay không bằng cách sử dụng
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
2 bất cứ khi nào chúng ta lặp qua một đối tượng bằng vòng lặp
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
9
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
Để tránh căng thẳng và khó lặp lại và sử dụng phương thức
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
2, ES6 và ES8 đã giới thiệu các phương thức tĩnh đối tượng. Chúng chuyển đổi các thuộc tính đối tượng thành mảng, cho phép chúng ta sử dụng trực tiếp các phương thức mảng
Cách lặp qua một đối tượng trong JavaScript bằng các phương thức tĩnh đối tượng
Một đối tượng được tạo thành từ các thuộc tính có các cặp khóa-giá trị, tức là mỗi thuộc tính luôn có một giá trị tương ứng
Các phương thức tĩnh đối tượng cho phép chúng tôi trích xuất
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
5,
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
6 hoặc cả khóa và giá trị dưới dạng
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
7 trong một mảng, cho phép chúng tôi có nhiều sự linh hoạt đối với chúng như chúng tôi làm với các mảng thực tế
Chúng tôi có ba phương thức tĩnh đối tượng, đó là
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
8
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
9
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
60
Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
8
Phương thức
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
8 được giới thiệu trong ES6. Nó lấy đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các tên thuộc tính (còn được gọi là khóa)
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
Điều này bây giờ mang lại cho chúng ta lợi thế khi áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất giá trị của từng thuộc tính
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
6
Điều này sẽ trở lại
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
1
Chúng tôi cũng có thể sử dụng khóa để lấy giá trị bằng cách sử dụng ký hiệu ngoặc đơn, chẳng hạn như
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
63 như bên dưới
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
3
Điều này sẽ trở lại
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
4
Trước khi tiếp tục, hãy sử dụng phương pháp này để tổng hợp tất cả dân số bằng cách lặp qua để biết tổng dân số
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
5
Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
9
Phương thức
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
9 rất giống với phương thức
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
8 và được giới thiệu trong ES8. Phương thức này lấy Đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các giá trị khóa
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
9
Điều này bây giờ mang lại cho chúng ta lợi thế khi áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
67 của mỗi thuộc tính
let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅
for (val of arr) {
console.log(val); // ✅✅✅
}
let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌
for (val of obj) {
console.log(val); // ❌❌❌
}
1
Điều này sẽ trở lại
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
0
Chúng ta có thể thực hiện phép tính tổng một cách hiệu quả vì chúng ta có thể lặp trực tiếp
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
1
Cách lặp qua một đối tượng trong JavaScript với Object. phương thức entry()
Phương pháp
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
60 cũng được giới thiệu với ES8. Theo nghĩa cơ bản, những gì nó làm là xuất ra một mảng các mảng, theo đó mỗi mảng bên trong có hai phần tử là thuộc tính và giá trị
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
2
kết quả này
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
3
Điều này trả về một mảng các mảng, với mỗi mảng bên trong có
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
69. Bạn có thể sử dụng bất kỳ phương thức mảng nào để lặp qua
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
4
Chúng tôi có thể quyết định hủy cấu trúc mảng, vì vậy chúng tôi nhận được
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
10 và giá trị
const population = {
male: 4,
female: 93,
others: 10
};
// Iterate through the object
for (const key in population) {
if (population.hasOwnProperty(key)) {
console.log(`${key}: ${population[key]}`);
}
}
5
Bạn có thể tìm hiểu thêm về cách lặp qua mảng trong bài viết này
kết thúc
Trong hướng dẫn này, bạn đã biết rằng cách tốt nhất để lặp qua một đối tượng là sử dụng bất kỳ phương thức tĩnh nào của đối tượng dựa trên nhu cầu của bạn để chuyển đổi thành một mảng trước khi lặp
Chúc các bạn code vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Joel Olawanle
Nhà phát triển Frontend & Người viết kỹ thuật
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Làm cách nào để xóa một đối tượng trong JavaScript?
Cách duy nhất để xóa hoàn toàn các thuộc tính của một đối tượng trong JavaScript là sử dụng toán tử xóa . Nếu thuộc tính mà bạn đang cố xóa không tồn tại, thao tác xóa sẽ không có bất kỳ tác dụng nào và có thể trả về true.
Làm cách nào để xóa đối tượng khỏi mảng trong JavaScript trong một vòng lặp?
Hàm JavaScript pop() . Phương thức này dùng để loại bỏ các phần tử ở cuối mảng. Hàm shift() trong JavaScript. Phương thức này được sử dụng để loại bỏ các phần tử từ đầu của một mảng. Hàm nối JavaScript (). Phương pháp này được sử dụng để xóa các phần tử khỏi chỉ mục cụ thể của một mảng.
Làm cách nào để xóa tất cả thuộc tính của đối tượng trong JavaScript?
Sử dụng a cho. trong vòng lặp để xóa một đối tượng và xóa tất cả các thuộc tính của nó . Vòng lặp sẽ lặp qua tất cả các thuộc tính có thể đếm được trong đối tượng. Trên mỗi lần lặp lại, hãy sử dụng toán tử xóa để xóa thuộc tính hiện tại.
Làm cách nào để xóa một đối tượng trong mảng JavaScript?
Truyền giá trị của phần tử bạn muốn xóa khỏi mảng vào phương thức indexOf() để trả về chỉ mục của phần tử khớp với giá trị đó trong mảng. Sau đó sử dụng phương thức splice() để xóa phần tử tại chỉ mục được trả về
