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>
????indexOfarray.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
????splitstring.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)！
