前端面试题分享｜第02篇

1、封装函数，把stay-hungry-stay-foolish转化成“驼峰命名”的格式。

方案1：先把字符串切割成单词数组，再对数组中的单词进行“大写”转化处理，最后把数组再转化想要的驼峰字符串。

function stringToCamel(str) {
  var arr = str.split('-')
  arr.map((ele,idx)=>{
    // 不考虑第一个word
    if (idx!==0) {
      arr[idx] = ele[0].toUpperCase()+ele.slice(1)
    }
  })
  return arr.join('')
}

var str = 'stay-hungry-stay-foolish'
console.log(stringToCamel(str))

方案2：使用正则表达-(\w)对字符串进行全局匹配，再使用字符串的replace()方法把匹配成功的字符进行大写转化。

function stringToCamelOfReg(str) {
  var reg = /-(\w)/g    // ()表示子项

  // $0表示匹配成功的结果，$1表示子项
  return str.replace(reg, function($0, $1) {
    // 把子项转化成大写
    return $1.toUpperCase()
  })
}

var str = 'stay-hungry-stay-foolish'
console.log(stringToCamelOfReg(str))

2、封装函数，用于判断变量是 Array、Object、String，还是Number类型。

function getType(arg) {
  var type = Object.prototype.toString.call(arg)
  // '[object Array]'
  // '[object Object]'
  // '[object String]'
  // '[object Number]'
  return type.split(' ')[1].replace(']','')
}

console.log(getType('1212'))
console.log(getType(1212))
console.log(getType([1,2]))
console.log(getType({a:1,b:2}))

3、封装函数，把a=1&b=2&c=3查询字符串转化成k-v对象。

function queryToJSON(str) {
  var obj = {}
  str.split('&').map(ele=>{
    var arr = ele.split('=')
    obj[arr[0]] = arr[1]
  })
  return obj
}

var str = 'a=b&c=d&e=f'
console.log(queryToJSON(str))

4、下面代码运行，会输出什么？为什么？

for(var a=0; a<10; a++) {
  setTimeout(function() {
    console.log(a)
  }, 2000)
}

解析：上述代码运行，会在控制台上打印 10个10。因为var声明的变量，没有“块级作用域”的限制。定时器是异步的，定时器函数最终访问到的a=10。

5、下面代码运行，会输出什么？为什么？

for(let a=0; a<10; a++) {
  setTimeout(function() {
    console.log(a)
  }, 2000)
}

解析：上述代码运行，打依次打印0 1 2 3 4 5 6 7 8 9，因为使用let声明的变量存在“块级作用域”。每循环一次，定时器中都会访问一个具有块级作用域的a。

6、如下HTML代码，要求给列表绑定一个点击事件。当列表项被点击时，能够打印出a标签中的文本值，且不会触发a标签的跳转行为。

<ul id="nav">
  <li><a href="http://demo1.com">QQ</a></li>
  <li><a href="http://demo2.com">BaiDu</a></li>
  <li><a href="http://demo3.com">JD</a></li>
  <li><a href="http://demo4.com">TaoBao</a></li>
</ul>

代码实现如下：

document.getElementById('nav').onclick = function(event) {
  var e = event || window.event   // 处理浏览器兼容性
  e.preventDefault()     // 阻止a标签的默认事件
  console.log(e.target.innerText)    // 打印a标签中的文本值
}

本篇结束！！！