programming javascript

Javascript chuyển đổi mảng phẳng thành mảng lồng nhau

Hôm nay, tôi sẽ chỉ cho bạn hai cách để làm phẳng một mảng lồng nhau bất kể nó được lồng sâu đến đâu

1. Sử dụng phương pháp Mảng

const flattenedArray = [].concat[...nestedArrays];

function flatten[arr] {
  return arr.flat[Infinity]
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

2. Sử dụng đệ quy và giảm

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn có thể kết hợp sức mạnh của một Mảng mới, hàm

const flattenedArray = [].concat[...nestedArrays];

6 và toán tử trải rộng để tạo một mảng mới với tất cả các đối tượng chứa trong đó

const flattenedArray = [].concat[...nestedArrays];

Điều này cũng giống như

const flattenedArray: Person[] = [
    {firstName: "Andrew", lastName: "Smith"},
    {firstName: "Derek", lastName: "Maloney"},
    {firstName: "Chris", lastName: "Cawlins"},
    {firstName: "Susan", lastName: "Sarandon"},
]

Loại này có an toàn không?

Bạn có thể nhận thấy rằng

const flattenedArray = [].concat[...nestedArrays];

7 không cung cấp loại an toàn - đây là do thiết kế vì các mảng trong JavaScript có thể chứa các đối tượng thuộc bất kỳ loại nào. Để đảm bảo rằng bạn chỉ nhận lại các mảng Person, bạn có thể chuyển mảng của mình thành loại

const flattenedArray = [].concat[...nestedArrays];

8 để cung cấp cho bạn thêm một lớp an toàn về loại

const flattenedArray = [[] as Person[]].concat[...nestedArrays];

Khi nào thì sử dụng cái này

Để làm phẳng các mảng của mảng chỉ sâu một cấp

Khi nào không sử dụng cái này

Mặc dù cú pháp này thuận tiện và dễ nhớ, nhưng việc làm phẳng các mảng của các mảng không hoạt động ở đây - nó cũng chậm trên các mảng lớn. Để có giải pháp hiệu quả hơn, hãy xem câu trả lời StackOverflow này để biết câu trả lời tương tự trong JavaScript - nó thực hiện điều tương tự nhưng nhanh hơn và hoạt động trên các mảng được lồng sâu

Chuyển đổi một mảng các mục có id và id gốc thành một cây lồng nhau theo cách `O[n]` hiệu quả. Chạy trong trình duyệt và nút

xuất bản 1. 11. 0 • 10 tháng trướcxuất bản 1. 11. 0 10 tháng trước

Đọc, viết hoặc kiểm tra thuộc tính lồng nhau của cấu trúc dữ liệu thông qua một chuỗi như 'my. lồng vào nhau. tài sản'. Nó hoạt động thông qua mảng và đối tượng. '

Yêu cầu. Chúng tôi có một mảng các đối tượng được lồng sâu. Chúng tôi muốn đưa tất cả các đối tượng lồng nhau vào mảng ở cấp cơ sở

Sau đây là ví dụ về mảng

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

0 có nhiều người trong thư mục gốc và nhiều người trong số họ có mảng con chứa các thành viên khác


const familyTree = [
  {
    id: "23b9dbff",
    name: "Jessie",
    age: 50,
    children: [
      {
        id: "5c0f3094",
        name: "Peter",
        age: 20
      },
      {
        id: "c1484221",
        name: "Paul",
        age: 32,
        children: [
          {
            id: "2e6d866e",
            name: "Carol",
            age: 12
          },
          {
            id: "e48a27ad",
            name: "Hester",
            age: 15
          }
        ]
      },
      {
        id: "8a265c23",
        name: "Hilda",
        age: 25
      }
    ]
  },
  {
    id: "53164b2b",
    name: "Mathew",
    age: 70,
    children: [
      {
        id: "b14a960c",
        name: "Spencer",
        age: 45,
        children: [
          {
            id: "ff3c260c",
            name: "Joseph",
            age: 22
          },
          {
            id: "7c60920a",
            name: "Robert",
            age: 27,
            children: [
              {
                id: "0e11874f",
                name: "Ian",
                age: 2
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: "5a4bdc98",
    name: "Claire",
    age: 63,
    children: [
      {
        id: "014b62a3",
        name: "Adrian",
        age: 41
      },
      {
        id: "a1899541",
        name: "Julie",
        age: 32,
        children: [
          {
            id: "013362a3",
            name: "Patricia",
            age: 4
          }
        ]
      }
    ]
  }
];

Chúng ta có thể làm phẳng mảng theo một trong các cách sau

1. Sử dụng JavaScript đơn giản [es6]

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

Ở đây, chúng tôi gọi đệ quy phương thức

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

1, phương thức này ánh xạ qua mảng ở mỗi cấp độ và trả về các đối tượng. Nếu bất kỳ đối tượng nào có con, nó sẽ đẩy chúng vào mảng

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

2 và chuyển chúng đến phương thức

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

1. Điều này tiếp tục đệ quy cho đến khi không tìm thấy con mới. Các kết quả được nối ở mỗi bước và kết quả cuối cùng được trả về

Chúng ta có thể rút ngắn mã bằng cách loại bỏ biến

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Kết quả có tất cả các thành viên có trong mảng gốc như bên dưới

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Xóa trẻ em

Vì chúng tôi đang làm phẳng mảng, chúng tôi có thể xóa nút con, vì chúng tôi có thể không quan tâm đến việc giữ nó. Nhưng vì các thành viên được truy cập theo tham chiếu, nếu chúng tôi xóa tham chiếu con khỏi một thành viên, nó cũng sẽ bị xóa khỏi

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

0 ban đầu. Vì vậy, chúng tôi sử dụng toán tử lây lan

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Chúng tôi có thể xác minh rằng đối tượng ban đầu có giá trị con nguyên vẹn

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Kết quả

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

2. Sử dụng phương pháp Lodash flatMapDeep

Điều tương tự ở trên có thể được thực hiện chính xác hơn bằng cách sử dụng phương pháp như sau

function flatten[arr] {
  const newArr = arr.reduce[[acc, item] => {
    if [Array.isArray[item]] {
      acc = acc.concat[flatten[item]];
    } else {
     acc.push[item];
    }

    return acc;
  }, []];

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten[numArr] // [1, 2, 3, 4, 5, 6, 7]

Chúng tôi vượt qua

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

1 làm đối số thứ hai của

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

7. Phương thức này trả về phần tử không có phần tử con, ngược lại trả về một mảng mới có phần tử đó và kết quả của hàm được gọi đệ quy là

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

Để xóa các phần tử con trong mảng đã được làm phẳng mà vẫn giữ nguyên bản gốc, chúng ta cần trả về một bản sao của phần tử bằng cách sử dụng toán tử trải rộng trong đó các phần tử con bị xóa. Nhưng chúng tôi vẫn chuyển thành viên ban đầu cho

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

7 vì nó cần xử lý con

const flattenedArray = [].concat[...nestedArrays];

Thuận lợi

Một trong những lợi ích của việc làm phẳng một mảng là thời gian tra cứu nhanh, đặc biệt là trong các ứng dụng front-end như React, Angular hoặc Vue, nơi trạng thái có thể trở nên phức tạp và sâu sắc. Đối với một mảng lồng nhau gồm các đối tượng hiếm khi được cập nhật, chúng ta có thể giữ bản sao phẳng của nó và cập nhật nó sau mỗi lần thêm, cập nhật hoặc xóa được thực hiện trên bản gốc

Bây giờ để tra cứu bất cứ thứ gì, chúng ta chỉ cần duyệt qua mảng phẳng trong thời gian O[n] thay vì đi sâu vào cây ban đầu trong mỗi lần tra cứu, điều này rất tốn kém

Ví dụ. Để biết liệu các thành viên có tuổi nhỏ hơn hoặc bằng 2 có tồn tại trong

const familyTree = [
// as above
];

const getMembers = [members] => {
  let children = [];
  const flattenMembers = members.map[m => {
    if [m.children && m.children.length] {
      children = [...children, ...m.children];
    }
    return m;
  }];

  return flattenMembers.concat[children.length ? getMembers[children] : children];
};

getMembers[familyTree];

0 hay không, chúng ta có thể kiểm tra mảng phẳng bằng phương pháp như from lodash. Chúng ta cũng có thể lấy đối tượng thành viên

Làm cách nào để làm phẳng các mảng lồng nhau trong JavaScript?

Mảng. phương thức phẳng[] chủ yếu được sử dụng để làm phẳng một mảng JavaScript lồng nhau. Nó chấp nhận mức độ sâu làm đối số và trả về một mảng mới trong đó tất cả các phần tử của mảng con được nối theo độ sâu đã chỉ định.

Làm cách nào để làm phẳng mảng trong JavaScript mà không cần làm phẳng?

Trong ES6, người ta có thể làm phẳng một mảng bằng cách sử dụng toán tử trải rộng . người ta có thể sử dụng hai phương pháp này để làm phẳng một mảng. Chúng tôi chuyển hai đối số cho phương thức áp dụng [_] - một mảng trống và mảng chúng tôi muốn làm phẳng [mảng], sau đó nối tất cả các phần tử [mảng con] được truyền vào một mảng trống.

Làm cách nào để tạo mảng lồng nhau trong JavaScript?

Tạo một mảng lồng nhau. Cái này chỉ tương đương biến với mảng . Thứ hai là sử dụng phương thức mảng new Array[]. Và cái cuối cùng là sử dụng Array[] tương tự như Array[] mới. Lưu ý rằng tất cả các phương pháp này đều mang lại kết quả như nhau.

Làm cách nào để làm phẳng JavaScript mảng đa chiều?

a. Sử dụng concat[] và apply[] let flatArray = []. concat. .

b. Sử dụng toán tử trải rộng. hãy để phẳngArray = []. concat[. mảng]; . [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ].

c. Sử dụng phương pháp rút gọn. hãy để phẳngArray = mảng

1. Sử dụng phương pháp Mảng const flattenedArray = [].concat[...nestedArrays]; 5