牛客网前端大挑战题解

牛客网-前端大挑战-题解

• 牛客网-前端大挑战-（1-15）题解
• • • 1.修改 this 指向
    • 2.获取 url 参数
    • 3.dom 节点查找
    • 4.根据包名，在指定空间中创建对象
    • 5. 数组去重
    • 6.斐波那契数列
    • 7.时间格式化输出
    • 8.获取字符串的长度
    • 9.邮箱字符串判断
    • 10.颜色字符串转换
    • 11.将字符串转换为驼峰格式
    • 12.字符串字符统计
    • 13.加粗文字
    • 14.段落标识
    • 15.设置文字颜色

本文章尽量用简洁的代码去完成题目要求，话不多说，上代码

1.修改 this 指向

题目描述 ：封装函数 f，使 f 的 this 指向指定的对象

function bindThis(f, oTarget) {
//方法1 apply() 注：直接f.apply(oTarget，arguments)不对，
//因为题中说的是封装函数f，使用apply方法，会立即执行这个函数，
return function(){
return f.apply(oTarget,arguments);
}; //方法2 bind() bind可以直接返回这个更换this的函数
//只是改变了执行的上下文，并未立即执行而是回调执行。
return f.bind(oTarget); //方法3 call() apply、call是传参数形式的区别,
//前者是参数数组，后者是参数项
return function(x,y){
return f.call(oTarget,x,y);
};
}


2.获取 url 参数

题目描述：获取 url 中的参数

1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组

function getUrlParam(sUrl, sKey) {
let str = sUrl.split('?')[1].split('#')[0].split('&'); // 取出每个参数的键值对放入数组
let obj = { };
str.forEach(element => {
let [key, value] = element.split('='); // 取出数组中每一项的键与值
if(obj[key] === undefined ){ // 表示第一次遍历这个元素，直接添加到对象上面
obj[key]=value
}else{
obj[key]=[].concat(obj[key],value); // 表示不是第一次遍历说明这个键已有，通过数组存起来。
}});
return sKey=== undefined ? obj:obj[sKey]||'' // 如果该方法为一个参数，则返回对象。
//如果为两个参数，sKey存在，则返回值或数组，否则返回空字符。
}


3.dom 节点查找

题目描述：查找两个节点的最近的一个共同父节点，可以包括节点自身.
输入描述：oNode1 和 oNode2 在同一文档中，且不会为相同的节点

function commonParentNode(oNode1, oNode2) {
while(oNode1){
if(oNode1.contains(oNode2)){
return oNode1; //oNode1包含oNode2，返回oNode1
}else{
oNode1=oNode1.parentNode //oNode1不包含oNode2，从oNode1父节点里找
}
}
}


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

题目描述：根据包名，在指定空间中创建对象。
输入描述：namespace({a: {test: 1, b: 2}}, ‘a.b.c.d’)。
输出描述：{a: {test: 1, b: {c: {d: {}}}}}

function namespace(oNamespace, sPackage) {
return sPackage.split('.').forEach((k) => {
if(!oNamespace[k]) {
oNamespace[k] = { }; //不含该字符，就赋值为{}
}
oNamespace = oNamespace[k]; //找下一层
});
}


5. 数组去重

题目描述：为 Array 对象添加一个去除重复项的方法。
输入描述：[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]。
输出描述：[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]

Array.prototype.uniq = function () {
return [...new Set(this)];
}


6.斐波那契数列

题目描述：用 Javascript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等。

function fibonacci(n) {
if(n<3){
return 1;
}else{
let f1 = 1,f2 = 1,f3;
for(let i=3;i<=n;i++){
f3 = f1 +f2
f1 = f2
f2 = f3
}
return f3
}
}


7.时间格式化输出

题目描述：
按所给的时间格式输出指定的时间
格式说明
对于 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 结果为 五

function formatDate(t,str){
let obj = {
yyyy:t.getFullYear(),
yy:(""+ t.getFullYear()).slice(-2),
M:t.getMonth()+1,
MM:("0"+ (t.getMonth()+1)).slice(-2),
d:t.getDate(),
dd:("0" + t.getDate()).slice(-2),
H:t.getHours(),
HH:("0" + t.getHours()).slice(-2),
h:t.getHours() % 12,
hh:("0"+t.getHours() % 12).slice(-2),
m:t.getMinutes(),
mm:("0" + t.getMinutes()).slice(-2),
s:t.getSeconds(),
ss:("0" + t.getSeconds()).slice(-2),
w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
};
return str.replace(/([a-z]+)/ig,function(x){ return obj[x]});
}


8.获取字符串的长度

题目描述：如果第二个参数 bUnicode255For1 === true，则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2

function strLength(s, bUnicode255For1) {
let sum = 0
for(let i=0;i<s.length;i++){
sum += s.charCodeAt(i)>255 ? 2 : 1; //字符编码大于255，加2，否则加1
}
return bUnicode255For1 ? s.length: sum; //bUnicode255For1为ture返回s.length,false返回sum
}


9.邮箱字符串判断

题目描述：判断输入是否是正确的邮箱格式
输入描述：邮箱字符串
输出描述：true表示格式正确

function isAvailableEmail(sEmail) {
let reg = /^[\w\.]+@(\w+)([.]\w+)+$/;
//let reg = /^[\w.]+@\w+.(org|com)/
//let reg= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return reg.test(sEmail); //在网上查了大致这几种
}


10.颜色字符串转换

题目描述：将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入
   输入描述：‘rgb(255, 255, 255)’
   输出描述：#ffffff

function rgb2hex(sRGB) {
let res = '#';
let count = 0;
sRGB.replace(/(\d)+/g,function(x) {
count++;
res += ('0'+Number(x).toString(16)).slice(-2);
//加'0'和slice(-2)是保证取两位，
})
if(count != 3) res = sRGB; //不符合 rgb 格式，返回原始输入
return res;
}


11.将字符串转换为驼峰格式

题目描述：css 中经常有类似 background-image 这种通过 &＃8211; 连接的字符，通过 Javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能

1. 以 &＃8211; 为分隔符，将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage
   输入描述：‘font-size’
   输出描述：fontSize

function cssStyle2DomStyle(sName) {
let s = sName.split('-')
if(s[0]=='') s.shift(); //去掉空字符串
for(let i=1;i<s.length;i++){
s[i] = s[i].charAt(0).toUpperCase()+ s[i].slice(1);//第一个字符大写后拼接
}
return s.join('')
}


12.字符串字符统计

题目描述：统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率。

1. 不限制 key 的顺序
2. 输入的字符串参数不会为空
3. 忽略空白字符
   输入描述：‘hello world’
   输出描述：{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

function count(str) {
let obj = { };
str = str.split('')
for(let i=0; i<str.length; i++){
if(obj.hasOwnProperty(str[i])){
obj[str[i]]++
}else{
obj[str[i]] = 1
}
}
return obj;
}


13.加粗文字

题目描述：使用一个标签将“牛客网”三个字加粗显示。

<p><strong>牛客网strong>，程序员必备求职神器p>



14.段落标识

题目描述：请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

<p>牛客网是一个专注于程序员的学习和成长的专业平台。p>


15.设置文字颜色

题目描述：请使用嵌入样式将所有p标签设置为红色文字

<style> p{ color:red; } style>
<p>欢迎来到牛客网p>
<p>在这里，我们为你提供了IT名企的笔试面试题库p>
<p>在这里，我们以题会友p>
<p>QQ群号：272820159p>


义非侠不立，侠非义不成。
前端大挑战已完结！