JavaScript経典面接問題(一)

一:記憶化フィボナッチ関数(Memoization)
テーマ:フィボナッチの数列は以下のような数列を指します.1, 1, 2, 3, 5, 8, 13, ....つまり、n番目の数は、数列の前の2つによって加算されます.f(n)=f(n-1)+f(n-2)
fibonacci関数を完成してください.nをパラメータとして受け入れて、数列のn番目の数を取得できます.例えば、

fibonacci(1) // => 1
fibonacci(2) // => 1
fibonacci(3) // => 2

…
テストプログラムはフィボナッチの数列を順番に取得します.タイムアウトしないように注意してください.グローバル変数を追加しないでください.
本題の出所:「JavaScript言語の精髄」
答え:

const fibonacci = ((memo = [0, 1]) => {
  const fib = (n) => {
    let result = memo[n]
    if (typeof result !== "number") {
      result = fib(n - 1) + fib(n - 2)
      memo[n] = result
    }
    return result
  }
  return fib
})()

二:解析文字列
問題:extractistr関数を完成したら、1つの文字列の中のすべての文字列を解析できます.extractStr('My name is:Jerry. My age is:12.') // => ['Jerry', '12']との間には含まれていません.つまり、もし:abc..,だったら［abc］に戻ります.
(本題の出所:「JavaScript Cookbook」)答え:

const extractStr = (str) => {
  const ret = str.match(/:([^:\.])*?\./g) || []
  return ret.map((subStr) => subStr.replace(/[:\.]/g, '')) 
}

三:safeGet
テーマ:あるオブジェクトの深いレベルにアクセスする必要がありますが、このオブジェクトの属性が存在しないとエラーが発生します.

var data = { a: { b: { c: 'ScriptOJ' } } }
data.a.b.c // => scriptoj
data.a.b.c.d // =>   ，      
console.log('ScriptOJ') // =>      

safeGet関数を完成してください.無限多レベルのデータを安全に取得できます.データが存在しないとエラーが発生しません.undefinedに戻ります.

var data = { a: { b: { c: 'ScriptOJ' } } }
safeGet(data, 'a.b.c') // => scriptoj
safeGet(data, 'a.b.c.d') // =>    undefined
safeGet(data, 'a.b.c.d.e.f.g') // =>    undefined
console.log('ScriptOJ') // =>    ScriptOJ

答え:

const safeGet = (o, path) => {
  try {
    return path.split('.').reduce((o, k) => o[k], o)
  } catch (e) {
    return void 666
  }
}

二つの長方形が重なっているかどうかを判断します.
テーマ:オブジェクトのデータで長方形の位置とサイズを表します.

{
  x: 100,
  y: 100,
  width: 150,
  height: 250
}

幅150の高さ250の長方形がページ上の(100,100)位置を表しています.
関数isOverlapを完成してください.二つの長方形をパラメータとして受け入れて、この二つの長方形がページ上で重なっているかどうかを判断します.たとえば:

const rect1 = { x: 100, y: 100, width: 100, height: 100 }
const rect2 = { x: 150, y: 150, width: 100, height: 100 }
isOverlap(rect1, rect2) // => true

答え:

//   ：http://www.geeksforgeeks.org/find-two-rectangles-overlap/
const isOverlap = (rect1, rect2) => {
  const l1 = { x: rect1.x, y: rect1.y }
  const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }
  const l2 = { x: rect2.x, y: rect2.y }
  const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }
  if (
    l1.x > r2.x ||
    l2.x > r1.x ||
    l1.y > r2.y ||
    l2.y > r1.y
  ) return false
  return true
}

五:spacify
テーマ:文字列に原型の方法spacifyを追加してください.文字列の各文字列にスペースの間隔を追加できます."ScriptOJ".spacify() // => "S c r i p t O J"(本題の出所:http://blog.sourcing.io/interview-questions)
答え:

String.prototype.spacify = function () {
  return this.split('').join(' ')
}

六:下付きで挿入する
タイトル:現在は文字列データを保存する配列があります.['item1', 'item2', 'item3', 'item4', 'item5']別の行列があります.オブジェクトのセットを保存します.

[
  { content: 'section1', index: 0 },
  { content: 'section2', index: 2 }
]

各オブジェクトは、元の配列のindex座標にcontentデータを挿入することを表します.

   0      1      2      3      4
 item1  itme2  item3  item4  item5
^             ^ 
|             |

セレクション1
最後の結果は、「セレクション1」「アイテム1」「アイテム2」「アクション2」「アイテム3」「アイテム4」「アイテム5」です.
inject Sections関数を完成してください.上記の機能を達成できます.

injectSections(
  ['item1', 'item2', 'item3', 'item4', 'item5'],
  [
    { content: 'section1', index: 0 },
    { content: 'section2', index: 2 }
  ]
) // => ['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5']

答え:

const injectSections = (items, sections) => {
  /*               map    */
  const sectionsMap = new Map(sections.map(({ index, content }) => [index, content]))
  /*       ，      push         */
  return items.reduce((ret, item, index) => {
    /* push        map      ，     push map       */
    if (sectionsMap.has(index)) ret.push(sectionsMap.get(index))
    /*   push       */
    ret.push(item)
    return ret
  }, [])
}

七:配列平滑(二)
題目:JavaScript generator関数を編纂し、数字だけを含む多次元配列を受諾して、一つのローズマリーを返します.撮影後の結果を遍歴できます.たとえば:

const numbers = flatten2([1, [[2], 3, 4], 5])
numbers.next().value // => 1
numbers.next().value // => 2
numbers.next().value // => 3
numbers.next().value // => 4
numbers.next().value // => 5

答え:

function *flatten2(arr) {
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i]
    /* yield*               */
    Array.isArray(item) ? yield* flatten2(item) : yield item;
  }
}

/*   flatten2     flatten        */
// const flatten = (arr) => [...flatten2(arr)]

二つのセットが同じかどうかを判断します.
テーマ:isSameSet関数を完成しました.二つのSetオブジェクトをパラメータとして受け入れました.true/falseに戻ってください.この二つのセットの内容が完全に一致しているかどうか、例えば、

const a = {}
const b = 1
const c = 'ScriptOJ'

const set1 = new Set([a, b, c])
const set2 = new Set([a, c, b])

isSameSet(set1, set2) // => true

答え:

/*            sort，   sort     。   Set             
 *    、  、  ，            ，           
 *
 *                   ：
 * A = B      A   B       B   A    。
 *
 *               、map             。
 */

const isSameSet = (s1, s2) => {
  /*           ，                   */
  const isSame = (a, b) => {
    const values = [...a]
    for (let val of values) {
      /*       ，          */
      if (!b.has(val)) return false
    }
    return true
  }
  /* a    b，b    a，         */
  return isSame(s1, s2) && isSame(s2, s1)
}

/* By     */
// const isSameSet = (set1, set2) =>
//   [...set1].every((o) => set2.has(o)) &&
//   [...set2].every((o) => set1.has(o))

九:配列の重さ
テーマ:関数unique(arr)を作成し、配列内の重複要素を除去する配列を返します.たとえば:

unique([0, 1, 2, 2, 3, 3, 4]) // => [0, 1, 2, 3, 4]
unique([0, 1, '1', '1', 2]) // => [0, 1, '1', 2]

答え:const unique = (arr) => [...new Set(arr)]十:フォントの強調関数
テーマ:highlight関数を完成してください.テンプレート文字列の挿入内容を置換して、ドキュメントを挿入してから赤い色を表示します.たとえば:

const yourName = 'ScriptOJ'
const myName = 'Jerry'
document.body.innerHTML = highlight`Hello, ${yourName}. I am ${myName}.`

上記の例のページは次のように表示されます.0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5highlight関数の作成を完了してください.
答え:css:

.highlight {
  color: red;
}

js:

//      Tagged template literals    
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const highlight = (strings, ...args) => {
  return strings.reduce((str, cur, i) => {
    return `${str}${cur}${args[i] ? `${args[i]}` : '' }`
  }, '')
}

文章はネットから整理して、リンクを参考にします.https://scriptoj.com/problems?tag=JavaScript%E5%9F%BA%E7%A1%80
作者:いのりちゃん技術ブログ:https://www.jianshu.com/u/05f416aefbe1 90後のフロントエンドの妹は、プログラミングが好きで、運営が好きで、よく振り回されます.仕事の中で発生した技術問題を総括し、記録を堅持します.