前端面试宝典~Symbol、相同的Set、Getter、控制动画、js中哪些操作会造成内存泄漏 等

console.log(Array.from(‘ABC’));

**`结果：`**

[“A”,“B”,“C”]

---


**`🍵🍵等号【=】`**  
 **js中的等号个数不同，意思也不同。**  
 **`=`** ：代表赋值，将右侧的值赋给左侧的变量。  
 **`==`** ：**这是相等运算符，相等返回true,否则返回false。当使用它来进行比较时，如果值的类型不同，会自动进行类型转换，将其转换为相同的类型，然后再进行比较，这里涉及到一些数据类型转换的知识。**  
 **`===`** ： **全等，用来判断两个值是否全等，它和相等相似，不同的是它不会做类型转换，如果两值类型不同，直接返回false。**




---


**`🍵🍵indexOf`**  
 **`array.indexOf(searchElement[, fromIndex]);`**  
 **`array`：表示一个数组对象。  
 `searchElement`：必需参数，要在 array 中定位的值。  
 `fromIndex`：可选参数，用于开始搜索的数组索引。如果省略该参数，则从索引 0 处开始搜索。如果 fromIndex 大于或等于数组长度，则返回 -1。如果 fromIndex 为负，则搜索从数组长度加上 fromIndex 的位置处开始。  
 indexOf() 方法是按升序索引执行搜索，即从左到右进行检索。检索时，会让数组元素与 searchElement参数值进行全等比较===。**

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)`**  
 **参数值**  
 **`separator`** **可选**。**字符串或正则表达式，从该参数指定的地方分割 string Object。**  
 **`limit`** **可选**。**该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。**


**返回值**  
 **`Array`** **一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。**


**`例如：`**

var str=“How are you doing today?”;
var n=str.split(" ",3);

**`结果：`**

How,are,you

---


**`总结：`**  
 **🥭🥭1、先通过Array.from()转换为数组实例，在sort排序一下，最后tostring一下判断两个是否相等【===】。**




---




---


## 🍓🍓Getter



> 
> **问题 3：  
>  请补全JavaScript代码，完成名为"Rectangle"的矩形类。要求如下：  
>  1、 构造函数只包含两个参数，依次为"height"、“width”  
>  2、设置Getter，当获取该对象的"area"属性时，返回该对象"height"与"width"属性的乘积**  
>  **示例1**  
>  **`输入：`**
> 
> 
> 

new Rectangle(12,12).area

**`输出：`**

144

**`解答：`**

![在这里插入图片描述](https://img-blog.csdnimg.cn/c2cc82a4004c4adb8e82065838930e9c.png)


**`🎂🎂constructor`**  
 **在一个类中只能有一个constructor方法，本质是一个构造函数，如果一个类不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。**  
 **`constructor 是一种用于创建和初始化class创建的对象的特殊方法。`**

let getConst={}
getConst.constructor
// Object() { [native code] } 这个可以看下js对象的解析过程
或
function getConst(){
this.name=“构造函数”
}
let newConst=new getConst();
newConst.constructor.name
//‘getConst’

**`注意：`**  
 **1、函数名首字母必须大写  
 2、内部使用this对象，来指向将要生成的对象实例  
 3、使用new操作符来调用构造函数，并返回对象实例**




---


**总结：**  
 **`🥭🥭1、详细步骤。`**  
 **~~ 💖💖1）构造函数中需要两个参数分别为“width”和“height”  
 ~~ 💖💖2）可以选择创建一个返回“width”与“height”乘积的方法  
 ~~ 💖💖3）对“area”函数使用“get”计算，该函数返回第二步的方法**




---




---




---


## 🍓🍓控制动画



> 
> **问题 4：  
>  请补全代码，要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下：  
>  1、id为"rect"的矩形初始动画周期为10秒  
>  2、id为"range"的滑块控件默认值为1、最小值为、最大值为10、滑动间隔为1  
>  3、当滑动滑块值为1时，矩形动画周期为10秒、当…，为…、当滑动滑块值为10时，矩形动画周期为1秒**
> 
> 
> 


**`注意：`**  
 **1、必须使用DOM0级标准事件（onchange）**


**`解答：`**

<script type="text/javascript">
    // 补全代码
    document.querySelector('#range').onchange = function () {
        let speed = document.querySelector('#range').value
        document.querySelector('#rect').style.animationDuration = 11 - speed + 's'
    }
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/56de53b9352f4fa1b41d894ab37526d5.png)  
 **`🍵🍵animation动画`**  
 **制作动画分为两步：**

定义动画 @keyframes
使用(调用)

**`@keyframes(关键帧) 定义动画`**

@keyframes animation{
0%{
…
}
100%{
…
}
}

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。

在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%。

---


**`🎂🎂什么是三元表达式`**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8dc8c9a77d57423196e7374b47c487e0.png)  
 **`例1：`**

console.log(true ? 1 : 2) //返回1 因为是true 返回时1
console.log(false ? 1 : 2) //返回2 因为时false 返回2

**`例2：`**

if(条件表达式){
表达式1
}else{
表达式2
}

**`等价于`**

条件表达式？表达式1：表达式2

---




---



> 
> **总结：**  
>  🥭🥭1、核心步骤。  
>  **~~ 💖💖1）首先设置id为”rect“矩形的动画属性  
>  ~~ 💖💖2）补全id为”range’“的滑动框  
>  ~~ 💖💖3）获取到id为”range“的滑动框并添加改变事件并且在改变事件中修改id为”rect“的矩形动画周期事件**
> 
> 
> 




---




---




---




---


## 🍓🍓js中哪些操作会造成内存泄漏?


**`🥭🥭1.意外的全局变量`**



> 
> **由于我们使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。**
> 
> 
> 


**`🥭🥭2.被遗忘的计时器或回调函数。`**



> 
> **当我们设置了setinterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。**
> 
> 
> 


**`🥭🥭3.脱离DOM的引用`**



> 
> **我们获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。**
> 
> 
> 


**`🥭🥭4.闭包`**



> 
> **不合理的使用闭包，从而导致某些变量─直被留在内存当中。**
> 
> 
> 




---




---


**看着是不是感觉手有点痒痒的了。那就来注册下自己试试吧，试试才知道好不好，试试才知道适不适合自己。就算最后没用这款软件那也尝试过，不后悔。**  
 **可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到**，**感兴趣的可以去注册试试**[可以伴随程序员一生的app](https://bbs.csdn.net/topics/618545628)



![img](https://img-blog.csdnimg.cn/img_convert/be03c5fffc5381b56ac9ed1905a0fd07.png)
![img](https://img-blog.csdnimg.cn/img_convert/f8a1ac81b05bc1ce47a73dac17500792.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

道好不好，试试才知道适不适合自己。就算最后没用这款软件那也尝试过，不后悔。**  
 **可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到**，**感兴趣的可以去注册试试**[可以伴随程序员一生的app](https://bbs.csdn.net/topics/618545628)



[外链图片转存中...(img-UdKV9ya6-1714184179314)]
[外链图片转存中...(img-AROBI2uT-1714184179314)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**