html頁面的骨架，相當(dāng)于人的骨頭，只有骨頭是不是看著有點(diǎn)瘆人，只有HTML也是如此。
css,相當(dāng)于把骨架修飾起來，相當(dāng)于人的皮肉。
js(javascripts),動(dòng)起來，相當(dāng)于人的血液，大腦等一切能使人動(dòng)起來的器官或者其他的。
在刷題之前先介紹一下牛客。Leetcode有的刷題?？投加校酥馀？屠锩孢€有招聘（社招和校招）、一些上岸大廠的大佬的面試經(jīng)驗(yàn)。
?？褪强梢园殡S一生的編程軟件（完全免費(fèi)），從學(xué)校到社會(huì)工作，時(shí)時(shí)刻刻你都可以用到，感興趣的可以去注冊試試可以伴隨一生的刷題app
刷題頁面，功能完善，短時(shí)間堅(jiān)持可看效果。
查看出現(xiàn)此處，篩選定制，查詢指定大廠出現(xiàn)頻率
首頁功能強(qiáng)悍，完全免費(fèi)
????Symbol
問題 1:
請補(bǔ)全JavaScript代碼，要求以鍵/值對的對象形式返回參數(shù)數(shù)組。要求如下：
1、鍵名的數(shù)據(jù)類型為Symbol
2、鍵值為當(dāng)前數(shù)組項(xiàng)
3、Symbol的描述為當(dāng)前數(shù)組項(xiàng)
4、返回普通對象
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _symbolKey = array => {
// 補(bǔ)全代碼
let object = {}
for (item of array) {
let key = Symbol(item)
object[key] = item
}
return object
}
</script>
</body>
</html>
???? =>
這個(gè)一般稱作為箭頭函數(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;
}
????Symbol
symbol是一個(gè)ES6標(biāo)準(zhǔn)種新增的一種基本數(shù)據(jù)類型，在JavaScript中，共有七種基本數(shù)據(jù)類型：string、number、object、boolean、null、undefined、symbol。并且除了null和undefined之外，每個(gè)基本類型都有其包裝對象。 symbol的實(shí)例是唯一的不可變的, 用于確保對象的屬性不重復(fù)， 而且Symbol() 函數(shù)不可以 new
使用方式 : 調(diào)用 Symbol( 標(biāo)識(shí) ) 函數(shù) 返回一個(gè)符號(hào)
const a = Symbol('a');
const obj = {
[a]: 1
};
console.log(obj);
結(jié)果：{Symbol(a): 1}
let id1 = Symbol('id');
let id2 = Symbol('id');
console.log(id1 == id2); //false
總結(jié)：
????1、核心步驟：
????1）生成空對象，遍歷數(shù)組。
????2）生成Symbol實(shí)例，初始化時(shí)將數(shù)組的該項(xiàng)帶入
????3）設(shè)置對象鍵名、鍵值
????4）返回對象
????相同的Set
問題 2:
請補(bǔ)全JavaScript代碼，要求以boolean的形式返回兩個(gè)Set對象參數(shù)是否一樣，是則返回true，否則返回false。
解答：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const _isSameSet = (s1, s2) => {
// 補(bǔ)全代碼
return Array.from(s1).sort.toString() === Array.from(s2).sort.toString();
}
</script>
</body>
</html>
????Array.fromArray.from可以從類似的數(shù)組或可迭代對象中創(chuàng)建一個(gè)新的、淺拷貝的數(shù)組實(shí)例。
Array.from接收三個(gè)參數(shù)：必須選擇類似數(shù)組的對象、加工函數(shù)、this作用域，例如：
Array.from(A,B,C)
A： 想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對象或可迭代對象。B ： 如果指定了該參數(shù)，新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)。C ： 可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對象。
例1、：
console.log(Array.from([1, 2, 3], x => x + x))
結(jié)果
[2, 4, 6]
例2、：
console.log(Array.from('ABC'));
結(jié)果：
["A","B","C"]
????等號(hào)【=】
js中的等號(hào)個(gè)數(shù)不同，意思也不同。= ：代表賦值，將右側(cè)的值賦給左側(cè)的變量。== ：這是相等運(yùn)算符，相等返回true,否則返回false。當(dāng)使用它來進(jìn)行比較時(shí)，如果值的類型不同，會(huì)自動(dòng)進(jìn)行類型轉(zhuǎn)換，將其轉(zhuǎn)換為相同的類型，然后再進(jìn)行比較，這里涉及到一些數(shù)據(jù)類型轉(zhuǎn)換的知識(shí)。=== ： 全等，用來判斷兩個(gè)值是否全等，它和相等相似，不同的是它不會(huì)做類型轉(zhuǎn)換，如果兩值類型不同，直接返回false。
????indexOfarray.indexOf(searchElement[, fromIndex]);array：表示一個(gè)數(shù)組對象。searchElement：必需參數(shù)，要在 array 中定位的值。fromIndex：可選參數(shù)，用于開始搜索的數(shù)組索引。如果省略該參數(shù)，則從索引 0 處開始搜索。如果 fromIndex 大于或等于數(shù)組長度，則返回 -1。如果 fromIndex 為負(fù)，則搜索從數(shù)組長度加上 fromIndex 的位置處開始。
indexOf() 方法是按升序索引執(zhí)行搜索，即從左到右進(jìn)行檢索。檢索時(shí)，會(huì)讓數(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ù)，返回的子串不會(huì)多于這個(gè)參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù)，整個(gè)字符串都會(huì)被分割，不考慮它的長度。
返回值Array 一個(gè)字符串?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、先通過Array.from()轉(zhuǎn)換為數(shù)組實(shí)例，在sort排序一下，最后tostring一下判斷兩個(gè)是否相等【===】。
????Getter
問題 3：
請補(bǔ)全JavaScript代碼，完成名為"Rectangle"的矩形類。要求如下：
1、 構(gòu)造函數(shù)只包含兩個(gè)參數(shù)，依次為"height"、“width”
2、設(shè)置Getter，當(dāng)獲取該對象的"area"屬性時(shí)，返回該對象"height"與"width"屬性的乘積
示例1輸入：
new Rectangle(12,12).area
輸出：
144
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
class Rectangle {
// 補(bǔ)全代碼
constructor(height, width) {
this.height = height
this.width = width
}
get area() {
return this.calcArea()
}
calcArea() {
return this.height * this.width
}
}
</script>
</body>
</html>
????constructor
在一個(gè)類中只能有一個(gè)constructor方法，本質(zhì)是一個(gè)構(gòu)造函數(shù)，如果一個(gè)類不指定一個(gè)構(gòu)造函數(shù)(constructor)方法, 則使用一個(gè)默認(rèn)的構(gòu)造函數(shù)(constructor)。constructor 是一種用于創(chuàng)建和初始化class創(chuàng)建的對象的特殊方法。
let getConst={}
getConst.constructor
// Object() { [native code] } 這個(gè)可以看下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、詳細(xì)步驟。
~~ ????1）構(gòu)造函數(shù)中需要兩個(gè)參數(shù)分別為“width”和“height”
~~ ????2）可以選擇創(chuàng)建一個(gè)返回“width”與“height”乘積的方法
~~ ????3）對“area”函數(shù)使用“get”計(jì)算，該函數(shù)返回第二步的方法
????控制動(dòng)畫
問題 4：
請補(bǔ)全代碼，要求當(dāng)滑動(dòng)id為"range"的滑塊控件時(shí)可以改變id為"rect"的矩形旋轉(zhuǎn)速度。要求如下：
1、id為"rect"的矩形初始動(dòng)畫周期為10秒
2、id為"range"的滑塊控件默認(rèn)值為1、最小值為、最大值為10、滑動(dòng)間隔為1
3、當(dāng)滑動(dòng)滑塊值為1時(shí)，矩形動(dòng)畫周期為10秒、當(dāng)…，為…、當(dāng)滑動(dòng)滑塊值為10時(shí)，矩形動(dòng)畫周期為1秒
注意：
1、必須使用DOM0級(jí)標(biāo)準(zhǔn)事件（onchange）
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
#rect {
width: 120px;
height: 100px;
background-color: black;
/*補(bǔ)全代碼*/
animation: rect 10s linear infinite;
}
@keyframes rect {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 補(bǔ)全代碼 -->
<div id="rect"></div>
<input id="range" type="range" step="1" defaultValue="1" value="1" min="1" max="10">
<script type="text/javascript">
// 補(bǔ)全代碼
document.querySelector('#range').onchange = function () {
let speed = document.querySelector('#range').value
document.querySelector('#rect').style.animationDuration = 11 - speed + 's'
}
</script>
</body>
</html>
????animation動(dòng)畫
制作動(dòng)畫分為兩步：
定義動(dòng)畫 @keyframes
使用(調(diào)用)
@keyframes(關(guān)鍵幀) 定義動(dòng)畫
@keyframes animation{
0%{
...
}
100%{
...
}
}
0%是動(dòng)畫的開始，100%是動(dòng)畫的完成。這樣的規(guī)則就是動(dòng)畫序列。
在 @keyframes 中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
請用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞"from"和"to",等同于0%和100%。
????什么是三元表達(dá)式
例1：
console.log(true ? 1 : 2) //返回1 因?yàn)槭莟rue 返回時(shí)1
console.log(false ? 1 : 2) //返回2 因?yàn)闀r(shí)false 返回2
例2：
if(條件表達(dá)式){
表達(dá)式1
}else{
表達(dá)式2
}
等價(jià)于
條件表達(dá)式？表達(dá)式1：表達(dá)式2
總結(jié)：
????1、核心步驟。
~~ ????1）首先設(shè)置id為”rect“矩形的動(dòng)畫屬性
~~ ????2）補(bǔ)全id為”range’“的滑動(dòng)框
~~ ????3）獲取到id為”range“的滑動(dòng)框并添加改變事件并且在改變事件中修改id為”rect“的矩形動(dòng)畫周期事件
????js中哪些操作會(huì)造成內(nèi)存泄漏?
????1.意外的全局變量
由于我們使用未聲明的變量，而意外的創(chuàng)建了一個(gè)全局變量，而使這個(gè)變量一直留在內(nèi)存中無法被回收。
????2.被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)。
當(dāng)我們設(shè)置了setinterval定時(shí)器，而忘記取消它，如果循環(huán)函數(shù)有對外部變量的引用的話，那么這個(gè)變量會(huì)被一直留在內(nèi)存中，而無法被回收。
????3.脫離DOM的引用
我們獲取一個(gè)DOM元素的引用，而后面這個(gè)元素被刪除，由于我們一直保留了對這個(gè)元素的引用，所以它也無法被回收。
????4.閉包
不合理的使用閉包，從而導(dǎo)致某些變量─直被留在內(nèi)存當(dāng)中。
看著是不是感覺手有點(diǎn)癢癢的了。那就來注冊下自己試試吧，試試才知道好不好，試試才知道適不適合自己。就算最后沒用這款軟件那也嘗試過，不后悔。
可以伴隨一生的編程軟件（完全免費(fèi)），從學(xué)校到社會(huì)工作，時(shí)時(shí)刻刻你都可以用到，感興趣的可以去注冊試試可以伴隨程序員一生的app文章來源：http://www.zghlxwxcb.cn/news/detail-808526.html
覺得有用的可以給個(gè)三連，關(guān)注一波?。?！帶你玩轉(zhuǎn)前端文章來源地址http://www.zghlxwxcb.cn/news/detail-808526.html
到了這里，關(guān)于前端面試寶典~Symbol、相同的Set、Getter、控制動(dòng)畫、js中哪些操作會(huì)造成內(nèi)存泄漏?等......的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
