关于前端:前端刷题-牛客网前端题库60道详解一

引言
1. 批改 this 指向(中等)
2. 获取 url 参数(较难)
3. dom 节点查找(入门)
4. 依据包名，在指定空间中创建对象(入门)
5. 数组去重(较难)
6. 斐波那契数列(入门)
7. 工夫格式化输入(中等)
8. 获取字符串的长度(简略)
9. 邮箱字符串判断(中等)
10. 色彩字符串转换(中等)
引言

牛客网这个前端口试题库，能够说这 60 道是最根底的了，也是考查的货色比拟杂，有工夫 4 天差不多就能够刷完，坚固根底还是有些用的。做完题回顾一上午就能够过完一遍。当初我联合我的答案和参考的其他人的答案，在这里做一个总结，也是本人常识的整顿后果。

题目

1. 批改 this 指向

封装函数 f，使 f 的 this 指向指定的对象。

这里给出三种写法，哪种都能够。

// apply 批改 this 作用域
function bindThis(f, oTarget) {return function () {return f.apply(oTarget,arguments)
    }
}

// call 批改 this 作用域
function bindThis(f, oTarget) {return function (){return f.call(oTarget,...arguments)
    }
}
// bind 批改 this 作用域
function bindThis(f, oTarget) {return function (){return f.bind(oTarget,...arguments)()}
}
// 或者间接简写
function bindThis(f, oTarget) {return f.bind(oTarget)
}

相干知识点：

apply、call、bind 区别

apply、call、bind 的作用都是批改执行上下文
apply、call 都是返回函数立刻执行的后果，其中 apply 第二个参数之后是数组，call 第二个参数之后是单个的值。
bind 返回的是函数，须要手动执行后果。第二个参数之后是单个的值。

获取 url 中的参数

指定参数名称，返回该参数的值或者空字符串

不指定参数名称，返回全副的参数对象或者 {}

如果存在多个同名参数，则返回数组

输出：http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key

输入：[1, 2, 3]

function getUrlParam(sUrl, sKey) {let newArr = []
        let newObj = {}
        // 获取? 号前面 #号后面的值
        let query = sUrl.split('#')[0].split('?')[1]
        // 如果 query 存在
        if (query) {let arr = query.split('&')
          for(let i = 0 ; i < arr.length; i++) {if (arr[i]) {arr[i] = arr[i].split('=')
              // 数组
              if (sKey !== undefined) {if(arr[i][0] === sKey) {newArr.push(arr[i][1])
                }
              // 对象
              } else {if(arr[i][0] in newObj) {newObj[arr[i][0]].push(arr[i][1])
                } else {newObj[arr[i][0]] = [arr[i][1]]
                }
              }
            }
          }
          // 判断 sKey 有没有值
          if(sKey !== undefined) {switch(newArr.length) {
              case 0 : return '';break;
              case 1 : return newArr[0]; break;
              default: return newArr;break;
            }
          } else {return newObj}
        // 如果 query 不存在，判断 sKey 是否存在，如果存在就返回空对象，如果不存在就返回空字符串
        } else {return sKey !== undefined ? {} : ''
        }
      }

相干知识点：

url 的组成部分

https://user:pass@www.baidu.com:80/index.html?type=1&name=2#haha
http/https 是协定
user:pass@ 是登录认证
www.baidu.com 是域名，服务器地址
:80 是端口号
/index.html 是申请资源文件门路
?type=1&name=2 是查问字符串，携带参数，给服务器传的内容。
#haha 是哈希，片段标识符
split 办法

字符串宰割成数组的办法，外面的参数是以什么宰割，如果不传就是空字符串为宰割，返回值是一个数组。
query 局部能够应用正则

查找两个节点的最近的一个独特父节点，能够包含节点本身

输出形容:
oNode1 和 oNode2 在同一文档中，且不会为雷同的节点

function commonParentNode(oNode1, oNode2) {if(oNode1.contains(oNode2)) {return oNode1} else {return commonParentNode(oNode1.parentNode,oNode2)
    }
}

相干知识点：

contains API

查看 dom 元素蕴含关系，蕴含返回 true，不蕴含返回 false
参考 MDN
递归(参考数据结构树)

依据包名，在指定空间中创建对象
输出形容:
namespace({a: {test: 1, b: 2}}, ‘a.b.c.d’)
输入形容:
{a: {test: 1, b: {c: {d: {}}}}}

function namespace(oNamespace, sPackage) {let scope = sPackage.split('.')
    let ns = oNamespace
    for(let i = 0; i< scope.length; i++) {
        // 如果对象中没有该元素，或者不是对象，那么就置为空对象
       if(!ns.hasOwnProperty(scope[i]) || Object.prototype.toString.call(ns[scope[i]]) !== '[object Object]') {ns[scope[i]] = {}}
        // 而后持续往下找
        ns = ns[scope[i]]
    }
    return oNamespace
}

考查知识点：

判断对象的本身是否有某属性(hasOwnProperty)
hasOwnProperty / typeof / in / instanceof 的区别
- hasOwnProperty 是判断对象本身有没有某属性，不蕴含原型链的办法。
- in 是判断对象在本身和原型链上有没有该办法。
- instanceof 是判断对象在原型链上有没有该办法。
- typeof 判断操作数的类型，然而 null 也会判断为 ”object”
精确判断某值的类型

Object.prototype.toString.call(123) === “[object Number]”
Object.prototype.toString.call(‘aaa’) === “[object String]”
Object.prototype.toString.call(true) === “[object Boolean]”
Object.prototype.toString.call(undefined) === “[object Undefined]”
Object.prototype.toString.call(null) === ‘[object Null]’
Object.prototype.toString.call({}) === ‘[object Object]’
Object.prototype.toString.call([]) === ‘[object Array]’
Object.prototype.toString.call(Math) === “[object Math]”
Object.prototype.toString.call(new Date()) === “[object Date]”
Object.prototype.toString.call(new RegExp) === “[object RegExp]”
递归(对象的嵌套参考数据结构中的树)

为 Array 对象增加一个去除反复项的办法
输出
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]
输入
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]

这个题，狗就狗在，还有 NaN

// 办法一：终极思路
Array.prototype.uniq = function () {return [...new Set(this)]
}

// 办法二：一般思路，遍历之后比拟值
Array.prototype.uniq = function () {let arr = []
    let flag = true
    this.forEach(value => {
        // == -1 有两种状况，一种是 NaN，一种是有雷同值
        if(arr.indexOf(value) === -1) {
            // 如果是 NaN
            if(value !== value) {
                // flag 是标记，第一个 NaN 就进，之后的就不进去
                if(flag){arr.push(value)  
                  flag = false
                }
            } else {arr.push(value)  
            }
        }
    })
    return arr
}

相干知识点：

uniq 办法中的 this 指向哪里?

Array 构造函数的原型办法中的 this 指的是数组实例。
Set 的个性

Set 存储的成员是惟一的，不是反复的，如果有反复会主动过滤掉.
ES6（七）—— Set & Map
(NaN === NaN) => false

NaN：is not a number，不等于本人
typeof NaN => number
Object.prototype.toString.call(NaN) => “[object Number]”
ES6 新增办法：Number.isNaN() 用来判断是否属于数字

用 JavaScript 实现斐波那契数列函数, 返回第 n 个斐波那契数。f(1) = 1, f(2) = 1 等

斐波那契数列根本学 js 都会，1 1 2 3 5 8 13，后一个是前两个的和。

// 办法一：递归思路
function fibonacci(n) {if(n === 0) return 0
    if(n === 1 || n === 2) return 1
    return fibonacci(n-1) + fibonacci(n-2)
}

// 办法二：迭代思路
function fibonacci(n) {
    let num1 = 1
    let num2 = 1
    let sum = 0
    for(let i = 3; i <= n; i++) {
        sum = num1 + num2
        num1 = num2
        num2 = sum
    }
    return sum
}

// 下面写法能够过 oj，然而如果数字大点就超级慢，应用缓存很可
// 办法三：递归优化思路
function fibonacci(n,cache = {}) {
    // 有缓存就间接读缓存
    if(n in cache) return cache[n]
    if(n === 1 || n === 2) {cache[n] = 1
        return 1
    }
    // 没有缓存算完之后存入缓存
    let temp = fibonacci(n-1, cache) + fibonacci(n-2,cache)
    cache[n] = temp
    return temp
}

相干知识点：

递归

题目形容
按所给的工夫格局输入指定的工夫
格局阐明
对于 2014.09.05 13:14:20
yyyy: 年份，2014
yy: 年份，14
MM: 月份，补满两位，09
M: 月份, 9
dd: 日期，补满两位，05
d: 日期, 5
HH: 24 制小时，补满两位，13
H: 24 制小时，13
hh: 12 制小时，补满两位，01
h: 12 制小时，1
mm: 分钟，补满两位，14
m: 分钟，14
ss: 秒，补满两位，20
s: 秒，20
w: 星期，为 [‘ 日 ’, ‘ 一 ’, ‘ 二 ’, ‘ 三 ’, ‘ 四 ’, ‘ 五 ’, ‘ 六 ’] 中的某一个，本 demo 后果为五

输出
formatDate(new Date(1409894060000), ‘yyyy-MM-dd HH:mm:ss 星期 w ’)

输入
2014-09-05 13:14:20 星期五

function formatDate(t,str) {let year = ''+t.getFullYear()
    let month = t.getMonth() + 1
    let day = t.getDate()
    let hour = t.getHours()
    let minutes = t.getMinutes()
    let second = t.getSeconds()
    let week = ['日','一','二','三','四','五','六']
    let date = {
      'yyyy': year,
      'yy': year.slice(2),
      'MM': ten(month),
      'M': month,
      'dd': ten(day),
      'd': day,
      'HH': ten(hour),
      'H': hour,
      'hh': ten(hour % 12),
      'h': hour % 12,
      'mm': ten(minutes),
      'm': minutes,
      'ss': ten(second),
      's': second,
      'w': week[t.getDay()]
    }
    for(let key in date) {str = str.replace(key,date[key])
    }
    return str
  }

  // 有余 10 的后面要加 0
  let ten = num  => num >= 10 ? num : '0' + num

考查知识点：

获取年月日周时分秒的零碎 API
格局对立解决
字符串替换 (replace)

题目形容
如果第二个参数 bUnicode255For1 === true，则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2
输出
hello world, 牛客 ’, false
输入 17

function strLength(s, bUnicode255For1) {if(bUnicode255For1) return s.length;
    let len = s.length
    for(let i = 0; i < s.length; i++) {if(s[i].charCodeAt() > 255) len++
    }
    return len
}

相干知识点：

获取字符的 Unicode 编码 API —— str.charCodeAt()

题目形容
判断输出是否是正确的邮箱格局

考查正则的一道题目，办法也是多种多样，这里只有一种简略的参考。

// ^ 示意结尾
// [] 示意匹配字符的范畴
// \w 示意失常符号 [0-9a-zA-Z_]
// \. 是对任意符. 进行本义，示意字符.
// + 示意后面的表达式，一次到屡次
function isAvailableEmail(sEmail) {return /^[\w\.]+@\w+\.\w+/.test(sEmail)
}

相干知识点：

邮箱格局
正则表达式的规定和匹配

题目形容
将 rgb 色彩字符串转换为十六进制的模式，如 rgb(255, 255, 255) 转为 #ffffff

rgb 中每个 , 前面的空格数量不固定

十六进制表达式应用六位小写字母

如果输出不合乎 rgb 格局，返回原始输出

输出：’rgb(255, 255, 255)’
输入：#ffffff

function rgb2hex(sRGB) {
    // 正则匹配获取三个数值
    let reg = sRGB.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
    if(!reg) return sRGB;
    // 字符串拼接
    let str = '#'
    for(let i = 1; i < reg.length; i++) {
      // 将字符串转成数字
      let m = parseInt(reg[i])
      if (m >= 0 && m <= 255) {
        // 而后转化成 16 进制
        str += (m >= 16 ? m.toString(16) : '0' + m.toString(16))
      } else {return sRGB}
    }
    return str
  }

相干知识点：

toString 的进制转换

色彩是 16 进制，所以 toString(16)能够失去后果
字符串中如何截取数字(不限于正则)

留神：肯定要了解之后去程序外面运行一遍。

目录

引言

题目

1. 批改 this 指向

2. 获取 url 参数

3. dom 节点查找

4. 依据包名，在指定空间中创建对象

5. 数组去重

6. 斐波那契数列

7. 工夫格式化输入

8. 获取字符串的长度

9. 邮箱字符串判断

10. 色彩字符串转换