JS面试题1

1. 延迟加载JS有哪些方式？

defer: 等html全部解析完成，才会执行js代码，顺次执行js脚本

async：是和html解析同步的，不是顺次执行js脚本（当有很多个js时），是谁先加载完谁先执行。

<script defer type="text/javascript" src='script.js'></script>

<html>
<head><title></title>// <script type="text/javascript" src='script.js'></script> 放这里的话，浏览器会先解析并执行js才会加载dom
</head>
<body><div id='box'>1111111</div><script type="text/javascript" src='script.js'></script> //一般放在这里，这样的话就会先解析dom，其次才解析并执行js，这样做的好处就是，即使js出现了错误也不会影响dom的渲染。
</body>
</html>/* 延迟加载JS */
<html>
<head><title></title>// 这样写，加个defer或者async，就可以做到使JS延迟加载<script defer type="text/javascript" src='script.js'></script>
</head>
<body><div id='box'>1111111</div>
</body>
</html>
// script.js文件
console.log( document.getElementById('box') )

2. JS的数据类型有哪些

基本类型：string,number,boolean,undefined,null,symbol

引用数据类型：object 

3. JS数据类型考题

<script>alert( true + 1); // 2alert( 'name' + true); // nametruealert( undefined +1); // NANalert( typeof null); // obj
</script><script>alert( typeof(NAN) ); // number （NAN是一个数值类型，但不是一个具体的数字）alert( typeof(undefined) ); // undefinedalert( typeof(null) ); // obj
</script>

4. null和undefined的区别

1. 作者在设计js的时候先设计的null（设计js的时候借鉴了java）

2. null会被隐式转换为0（出现错误的时候不容易被发现）——>因此才设计出了undefined

<script>alert ( Number(null) ); // 0alert( Number(undefined) ); // NAN
</script>

具体的区别：

null是一个表示“无”的对象（空指针对象），转为数值时为0；

undefined是一个表示“无”的原始值，转为数值时为NAN;

5. ==和===的区别

==：比较的是值（会通过valueOf进行一个隐式转换）

===：除了比较值，还比较类型

/* 会通过valueOf进行一个隐式转换 */
<script>alert( 1 == '1' ); // ture  会发生隐式转换：string-->numberalert( true == 1 ); // true 会发生隐式转换：boolean-->numberalert( null == undefined ); // truealert( [1,2] == '1,2' ); // true 会发生隐式转换：object-->基本数据类型var s = '2';if( s == 2 ){alert ( typeof s ); //string  注意这里还是string，而不是number}
</script>/* valueOf()方法通常由JavaScript在后台自动调用，并不显式的出现在代码中*/

6. JS的微任务和宏任务

JS语言的一大特点就是单线程，也就是说，同一时间只能做一件事。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着。

代码执行任务的优先级：同步代码>异步代码（微任务>宏任务）

7. JS作用域

1. 除了函数外，JS没有块级作用域

/* 因为函数有作用域，所以拿不到a */
<script>
function fun(){var a = 10;
}
fun();
console.log(a); // 会报错"a is not defined"
</script>/* 因为没有作用域，所以可以打印出i */
<script>
for( var i=0; i<10; i++){
}
console.log( i ); //i打印出结果为10
</script>

2. 作用域是指这个变量或者说这个代码起作用的范围

作用域链：内部可以访问外部的变量，但外部不可以访问内部的

/* 内部是可以访问外部的 */
<script>
function fun(){var a = 10;function foo(){console.log( a ); // a为10}foo();
}
foo();
</script>
/* 内部有先拿内部的，没有再去外部找 */
<script>
var a = 10;
function fun(){var a = 20;function foo(){var a = 30;console.log( a ); // a为30}foo();
}
foo();

注意声明变量是用var还是没有写（window.)

<script>
(function(){var a = b = 10; （b前面没有var）
})()
console.log( b ); //此时b的值为10
</script>/* b的写法相当于全局有个b */
<script>
var b = 10
(function(){var a = b = 10;
})()
console.log( b ); //此时b的值为10
</script>

JS有变量提升的机制（变量悬挂声明）

/* 这样打印会报错 */
<script>
function fun(){console.log(str)
}
</script>/* 这样写会打印出undefined */
<script>
function fun(){console.log(str)var str = '11111'
}
</script>/* 上面那样写是因为变量提升，其实就相当于这样写 */
<script>
function fun(){var strconsole.log(str) // 所以才会打印出undefinedstr = '11111'
}
</script><script>
var name = 'a';
(function(){if(typeOf name == 'undefined'){var name = 'b';console.log('111' + name); // 最终会打印出111b（因为name会变量提升）}else{console.log('222' + name);}
})()
</script>

声明变量的优先级 > 声明普通函数 > 参数 > 变量提升

<script>
function fun(){var a = 10;function a(){}console.log( a ); // 打印10
}
fun()
</script><script>
function fun(){var a = 10;var a = function (){}console.log( a ); // 打印出函数
}
fun()
</script><script>
function fun(){console.log( a ); // 打印出函数var a = 10;function a(){}
}
fun();
</script><script>
function fun(a){console.log( a ); // 打印出100var a = 10;
}
fun(100);
</script><script>
function fun(a){console.log( a ); // 打印出函数function a (){};
}
fun(100);
</script><script>
function fun(a){var a = 10;function a (){};console.log( a ); // 打印出10
}
fun(100);
</script>

8. JS对象

对象是通过new操作符构建出来的，所以对象之间不相等（除了引用外）

<script>
console.log( [1,2,3] === [1,2,3] ) // false
</script>

对象要注意引用的时候

<script>
var obj1 = {a : 1
};
var obj2 = obj1;
console.log(obj1,obj2); // 打印出的值是一样的obj2.a = 'aaaaaa';
console.log(obj1,obj2) // 打印出的值依然是一样的var arr1 = [1,2,3];
var arr2 = arr1;
console.log( arr1 === arr2 ); // 打印出true
</script>

对象的key永远都是字符串

<script>
var obj1 = {a: 1,'张三': '你好'
}
for (var k in obj1){console.log(k); // a 张三console.log( typeof k ); // string string
}
</script><script>
var o = {b: 'bbbb'
}
var obj1 = {a: 1,'张三': '你好'
}
obj1[o] = '123'
for (var k in obj1){console.log(k); // a 张三 [object object]console.log( typeof k ); // string string string（因为此时的obj1已经变成obj1={a:1, '张三': '你好', '{}':'123'}
}
</script><script>
var a = {}
var b = {key: 'a',
}
var c = {key: 'c',
}
a[b] = '123'; // 此时a就会变成 var a = { '[Object Object]': '123'}
a[c] = '456'; // c其实也是'[Object Object]'，那么它的456就会覆盖前面的123
console.log( a[b] ); //打印的结果是456
/* 其实就相当于 */
let m = {}
m.a = 1;
m.a = 2;
console.log( m.a ); // 打印出的结果肯定是2
</script>

对象如何找属性和方法（每一个对象都是通过构造函数构建出来的）

先在对象本身找 ==> 构造函数中找 ==> 对象原型中找 ==> 原型对象中找 ==> 对象上一层原型中找

每一个函数都自带一个prototype属性，也就是我们说的原型

原型和原型链-CSDN博客

/* 综合题目1 */
function Foo(){getName = function(){console.log(1)} //注意，此处的getName是全局的，是window.getNamereturn this; // 也就是window
}
Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console.log(3)}
var getName = function(){console.log(4)}
function getName(){console.log(5)
}
Foo.getName(); // 2
getName; // 4
Foo().getName(); // 1 ——>相当于是window.getName()
getName(); // 1
new Foo().getName(); // 3/* 综合题目2 */
var o = {a: 10,b: {fn: function(){console.log( this.a ); // b里面没有a，所以打印的结果是undefinedconsole.log( this ); // 打印出b这个对象{fn: f}}}
}
o.b.fn();/* 综合题目3 */
window.name = 'xiongxinyu';
function A(){this.name = 123;
}
A.prototype.getA = function(){console.log(this)return this.name + 1;
}
let a = new A();
let funcA = a.getA;
funcA(); // 结果是打印了window，返回了xiongxinyu1/* 综合题目4 */
var length = 10;
function fn(){return this.length + 1;
};
var obj = {length: 5,test1: function(){return fn();}
}
obj.test2 = fn; 
/* 执行完上一行代码，相当于obj变成了
var obj = {length: 5,test1: function(){return fn();}，test2: function fn(){return this.length + 1;};
} */
console.log( obj.test1() ); // 这是一个闭包的过程，this指向的是window，所以最后结果是11
console.log( fn() === obj.test2() ); // false // fn()返回的是11，obj.test2中的this代表的是obj，所以返回的是6
console.log( obj.test1() == obj.test2() ); // false 11并不等于6

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/36596.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MK米客方德SD NAND磨损均衡技术

MK米客方德SD NAND磨损均衡技术

上次MK给大家讲解了MK SD NAND异常掉电保护机制&#xff0c;不少的工程师朋友们对此挺感兴趣&#xff0c;今天再和大家聊一聊SD NAND内部的另外一个核心技术SD NAND&#xff1a;磨损均衡&#xff08;Wear Leveling&#xff09;。 SD NAND内部主要由NAND Flash和Flash Controll…
阅读更多...
Python操作MySQL数据库--使用pymysql模块

Python操作MySQL数据库--使用pymysql模块

Python操作MySQL数据库--使用pymysql模块 一、新建数据库和数据表1.1 新建book数据库1.2 新建bookprice数据表二、连接数据库2.1 建立数据库连接三、新增数据3.1 新增单条数据3.2 新增多条数据3.3 批量新增四、修改数据4.1 修改单条数据4.2 修改多条数据五、删除数据5.1 删除单…
阅读更多...
【Android Studio】Notification通知提醒功能完整代码以及踩坑记录

【Android Studio】Notification通知提醒功能完整代码以及踩坑记录

前言&#xff1a;在最近学习安卓通知功能的开发中&#xff0c;遇到了一些坑&#xff0c;困扰了我一些时间&#xff0c;搜集了大量资料写个博客总结一下&#xff0c;希望对大家有帮助。 目录 一、启动项目闪退 1.1、问题详情 1.2、解决方法 二、点击通知无法跳转 2.1、问题…
阅读更多...
ONLYOFFICE8.1新版本桌面编辑器测评

ONLYOFFICE8.1新版本桌面编辑器测评

什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一套功能强大的文档编辑器&#xff0c;支持编辑处理文本文档、电子表格、演示文稿、可填写的表单、PDF&#xff0c;可多人在线协作&#xff0c;支持 AI 集成。 该套件可在 Windows、Linux、Android 和 iOS上使用&#xff0c;包括网页…
阅读更多...
最大团问题--回溯法

最大团问题--回溯法

一、相关定义 给定一个无向图 &#xff0c;其中 V 是图的顶点集&#xff0c;E图的边集 完全图&#xff1a;如果无向图中的任何一对顶点之间都有边&#xff0c;这种无向图称为完全图 完全子图&#xff1a;给定无向图 &#xff0c;如果 &#xff0c;且对应任意 且 &#xff0c;则…
阅读更多...
x264 码率控制 VBV 算法原理：数学模型与数据流转

x264 码率控制 VBV 算法原理：数学模型与数据流转

x264 码率控制 VBV 算法原理 关于 VBV原理的分析可以参考：x264 码率控制 VBV 原理。关于 VBV 算法的源码分析可以参考：x264 码率控制中实现 VBV 算法源码分析。VBV算法介绍 x264中的VBV（Video Buffering Verifier）算法是H.264编码标准的一部分，主要用于码率控制，确保视频…
阅读更多...
【CPP】交换排序：冒泡排序、快速排序

【CPP】交换排序：冒泡排序、快速排序

目录 1.冒泡排序简介代码分析 2.快速排序2.1霍尔版本简介代码分析 2.2挖坑版本2.3前后指针版本2.4非递归的快排思路代码 什么是交换排序&#xff1f; 基本思想&#xff1a;所谓 交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0…
阅读更多...
Node.js 和浏览器环境中都使用 WebSocket

Node.js 和浏览器环境中都使用 WebSocket

使用WebSocket为什么不适配双端 浏览器环境本身就支持 WebSocket&#xff0c;直接使用 JavaScript 内置的 WebSocket 对象来建立连接。 Node中本身并没有内置 WebSocket 协议的支持&#xff0c;所以需要使用第三方库 ws来实现 WebSocket 功能。 一. 使用跨平台 WebSocket 库 …
阅读更多...
2.树莓派4b+ubuntu18.04（ros版本melodic）+arduino mega自制两轮差速小车，实现建图导航功能

2.树莓派4b+ubuntu18.04（ros版本melodic）+arduino mega自制两轮差速小车，实现建图导航功能

这篇文章介绍arduino使用和安装arduino_bridge 将arduino与树莓派连接 查看arduino的端口号&#xff0c;我们这里查看到的时ttyUSB0 ll /dev/ttyUSB*将当前用户添加进dialout组 sudo usermod -a -G dialout your_user_name然后重启树莓派&#xff0c;然后才能生效 然后如果你…
阅读更多...
PyCharm2024 for mac Python编辑开发

PyCharm2024 for mac Python编辑开发

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…
阅读更多...
网络安全筑基篇——反序列化漏洞

网络安全筑基篇——反序列化漏洞

目录 序列化是什么&#xff1f; 反序列化又是什么&#xff1f; 反序列化漏洞的危害 代码样例 常见的魔术方法 修复方式有哪些&#xff1f; 常见的反序列化漏洞 Shiro反序列化漏洞 Fastjson反序列化漏洞 序列化是什么&#xff1f; 将实例化对象转换成字节流的过程 反序…
阅读更多...
Harmony OS UI框架探索笔记

Harmony OS UI框架探索笔记

本文探讨了如何将现有的常用架构理论与Arkts和ArkUI结合起来&#xff0c;使代码更有条理&#xff0c;并利用Previewer快速调整布局&#xff0c;同时在不改变代码的情况下运行显示真实数据。 开发环境 Windows 11DevEco Studio 4.0 ReleaseBuild Version: 4.0.0.600, built on…
阅读更多...
机器人控制系列教程之URDF自动生成工具

机器人控制系列教程之URDF自动生成工具

URDF文件的编写较为复杂&#xff0c;ROS官方提供了URDF的SolidWorks插件&#xff0c;可方便地将 SW 零件和装配体导出为 URDF 文件。导出器将创建一个类似 ROS 的软件包&#xff0c;其中包含网格、纹理和机器人&#xff08;URDF 文件&#xff09;目录。对于单一的 SolidWorks 零…
阅读更多...
API-回调函数

API-回调函数

学习目标&#xff1a; 掌握回调函数 学习内容&#xff1a; 回调函数小结综合案例 回调函数&#xff1a; 如果将函数A做为参数传递给函数B时&#xff0c;我们称函数A为回调函数。 简单理解&#xff1a;当一个函数当作参数来传递给另外一个函数的时候&#xff0c;这个函数就是…
阅读更多...
遗传编程（Genetic Programming, GP）和大规模语言模型（Large Language Models, LLMs）的相似之处

遗传编程（Genetic Programming, GP）和大规模语言模型（Large Language Models, LLMs）的相似之处

遗传编程&#xff08;Genetic Programming, GP&#xff09;和大规模语言模型&#xff08;Large Language Models, LLMs&#xff09;虽然在实现和用途上有所不同&#xff0c;但也有一些相似之处&#xff1a; 相似之处 自动化生成&#xff1a; GP&#xff1a;自动生成程序或表达…
阅读更多...
DM达梦数据库函数分析（与oracle相应函数区别及用法分析）

DM达梦数据库函数分析（与oracle相应函数区别及用法分析）

💝💝💝首先，欢迎各位来到我的博客，很高兴能够在这里和您见面！希望您在这里不仅可以有所收获，同时也能感受到一份轻松欢乐的氛围，祝你生活愉快！ 💝💝💝如有需要请大家订阅我的专栏【数据库系列】哟！我会定期更新相关系列的文章 💝💝💝关注！关注！！请…
阅读更多...
Python生成图形验证码

Python生成图形验证码

文章目录 安装pillow基本用法生成代码 安装pillow pip install pillow 基本用法 特殊字体文字 如下所示&#xff0c;将下载下来的ttf字体文件放到py文件同一文件夹下 分享一个免费下载字体网站&#xff1a;http://www.webpagepublicity.com/free-fonts.html 我选的字体是Baj…
阅读更多...
探索AI的巅峰：详解GPT-3.5与GPT-4系列模型的区别

探索AI的巅峰：详解GPT-3.5与GPT-4系列模型的区别

人工智能领域不断涌现出令人惊叹的技术突破&#xff0c;其中OpenAI的ChatGPT系列模型尤为引人注目。随着GPT-4的发布&#xff0c;技术开发者们对比分析其与前一代GPT-3.5的差异显得尤为重要。本文将深入探讨GPT-3.5和GPT-4系列模型的主要区别&#xff0c;帮助大家更好地理解和应…
阅读更多...
Linux 基于sqlite3数据库的学生管理系统

Linux 基于sqlite3数据库的学生管理系统

一、数据库 sqlite官网&#xff1a;www.sqlite.org 1.1 数据库的安装 离线安装&#xff1a; sudo dpkg -i sqlite3_3.22.0-1ubuntu0.4_amd64.deb //数据库软件 sudo dpkg -i libsqlite3-dev_3.22.0-1ubuntu0.4_amd64.deb //数据库的库函数 在线安装&#xff1a; sudo apt-get …
阅读更多...
推荐系统三十六式学习笔记：原理篇.模型融合13|经典模型融合办法：线性模型和树模型的组合拳

推荐系统三十六式学习笔记：原理篇.模型融合13|经典模型融合办法：线性模型和树模型的组合拳

目录 为什么要融合&#xff1f;“辑度组合”原理逻辑回归梯度提升决策树GBDT二者结合 总结 推荐系统在技术实现上一般划分为三个阶段&#xff1a;挖掘、召回、排序 。 为什么要融合&#xff1f; 挖掘的工作是对用户和物品做非常深入的结构化分析&#xff0c;各个角度各个层面…
阅读更多...
最新文章

Copyright @ 2022~2023