那些年,幾道”老生常錯(cuò)“的前端面試題(四)
1. 請生成一個(gè)16位的隨機(jī)數(shù)字；
2.所有題目公用一個(gè)上下文，已知數(shù)組：
3.關(guān)于字符串處理：
4.在一個(gè)Web頁面中有很多的鏈接和圖片，例如：
5.已知用戶輸入手機(jī)號(hào)的時(shí)候可能是通過粘貼輸入，此時(shí)就會(huì)帶上不需要的信息，例如：
1. 請生成一個(gè)16位的隨機(jī)數(shù)字；
可以 String(Math.random()).split('.')[1].slice(0, 16); ?當(dāng)然，還有很多其他一些方法。使用new Date().getTime()或類似方法的不得分。
2.所有題目公用一個(gè)上下文，已知數(shù)組：
let?arr?=?[1,2,,3];
arr的長度是多少？
去除arr中的空數(shù)組項(xiàng);
arr2 = arr.map(parseInt)，請寫下arr2的內(nèi)容;
arr和arr2合并成數(shù)組arr3。
去除數(shù)組arr3中重復(fù)內(nèi)容
答案：
第一題，空數(shù)組項(xiàng)也會(huì)作為length的一部分；空數(shù)組項(xiàng)和空字符串項(xiàng)是有區(qū)別的。結(jié)果是4。
第2題 本題只是過濾空數(shù)組項(xiàng)，不包括null, undefined這類，去除空數(shù)組項(xiàng)兩個(gè)比較好的回答：
數(shù)組中的 empty 元素不會(huì)參與數(shù)組項(xiàng)遍歷，故只需返回 true 即可過濾掉 empty 元素（而不會(huì)牽連 0、NaN、null、undefined、'' 這些）
arr.filter(it?=>?true)
注意走for循環(huán)，還是會(huì)遍歷empty數(shù)組項(xiàng)?；蛘遞ilter方法參數(shù)直接就是一個(gè)function即可。例如：arr.filter(Number)， arr.filter(String)
上面并不會(huì)最好的方法。數(shù)組有個(gè)API，天然去除空數(shù)組項(xiàng)，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)，此時(shí)arr3是合并后的數(shù)組。
第五題，數(shù)組去重。使用Array.from(new Set(arr3))，或者[...new Set(arr3)]。
3.關(guān)于字符串處理：
寫一個(gè)名為toCamelCase的方法，實(shí)現(xiàn)把類似'abc-def-ghi'的字符轉(zhuǎn)換成'abcDefGhi'。
寫一個(gè)名為toDashJoin的方法，實(shí)現(xiàn)把駝峰形式字符串'abcDefGhi'轉(zhuǎn)換成'abc-def-ghi'。
寫一個(gè)名為toCapitalize的方法，實(shí)現(xiàn)首字母大寫功能（原來字母就是大寫的不處理），如'i like css'轉(zhuǎn)換成'I Like Css'。
寫一個(gè)名為toBetterUrl的方法，實(shí)現(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.在一個(gè)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">
……等。
請實(shí)現(xiàn)，使用原生JavaScript把頁面中所有的元素的鏈接地址和元素的圖片地址都替換成當(dāng)前完整的絕對(duì)地址。
例如，假設(shè)此時(shí)的頁面地址是 https://www.yuewen.com/path/，
「參考答案：」
如果對(duì)DOM地址理解深刻，此題其實(shí)很簡單，送分。
直接獲取href或src屬性值再賦值即可。
document.querySelectorAll('a,?img').forEach(ele?=>?{
????if?(ele.href)?{
???????ele.href?=?...;
????}?else?if?(ele.src)?{
??????ele.src=?....;
????}
});
5.已知用戶輸入手機(jī)號(hào)的時(shí)候可能是通過粘貼輸入，此時(shí)就會(huì)帶上不需要的信息，例如：
let?tel?='132?0803?3621';
或者是短橫線：
let?tel?='132-0803-3621';
或是其他的連接字符。
然后空格或短橫線的位置也不固定，例如可能是下面這樣：
let?tel?='132?080?33621';
請實(shí)現(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ù)字