前端刷題 —— 牛客網前端題庫60道詳解(二)

目錄

• 引言

  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經常使用的數組方法