美文网首页让前端飞
一些js编程题

一些js编程题

作者: 始悔不悟 | 来源:发表于2017-09-27 21:47 被阅读0次

数组扁平化

例：
输入：[[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10]
输出：[ 1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10 ]

方法一

var newArr = []
function flatten(arr) {
  for (var i = 0; i < arr.length; i++) {
    if (Object.prototype.toString.call(arr[i]) === '[object Array]') {
      flatten(arr[i])
    } else {
      newArr.push(arr[i])
    }
  }
}

方法二

var flatten = function(array) {
  return array.reduce(function(previous, val) {
    if (Object.prototype.toString.call(val) !== '[object Array]') {
      return previous.push(val), previous
    }
    return Array.prototype.push.apply(previous, flatten(val)), previous
  }, [])
}

方法三

function flatten(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

实现 map

Array.prototype.myMap = function(callback) {
  var arr = []
  for (var i = 0; i < this.length; i++) {
    var item = callback(this[i], i)
    arr.push(item)
  }
  return arr
}

实现 bind

Function.prototype.myBind = function(context) {
  var self = this
  var args = [].slice.call(arguments, 1)
  return function() {
    return self.apply(context, args.concat(arguments))
  }
}

实现一个简单的字符串模版引擎

效果如下：

var str = 'hello, i am <%=user%>, from <%=location%>'
var compiled = template(str)
compiled({ user: 'zzw', location: 'ez' }) // 'hello, i am zzw, from ez'

代码：

function template(temp) {
  var temp = temp
  return function(obj) {
    var reg = /<%=(\w+)%>/
    var result
    console.log(temp)
    while ((result = reg.exec(temp))) {
      var key = result[1]
      var value = obj[key]
      temp = temp.replace(result[0], value)
    }
    return temp
  }
}

实现深克隆

function deepClone(obj) {
  var result,
    oClass = isClass(obj)
  //确定result的类型
  if (oClass === 'Object') {
    result = {}
  } else if (oClass === 'Array') {
    result = []
  } else {
    return obj
  }
  for (key in obj) {
    var copy = obj[key]
    if (isClass(copy) == 'Object' || isClass(copy) == 'Array') {
      result[key] = arguments.callee(copy) //递归调用
    } else {
      //如果为基本数据类型
      result[key] = obj[key]
    }
  }
  return result
}
//返回传递给他的任意对象的类
function isClass(o) {
  if (o === null) return 'Null'
  if (o === undefined) return 'Undefined'
  return Object.prototype.toString.call(o).slice(8, -1)
}

深克隆变形题目：将 json 字符串所有键名第一个首字母转为大写(考虑嵌套对象)

例：输入

{"hyKey":"myValue","q23":"123","arr":[1,2,3],"obj":{"name":"zzw"},"null":null}

输出:

{"HyKey":"myValue","Q23":"123","Arr":[1,2,3],"Obj":{"Name":"zzw"},"Null":null}

function toUpperCase1(obj) {
  var result,
    oClass = isClass(obj)
  if (oClass === 'Object') {
    result = {}
  } else if (oClass === 'Array') {
    result = []
  } else {
    return obj
  }
  for (var key in obj) {
    var copy = obj[key]
    if (isClass(copy) == 'Object' || isClass(copy) == 'Array') {
      result[key.slice(0, 1).toUpperCase() + key.slice(1)] = arguments.callee(
        copy
      )
    } else {
      result[key.slice(0, 1).toUpperCase() + key.slice(1)] = obj[key]
    }
  }
  return result
}

事件委托

实现：给定一个 ul 列表，里面有若干个 li 标签，li 里面也嵌套了若干标签，要求点击标签，弹出当前 li 在 ul 中的位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li><a href="#"><span>li-a-span</span></a></li>
        <a href="#">a</a>
        <li><a href="#"><span>li-a-span</span></a></li>
        <li><a href="#"><span>li-a-span</span></a></li>
        <li><a href="#"><span>li-a-span</span></a></li>
        <li><a href="#"><span>li-a-span</span></a></li>
    </ul>
</html>

var ul = document.getElementById('ul')
ul.addEventListener('click', function(e) {
  // 事件委托
  var e = e.target
  while (e.nodeName != 'LI') {
    e = e.parentNode
  }
  var childrenArr = [].slice.apply(ul.children)
  var liArr = childrenArr.filter(function(child) {
    if (child.nodeName == 'LI') {
      return child
    }
  })
  console.log(liArr.indexOf(e))
})

输出字符串中所有的叠词

输入： '晴川历历汉阳树，芳草萋萋鹦鹉洲'
输出： [ '历历', '萋萋' ]

function rw(str) {
  var result = []
  for (var i = 1; i < str.length; i++) {
    if (str[i] == str[i - 1]) {
      result.push(str.slice(i - 1, i + 1))
    }
  }
  return result
}

实现一个 add 函数

执行如下：
add(1, 2); // 3
add(1)(2); // 3
add(1, 2, 3)(1, 4)(2, 2)(1) // 16

function add() {
  var sum = 0
  var arr = [].slice.call(arguments)
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i]
  }
  var temp = function() {
    var arr = [].slice.call(arguments)
    for (var i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    return temp
  }

  temp.toString = function() {
    return sum
  }
  return temp
}

一个考察了 this/变量提升/构造函数返回值/运算符优先级的题目

function Foo() {
  getName = function() {
    alert(1)
  } // 没有var
  return this
}
Foo.getName = function() {
  alert(2)
}
Foo.prototype.getName = function() {
  alert(3)
}
var getName = function() {
  alert(4)
}
function getName() {
  alert(5)
}

/* 写出输出 */
Foo.getName() // 2
getName() // 4 => 变量提升
Foo().getName() // 1 => 函数调用this指向 window.getName()
getName() // 1
new Foo.getName() // 2 => new (Foo.getName)() 运算符优先级
new Foo().getName() // 3 => (new Foo()).getName() 构造函数返回值
new new Foo().getName() // 3 => new Foo().getName()

实现一个 LazyMan

// 实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)
// 输出: Hi! This is Hank!

LazyMan(“Hank”).sleep(10).eat(“dinner”)
// 输出:
// Hi! This is Hank!
// 等待10秒..
// Wake up after 10
// Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)
// 输出:
// Hi This is Hank!
// Eat dinner~
// Eat supper~
LazyMan(“Hank”).sleepFirst(5).eat(“supper”)
// 输出:
// 等待5秒
// Wake up after 5
// Hi This is Hank!
// Eat supper
以此类推。

答案

function _LazyMan(name) {
  const self = this
  this.taskqueue = []
  console.log(`Hi, This is ${name}`)
  setTimeout(() => {
    self.next()
  }, 0)
}

_LazyMan.prototype.next = function() {
  const fn = this.taskqueue.shift()
  fn && fn()
}

_LazyMan.prototype.sleep = function(time) {
  const self = this
  const fn = function() {
    setTimeout(() => {
      console.log(`Wake up after ${time}`)
      self.next()
    }, time * 1000)
  }
  this.taskqueue.push(fn)
  return this
}

_LazyMan.prototype.eat = function(name) {
  const self = this
  const fn = function() {
    console.log(`Eat ${name}`)
    self.next()
  }
  this.taskqueue.push(fn)
  return this
}

_LazyMan.prototype.sleepFirst = function(time) {
  const self = this
  const fn = function() {
    setTimeout(() => {
      console.log(`Wake up after ${time}`)
      self.next()
    }, time * 1000)
  }
  this.taskqueue.unshift(fn)
  return this
}

function LazyMan(name) {
  return new _LazyMan(name)
}

实现一个 compose 方法，要求如下

function fun1(ctx, next) {
  ctx.count++
  console.log(ctx.count)
  next()
}
function fun2(ctx, next) {
  ctx.count++
  console.log(ctx.count)
  setTimeout(function() {
    next()
  }, 1000)
}
function fun3(ctx, next) {
  ctx.count++
  console.log(ctx.count)
  next()
}
compose([fun1, fun2, fun3])({ count: 1 }) // 2 3 4

答案

function compose(arr) {
  return function(ctx) {
    const next = function() {
      const fn = arr.shift()
      fn && fn(ctx, next)
    }
    next()
  }
}

实现一个 composite 方法，要求如下

function add(a, b) {
  return a + b
}
function square(a) {
  return a * a
}
function plusOne(c) {
  return c + 1
}

var addSquareAndPlusOne = composite(add, square, plusOne)

console.log(addSquareAndPlusOne(1, 2)) // 10

答案:

function composite(...fns) {
  return function(...args) {
    return fns.reduce((accu, curr) => {
      return typeof accu === 'function' ? curr(accu(...args)) : curr(accu)
    })
  }
}

相关文章

  • 一些js编程题

    数组扁平化 例：输入：[[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12...

  • js编程题

    求一个数的百位，十位和个位的数字

  • JS编程题

    1. 写出下面这段代码的输出结果是？ 输出结果 : 25 20 20 25 解析： 本题考点两个： 1， 作用域；...

  • 常见JS编程题

    1、查找数组中重复元素 方法1:创建一个新的临时数组来保存数组中已有的元素 方法2: 使用indexOf判断数组元...

  • js 常见编程题

    写一个求和的函数sum，达到下面的效果 实现： 讲解：parseFloat的结果要么为一个小数，要么为NaN，||...

  • 《Python语言程序设计》第一章.练习与作业

    编程题 1.1 编程题 1.2 编程题 1.3 编程题 1.4 编程题 1.5 编程题 1.6 编程题 1.7 编...

  • 牛客网前端在线编程题

    最近学了一些前端的js，但是觉得概念是知道了点，但是还是不会下手，就拿牛客网的编程题练练手吧，主要是学习，我把我自...

  • 【笔试】2019腾讯前端实习

    20道选择题，3道编程题 编程1 编程2 编程3

  • 异步_ promise

    阮一峰 js的4种异步编程方法其他的一些异步编程方法 js 异步编程方法 一，回调函数 假定有两个函数f1和f2...

  • JavaScript八张思维导图

    目录 JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实...

网友评论

    本文标题：一些js编程题

    本文链接：https://www.haomeiwen.com/subject/sgjpextx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    让前端飞

    关于我们|服务条款|联系我们|一些js编程题|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！