最全前端面试宝典~Symbol、相同的Set、Getter、控制动画，大数据开发语言基础教程

本文链接：https://blog.csdn.net/tencentes/article/details/138935219

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

let id1 = Symbol('id');
let id2 = Symbol('id');
console.log(id1 == id2);  //false

总结：
🥭🥭1、核心步骤：
🍵🍵1）生成空对象，遍历数组。
🍵🍵2）生成Symbol实例，初始化时将数组的该项带入
🍵🍵3）设置对象键名、键值
🍵🍵4）返回对象

🍓🍓相同的Set

问题 2:
请补全JavaScript代码，要求以boolean的形式返回两个Set对象参数是否一样，是则返回true，否则返回false。

解答：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script>
            const \_isSameSet = (s1, s2) => {
                // 补全代码
                return Array.from(s1).sort.toString() === Array.from(s2).sort.toString();
            }
        </script>
    </body>
</html>

在这里插入图片描述
🍵🍵Array.from
Array.from可以从类似的数组或可迭代对象中创建一个新的、浅拷贝的数组实例。
Array.from接收三个参数：必须选择类似数组的对象、加工函数、this作用域，例如：

Array.from(A,B,C)

A： 想要转换成数组的伪数组对象或可迭代对象。
B ： 如果指定了该参数，新数组中的每个元素会执行该回调函数。
C ： 可选参数，执行回调函数 mapFn 时 this 对象。

例1、：

console.log(Array.from([1, 2, 3], x => x + x))

结果

[2, 4, 6]

例2、：

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

输出：

解答：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
</head>
<body>
    <script type="text/javascript">
        class Rectangle {
            // 补全代码
            constructor(height, width) {
                this.height = height
                this.width = width
            }
            get area() {
                return this.calcArea()
            }
            calcArea() {
                return this.height \* this.width
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

🎂🎂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）

解答：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <style type="text/css">
        #rect {
            width: 120px;
            height: 100px;
            background-color: black;
            /\*补全代码\*/
            animation: rect 10s linear infinite;
        }
        @keyframes rect {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 补全代码 -->
    <div id="rect"></div>
    <input id="range" type="range" step="1" defaultValue="1" value="1" min="1" max="10">

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

在这里插入图片描述
🍵🍵animation动画
制作动画分为两步：

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

@keyframes(关键帧) 定义动画

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

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

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

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

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

🎂🎂什么是三元表达式
在这里插入图片描述
例1：

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

例2：

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

等价于



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

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

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


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

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

例2：

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

等价于



[外链图片转存中...(img-ldsyYVG3-1715802676480)]
[外链图片转存中...(img-b0TdXott-1715802676480)]

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

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


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