我在近期求職中遇到的前端面試問題及其解法

在今天的文章中，我想跟大家聊聊自己最近在 COVID-19 疫情下的求職經歷中遇到的問題。另外，我還把自己的準備工作整理成一份資源清單供大家參考。

這些問題主要分爲以下幾個小節。

• JS
• 編碼
• 應用題
• 雜項

這裏提出的解法並不能直接使用，只代表我個人的思維方式與粗略概念。大家不妨嘗試用自己的辦法解決這些問題。

JS

1) 給定一個深度爲 n 的多維數組，將其展平。展平後，將其作爲 array 實例上的可用方法。

解：

/**
* [1,2,[3,4]] -> [1,2,3,4]
*/

let arr = [1,2,[3,4, [5,6, [7, [8, 9, 10]]]]]

function flatten(arr) {
    return arr.reduce(function(acc, next){
        let isArray = Array.isArray(next)
        return acc.concat(isArray ? flatten(next) : next)
    }, [])
}

if (!Array.prototype.flatten) {
    Array.prototype.flatten = function() {
        return flatten(this)
    }
}
console.log(arr.flatten());

2) 從零開始創建一項 promise。

解：

class CustomPromise {
  state = "PENDING"
  value = undefined
  thenCallbacks = []
  errorCallbacks = []

  constructor(action) {
    action(this.resolver.bind(this), this.reject.bind(this))
  }

  resolver(value) {
    this.state = "RESOLVED"
    this.value = value
    this.thenCallbacks.forEach((callback) => {
      callback(this.value)
    })
  }

  reject(value) {
    this.state = "REJECTED"
    this.value = value
    this.errorCallbacks.forEach((callback) => {
      callback(this.value)
    })
  }

  then(callback) {
    this.thenCallbacks.push(callback)
    return this 
  }

  catch (callback) {
    this.errorCallbacks.push(callback)
    return this 
  }
}

let promise = new CustomPromise((resolver, reject) => {
  setTimeout(() => {
    const rand = Math.ceil(Math.random(1 * 1 + 6) * 6)
    if (rand > 2) {
      resolver("Success")
    } else {
      reject("Error")
    }
  }, 1000)
})

promise
  .then(function(response){
    console.log(response)
  })
  .catch(function(error){
    console.log(error)
  })

3) 按平均評分及名稱對電影列表進行過濾。按電影對象內的任意字段對過濾後的列表進行排序。

解：

// O(M)
function getMovies() {
  return []; // [{id, name, year}]
}

// O(R)
function getRatings() {
  return []; // [{id, movie_id, rating}] 0 <= rating <= 10 // e.g 9.3
}

/**
 * minAvgRating ->
 * avgRating >= minAvgRating
 *
 * sort ->
 * name -> ascending order movies by name
 * -name -> descending
 *
 * avgRating
 *
 *
 * search ->
 * 'ave' -> 'Avengers'
 * 'avengers' -> 'Avengers'
 * 'AvengersInfinitywar' -> 'Avengers'
 */
const toLower = str => str.toLocaleLowerCase()

const getAvrgRating = (movie, movingWithRatings) => {
  let count = 0;
  return movingWithRatings.reduce((acc, value, index) => {
    const movieMatch = movie.id === value.movie_id
    if (movieMatch) {
      acc+=value.rating
      count++
    }
    if (index === movingWithRatings.length - 1) {
      acc = acc/count
    }
    return acc
  }, 0)
}

const isSubString = (str1, str2) => {
  str1 = toLower(str1.split(" ").join(""))
  str2 = toLower(str2.split(" ").join(""))
  if (str1.length > str2.length) {
    return str1.startWith(str2)
  } else {
    return str2.startWith(str1)
  }
}

const moviesList = getMovies()
const movingWithRatings = getRatings();
function queryMovies({ search, sort, minAvgRating }) {
  let filteredMovies = movingWithRatings.filter(movie => getAvrgRating(movie, movingWithRatings) >= minAvgRating);
  filteredMovies = filteredMovies.map(movie => moviesList.filter(listItem => listItem.id === movie.movie_id).pop())
  filteredMovies = filteredMovies.filter(movie => isSubString(toLower(movie.name), toLower(search)))
  filteredMovies = filteredMovies.sort((a, b) => {
    const isDescending = sort[0] === '-' ? true : false
    let sortCopy = isDescending ? sort.slice(1) : sort
    const value1 = a[sortCopy]
    const value2 = b[sortCopy]
    if (isDescending) {
      return value1 > value2 ? -1 : 1
    }else {
      return value1 < value2 ? -1 : 1
    }
  })
  filteredMovies = filteredMovies.map(movie => ({
    ...movie,
    avgRating: movingWithRatings.filter(ratedMovie => ratedMovie.movie_id === movie.id)[0].rating
  }))
  return filteredMovies
}

4) 給定一個用於獲取所有 posts 與 comments 的端點 URL。解決以下問題：

將所有評論（comments）映射至其所歸屬的帖子（posts），映射後的結果數據應具有以下結構。

解：

//service.js
const POSTS_URL = `https://jsonplaceholder.typicode.com/posts`;
const COMMENTS_URL = `https://jsonplaceholder.typicode.com/comments`;

export const fetchAllPosts = () => {
  return fetch(POSTS_URL).then(res => res.json());
};

export const fetchAllComments = () => {
  return fetch(COMMENTS_URL).then(res => res.json());
};


import { fetchAllPosts, fetchAllComments } from "./service";



const fetchData = async () => {
  const [posts, comments] = await Promise.all([
    fetchAllPosts(),
    fetchAllComments()
  ]);

  const grabAllCommentsForPost = postId =>
    comments.filter(comment => comment.postId === postId);

  const mappedPostWithComment = posts.reduce((acc, post) => {
    const allComments = grabAllCommentsForPost(post.id);
    acc[post.id] = allComments;
    return acc;
  }, {});

  console.log("mappedPostWithComment ", mappedPostWithComment);
};

fetchData();

5) 在字符串實例上實現方法 getHashCode。此方法應適用於所有字符串類型。

解：

let s1 = "sample"

if (!String.prototype.getHashCode) {
  String.prototype.getHashCode = function(){
    console.log('String instance ', this)
    return this
  }
}

6) 以下表達式的計算結果是什麼？

1+true
    true+true
    ‘1’+true
    ‘2’ > ’3’
    ‘two’>’three’

解：

2
2
1true
false
true

7) 實現 bind 與 reduce。

解：

//bind
if (!Function.prototype.bind) {
  Function.prototype.bind = function(...arg){
    const func = this
    const context = arg[0]
    const params = arg.slice(1)
    return function(...innerParam) {
      func.apply(context, [...params, ...innerParam])
    }
  }
}

//reduce
Array.prototype.reduce = function(func, initState) {
  const arr = this
  const callback = func
  let init = initState

  arr.forEach(function(value, index){
      init=callback(init, value)
  })
  return init
}

8) 實現 debounce（防抖）函數。

解：

const debounce = function(func, interval) {
  let timerId;
  return function(e){
    clearTimeout(timerId)
    timerId = setTimeout(function(){
      func.apply()
    }, interval)
  }
}
debounce(apiCall, 3000)

9) 實現 throttling（節流）函數。

解：

const throttle = (callback, interval) => {
  let timerId;
  let allowEvents = true;

  return function() {
    let context = this;
    let args = arguments;

    if (allowEvents) {
      callback.apply(context, args)
      allowEvents = false;
      timerId = setTimeOut(function(){
        allowEvents = true
      }, interval)
    }
  }
}

10) 設計一套 API 輪詢機制，以固定時間間隔調用該 API。此 API 屬於股票 API，可獲取最新股票價格。在提取完畢後，將結果呈現在 UI 當中。

這個問題的解主要偏重設計而非代碼，屬於典型的開放式問題。

解：

//With setInterval, throttling and flags
setInterval=>Endpoint=>Render

//with the inversion of control
//Endpoint=>Render=>setTimeout=>Endpoint=>Render=>SetTimeout...

11) 將以下給出的、基於類的繼承代碼轉換爲 ES5 代碼。

class Parent(name){
  constructor(name) {
    this.name=name
  }

  getName(){return this.name}
}

class Children extends Parent {
  constructor(props){
    super(props)
  }
}

解：

function Parent(name) {
  this.name = name
}

Parent.prototype.getName = function() {
  return this.name
}

function Children(name){
  Parent.call(this, name)
}

Children.prototype = new Parent()

12) 以下代碼的計算結果是什麼？

//Q.1
var x = 1;
var y = x;

x = 0;
console.log(x, y);

//Q.2
var x = [1];
var y = x;

x = [];
console.log(x,y);

//Q.3
function Abc() { console.log(this); };
Abc()
new Abc();

//Q.4
var x = 1;
var obj = {
  x: 2,
  getX: function () {
    return console.log(this.x);
  }
};

obj.getX()
let a = obj.getX
console.log(a)

//Q.5
//How to get the a to log 2 in the above code

//Q.6
console.log("A");
setTimeout(() => console.log("B"), 0);
setTimeout(() => console.log("C"), 0);
console.log("D");

//Q.7
setTimeout(function() {
  console.log("A");
}, 0);
Promise.resolve().then(function() {
  console.log("B");
}).then(function() {
  console.log("C");
});

console.log("D");

//Q.8
let obj1 = {
  a:1,
  b:2
}

function mutate(obj) {
  obj = {a:4, c:6}
}

console.log(obj1)
mutate(obj1)
console.log(obj1)

解：

//A.1
0 1

//A.2
[] [1]

//A.3
window object is logged

//A.4
logs 2 and 1

//A.5
a.call(obj);

//A.6
A, D, B , C

//A.7
D, B, C, A

//A.8
{ a: 1, b: 2 }
{ a: 1, b: 2 }

13) 給定一個數字數組，請執行以下操作：

const list = [1,2,3,4,5,6,7,8]
const filteredArray = list.filter(between(3, 6)) // [4,5]

解：

function between(start, end) {
  return function (value,index) {
    return value>start && value<end
  }
}

算法

1) 考慮以下級數：

A := 1
B := A*2 + 2
C := B*2 + 3 and so on...

請編寫一款程序，以：

給出與給定字母相對應的數字；

給定一個類似“GREP”的字母字符串，請結合以上級數，計算與該字符串中所有字母相對應的數字之和（即 G+R+E+P）；

給定一個較大數（可大至標準 32 位整數），請找到與之對應的最短字母字符串。

您可能會在最後一題中使用貪心算法。請根據實際情況，在必要時計算與字母相對應的數字值，請勿事先進行預計算並將結果存儲在數據結構當中。

解：

//A = 1
//B = A*2 +2
//C = B*2+ 3
//D = C*2+ 3

var genCharArray = function(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}

var charMap = {};
var charArray = genCharArray('a', 'z');

charArray.forEach(function(char, index){
    charMap[char] = Number(index + 1);
});


var charSequence = function(char){
    if(typeof char==="string"){
        char = charMap[char];
    }
    if(char==1){
        return 1;
    }else{
        return char + 2 * charSequence(char-1);
    }
}

var input = process.argv[2];

if(input.length===1){
    console.log(charSequence(charMap[input]));
}else if(input.length>1){
    var charTotalSequence = input.split("").reduce(function(acc, curr){
        return acc + charSequence(charMap[curr]);
    },0);
    console.log(charTotalSequence);
}

2) 給定一個數組，請找到另一結對數組，保證兩個數組的加和爲特定數。

解：

let nums = [2, 7, 10, 1, 11, 15, 9]
let target = 11
let numsMap = new Map()
let pairs = nums.reduce((acc, num) => {
  let numToFind = target - num
  if (numsMap.get(numToFind)) {
    return [...acc, [num, numToFind]]
  } else {
    numsMap.set(num, true)
    return [...acc]
  }
}, [])

console.log("Pairs ", pairs)

3) 在給定數組中找到局部最大值。所謂局部最大值，是指大於其左右相鄰數的元素。這裏我給出一個 O(n) 解，無需優化即可簡單解決這個問題。

解：

let x = [1, 2, 3, 5, 4] //Outputs: 5
if x.length == 1 return x[0]
else
 let i = 1
 for(;i<x.length-1;i++){
  if x[i-1]<x[i] and x[i] > x[i+1] return x[i]
 }
 if x.length - 1 == i return x[i]

4) 對某一數組順時針旋轉 90 度，旋轉後的數組即爲解。

leetcode：

https://leetcode.com/problems/rotate-image/

解：

[
 [1, 2, 3],
 [4, 5, 6],
 [7, 8, 9]
]
//The solution is to first take the transpose of the matrix.
//After taking the transpose the resulting matrix is as follows.
[
 [1, 4, 7],
 [2, 5, 8],
 [3, 6, 9]
]
//After the transpose step, All we have to do is to reverse the array @ each entry.
//The resulting matrix after after reversal is as follows.
[
 [7, 4, 1],
 [8, 5, 2],
 [9, 6, 3]
]
//The above matrix is rotated 90 degree

5) 對於給定數組，請找到數組中加和等於給定目標的三個元素。

解：

let x = [1, 2, 3, 4, 5]
let target = 7
let found = []

const twoPointer = (l ,r, current) => {
  while(l<r){
    const totalSum = current + x[l] + x[r]
    if (totalSum === target) {
      found.push([current, x[l], x[r]])
      return
    } else if (totalSum > target) {
      r--
    } else {
      l++
    }
  }
}

const threeSum = (x, target) => {
    for (let i=0;i<x.length;i++) {
      const current = x[i];
      let leftPointer = i+1
      let rightPointer = x.length - 1

      if (current+x[leftPointer]+x[rightPointer] === target) {
        found.push([current, x[leftPointer], x[rightPointer]])
      } else {
        twoPointer(leftPointer, rightPointer, current)
      }
  }
  return found
}

6) G 給定一個字符串與一個整數 k，找到所有不同字符恰好出現 k 次的子字符串數。

https://www.geeksforgeeks.org/number-substrings-count-character-k/

解：

const subStrHasSameCharCount = (str, startIndex, endIndex, totalHop) => {
  let charMap = {}
  for (let k=startIndex;k<endIndex;k++) {
    let currentChar = str[k]
    if (charMap[currentChar]) {
      charMap[currentChar]++
    } else {
      charMap[currentChar] = 1
    }
  }
  let totalCount = Object.values(charMap).length > 0
  return totalCount ? Object.values(charMap).every(item => item == totalHop) : false
}


const characterWithCountK = (str, k) => {
  if (k == 0) return ''
  let count = 0
  let initialHop = k
  while (initialHop < str.length) {
    for (let j=0;j<str.length;j++) {
      let startIndex = j
      let endIndex = j + initialHop
      if(endIndex > str.length) continue
      count = subStrHasSameCharCount(str, startIndex, endIndex, k)
        ? count + 1: count
    }
    initialHop+=k
  }
  count = subStrHasSameCharCount(str, 0, initialHop, k)
        ? count + 1: count
  return count
}


let str = 'aabbcc'
let k = 2
console.log(characterWithCountK(str, k))

7) 給定兩個輸入字符串 s1 與 s2，其中包含來自 a 到 z 且以不同順序排列的字符，請證明能否在 s1 中通過字符重新排列獲得等於 s2 的字符串。

解：

let s1 = 'dadbcbc'
let s2 = 'ccbbdad'
let charMap = {}

const canBeRearranged = (s1, s2) => {
  if(s1.length!==s2.length){
    return false
  }
  for(let i=0;i<s1.length;i++){
    const charFromString1 = s1[i]
    const charFromString2 = s2[i]
    if(charFromString1 in charMap){
      charMap[charFromString1]++
    } else {
      charMap[charFromString1] = 1
    }
    if(charFromString2 in charMap){
      charMap[charFromString2]--
    } else {
      charMap[charFromString2] = -1
    }
  }
  for(let x in charMap){
    if (charMap[x]!==0){
      return false
    }
  }
  return true
}

canBeRearranged(s1, s2)

8) 給定一個數組或可變輸入大小，編寫一項函數以實現數組洗牌。

解：

const swap = (index1, index2, arr) => {
  let temp = arr[index1]
  arr[index1] = arr[index2]
  arr[index2] = temp
}

const shuffle = (arr) => {
  let totalLength = arr.length
  while(totalLength > 0) {
    let random = Math.floor(Math.random() * totalLength)
    totalLength--
    swap(totalLength, random, arr)
  }
  return arr
}


let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr = shuffle(arr)

9) 計算無限嘗試的多維數組中，所有元素的加和。

解：

let arr = [4, 5, 7, 8, [5, 7, 9, [3, 5, 7]]]
let sum = 0

const calculateSum = (arr) => {
  arr.reduce(function(acc, currentVal) {
    const isEntryArray = Array.isArray(currentVal)
    if (isEntryArray) {
      return acc.concat(calculateSum(currentVal))
    } else {
      sum+=currentVal
      return acc.concat(currentVal)
    }
  }, [])
}
calculateSum(arr)
console.log(sum)

10) 展平一個表示變化債務的嵌套對象。

解：

const obj = {
  level1: {
    level2: {
      level3: {
        more: 'stuff',
        other: 'otherz',
        level4: {
          the: 'end',
        },
      },
    },
    level2still: {
      last: 'one',
    },
    am: 'bored',
  },
  more: 'what',
  ipsum: {
    lorem: 'latin',
  },
};

var removeNesting = function(obj, parent){
  for (let key in obj){
    if (typeof obj[key] === "object") {
      removeNesting(obj[key], parent+"."+key)
    } else {
      flattenedObj[parent+'.'+key] = obj[key]
    }
  }
}

let flattenedObj = {}
const sample = removeNesting(obj, "");
console.log(flattenedObj);

11) 給定一項 json 輸入，其中每個條目代表一個目錄，而各個目錄又可以擁有自己的嵌套條目。請據此創建一套目錄結構。

解：

https://jsbin.com/gajiweq/1/edit?js,console

12) 給定一個對象數組，其中包含員工數據列表，以保證每位員工都擁有對應的報告對象列表。使用此信息以構建員工層級結構。

解：

const employeesData = [{
  id: 2,
  name: 'Abhishek (CTO)',
  reportees: [6]
}, {
  id: 3,
  name: 'Abhiram (COO)',
  reportees: []
}, {
  id: 6,
  name: 'Abhimanyu (Engineering Manager)',
  reportees: [9]
}, {
  id: 9,
  name: 'Abhinav (Senior Engineer)',
  reportees: []
}, {
  id: 10,
  name: 'Abhijeet (CEO)',
  reportees: [2, 3],
}];

/*
A (CEO)
----B (CTO)
--------D (Engineering Manager)
------------E (Senior Software Engineer)
----C (COO)
*/

const findCeo = (currentEmp) => {
  let parentEmployee = employeesData.filter(emp => emp.reportees.indexOf(currentEmp.id) > -1)
  if (parentEmployee && parentEmployee.length > 0) {
    return findCeo(parentEmployee[0])
  } else {
    return currentEmp
  }
}

const logHierarchy = (currentEmp, indent) => {
  console.log("-".repeat(indent) + currentEmp.name)
  indent+=4;
  for(let i=0;i <currentEmp.reportees.length;i++) {
    let employee = employeesData.filter(emp => emp.id === currentEmp.reportees[i])
    logHierarchy(employee[0], indent)
  }
}

const traverse = (employee) => {
  let ceo = findCeo(employee)
  logHierarchy(ceo, 0)
}

traverse(employeesData[0])

13) 以螺旋形式輸出給定的數組。

const inputMatrix = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10],
  [11,12,13,14,15],
  [16,17,18,19,20],
]

const exprectOutput = [1,2,3,4,5,10,15,20,19,18,17,16,11,6,7,8,9,14,13,12]

解：

function spiralParser(inputMatrix){
  const output = [];
  let rows = inputMatrix.length;
  let cols = rows > 0 ? inputMatrix[0].length : 0;

  //singleEmptyRow => Edge case 1 //[]
  if (rows === 0) {
    return []
  }

  if (rows === 1) {
    //singleElementRowNoCol => Edge case 2 //[[]]
    if (cols === 0) {
      return []
    } else if (cols === 1){
      //singleElementRow => Edge case 3 //[[1]]
      output.push(inputMatrix[0][0])
      return output
    }
  }

  let top = 0;
  let bottom = rows - 1;
  let left = 0;
  let right = cols - 1;
  let direction = 0;
  //0 => left->right
  //1 => top->bottom
  //2 => right->left
  //3 => bottom->top

  while(left <= right && top <= bottom) {
    if(direction === 0) {
      //left->right
      for (let i=left; i<=right;i++) {
        output.push(inputMatrix[top][i])
      }
      top++;
    } else if (direction === 1) {
      //top->bottom
      for (let i=top; i<=bottom;i++) {
        output.push(inputMatrix[i][right])
      }
      right--
    } else if (direction === 2) {
      //right->left
      for (let i=right; i>=left;i--) {
        output.push(inputMatrix[bottom][i])
      }
      bottom--
    } else if (direction === 3) {
      //bottom->top
      for (let i=bottom; i>=top;i--) {
        output.push(inputMatrix[i][left])
      }
      left++
    }
    direction = (direction + 1) % 4
  }
  return output;
}

console.log(spiralParser(inputMatrix2))

14) 在給定字符串中找到最大的連續重複字符。

let str = 'bbbaaaaccadd'; // 最大重複字符數爲 4

解：

//sudo code
maxNow = if input string length is 1 or greater than 1 ? 1 : 0
maxOverall = if input string length is 1 or greater than 1 ? 1 : 0

for char in inputString starting from index 1
  if char equals prevChar
    maxNow++
    maxOverall = max(maxOverall, maxNow)
  else if char not equals prevChar
    maxNow = 1

15) 給定一個長度可變的輸入數組，請在數組末尾將所有的數字 2 劃分開。

let inputArr = [2,9,1,5,2,3,1,2,7,4,3,8,29,2,4,6,54,32,2,100]
//ouput => [9,1,5,3,1,7,4,3,8,29,4,6,54,32,100,2,2,2,2,2]

解：

let slowRunner = 0

for (let fastRunner=0;fastRunner<arr.length;fastRunner++) {
  if (arr[fastRunner]!==2 && arr[slow] == 2) {
    [arr[fastRunner], arr[slow]] = [arr[slow], arr[fastRunner]]
    slowRunner++
  }
}

16) 反轉一個鏈接列表。

//Input = 1 -> 2 -> 3 -> 4 -> 5 -> 6
//Output = 1 <- 2 <- 3 <- 4 <- 5 <- 6

解：

//sudo code
let current = head
let prev = null
let next = null

while(current) {
  next = current.next
  current.next = prev
  prev = current
  current = next
}

17) 使用迭代對預排序樹進行遍歷（無遞歸）。

解：

//sudo code
const preorder = (root) => {
  let stack = []
  stack.push(root)

  while(there is element in stack) {
    let current = stack.pop()
    console.log(current.value)
    if (current.right) {
      stack.push(current.right)
    }
    if (current.left) {
      stack.push(current.left)
    }
  }
}

應用題

1) 設計一套停車場系統，要求滿足以下需求：

• 最多可容納 N 輛車。實現對泊車位的可用性管理。
• 保留車輛的出入記錄。
• 自動工單系統會自動對每輛出入汽車進行登記，包括以下詳細信息：註冊號、顏色、已分配的停車位。

這套系統應支持查詢以下結果：

• 查詢所有特定顏色汽車的註冊號。
• 使用特定註冊號查詢該車輛的停車位。
• 查詢特定顏色汽車的停車位。
• 列出當前停車場內所有可用空位的列表。

要求：

• 可以使用任何代碼結構：Classes/Structs。
• 您的解法應具備可擴展性，用以支持未來更多用例。

低代碼設計原則：

• 代碼模塊化。
• 命名約定。
• SOLID 原則。

解：

https://github.com/devAbhijeet/parking-lot-design-js

2) 創建一款 react 組件 Ping，用於對特定 URL 執行 API 調用。如果 API 調用返回的狀態代碼爲 200，則表示用戶在線。如果 API 調用返回的狀態代碼不是 200，則表示用戶處於脫機狀態。

嘗試更改開發工具網絡頁面中的 status 表單。

解：

https://codesandbox.io/s/admiring-davinci-xnjef

3) 使用 json 輸入創建一款動態表單構建器。表單可以根據 ID 進行分組，且每個組中可以包含一個嵌套組。

解：

https://codesandbox.io/s/great-noyce-75kup

4) 以純 JavaScript 代碼創建一份精簡 excel 表格，該表格應支持對行與列的添加及刪除功能。需要在 40 分鐘內完成。

解：

https://codesandbox.io/s/smoosh-thunder-krv8m

5) 請製作一個搜索輸入框，以供在用戶列表中執行搜索。

用戶對象中包含以下字段：

id: 一條唯一 id
name: 用戶名
items: 用戶訂購商品清單
address: 用戶地址
pincode: 用戶地址郵政編碼

• 您的搜索方案必須涵蓋所有字段。
• 搜索結果以用戶卡列表的形式顯示。

總結

• 在搜索輸入框內鍵入內容後，其會打開搜索結果列表。您的解法可以僅實現字符串匹配搜索。
• 用戶卡列表可以通過鍵盤或鼠標進行導航。如果同時使用鼠標與鍵盤進行導航，則每次只突出顯示一張用戶卡（如果鼠標懸念在列表上，則鍵盤優先；如果未使用鍵盤操作，則鼠標優先）。
• 其行爲類似於 YouTube 網站的搜索方式。
• 當未找到搜索結果時，顯示空白卡。
• 卡列表應支持滾動。
• 突出顯示的卡片（通過鍵盤 / 鼠標）將自動滾動至視圖區域內。

解：

https://codesandbox.io/s/silly-moon-31m7u

雜項

1) 您如何設計前端應用程序的架構？

2) 實現懶加載

3) 服務器端渲染是什麼？

4) 如何在生產環境中部署一款 React app。

5) 服務工作節點 /Web 工作節點是什麼。

6) 如何優化 Web 應用程序並提高其性能表現。

7) 請嘗試解釋不同類型的客戶端緩存策略。

8) CORS 是什麼。

9) React 中有哪些高階組件。

10) Redux 中的連接功能如何起效。

11) React 中的純組件是什麼。

資源

https://github.com/devAbhijeet/learning-resources

英文原文

All front end Interview questions asked during my recent job hunt