2024年最新JavaScript学习3：数组、函数、作用域、预解析、对象，2024年最新Web前端面试题2024pdf

本文链接：https://blog.youkuaiyun.com/2401_84411018/article/details/138874728

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

常用算法面试题：

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

        console.log(num); //undefined
        var num = 10;
        //相当于
        var num;
        console.log(num);
        num = 10;



        fun();//报错 fun is not a function
        var fun = function () {
            console.log(10);
        }
        // 相当于
        var fun;
        fun();
        fun = function () {
            console.log(10);
        }

②函数预解析（函数提升）：把所有函数声明提升到当前作用域最前面，不调用函数。
如：

        fun();//正常运行
        function fun() {
            console.log(10);
        }
        // 相当于
        function fun() {
            console.log(10);
        }
        fun();

代码执行：按照代码的书写顺序从上往下执行

预解析案例：

        //案例1
        var num = 10;
        fun();
        function fun() {
            console.log(num); //结果为undefined 就近原则
            var num = 20;
        }
        // 相当于
        var num;
        function fun() {
            var num;
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();

        //案例2
        var num = 10;
        function fn() {
            console.log(num); //结果为undefined
            var num = 20;
            console.log(num); //结果为20
        }
        fn();
        //相当于
        var num;
        function fn() {
            var num;
            console.log(num);
            num = 20;
            console.log(num);
        }
        num = 10;
        fn();

        //案例3
        f1(); //结果 9 9 9
        console.log(c); //9
        console.log(b); //9
        console.log(a); //报错 a is not defined
        function f1() {
            var a = b = c = 9;
            //等价于var a = 9; b = 9; c = 9; b和c直接赋值 没有var声明，当全局变量看
            //集体声明的正确形式：var a = 9, b = 9, c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        //相当于
        function f1() {
            var a;
            a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

五、对象

对象：是一组无序的相关属性和方法的集合

创建对象的三种方式

        //创建对象的三种方式
        //1. 利用对象字面量创建对象{}
        var obj = {};
        var obj1 = {
            uname: 'vivian', //属性
            age: 18,
            sex: '女',
            sayHi: function () { //方法
                console.log('hi');
            }
        }
        //使用对象
        console.log(obj1.uname);
        console.log(obj1['uname']);
        obj1.sayHi();

        //2. 利用new Object 创建对象
        var obj2 = new Object();
        obj2.uname = 'summer';
        obj2.sayHi = function () {
            console.log(hi);
        }

        //3. 利用构造函数(可以创建多个对象)
        //构造函数：就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
        //格式
        // function 构造函数名(){
        // this.属性 = 值;
        // this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 18, '男'); //返回一个对象
        console.log(ldh.uname);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');

        // 注意点：
        // 1. 构造函数名字首字母大写
        // 2. 调用构造函数必须使用new
        // 3. 构造函数不需要return 就可以返回一个对象
        // 4. 属性和方法前面加this

注意：构造函数和对象的区别

构造函数是泛指某一大类，相当于java里面的类
对象是特指具体的，相当于java里面的‘对象’
利用构造函数创建对象的过程叫做实例化

new关键字执行过程：
①在内存中创建一个空的对象
②this指向刚才创建的对象
③执行构造函数里面的代码给这个空对象添加属性和方法
④返回这个对象
遍历对象属性（for in）

        var obj = {
            name: 'vivian',
            age: 18,
            sex: '女'
        }
        for (var k in obj) {
            console.log(k);//输出变量名
            console.log(obj[k]);//输出属性值
        }

六、内置对象

查文档（MDN Mozilla开发者网络）
https://developer.mozilla.org/zh-CN/

JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
自定义对象和内置对象属于js基础内容，属于ECMAScript；浏览器对象属于JS独有的，在JS API讲解
内置对象：JS自带的一些对象，提供一些常用和基本的功能（属性和方法），帮助快速开发。

1. Math对象

        // Math数学对象
        console.log(Math.PI); // 圆周率
        console.log(Math.max(1, 99, 3)); // 99
        console.log(Math.max(1, 2, 'vivian')); // NaN
        console.log(Math.max()); // -Infinity
        console.log(Math.abs(-1)); //1 
        console.log(Math.abs('-1')); //1
        console.log(Math.floor(1.1)); //1 向下取整
        console.log(Math.ceil(1.1)); //2 向上取整
        console.log(Math.round(1.5)); //2 四舍五入(.5往大取)
        console.log(Math.round(-1.5)); //-1
        console.log(Math.random());//[0,1)
        //返回[min,max]之间的随机整数 （看官方文档）
        function getRandom(min, max) {
            return Math.floor(Math.random() \* (max - min + 1)) + min;
        }
        console.log(getRandom(1, 5));
        //随机点名
        var arr = ['vivian', 'carrie', 'apple', 'summer'];
        console.log(arr[getRandom(0, arr.length - 1)]);

2. 日期对象

        //Date() 日期对象 是一个构造函数
        var date = new Date();
        console.log(date); //Wed Feb 24 2021 10:19:09 GMT+0800 (中国标准时间)
        var date2 = new Date('2020-2-7 8:8:8');
        console.log(date2); //Fri Feb 07 2020 08:08:08 GMT+0800 (中国标准时间)
        //格式化日期 获取单独的再按照需求 拼接起来
        console.log(date2.getFullYear()); //2020
        console.log(date2.getMonth() + 1); // 2 月份使用要加1 
        console.log(date2.getDate()); //7
        console.log(date2.getDay()); //5 星期 （周日为0）
        console.log(date2.getHours()); //8
        console.log(date2.getMinutes()); //8
        console.log(date2.getSeconds()); //8

		//获得距1970年1月1日至今的总毫秒数(时间戳 永远不会重复)
        var date = new Date();
        console.log(date.valueOf()); //1614134904253
        console.log(date.getTime()); //1614134904253
        //更常用写法
        var date1 = +new Date();
        console.log(date1); //1614134904253
        //H5新增方法
        console.log(Date.now()); //1614134904253

倒计时案例：

        //倒计时案例
        function countDown(time) {
            var nowTime = +new Date(); //当前时间总毫秒数
            var futureTime = +new Date(time); //用户输入时间总毫秒数
            var totalTime = (futureTime - nowTime) / 1000; //剩余时间总秒数
            var d = parseInt(totalTime / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            var h = parseInt(totalTime / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(totalTime / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(totalTime % 60);
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2021-3-10 18:00:00')); //14天06时56分20秒

3. 数组对象

①创建数组、检测是否为数组instanceof、isArray()、增减数组元素 push()、unshift()、pop()、shift()

        //创建数组
        var arr1 = new Array(2); //创建了长度为2的空数组
        var arr2 = new Array(2, 3); //创建了[2,3]
        //检测是否为数组 instanceof 、isArray(H5新增 ie9以上支持)
        var arr3 = [];
        var obj = {};
        console.log(arr3 instanceof Array); //true
        console.log(obj instanceof Object); //true
        console.log(Array.isArray(arr3)); //true
        //新增元素 push()
        var arr4 = [1, 2, 3];
        arr4.push(4, 'vivian'); //该表达式也有返回值 返回5（长度）
        console.log(arr4); //[1, 2, 3, 4, "vivian"]
        //在前面新增元素 unshift()
        arr4.unshift('red', 'blue'); //该表达式也有返回值 返回7（长度）
        console.log(arr4); //["red", "blue", 1, 2, 3, 4, "vivian"]
        //删除数组最后一个元素 pop()
        arr4.pop(); //有返回值 返回删除的元素 :vivian
        console.log(arr4); //["red", "blue", 1, 2, 3, 4]
        //删除数组第一个元素 shift()
        arr4.shift(); //返回删除的元素：red
        console.log(arr4); //["blue", 1, 2, 3, 4]

②翻转数组 reverse()、数组排序（重点）sort()

        //翻转数组
        arr4.reverse();
        console.log(arr4); //[4, 3, 2, 1, "blue"]
        //数组排序
        var arr5 = [13, 4, 77, 7, 1];
        arr5.sort();
        console.log(arr5); //[1, 13, 4, 7, 77] 会出问题
        // 正确写法 （记住）
        var arr6 = [13, 4, 77, 7, 1];
        arr6.sort(function (a, b) {
            return a - b; //b - a降序
        });
        console.log(arr6);// [1, 4, 7, 13, 77]

③返回数组索引号 indexOf(‘元素’)

        // 返回数组的索引号(第一个匹配)
        var arr7 = ['vivian', 'summer', 'carrie', 'apple', 'apple'];
        console.log(arr7.indexOf('vivian')); //0
        console.log(arr7.indexOf('hhh')); //-1
        console.log(arr7.lastIndexOf('apple')); //4

④数组去重（重点）

核心算法：遍历旧数组，拿旧数组的元素去查询新数组，如果不存在（indexOf（数组元素）为-1）就加进新数组，否则不加。

        //数组去重（重点）
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        console.log(unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])); //["c", "a", "z", "x", "b"]

⑤数组转换为字符串 toString()、join(‘分隔符’)

        //数组转换为字符串
        var arr = [1, 2, 4];
        console.log(arr.toString()); //1,2,4
        console.log(arr.join('-')); //1-2-4 默认为,

⑥其他（更多查文档）

在这里插入图片描述

4. 字符串对象

①基本包装类型：把简单数据类型包装为复杂数据类型，这样一来，基本数据类型就有了属性和方法，String、Boolean、Number都有

        var str = 'vivian';
        console.log(str.length); //6
        //其中js把基本数据类型进行了包装，过程如下：
        //1.生成临时变量，把简单数据类型包装成复杂数据类型
        var temp = new String('vivian');
        //2.赋值给我们的字符变量
        str = temp;
        //3.销毁这个临时变量
        temp = null;

②字符的不可变性

只是指向改变，原有的空间占用还存在，因此要减少字符串赋值和拼接

        var str = 'vivian';
        str = 'summer';

在这里插入图片描述
注意：字符串的所有方法，都不会改变字符串本身，操作完成会返回一个新的字符串

③返回字符位置（indexOf(‘目标’[,起始位置])，和数组一样）

        var str = 'vivian';
        //查找字符位置，indexOf('目标'[,起始位置])
        console.log(str.indexOf('i')); //1
        console.log(str.indexOf('i', 2)); //3

例子：查找字符串中某个字符出现的位置和次数（重点）（数组同理）
核心思路：先查找第一个符合要求（‘o’）的位置，然后打印出来并增加计数，利用indexOf(‘o’，下一次起始位置)进行循环。

        //查找字符串中某个字符的位置和出现的总次数
        var str = 'abgcodosogahsdopp';
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/084ac00a3df340d61cb98135a6429434.webp?x-oss-process=image/format,png)
> 









起始位置])
        console.log(str.indexOf('i')); //1
        console.log(str.indexOf('i', 2)); //3

        //查找字符串中某个字符的位置和出现的总次数
        var str = 'abgcodosogahsdopp';
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> [外链图片转存中...(img-v8jjvwsd-1715700115757)]
>