前端大挑战

最新推荐文章于 2021-12-01 22:44:48 发布

小白zoe

最新推荐文章于 2021-12-01 22:44:48 发布

阅读量483

点赞数 1

分类专栏：前端学习记录文章标签： javascript

本文链接：https://blog.csdn.net/qq_39914587/article/details/104978086

版权

前端学习记录专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

function bindThis(f, oTarget) {
    return function(){
        return f.apply(oTarget,arguments)
    }
}

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

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

function getUrlParam(sUrl, sKey) {
    var keys = []
    var obj = {}
    var str = sUrl.slice(sUrl.indexOf('?')+1,sUrl.indexOf('#'))
    var keys = str.split('&')
    for(let i = 0;i<keys.length;i++){
        var ind = keys[i].indexOf('=')
        var key = keys[i].slice(0,ind)
        var value = keys[i].slice(ind+1)
        if(!(key in obj)){
            obj[key] = [value]
        }else{
            obj[key].push(value)
        }       
    }
    if(sKey){
        if(!(sKey in obj)){
            return ''
        }
        else if(obj[sKey].length === 1){
            var a = obj[sKey][0]
            return a
        }else{
            return obj[sKey]
        }      
    }else{
        return obj || {}
    }  
}

3.查找两个节点的最近的一个共同父节点，可以包括节点自身
输入描述

oNode1 和 oNode2 在同一文档中，且不会为相同的节点

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

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

输入描述:
	namespace({a: {test: 1, b: 2}}, 'a.b.c.d')
输出描述:
	{a: {test: 1, b: {c: {d: {}}}}}

function namespace(oNamespace, sPackage) {
   var res = oNamespace
   var arr = sPackage.split('.')
   for(let i = 0;i< arr.length;i++){
       if(!(oNamespace[arr[i]])){
           oNamespace[arr[i]] = {}
       }
       oNamespace = oNamespace[arr[i]]
   }
    return res
}

5.为 Array 对象添加一个去除重复项的方法
示例

输入:
	[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN]
输出:
	[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

Array.prototype.uniq = function () {
    var newArr = []
    var flag = true
    for(let i = 0;i<this.length;i++){
        if(newArr.indexOf(this[i]) == -1){
            if(this[i] != this[i]){
                if(flag){
                    newArr.push(this[i])
                    flag = false
                }
            }else{
                 newArr.push(this[i])
            }
        }
    }
    return newArr
}

注意：
1). Array.indexOf( ) 可以正确返回数组中undefined、null、’’、false、true、数字、字符及对象的位置，但是NaN和{}的位置会返回-1
2). NaN与任何值不等包括其本身

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

// 非递归
function fibonacci(n) {
    var arr = []
    arr[1] = 1
    arr[2] =1
    if(n<=2){
        return a[n]
    }else{
        for(let i = 3;i<=n;i++){
            arr[i] = arr[i-1] +arr[i-2]
        }
        return arr[n]
    }
}
//递归
function fibonacci(n) {
    if(n === 1){
        return 1
    }else if(n === 2){
        return 1
    }else{
        return arguments.callee(n-1) + arguments.callee(n-2)
    }
}

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 结果为五

输入:
	formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')
输出:
	2014-09-05 13:14:20 星期五

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

注：
在替换文本里, 脚本用 $1 和 $2 表示正则表达式中的括号匹配项的结果.RegExp.$1-$9
8.如果第二个参数 bUnicode255For1 === true，则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2

输入:
	'hello world, 牛客', false
输出:
	17

function strLength(s, bUnicode255For1) {
    var j = 0;
    if(bUnicode255For1 === true){
        return s.length
    }else{
        for(let i = 0 ;i<s.length;i++){
            if(s.charCodeAt(i) > 255){
                j++
            }
        }
        return s.length + j
    }
}

9.判断输入是否是正确的邮箱格式

输入格式:
	邮箱字符串
输出格式:
	true表示格式正确

function isAvailableEmail(sEmail) {
    var re = /^\w+(\.\w+)*@\w+\.\w+(\.\w+)*$/i;
    return re.test(sEmail);
}

10.将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff
1). rgb 中每个 , 后面的空格数量不固定
2). 十六进制表达式使用六位小写字母
3). 如果输入不符合 rgb 格式，返回原始输入

输入
	'rgb(255, 255, 255)'
输出
	 #ffffff

function rgb2hex(sRGB) {
    var reg = /^rgb\([0-9]{1,3},\s*\d{1,3},\s*\d{1,3}\)$/
    var isRgb = reg.test(sRGB)
    if(!isRgb){
        return sRGB
    }else{
        var rgb = sRGB.slice(sRGB.indexOf('(') + 1,sRGB.indexOf(')'))
        var rgbs = rgb.split(',')
        var res = ''
        for(let i = 0;i<rgbs.length;i++){
            if(rgbs[i].parseInt > 255){
                return sRGB
                break
            }else{
                var n =  ('0' +parseInt(rgbs[i]).toString(16)).slice(-2)
                res +=n
            }
            
        }
        return '#'+ res
    }
}

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能
1). 以 - 为分隔符，将第二个起的非空单词首字母转为大写
2). -webkit-border-image 转换后的结果为 webkitBorderImage

输入:
	'font-size'
输出:
	fontSize

function cssStyle2DomStyle(sName) {
    var names = sName.split('-')
    var filterName = names.filter(item => item !="")
    for(let i =1;i<filterName.length;i++){
        filterName[i]= filterName[i][0].toUpperCase()+ filterName[i].slice(1)
    }
    return filterName.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) {
    var obj = {}
    for(let i = 0;i<str.length;i++){
        if(str[i] != ' '){
            if(!(str[i] in obj)){
            obj[str[i]] = 1
            }else{
                obj[str[i]]++;
            }
        }else{
            continue
        }
        
    }
    return obj

}

13.使用一个标签将“牛客网”三个字加粗显示

HTML:
	<p id="title">牛客网，程序员必备求职神器</p>
Javascript:
	var title  = document.getElementById("title")
	title.innerHTML = `<strong>牛客网</strong>，程序员必备求职神器`

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

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

15.请使用嵌入样式将所有p标签设置为红色文字

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