2024年Web前端最新JavaScript入门到精通（四）连载，前端校招面试经验汇总-CSDN博客

本文链接：https://blog.csdn.net/2301_82243603/article/details/138473279

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个认识自己的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

没有输出我们要的结果，也没有报错的原因是由于JS解释器的预解析，相当于执行了以下代码


var num;

console.log(num);

num = 10;

经历预解析，变量提到最前面不进行赋值操作，而代码又从上往下执行，输出的只能是undefined

案例2

正常函数调用，调用函数放在函数声明前面是可以运行的，但函数表达式不行，这次我们以函数表达式声明函数方式举例，代码运行结果如下所示


func();//建议：调用函数必须写在函数表达式的下面，这次以举例为例说明原因

var func = function (){ 

    console.log('张小凡');

}

代码报错的原因是相当于执行了以下代码，声明一个变量没有赋值，又调用了这个变量+();是肯定报错的。代码如下。


var func;

func();

func = function (){

    console.log('张小凡');

}

案例3

经过上面两个案例说明应该了解了变量提升和函数提升，现在将两者柔和一起来试试看~~~


var num = 10;

fun();

function fun(){

    console.log(num);

    var num = 20;

}

观察上面代码，根据步骤一步一步来，知道浏览器解释器是怎么执行这段代码的。


var num;

function fun(){ //函数内部也是要执行预解析的

    var num; //因为就近原则，不会去找全局作用域里面声明的num = 10;所以undefined

    console.log(num);

    num = 20;

}

num = 10;

fun();

案例4

在用案例巩固一下~~ ，加深自己是意识。请看下面代码


f1();

console.log(c);

console.log(b);

console.log(a);



function f1() {

    var a = b = c = 9;

    console.log(a);

    console.log(b);

    console.log(c);

}

思考一下，代码会以什么顺序执行呢，请看下面~~~


function f1() {

    var a;

    a = b = c = 9;

    // 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);

}

f1();

console.log(c);

console.log(b);

console.log(a); //属于局部变量， 报错

调用了f1();函数，又console.log()三个数，本来能输出六个数字，但因为最后一个 console.log(a);中的a属于局部变量，访问不了所以报错信息里面提示 a is not defined 原因找到。

2.JS作用域

2.1 定义

JavaScript作用域：就是代码名字(变量) 在某个范围内起作用和效果目的：提高程序的可靠性以及减少命名冲突。

2.2 作用域分类

全局作用域：整个script标签或者是一个单独的js文件

局部作用域：(函数作用域)在函数内部就是局部作用域只在函数内起作用和效果。

2.3 变量作用域(根据作用域的不同将变量分为全局变量和局部变量)

全局变量：在全局作用域下的变量，在全局下都可以使用; 如果在函数内部，没有声明直接赋值的变量也属于全局变量。

局部变量：在函数作用域下的变量，函数的形参也可以看做是局部变量

从执行效率上看两者的区别：

全局变量只有在浏览器关闭的时候才会销毁，比较占内存资源；局部变量当我们程序执行完毕就会销毁，比较节约内存资源。

2.4 作用域链

内部函数访问外部函数的变量，采用的是链式查找的方式决定哪个值这种结构我们称为作用域链使用的是就近原则。


function fun1 () {//外部函数

    var num = 1;

    function fun2 () {//内部函数

        console.log(num);

    }

    fun2();

}

var num = 2;

fun1();

显而易见，由就近原则可知，结果为 1，接下来再看一段代码~~~


var a = 1;

function fn1 () {

    var a = 2; 

    var b = '22'; 

    fn2();

    function fn2 () {

        var a = 3;

        fn3();

        function fn3 () {

            var a = 4;

            console.log(a); // a的值?

            console.log(b); // b的值?

        }

    }

}

fn1();

采用就近原则很快得到答案，看看和你猜的一不一样~

3. 对象

谈到对象，就要涉及了许多方面的内容了，知识量有点大，现在平静一下~，耐心的看下去。

3.1 定义

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。简而言之：对象是由属性和方法组成。目的：使JS中的对象表达结构更清晰，更强大。

属性：事物的特征，在对象中用属性来表示

方法：事物的行为，在对象中用方法来表示

3.2 创建对象的三种方式

3.2.1 利用字面量创建对象

注意点：1.属性和方法采取键值对的方式键属性名;值属性值 2.多个属性和方法中间逗号隔开 3.方法冒号跟的是一个匿名函数


// var obj = {}; 创建了一个空的对象

var obj = {

    name: '张小凡', //属性区

    age: '18',

    sex: '男',

    say: function () {

        console.log('hello world');

    }

}

// 调用对象属性的方法1：采取对象名.属性名

console.log(obj.name);

// 调用对象属性的方法2：采取对象名['属性名']

console.log(obj['age']);

// 调用对象的方法 say 对象名.方法名()

obj.say();

3.2.2 利用 new Object 创建对象

注意点：采用等号赋值方法添加对象的属性和方法、每个属性和方法之间用分号结束


var obj = new Object();

obj.name = '张小凡'; //追加属性

obj.age = 18;

obj.sex = '男';

obj.say = function () { //追加方法

    console.log('hello world');

}

3.2.3 构造函数创建对象

注意点：1.构造函数泛指某一大类类似于 Java 语言里卖弄的类 2.特点：把对象里面一些相同的属性和方法抽取出来封装(封装的不是普通代码而是对象)到函数里面，这样避免了很多的属性和方法的大量重复


//构造函数的语法格式

//this总是指向函数的直接调用者(而非间接调用者); 如果有new关键字，this指向new出来的那个对象

function 构造函数名 () {

    this.属性 = 值; 

    this.方法 = function () { }

}

new 构造函数名();

案例：


function Family (name,age,sex) {

    this.name = name;

    this.age = age;

    this.sex = sex;

    this.doing = function(result){

        console.log(result);

    }

}

var boy = new Family('张小凡',18,'男');

console.log(boy.name);

console.log(boy['sex']);

boy.result('我在打游戏~')



var girl = new Family('张晓樊',18,'女');

console.log(girl.name);

console.log(girl.sex);

girl.result('我在追剧~')

细节：1、构造函数首字母要大写、构造函数不需要return就可以返回结果、调用构造函数必须使用 new、只要使用new 构造函数名就相当于创建了一个对象。2、我们利用构造函数创建对象的过程我们称为对象的实例化。3、new 构造函数可以在内存中创建一个空的对象函数里面的this都会指向这个空对象，执行构造函数里面的代码给这个空对象添加对象和方法并返回这个新对象

3.3 遍历对象

简言之：for in 遍历我们的对象。


// 格式

for(变量 in 对象){



}

案例：


// 案例

var obj = {

    name:'张小凡',

    age:18,

    sex:'男'

}

for(var key in obj){ //for in 里面的变量我们喜欢写 k 或者 key

    console.log(key); //i 变量输出 得到的是 属性名

    console.log(obj[key]); //obj[i]得到的是属性值

}

3.4 内置对象

定义：指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常见的或是最基本而必要的功能。内置对象的最大优点就是帮助我们快速开发 JS提供多个内置对象：Math、Date等

3.4.1 Math是数学对象不是一个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可。


console.log(Math.PI); //一个属性 圆周率

console.log(Math.max(1,45,42));  //45

console.log(Math.max(1,'张小凡')); //NaN

console.log(Math.max()); // -Infinity 负的无穷大

利用对象封装自己的数学对象


var myMath = {

    PI:3.141592653,

    max:function(){

        var max = arguments[0];

        for(var i = 1;i < arguments.length;i++){

            if(arguments[i]>max){

                max = arguments[i];

            }

        }

        return max;

    },

    min:function(){

        var min = arguments[0];

        for(var i = 1;i < arguments.length;i++){

            if(arguments[i]<min){

                min = arguments[i];

            }

        }

        return min;

    },

}

console.log(myMath.PI);

console.log(myMath.max(1,5,8));

console.log(myMath.min(1,5,8));

3.4.2 绝对值方法


console.log(Math.abs(1)); //1

console.log(Math.abs(-1)); //1

console.log(Math.abs('1')); // 隐式转换 会把字符串型 -1 转换为数字型 1

console.log(Math.abs('张小凡')); //NaN

3.4.3 三个取整方法

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

in;

},

}

console.log(myMath.PI);

console.log(myMath.max(1,5,8));

console.log(myMath.min(1,5,8));




![](https://img-blog.csdnimg.cn/49cda47831104b98a4962ed81893f06f.png)



 3.4.2 绝对值方法

console.log(Math.abs(1)); //1

console.log(Math.abs(-1)); //1

console.log(Math.abs(‘1’)); // 隐式转换会把字符串型 -1 转换为数字型 1

console.log(Math.abs(‘张小凡’)); //NaN




![](https://img-blog.csdnimg.cn/bd414ea6888b424d95e09a6391296961.png)



 3.4.3 三个取整方法




# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

[外链图片转存中...(img-HgA8mjrG-1714912600760)]