那些年，幾道”老生常錯“的前端面試題(四)

• 1. 請生成一個16位的隨機(jī)數(shù)字；

• 2.所有題目公用一個上下文，已知數(shù)組：

• 3.關(guān)于字符串處理：

• 4.在一個Web頁面中有很多的鏈接和圖片，例如：

• 5.已知用戶輸入手機(jī)號的時候可能是通過粘貼輸入，此時就會帶上不需要的信息，例如：

1. 請生成一個16位的隨機(jī)數(shù)字；

可以 String(Math.random()).split('.')[1].slice(0, 16); ?當(dāng)然，還有很多其他一些方法。使用new Date().getTime()或類似方法的不得分。

2.所有題目公用一個上下文，已知數(shù)組：

let?arr?=?[1,2,,3];

1. arr的長度是多少？

2. 去除arr中的空數(shù)組項;

3. arr2 = arr.map(parseInt)，請寫下arr2的內(nèi)容;

4. arr和arr2合并成數(shù)組arr3。

5. 去除數(shù)組arr3中重復(fù)內(nèi)容

答案：

第一題，空數(shù)組項也會作為length的一部分；空數(shù)組項和空字符串項是有區(qū)別的。結(jié)果是4。

第2題 本題只是過濾空數(shù)組項，不包括null, undefined這類，去除空數(shù)組項兩個比較好的回答：

數(shù)組中的 empty 元素不會參與數(shù)組項遍歷，故只需返回 true 即可過濾掉 empty 元素（而不會牽連 0、NaN、null、undefined、'' 這些）

arr.filter(it?=>?true)

注意走for循環(huán)，還是會遍歷empty數(shù)組項?；蛘遞ilter方法參數(shù)直接就是一個function即可。例如：arr.filter(Number)， arr.filter(String)

上面并不會最好的方法。數(shù)組有個API，天然去除空數(shù)組項，arr.flat()。flat()可以讓數(shù)組扁平化的方法。

第3題標(biāo)準(zhǔn)答案應(yīng)該是[1, NaN, NaN]，map里面Function支持參數(shù)(value, index, arr)。

第4題就是concat，可以數(shù)組合并，arr3 = arr.concat(arr2)。如果不考慮兼容，可以[...arr, ...arr2]。其他參考方法：Array.prototype.push.apply(arr3, arr2)，也可以[].push.apply(arr3, arr2)，此時arr3是合并后的數(shù)組。

第五題，數(shù)組去重。使用Array.from(new Set(arr3))，或者[...new Set(arr3)]。

3.關(guān)于字符串處理：

1. 寫一個名為toCamelCase的方法，實現(xiàn)把類似'abc-def-ghi'的字符轉(zhuǎn)換成'abcDefGhi'。

2. 寫一個名為toDashJoin的方法，實現(xiàn)把駝峰形式字符串'abcDefGhi'轉(zhuǎn)換成'abc-def-ghi'。

3. 寫一個名為toCapitalize的方法，實現(xiàn)首字母大寫功能（原來字母就是大寫的不處理），如'i like css'轉(zhuǎn)換成'I Like Css'。

4. 寫一個名為toBetterUrl的方法，實現(xiàn)把類似'CSS value type'轉(zhuǎn)換成'css-value-type'（只需考慮空格和大小寫處理）。

「參考答案：」

function?toCamelCase(str){
????return?str.replace(/-(.)/g,function($0,$1){
????????console.log($0,$1)
????????return?$1.toUpperCase()
????})
}????
console.log(toCamelCase("abc-def-ghi"));
function?toDashJoin(str){
????return?str.replace(/[A-Z]/g,function($0){
????????return?'-'+$0.toLowerCase()
????})
}
console.log(toDashJoin("abcDefGhi"));
function?toCapitalize(str){
????return?str.replace(/(\s+|^)(\w)/g,function($0,$1,$2){
????????return?$1+$2.toUpperCase()
????})
}
console.log(toCapitalize('i?like?css'));
function?toBetterUrl(str){
????return?str.replace(/[A-Z]/g,function($0){
????????return?$0.toLowerCase()
????}).replace(/\s+/g,'-')
}
console.log(toBetterUrl('CSS?value?type'));

4.在一個Web頁面中有很多的鏈接和圖片，例如：

<a?href="../some.html">鏈接1a>
<a?href="/home/aside/search.html">鏈接2a>
<a?href="./docs/yuewen.pdf">鏈接1a>
<img?src="../icon-a.svg">
<img?src="/image/icon-a.png">

……等。

請實現(xiàn)，使用原生JavaScript把頁面中所有的元素的鏈接地址和元素的圖片地址都替換成當(dāng)前完整的絕對地址。

例如，假設(shè)此時的頁面地址是 https://www.yuewen.com/path/，

則元素鏈接1替換成鏈接1，

元素鏈接2替換成鏈接2

「參考答案：」

如果對DOM地址理解深刻，此題其實很簡單，送分。

直接獲取href或src屬性值再賦值即可。

document.querySelectorAll('a,?img').forEach(ele?=>?{
????if?(ele.href)?{
???????ele.href?=?...;
????}?else?if?(ele.src)?{
??????ele.src=?....;
????}
});

5.已知用戶輸入手機(jī)號的時候可能是通過粘貼輸入，此時就會帶上不需要的信息，例如：

let?tel?='132?0803?3621';
或者是短橫線：
let?tel?='132-0803-3621';
或是其他的連接字符。

然后空格或短橫線的位置也不固定，例如可能是下面這樣：
let?tel?='132?080?33621';

請實現(xiàn)，無論變量tel使用什么字符分隔，無論分隔位置在哪里，都過濾成連續(xù)的11位數(shù)字，類似'13208033621'。

「參考答案：」

if?(tel.match(/\d/g)?&&?tel.match(/\d/g).length?==?11)?{
????console.log(tel.replace(/\D/g,?''));
}

「\D」: 表示非數(shù)字