目录

• 引言
  11. 将字符串转换为驼峰格式(中等)
  12. 字符串字符统计(入门)
  13. 加粗文字(中等)
  14. 段落标识(简单)
  15. 设置文字颜色(较难???)
  16. 查找数组元素位置(简单)
  17. 数组求和(入门)
  18. 移除数组中的元素(简单)
  19. 移除数组中的元素(中等)
  20. 添加元素(简单)

引言

牛客网这个可以说这60道是最基础的了，也是考察的东西比较杂，有时间4天差不多就可以刷完，巩固基础还是有些用的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，也是自己知识的整理结果。

• 前端刷题 —— 牛客网前端题库60道详解(一)
• 前端刷题 —— 牛客网前端题库60道详解(二)
• 前端刷题 —— 牛客网前端题库60道详解(三)
• 前端刷题 —— 牛客网前端题库60道详解(四)
• 前端刷题 —— 牛客网前端题库60道详解(五)
• 前端刷题 —— 牛客网前端题库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常用的数组方法