1.純數(shù)組扁平化

// 給定的數(shù)組
const arr = [1, [2, [3, 4, [5], 6], 7], 8, [9, [10, 11], 1], 2];

// 定義一個(gè)函數(shù)，用于將嵌套數(shù)組展平為一維數(shù)組
function flattenArray(obj = [], res = []) {
    // 如果輸入為空數(shù)組，直接返回空數(shù)組
    if (!obj) return;

    // 遍歷數(shù)組中的每個(gè)元素
    if (Array.isArray(obj)) {
        obj.forEach((item) => {
            // 如果元素是數(shù)組，則遞歸調(diào)用 flattenArray
            if (Array.isArray(item)) {
                flattenArray(item, res);
            } else {
                // 如果元素不是數(shù)組，將其添加到結(jié)果數(shù)組中
                res.push(item);
            }
        });
    }

    // 返回展平后的結(jié)果數(shù)組
    return res;
}

// 調(diào)用函數(shù)，將給定的嵌套數(shù)組展平為一維數(shù)組
const flattenedArray = flattenArray(arr);

// 打印展平后的數(shù)組
console.log(flattenedArray);

2.純對象扁平化

// 給定的嵌套對象
const obj = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } };

// 定義一個(gè)函數(shù)，用于將嵌套對象的鍵展平為字符串
function flattenKeys(obj, preKey = "", res = {}) {
  // 使用 Object.entries 遍歷對象的鍵值對數(shù)組
  Object.entries(obj).forEach(([key, value]) => {
    // 檢查值是否為對象且非空
    if (value && typeof value === "object") {
      // 如果值是對象且非空，遞歸調(diào)用 flattenKeys，并傳遞更新的鍵前綴
      flattenKeys(value, preKey + key + ".", res);
    } else {
      // 如果值不是對象，將鍵和值添加到結(jié)果對象中
      res[preKey + key] = value;
    }
  });

  // 返回展平后的結(jié)果對象
  return res;
}

// 調(diào)用函數(shù)，將給定的嵌套對象的鍵展平為字符串
const flattenedKeys = flattenKeys(obj);

// 打印展平后的鍵值對對象
console.log(flattenedKeys);

3.復(fù)雜類型扁平化

// 給定的對象數(shù)組
const obj1 = [1, 2, 3, { a: 1, b: { c: 2, d: { e: 3 } } }, [4, [5, 6, [7]]]];

// 給定的嵌套對象
const obj2 = { a: [1, [2, [3]], b: { c: { d: 1 } }, e: 2, f: 3 };

// 給定的對象數(shù)組
const obj3 = [{ a: 1, b: [2, { c: 3 }] }];

// 定義一個(gè)函數(shù)，用于將嵌套數(shù)組和對象的鍵展平為字符串
function flatten(obj = {}, preKey = "", res = {}) {
  // 空值判斷，如果 obj 是空，直接返回
  if (!obj) return;

  // 獲取 obj 對象的所有 [key, value] 數(shù)組并且遍歷，forEach 的箭頭函數(shù)中使用了解構(gòu)
  Object.entries(obj).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      // 如果 value 是數(shù)組，那么 key 就是數(shù)組的 index，value 就是對應(yīng)的 value
      // obj 是數(shù)組的話就用 [] 引起來
      // 因?yàn)?value 是數(shù)組，數(shù)組后面是直接跟元素的，不需要 . 號
      let temp = Array.isArray(obj) ? `${preKey}[${key}]` : `${preKey}${key}`;
      flatten(value, temp, res);
    } else if (typeof value === 'object') {
      // 因?yàn)?value 是對象類型，所以在末尾需要加 . 號
      let temp = Array.isArray(obj) ? `${preKey}[${key}].` : `${preKey}${key}.`;
      flatten(value, temp, res);
    } else {
      // 如果 value 既不是數(shù)組也不是對象，將鍵和值添加到結(jié)果對象中
      let temp = Array.isArray(obj) ? `${preKey}[${key}]` : `${preKey}${key}`;
      res[temp] = value;
    }
  });

  // 返回展平后的結(jié)果對象
  return res;
}

// 調(diào)用函數(shù)，將給定的嵌套數(shù)組和對象的鍵展平為字符串
const flattenedObj1 = flatten(obj1);
const flattenedObj2 = flatten(obj2);
const flattenedObj3 = flatten(obj3);

// 打印展平后的鍵值對對象
console.log(flattenedObj1);
console.log(flattenedObj2);
console.log(flattenedObj3);

文章來源地址http://www.zghlxwxcb.cn/news/detail-801601.html

到了這里，關(guān)于JS數(shù)據(jù)的扁平化處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！