面試官會問到的數組操做

時間  2021-07-01
標籤 javascript java 數組 post 測試 spa rest code 對象 遞歸 欄目 快樂工作 简体版
原文   原文鏈接

數組去重

數組去重的測試數據以下：javascript

const sourceArray = [
null, 6, 34, '6', [], 'a', undefined, 'f', 'a', [], 
34, null, {}, true, NaN, {}, NaN, false, true, undefined
]

const filterArray = unique(sourceArray)

雙循環

image.png

function unique(sourceData) {
  let flag
  let filterArray = []
  for (let i = 0; i < sourceData.length; i++) {
    flag = true 
    for (let j = 0; j < filterArray.length; j++) {
      if (sourceData[i] === filterArray[j]) {
        flag = false
        break
      }
    }
    if (flag) {
      filterArray.push(sourceData[i])
    }
  }
  return filterArray
}
// [null, 6, 34, "6", [], "a", undefined, "f", [], {}, true, NaN, {}, NaN, false]

image.png

function unique(sourceData) {
  let flag
  let filterArray = []
  for (let i = 0; i < sourceData.length; i++) {
    flag = true 
    for (let j = i + 1; j < sourceData.length; j++) {
      if (sourceData[i] === sourceData[j]) {
        flag = false
        break
      }
    }
    if (flag) {
      filterArray.push(sourceData[i])
    }
  }
  return filterArray
}
// [6, "6", [], "f", "a", [], 34, null, {}, NaN, {}, NaN, false, true, undefined]

indexOf

image.png

function unique(sourceData) {
  return sourceData.filter((item, index) => {
    return sourceData.indexOf(item) === index
  })
}
// [null, 6, 34, "6", [], "a", undefined, "f", [], {}, true, {}, false]

注：用sourceData.indexOf(NaN)返回的永遠是-1，而index永遠不可能爲-1，因此NaN過濾掉了java

1624948470(1).jpg

function unique(sourceData) {
  let filterArray = []
  sourceData.forEach(item => {
    // filterArray數組中沒有item
    if (filterArray.indexOf(item) === -1) {
      filterArray.push(item)
    }
  })
  return filterArray
}
// [null, 6, 34, "6", [], "a", undefined, "f", [], {}, true, NaN, {}, NaN, false]

sort

image.png

function unique(sourceData) {
  let filterArray = []
  sourceData.sort()
  for (let i = 0; i < sourceData.length; i++) {
    if (sourceData[i] !== filterArray[filterArray.length - 1]) {
      filterArray.push(sourceData[i])
    }
  }
  return filterArray
}
// [[], [], 34, 6, "6", NaN, NaN, {}, {}, "a", "f", false, null, true, undefined]

注：以上幾個方案都不適用於含有NaN、數組、對象等引用數據類型的狀況。數組

includes

image.png

function unique(sourceData) {
  let filterArray = []
  sourceData.forEach(item => {
    if (!filterArray.includes(item)) {
      filterArray.push(item)
    }
  })
  return filterArray
}
// [[], [], 34, 6, "6", NaN, {}, {}, "a", "f", false, null, true, undefined]

reduce

function unique(sourceData = []) {
  return sourceData.reduce((pre, cur) => pre.includes(cur) ? pre : [...pre, cur], [])
}
// [[], [], 34, 6, "6", NaN, {}, {}, "a", "f", false, null, true, undefined]

map

function unique(sourceData) {
  let map = new Map() // 建立Map實例
  return sourceData.filter(item => {
    return !map.has(item) && map.set(item, 1)
  })
}
// [[], [], 34, 6, "6", NaN, {}, {}, "a", "f", false, null, true, undefined]

set

function unique10(sourceData) {
  return [...new Set(sourceData)]
}
// [[], [], 34, 6, "6", NaN, {}, {}, "a", "f", false, null, true, undefined]

注：以上幾個方案不適用於含有數組、對象等引用數據類型的狀況。post

object

利用對象屬性的惟一性去重。測試

function unique(sourceData) {
  let map = new Map() // 建立Map實例
  let filterArray = []
  for (let i = 0; i < sourceData.length; i++) {
    /** 
     * 爲何要使用JSON.stringify()
     * typeof sourceData[i] + sourceData[i] 拼接字符串時可能存在[object Object]
    */
    if (!map[typeof sourceData[i] + JSON.stringify(sourceData[i])]) {
      map[typeof sourceData[i] + JSON.stringify(sourceData[i])] = true;
      filterArray.push(sourceData[i]);
    }
  }
  return filterArray
}
// [[], 34, 6, "6", NaN, {}, "a", "f", false, null, true, undefined]

隨機生成了10000組數字類型的數據，按上面代碼編寫的順序執行時間以下：spa

image.png

總結一下：耗時較短的是 set map sort 幾個方案，耗時較長的是 reduce 方案，能處理引用數據類型的只有 object 方案。rest

數組扁平化

數組扁平化的測試數據以下：code

const sourceArray = [4, '4', ['c', 6], {}, [7, ['v']], ['s', [6, 23, ['嘆鬱孤']]]]

concat + 遞歸

function flat(sourceArray, flatArray) {
  sourceArray.forEach(item => {
    Array.isArray(item) ? flatArray.concat(flat(item, flatArray)) : flatArray.push(item)
  });
  return flatArray
}
const flatArray = flat(sourceArray, [])
// [4, "4", "c", 6, {…}, 7, "v", "s", 6, 23, "嘆鬱孤"]

... + 遞歸

function flat(sourceArray) {
  while (sourceArray.some(item => Array.isArray(item))) {
    sourceArray = [].concat(...sourceArray);
  }
  return sourceArray;
}
const flatArray = flat(sourceArray)
// [4, "4", "c", 6, {…}, 7, "v", "s", 6, 23, "嘆鬱孤"]

reduce + 遞歸

function flat(sourceArray) {
  return sourceArray.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flat3(cur) : cur), [])
}
const flatArray = flat(sourceArray)
// [4, "4", "c", 6, {…}, 7, "v", "s", 6, 23, "嘆鬱孤"]

flat

function flat(sourceArray) {
   /**
   * flat參數說明
   * 默認：flag() 數組只展開一層
   * 數字：flat(2) 數組展開兩層，傳入控制展開層數的數字；數字小於等於0，返回原數組
   * Infinity：flat(Infinity)，展開成一維數組
  */
  return sourceArray.flat(Infinity)
}
const flatArray = flat(sourceArray)
// [4, "4", "c", 6, {…}, 7, "v", "s", 6, 23, "嘆鬱孤"]

數組並集

數組並集、交集、差集的測試數據以下：對象

const sourceArray = [
  48, 34, '6', undefined, 'f', 'a',
  34, true, NaN, false, 34, true, 'f'
] 
const sourceArray2 = [
  52, 34, '6', undefined, 's', 23,
  'cf', true, NaN, false, NaN
]

filter + includes

function union(sourceArray, sourceArray2) {
  const unionArray = sourceArray.concat(sourceArray2.filter(item => !sourceArray.includes(item)))
  return [...new Set(unionArray)]
}
const unionArray = union(sourceArray, sourceArray2)
// [48, 34, "6", undefined, "f", "a", true, NaN, false, 52, "s", 23, "cf"]

set

function union(sourceArray, sourceArray2) {
  return [...new Set([...sourceArray, ...sourceArray2])]
}
const unionArray = union(sourceArray, sourceArray2)
// [48, 34, "6", undefined, "f", "a", true, NaN, false, 52, "s", 23, "cf"]

數組交集

filter + includes

function intersect(sourceArray, sourceArray2) {
  const intersectArray = sourceArray.filter(item => sourceArray2.includes(item))
  return [...new Set(intersectArray)]
}
const intersectArray = intersect(sourceArray, sourceArray2)
// [34, "6", undefined, true, NaN, false]

set

function intersect(sourceArray, sourceArray2) {
  sourceArray = new Set(sourceArray)
  sourceArray2 = new Set(sourceArray2)
  const intersectArray = [...sourceArray].filter(item => sourceArray2.has(item))
  return [...new Set(intersectArray)]
}
const intersectArray = intersect(sourceArray, sourceArray2)
// [34, "6", undefined, true, NaN, false]

數組差集

filter + includes

function difference(sourceArray, sourceArray2) {
  const differenceArray = sourceArray.concat(sourceArray2)
    .filter(item => !sourceArray2.includes(item))
  return [...new Set(differenceArray)]
}
const differenceArray = difference(sourceArray, sourceArray2)
// [48, "f", "a"]

set

function difference(sourceArray, sourceArray2) {
  sourceArray = new Set(sourceArray)
  sourceArray2 = new Set(sourceArray2)
  const intersectArray = [...sourceArray].filter(item => !sourceArray2.has(item))
  return [...new Set(intersectArray)]
}
const differenceArray = difference(sourceArray, sourceArray2)
// [48, "f", "a"]

數組分割

數組分割測試數據以下：遞歸

const sourceArray = [73, 343, 'g', 56, 'j', 10, 32, 43, 90, 'z', 9, 4, 28, 'z', 58, 78, 'h']

const chunkArray = chunk(sourceArray, 4)

while + slice

function chunk(sourceArray = [], length = 1) {
  let chunkArray = []
  let index = 0
  while (index < sourceArray.length) {
    chunkArray.push(sourceArray.slice(index, index += length))
  }
  return chunkArray
}
const chunkArray = chunk(sourceArray, 4)
// [[73, 343, "g", 56], ["j", 10, 32, 43], [90, "z", 9, 4], [28, "z", 58, 78], ["h"]]

reduce

如下是出自 25個你不得不知道的數組reduce高級用法 這篇文章的數組分割方法，乍眼一看可能不太好理解，我稍微改了下代碼結並加了註釋便於理解。原始代碼以下：

function chunk(arr = [], size = 1) {
    return arr.length ? arr.reduce((t, v) => (t[t.length - 1].length === size ? t.push([v]) : t[t.length - 1].push(v), t), [[]]) : [];
}

調整後的代碼：

function chunk2(arr = [], size = 1) {
  if (arr.length) {
    arr = arr.reduce((t, v) => {
    /**
       * t的初始值爲[[]]，這時t.length爲1，因此t[t.length - 1]爲[]，t[t.length - 1].length爲0，將v push到t[0]中，此時t = [[73]]
       * 這時t.length仍是爲1，因此t[t.length - 1]爲[73]，t[t.length - 1].length爲1，將v push到t[0]中，此時t = [[73, 343]]
       * 直到t[0]有四個數據後[[73, 343, "g", 56]]
       * 這時t.length爲1，因此t[t.length - 1]爲[73, 343, "g", 56]，t[t.length - 1].length爲4，將[v] push到t中，此時t = [[73, 343, "g", 56]['j']]，以此類推
      */
      t[t.length - 1].length === size ? t.push([v]) : t[t.length - 1].push(v)
      return t
    }, [[]])
  }
  return arr
}
// [[73, 343, "g", 56], ["j", 10, 32, 43], [90, "z", 9, 4], [28, "z", 58, 78], ["h"]]

數組轉對象

Object.assign

const sourceArray = ['CSS世界', '活着', '資本論']
function toObject(sourceArray) {
  return Object.assign({}, sourceArray)
}
const result = toObject(sourceArray)
// {0: "CSS世界", 1: "活着", 2: "資本論"}

reduce

const books = [
  { name: "CSS世界", author: "張鑫旭", price: 69, serialNumber: 'ISBN: 97871151759' },
  { name: "活着", author: "餘華", price: 17.5, serialNumber: 'I247.57/105' },
  { name: "資本論", author: "馬克思", price: 75, serialNumber: '9787010041155' }
];
function toObject(books) {
  return books.reduce((pre, cur) => {
    /**
     * ...rest用於獲取剩餘的解構數據
     * 如：{ name: "CSS世界", author: "張鑫旭", price: 69 }
    */
    const { serialNumber, ...rest } = cur;
    pre[serialNumber] = rest;
    return pre;
  }, {});
}
const map = toObject(books)
/**
 * {
 *   ISBN: 97871151759: {name: "CSS世界", author: "張鑫旭", price: 69}, 
 *   I247.57/105: {name: "活着", author: "餘華", price: 17.5}, 
 *   9787010041155: {name: "資本論", author: "馬克思", price: 75}
 * }
*/

參考文章

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程