目录
引言
- 将字符串转换为驼峰格式(中等)
- 字符串字符统计(入门)
- 加粗文字(中等)
- 段落标识(简单)
- 设置文字颜色(较难???)
- 查找数组元素位置(简单)
- 数组求和(入门)
- 移除数组中的元素(简单)
- 移除数组中的元素(中等)
- 添加元素(简单)
引言
牛客网这个前端笔试题库，可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。
- 前端刷题 —— 牛客网前端题库60道详解(一)
题目
11. 将字符串转换为驼峰格式
题目描述
css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能
- 以 - 为分隔符，将第二个起的非空单词首字母转为大写
- -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 为出现频率
- 不限制 key 的顺序
- 输入的字符串参数不会为空
- 忽略空白字
输入 : '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. 加粗文字
题目描述
使用一个标签将“牛客网”三个字加粗显示
牛客网，程序员必备求职神器
let p = document.getElementByTagName('p')
let text = p.innterHTML
p.innterHTML = text.replace('牛客网','牛客网')相关知识点：
- 获取元素及元素内容
- 加粗标签
14. 段落标识
题目描述
请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”
牛客网是一个专注于程序员的学习和成长的专业平台。
let p = document.createElement('p')
p.innerHTML = '牛客网是一个专注于程序员的学习和成长的专业平台。'
document.querySelector('body').append(p)相关知识点：
- 创建标签createElement
- 将元素添加到body中 append()
15. 设置文字颜色
题目描述
请使用嵌入样式将所有p标签设置为红色文字
欢迎来到牛客网
在这里，我们为你提供了IT名企的笔试面试题库
在这里，我们以题会友
QQ群号：272820159
欢迎来到牛客网
在这里，我们为你提供了IT名企的笔试面试题库
在这里，我们以题会友
QQ群号：272820159
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)
}相关知识点：
- 合并新元素，返回新数组
这次好多的方法都是数组方法，所以一定要非常的熟悉。这里再把数组的方法整理放上来。