html頁面的骨架,相當(dāng)于人的骨頭,只有骨頭是不是看著有點(diǎn)瘆人,只有HTML也是如此。
css,相當(dāng)于把骨架修飾起來,相當(dāng)于人的皮肉。
js(javascripts),動起來,相當(dāng)于人的血液,大腦等一切能使人動起來的器官或者其他的。
在刷題之前先介紹一下???。Leetcode有的刷題??投加校酥馀?屠锩孢€有招聘(社招和校招)、一些上岸大廠的大佬的面試經(jīng)驗。
??褪强梢园殡S一生的編程軟件(完全免費(fèi)),從學(xué)校到社會工作,時時刻刻你都可以用到
,感興趣的可以去注冊試試可以伴隨一生的刷題app
刷題頁面,功能完善,短時間堅持可看效果。
查看出現(xiàn)此處,篩選定制,查詢指定大廠出現(xiàn)頻率
首頁功能強(qiáng)悍,完全免費(fèi)
????總成績排名
問題 1:
請補(bǔ)全JavaScript代碼,要求將數(shù)組參數(shù)中的對象以總成績(包括屬性"chinese"、“math”、“english”)從高到低進(jìn)行排序并返回。
解答:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _rank = array => {
// 補(bǔ)全代碼
const res = array.sort((a, b) => {
return (b.chinese + b.math + b.english) - (a.chinese + a.math + a.english);
})
return res;
}
</script>
</body>
</html>
???? =>
這個一般稱作為箭頭函數(shù),在不同語言中意思不同,但是大致相同。JS中=>是箭頭函數(shù),是ES6標(biāo)準(zhǔn)中新增的一種新的函數(shù)。箭頭函數(shù)表達(dá)式的語法比函數(shù)表達(dá)式更簡潔,并且沒有自己的this,arguments,super或new.target,沒有prototype屬性,但是可以進(jìn)行三元運(yùn)算。箭頭函數(shù)表達(dá)式更適用于那些本來需要匿名函數(shù)的地方,并且它不能用作構(gòu)造函數(shù)。
例子:
x => x * x
相當(dāng)于:
function (x) {
return x * x;
}
???? sort
1、用于數(shù)組排序
2、不生成副本,直接更改原來數(shù)組
3、若默認(rèn)無參數(shù)則按編碼順序排序注意,升序降序排序可能不好理解,記住就好
升序排序
arr.sort(function(a,b){
return a-b;
});
降序排序
arr.sort(function(a,b){
return b-a;
});
總結(jié):
????1、核心步驟:
????1)對數(shù)組參數(shù)進(jìn)行sort排序,res接收
????2)在該函數(shù)中分別用于存儲該函數(shù)兩個對象參數(shù)的"chinese"、“math”、"english"屬性之和做差
????3)返回[return res]
????簡而言之就是做差后通過內(nèi)置的sort函數(shù)排序
????子字符串頻次
問題 2:
請補(bǔ)全JavaScript代碼,該函數(shù)接受兩個參數(shù)分別為字符串、子字符串,要求返回子字符串在字符串中出現(xiàn)的頻次。
解答:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const _searchStrIndexOf = (str, target) => {
// 補(bǔ)全代碼
let index = str.indexOf(target)
let sum = 0
while (index > -1) {
index = str.indexOf(target, index + 1)
sum++
}
return sum
}
</script>
</body>
</html>
????indexOf
array.indexOf(searchElement[, fromIndex]);
array
:表示一個數(shù)組對象。searchElement
:必需參數(shù),要在 array 中定位的值。fromIndex
:可選參數(shù),用于開始搜索的數(shù)組索引。如果省略該參數(shù),則從索引 0 處開始搜索。如果 fromIndex 大于或等于數(shù)組長度,則返回 -1。如果 fromIndex 為負(fù),則搜索從數(shù)組長度加上 fromIndex 的位置處開始。
indexOf() 方法是按升序索引執(zhí)行搜索,即從左到右進(jìn)行檢索。檢索時,會讓數(shù)組元素與 searchElement參數(shù)值進(jìn)行全等比較===。
var str = "Hello world!"
console.log(str.indexOf("o")) //4
console.log(str.indexOf("Hello")) //0
console.log(str.indexOf("World")) //-1
console.log(str.indexOf("world")) //6
????split
string.split(separator,limit)
參數(shù)值separator
可選。字符串或正則表達(dá)式,從該參數(shù)指定的地方分割 string Object。limit
可選。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù),返回的子串不會多于這個參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù),整個字符串都會被分割,不考慮它的長度。
返回值Array
一個字符串?dāng)?shù)組。該數(shù)組是通過在 separator 指定的邊界處將字符串 string Object 分割成子串創(chuàng)建的。返回的數(shù)組中的字串不包括 separator 自身。
例如:
var str="How are you doing today?";
var n=str.split(" ",3);
結(jié)果:
How,are,you
總結(jié):
????1、主要考點(diǎn)是正則、indexOf、split等,有多種方法。
????2、法一:核心步驟。
1)通過indexOf查找到第二個參數(shù)初始index值。
2)設(shè)置初始出現(xiàn)頻次為0。
3)當(dāng)index大于-1時進(jìn)入while循環(huán),出現(xiàn)頻次加1,再查找下一個index值。4)核心代碼,如上所示
????3、法二:核心步驟。
1)正則match匹配,看看匹配了多少次。2)核心代碼
const _searchStrIndexOf = (str, target) => {
// 補(bǔ)全代碼
let reg=new RegExp(target,'g');
return str.match(reg).length;
}
????4、法三:核心步驟。
1)使用split分割(target為分割點(diǎn))
2)有n個target返回的列表就會有n+1個元素
3)對列表取長度并且-1就會得到target的個數(shù)4)核心代碼
const _searchStrIndexOf = (str, target) => {
return str.split(target).length - 1
}
????繼承
問題 3:
請補(bǔ)全JavaScript代碼,實(shí)現(xiàn)以下功能:
1、給"Human"構(gòu)造函數(shù)的原型對象添加"getName"方法,返回當(dāng)前實(shí)例"name"屬性
2、 將"Chinese"構(gòu)造函數(shù)繼承于"Human"構(gòu)造函數(shù)
3、給"Chinese"構(gòu)造函數(shù)的原型對象添加"getAge"方法,返回當(dāng)前實(shí)例"age"屬性
解答:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
class Human {
constructor(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
// 補(bǔ)全代碼
getName(){
return this.name
}
}
// 補(bǔ)全代碼
class Chinese extends Human{
constructor(name,age) {
super(name)
this.age = age
}
getAge() {
return this.age
}
}
</script>
</body>
</html>
????constructor
在一個類中只能有一個constructor方法,本質(zhì)是一個構(gòu)造函數(shù),如果一個類不指定一個構(gòu)造函數(shù)(constructor)方法, 則使用一個默認(rèn)的構(gòu)造函數(shù)(constructor)。constructor 是一種用于創(chuàng)建和初始化class創(chuàng)建的對象的特殊方法。
let getConst={}
getConst.constructor
// Object() { [native code] } 這個可以看下js對象的解析過程
或
function getConst(){
this.name="構(gòu)造函數(shù)"
}
let newConst=new getConst();
newConst.constructor.name
//'getConst'
注意:
1、函數(shù)名首字母必須大寫
2、內(nèi)部使用this對象,來指向?qū)⒁傻膶ο髮?shí)例
3、使用new操作符來調(diào)用構(gòu)造函數(shù),并返回對象實(shí)例
總結(jié):
????1、根據(jù)題目要求,通過寄生組合式繼承使"Chinese"構(gòu)造函數(shù)繼承于"Human"構(gòu)造函數(shù)。寄生組合式繼承,即通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的形式來繼承方法,只調(diào)用了一次父類構(gòu)造函數(shù),效率高,也避免了在子類的原型對象上創(chuàng)建不必要的、多余的屬性,原型鏈也不會被改變
????2、詳細(xì)步驟。
~~ ????1)在"Human"構(gòu)造函數(shù)的原型上添加"getName"函數(shù)
~~ ????2)在”Chinese“構(gòu)造函數(shù)中通過call函數(shù)借助”Human“的構(gòu)造器來獲得通用屬性
~~ ????3)Object.create函數(shù)返回一個對象,該對象的__proto__屬性為對象參數(shù)的原型。此時將”Chinese“構(gòu)造函數(shù)的原型和通過Object.create返回的實(shí)例對象聯(lián)系起來
~~ ????4)最后修復(fù)"Chinese"構(gòu)造函數(shù)的原型鏈,即自身的"constructor"屬性需要指向自身
~~ ????5)在”Chinese“構(gòu)造函數(shù)的原型上添加”getAge“函數(shù)
????判斷斐波那契數(shù)組
問題 4:
請補(bǔ)全JavaScript代碼,要求以Boolean的形式返回參數(shù)數(shù)組是否為斐波那契數(shù)列。在數(shù)學(xué)上,斐波那契數(shù)列以如下方法定義:F(0)=0,F(xiàn)(1)=1, F(n)=F(n - 1)+F(n - 2)(n ≥ 2,n ∈ N)注意:
[0,1,1]為最短有效斐波那契數(shù)列
????什么是斐波那契數(shù)列
斐波那契數(shù)列指的是這樣一個數(shù)列:1,1,2,3,5,8,13,21,34,55,89…,這個數(shù)列從第3項開始,每一項都等于前兩項之和。
解答:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _isFibonacci = array => {
// 補(bǔ)全代碼
if (array.length < 3 || array[0] !== 0 || array[1] !== 1) return false
for (let i = 2; i < array.length; i++) {
if (array[i] === array[i - 1] + array[i - 2]) continue
return false
}
return true
}
</script>
</body>
</html>
????什么是三元表達(dá)式
例1:
console.log(true ? 1 : 2) //返回1 因為是true 返回時1
console.log(false ? 1 : 2) //返回2 因為時false 返回2
例2:
if(條件表達(dá)式){
表達(dá)式1
}else{
表達(dá)式2
}
等價于
條件表達(dá)式?表達(dá)式1:表達(dá)式2
???? =>
=>是es6語法中的arrow function
(x) => x + 6
相當(dāng)于
function(x){
return x + 6;
};
總結(jié):
????1、核心步驟。
1)首先判斷數(shù)組參數(shù)的長度是否小于3,第一、二項的值是否分別為0、1,如果其中一項不符合,那么返回false
2)遍歷數(shù)組參數(shù),從第三項開始,判斷該項的值是否符合F(n)=F(n - 1)+F(n - 2),是則continue,否則返回false
3)當(dāng)數(shù)組遍歷完成時返回true
除此之外還可以用三元表達(dá)式來寫。
const _isFibonacci = (array) => {
// 判斷長度是否合格
if (array.length < 3) return false;
// 當(dāng)index索引值小于3時判斷是否為最短且有效的斐波那契數(shù)列
// 當(dāng)index索引值大于3時判斷當(dāng)前item值是否為前兩項索引item項值的和
return array.every((item, index) =>
index < 3
? array[0] === 0 && array[1] === 1 && array[2] === 1
: item === array[index - 1] + array[index - 2]
);
};
????js中哪些操作會造成內(nèi)存泄漏?
????1.意外的全局變量
由于我們使用未聲明的變量,而意外的創(chuàng)建了一個全局變量,而使這個變量一直留在內(nèi)存中無法被回收。
????2.被遺忘的計時器或回調(diào)函數(shù)。
當(dāng)我們設(shè)置了setinterval定時器,而忘記取消它,如果循環(huán)函數(shù)有對外部變量的引用的話,那么這個變量會被一直留在內(nèi)存中,而無法被回收。
????3.脫離DOM的引用
我們獲取一個DOM元素的引用,而后面這個元素被刪除,由于我們一直保留了對這個元素的引用,所以它也無法被回收。
????4.閉包
不合理的使用閉包,從而導(dǎo)致某些變量─直被留在內(nèi)存當(dāng)中。
看著是不是感覺手有點(diǎn)癢癢的了。那就來注冊下自己試試吧,試試才知道好不好,試試才知道適不適合自己。就算最后沒用這款軟件那也嘗試過,不后悔。
可以伴隨一生的編程軟件(完全免費(fèi)),從學(xué)校到社會工作,時時刻刻你都可以用到,感興趣的可以去注冊試試可以伴隨程序員一生的app文章來源:http://www.zghlxwxcb.cn/news/detail-791705.html
覺得有用的可以給個三連,關(guān)注一波?。?!帶你玩轉(zhuǎn)前端文章來源地址http://www.zghlxwxcb.cn/news/detail-791705.html
到了這里,關(guān)于手撕前端面試題【javascript~ 總成績排名、子字符串頻次統(tǒng)計、繼承、判斷斐波那契數(shù)組等】的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!