乐趣区

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

目录

  • 引言

    1. 将字符串转换为驼峰格局(中等)
    2. 字符串字符统计(入门)
    3. 加粗文字(中等)
    4. 段落标识(简略)
    5. 设置文字色彩(较难???)
    6. 查找数组元素地位(简略)
    7. 数组求和(入门)
    8. 移除数组中的元素(简略)
    9. 移除数组中的元素(中等)
    10. 增加元素(简略)

    引言

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

  • 前端刷题 —— 牛客网前端题库 60 道详解(一)

题目

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

题目形容
css 中常常有相似 background-image 这种通过 – 连贯的字符,通过 javascript 设置款式的时候须要将这种款式转换成 backgroundImage 驼峰格局,请实现此转换性能

  1. 以 – 为分隔符,将第二个起的非空单词首字母转为大写
  2. -webkit-border-image 转换后的后果为 webkitBorderImage
    输出:‘font-size’
    输入:fontSize
function cssStyle2DomStyle(sName) {let arr = sName.split('-')
    for(let i = (arr[0] ? 1 : 2); i < arr.length; i++) {arr[i] = arr[i].slice(0,1).toUpperCase()+arr[i].slice(1)
    }
    return arr.join('')
}

相干知识点:

  • 数组罕用办法

    • split/join
    • toUpperCase() —— toUpperCase 将小写字符转成大写,toLowerCase 将大写字符转成小写
    • slice

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 = {}
    for (let i = 0; i < str.length; i++) {
        // 去掉空白字符
        if(str[i] !== ' ') {
            // 如果有该属性就 +1,没有就设置值为 1
            obj[str[i]] = obj.hasOwnProperty(str[i]) ? obj[str[i]] + 1 : 1
        }
    }
    return obj
}

相干知识点:

  • 对象赋值

13. 加粗文字

题目形容
应用一个标签将“牛客网”三个字加粗显示

<!-- 办法一:html-->
<p><strong> 牛客网 </strong>,程序员必备求职神器 </p>

<!-- 办法二:js-->
let p = document.getElementByTagName('p')
let text = p.innterHTML
p.innterHTML = text.replace('牛客网','<strong> 牛客网 </strong>')

相干知识点:

  • 获取元素及元素内容
  • 加粗标签

14. 段落标识

题目形容
请将上面这句话以段落的模式展现在浏览器中——“牛客网是一个专一于程序员的学习和成长的业余平台。”

<!-- 办法一:html-->
<p> 牛客网是一个专一于程序员的学习和成长的业余平台。</p>

<!-- 办法二:js-->
let p = document.createElement('p')
p.innerHTML = '牛客网是一个专一于程序员的学习和成长的业余平台。'
document.querySelector('body').append(p)

相干知识点:

  • 创立标签 createElement
  • 将元素增加到 body 中 append()

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>
<!-- 办法二:css 款式 -->
<style>
    p {color: red;}
</style>
<p> 欢送来到牛客网 </p>
<p> 在这里,咱们为你提供了 IT 名企的口试面试题库 </p>
<p> 在这里,咱们以题会友 </p>
<p>QQ 群号:272820159</p>

<!-- 办法一:js-->
let p = document.querySelectorAll('p')
for(let i = 0; i < p.length; i++) {p[i].style.color = 'red'
}

相干知识点:

  • 获取所有 p 元素:querySelectorAll
  • 给元素设置 style 款式:dom.style.color

16. 查找数组元素地位

题目形容
找出元素 item 在给定数组 arr 中的地位
输入形容:
如果数组中存在 item,则返回元素在数组中的地位,否则返回 -1
输出:[1, 2, 3, 4], 3
输入:2

// 办法一:简略遍历
function indexOf(arr, item) {for(let i = 0; i < arr.length; i++) {if(arr[i] === item) return i
    }
    return -1
}

// 办法二:ES6 新增数组办法
function indexOf(arr, item) {return arr.findIndex(val => val === item)
}

相干知识点:

  • 数组遍历
  • 函数返回值

17. 数组求和

题目形容
计算给定数组 arr 中所有元素的总和
输出形容:
数组中的元素均为 Number 类型
输出:[1, 2, 3, 4]
输入:10

// 办法一:简略办法,一般 for 循环这里不多加介绍
function sum(arr) {
    let count = 0
    arr.forEach((value, index) => {count+=value})
    return count
}

// 办法二:reduce
function sum(arr) {return arr.reduce((prev, item) => item + prev,0)
}

相干知识点:

  • 数组遍历
  • reduce

18. 移除数组中的元素

题目形容
移除数组 arr 中的所有值与 item 相等的元素。不要间接批改数组 arr,后果返回新的数组
输出 : [1, 2, 3, 4, 2], 2
输入 : [1, 3, 4]

// 办法一:简略遍历
function remove(arr, item) {let newArr = []
    arr.forEach(value =>{if(value !== item) newArr.push(value)
    })
    return newArr
}

// 办法二:filter 过滤办法
function remove(arr, item) {return arr.filter(val => val !== item)
}

// 办法三:新数组中应用 splice 删除
function remove(arr, item) {let newArr = arr.slice(0)
    for(let i = newArr.length - 1; i >= 0 ; i--) {if(newArr[i] === item) newArr.splice(i, 1)
    }
    return newArr
}

相干知识点:

  • 数组办法哪些是在原数组中改的,哪些是返回新数组的?

返回新数组的 API
slice \ map \ filter \ reduce \ concat …
返回原数组的 API
push \ unshift \ shift \ pop \ splice \ sort \ reverse …

19. 移除数组中的元素

题目形容
移除数组 arr 中的所有值与 item 相等的元素,间接在给定的 arr 数组上进行操作,并将后果返回
输出: [1, 2, 2, 3, 4, 2, 2], 2
输入: [1, 3, 4]

// 倒着遍历不必思考数组长度
function removeWithoutCopy(arr, item) {for(let i = arr.length - 1; i >= 0; i--) {if(item === arr[i]) arr.splice(i,1)
    }
    return arr
}

相干知识点:

  • 遍历 + 批改数组长度

20. 增加元素

题目形容
在数组 arr 开端增加元素 item。不要间接批改数组 arr,后果返回新的数组
输出: [1, 2, 3, 4], 10
输入: [1, 2, 3, 4, 10]

// 办法一:简略迭代
function append(arr, item) {let newArr = []
    arr.forEach(val => newArr.push(val))
    newArr.push(item)
    return newArr
}

// 办法二:slice
function append(arr, item) {let arr1 = arr.slice(0)
    arr1.push(item)
    return arr1
}

/// 办法三:concat
function append(arr, item) {return arr.concat(item)
}

相干知识点:

  • 合并新元素,返回新数组

这次好多的办法都是数组办法,所以肯定要十分的相熟。这里再把数组的办法整顿放上来。

Javascript 罕用的数组办法

退出移动版