Hướng dẫn array to nested object javascript - mảng đến đối tượng lồng nhau javascript

Giả sử tôi có mảng sau: ['sản ​​phẩm', 'model', 'phiên bản']]]

Và tôi muốn có một đối tượng như:

{
    product: { 
        model: { 
            version: { 

            }
        }
     }
}

Tuy nhiên, mảng đó là động để nó có thể có 2, 3 hoặc ít hơn các mục. Làm thế nào điều này có thể đạt được một cách hiệu quả nhất?

Cảm ơn

Khi được hỏi ngày 29 tháng 8 năm 2018 lúc 12:10Aug 29, 2018 at 12:10

2

Chỉ cần biến nó trong ra ngoài và kết nối một đối tượng bên trong thành một đối tượng bên ngoài:

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

Đã trả lời ngày 29 tháng 8 năm 2018 lúc 12:15Aug 29, 2018 at 12:15

lừa dối ♦ lừa dối♦deceze

499K81 Huy hiệu vàng720 Huy hiệu bạc867 Huy hiệu Đồng81 gold badges720 silver badges867 bronze badges

4

Bạn cũng có thể làm điều đó với

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

3:

const result = ['product','model','version'].reduceRight((all, item) => ({[item]: all}), {});

console.log(result);

Đã trả lời ngày 29 tháng 8 năm 2018 lúc 16:16Aug 29, 2018 at 16:16

Leonid Pyrlialeonid PyrliaLeonid Pyrlia

1.4742 huy hiệu vàng10 Huy hiệu bạc13 Huy hiệu đồng2 gold badges10 silver badges13 bronze badges

Nếu tôi hiểu chính xác yêu cầu, mã này có thể làm những gì bạn cần:

function convert(namesArray) {
  let result = {};
  let nestedObj = result;
  namesArray.forEach(name => {
    nestedObj[name] = {};
    nestedObj = nestedObj[name];
  });

  return result;
}


console.log(convert(['a', 'b', 'c']));

Đã trả lời ngày 29 tháng 8 năm 2018 lúc 12:15Aug 29, 2018 at 12:15

lừa dối ♦ lừa dốiAndrey

499K81 Huy hiệu vàng720 Huy hiệu bạc867 Huy hiệu Đồng20 silver badges34 bronze badges

1

TLDR; Truy cập an toàn các đối tượng lồng nhau trong JavaScript một cách siêu tuyệt vời. safely access nested objects in JavaScript in a super cool way.

JavaScript là tuyệt vời, tất cả chúng ta đều biết điều đó rồi. Nhưng một vài điều trong JavaScript thực sự kỳ lạ và chúng khiến chúng tôi gãi đầu rất nhiều. Một trong những điều đó là sự đối đầu với lỗi này khi bạn cố gắng truy cập một đối tượng lồng nhau,

Không thể đọc tài sản ‘foo, không xác định

Hầu hết các lần khi chúng tôi làm việc với JavaScript, chúng tôi sẽ xử lý các đối tượng lồng nhau và thường thì chúng tôi sẽ cần phải truy cập các giá trị lồng nhau trong cùng một cách an toàn.

Hãy để lấy đối tượng lồng nhau này làm ví dụ.

const user = {
    id: 101,
    email: '',
    personalInfo: {
        name: 'Jack',
        address: {
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }
    }
}

Để truy cập tên của người dùng của chúng tôi, chúng tôi sẽ viết

const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;

Điều này là dễ dàng và thẳng thắn.

Nhưng, vì một số lý do, nếu thông tin cá nhân của người dùng của chúng tôi không có sẵn, cấu trúc đối tượng sẽ như thế này,

const user = {
    id: 101,
    email: ''
}

Bây giờ nếu bạn thử bạn truy cập tên, bạn sẽ bị ném không thể đọc thuộc tính ‘tên của không được xác định.

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

Điều này là do chúng tôi đang cố gắng truy cập khóa

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

4 từ một đối tượng không tồn tại.

Cách thông thường làm thế nào hầu hết các nhà phát triển đối phó với kịch bản này,

const name = user && user.personalInfo ? user.personalInfo.name : null;
// undefined error will NOT be thrown as we check for existence before access

Điều này là ổn nếu cấu trúc lồng nhau của bạn đơn giản, nhưng nếu bạn có dữ liệu sâu 5 hoặc 6 cấp, thì mã của bạn sẽ trông thực sự lộn xộn như thế này,

let city;
if (
    data && data.user && data.user.personalInfo &&
    data.user.personalInfo.addressDetails &&
    data.user.personalInfo.addressDetails.primaryAddress
   ) {
    city = data.user.personalInfo.addressDetails.primaryAddress;
}

Có một vài thủ thuật để đối phó với các cấu trúc đối tượng lộn xộn này.

Oliver Steele, mẫu truy cập đối tượng lồng nhau

Đây là sở thích cá nhân của tôi vì nó làm cho mã trông sạch sẽ và đơn giản. Tôi đã chọn phong cách này từ Stackoverflow một thời gian trước và nó khá hấp dẫn khi bạn hiểu cách thức hoạt động của nó.

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

0

Với ký hiệu này, bạn sẽ không bao giờ chạy vào không thể đọc thuộc tính ‘tên của không xác định. Về cơ bản, bạn kiểm tra xem người dùng có tồn tại không, nếu không, bạn tạo một đối tượng trống một cách nhanh chóng. Bằng cách này, khóa cấp tiếp theo sẽ luôn được truy cập từ một đối tượng tồn tại hoặc một đối tượng trống, nhưng không bao giờ từ không xác định.always be accessed from an object that exists or an empty object, but never from undefined.

Thật không may, bạn không thể truy cập các mảng lồng nhau bằng thủ thuật nàyyou cannot access nested arrays with this trick

Truy cập các đối tượng lồng nhau bằng cách sử dụng mảng giảm

Phương pháp giảm mảng rất mạnh và nó có thể được sử dụng để truy cập an toàn các đối tượng lồng nhau một cách an toàn.

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

1

TYPY

Nếu bạn nghĩ rằng các phương thức trên là một lil quá chính thống, thì bạn nên thử thư viện typy mà tôi đã viết. Ngoài việc truy cập an toàn các đối tượng lồng nhau, nó còn làm nhiều điều tuyệt vời hơn. 🎉

Nó có sẵn dưới dạng gói NPM - Typy

Nếu bạn sử dụng typy, mã của bạn sẽ trông như thế này,Typy, your code will look like this,

const keys = ['product', 'model', 'version'];
const result = keys.reverse().reduce((res, key) => ({[key]: res}), {});
//                                   innermost value to start with ^^

console.log(result);

2

Có một vài thư viện khác như Lodash và Ramda có thể làm điều này. Nhưng trong các dự án phía trước trọng lượng nhẹ, đặc biệt nếu bạn chỉ cần một hoặc hai phương pháp từ những LIB đó, thì đó là một ý tưởng tốt để lựa chọn một LIB trọng lượng ánh sáng thay thế, hoặc tốt hơn, hãy tự viết.

Chúc mừng truy cập an toàn các đối tượng lồng nhau trong JavaScript! 💥