当前位置: 首页 > news >正文

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

相关文章:

JS面试题1

1. 延迟加载JS有哪些方式&#xff1f; defer: 等html全部解析完成&#xff0c;才会执行js代码&#xff0c;顺次执行js脚本 async&#xff1a;是和html解析同步的&#xff0c;不是顺次执行js脚本&#xff08;当有很多个js时&#xff09;&#xff0c;是谁先加载完谁先执行。 <…...

Linux网络 - 再谈、详谈UDP和TCP协议

文章目录 前言预备netstatpidofcat /etc/services 一、UDP协议UDP协议端格式UDP的缓冲区基于UDP的应用层协议 二、TCP协议1.TCP协议段格式确认应答(ACK)机制三次握手疑问1 最后一次客户端发给服务端的ACK请求怎么保证服务端能够收到&#xff1f; 四次挥手疑问2 为什么挥手是四次…...

el-form重置后input无法输入问题

新增用户遇到的问题&#xff1a; 如果你没有为 formData 设置默认值&#xff0c;而只是将其初始化为空对象 {}&#xff0c;则在打开dialog时&#xff0c;正常输入&#xff0c; formdata会变成如下 但是&#xff0c;打开后&#xff0c;直接使用 resetFields 或直接清空表单&…...

Java网络编程(JavaWeb的基础)

Java网络编程&#xff08;JavaWeb的基础&#xff09; 文章目录 Java网络编程&#xff08;JavaWeb的基础&#xff09;前言一、网络编程概述1.1 软件架构&网络基础1.2 网络通信要素:IP/端口/通信协议1.3 传输层协议:tcp/udp 二、网络编程API2.1 InetAddress类2.2 Socket类&am…...

鸿蒙Harmony开发实战案例:使用OpenGL绘制3D图形

XComponent控件常用于相机预览流的显示和游戏画面的绘制,在OpenHarmony上&#xff0c;可以配合Native Window创建OpenGL开发环境&#xff0c;并最终将OpenGL绘制的图形显示到XComponent控件。本文将采用"Native C"模板&#xff0c;调用OpenGL ES图形库绘制3D图形&…...

DM达梦数据库存储过程

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…...

【python】OpenCV—Color Correction

文章目录 cv2.aruco 介绍imutils.perspective.four_point_transform 介绍skimage.exposure.match_histograms 介绍牛刀小试遇到的问题 参考学习来自 OpenCV基础&#xff08;18&#xff09;使用 OpenCV 和 Python 进行自动色彩校正 cv2.aruco 介绍 一、cv2.aruco模块概述 cv2.…...

Java基础知识整理笔记

目录 1.关于Java概念 1.1 谈谈对Java的理解&#xff1f; 1.2 Java的基础数据类型&#xff1f; 1.3 关于面向对象的设计理解 1.3.1 面向对象的特性有哪些&#xff1f; 1.3.2 重写和重载的区别&#xff1f; 1.3.3 面向对象的设计原则是什么&#xff1f; 1.4 关于变量与方…...

知识图谱——Neo4j数据库实战

数据与代码链接见文末 1.Neo4j数据库安装 JDK 安装:https://www.oracle.com/java/technologies/javase-downloads.html Neo4j 安装:https://neo4j.com/download-center/ 配置好 JDK 和 Neo4j 的环境变量...

第十一次Javaweb作业

4.登录校验 4.1会话 --用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应。 会话跟踪&#xff1a;一种维护浏览器状态的方法&#xff0c;服务器需要识别多次请求…...

人工智能AI风口已开:如何赋予UI设计与视频剪辑新生命

随着科技的浪潮不断向前推进&#xff0c;人工智能&#xff08;AI&#xff09;正以惊人的速度重塑着我们的世界&#xff0c;特别是在创意产业的核心领域——UI设计与视频剪辑中&#xff0c;AI正逐步成为驱动行业创新与变革的关键力量。在这个AI技术全面开花的新时代&#xff0c;…...

计算机专业课面试常见问题-编程语言篇

目录 1. 程序的编译执行流程&#xff1f; 2. C浅拷贝和深拷贝的区别&#xff1f; 3. C虚函数&#xff1f; …...

CSS|05 继承性与优先级

继承性 一、继承性的特点&#xff1a; 1.外层元素身上的样式会被内层元素所继承 2.如果内层元素与外层元素身上的演示相同时&#xff0c;外层元素的样式会被内层元素所覆盖 二、关于继承性的问题 是不是所有样式都能被继承&#xff1f; 答&#xff1a;并不是所有样式能被继承…...

KVM性能优化之内存优化(宿主机)

linux系统自带了一技术叫透明巨型页&#xff08;transparent huge page&#xff09;&#xff0c;它允许所有的空余内存被用作缓存以提高性能&#xff0c;而且这个设置是默认开启的&#xff0c;我们不需要手动去操作。 Centos下&#xff0c;我们用cat /sys/kernel/mm/transpare…...

【Linux杂货铺】Linux学习之路:期末总结篇1

第一章 什么是Linux? Linux 是 UNIX 操作系统的一个克隆&#xff1b;它由林纳斯 本纳第克特 托瓦兹从零开始编写&#xff0c;并在网络上众多松散的黑客团队的帮助下得以发展和完善&#xff1b;它遵从可移植操作系统接口&#xff08;POSIX&#xff09;标准和单一 UNIX 规范…...

GPT-5的到来:智能飞跃与未来畅想

IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂确认了GPT-5的发布计划&#xff0c;预计将在一年半后推出。穆拉蒂形象地将GPT-4到GPT-5的飞跃比作高中生到博士生的成长。这一飞跃将给我们带来哪些变化&#xff1f;GPT-5的…...

gin中间件

在web应用服务中&#xff0c;完整的业务处理在技术上包含客户端操作&#xff0c;服务端处理&#xff0c;返回处理结果给客户端三个步骤。但是在在更负责的业务和需求场景。一个完整的系统可能要包含鉴权认证&#xff0c;权限管理&#xff0c;安全检查&#xff0c;日志记录等多维…...

swagger常用注解

最近查看接口文档的时候发现&#xff0c;POST方法中的query没法在swagger中显示&#xff0c;查了才发现这是因为Swagger或OpenAPI规范默认将HTTP POST请求的参数识别为请求体&#xff08;body&#xff09;参数&#xff0c;而不是查询字符串&#xff08;query&#xff09;参数。…...

【Flink metric(1)】Flink指标系统的系统性知识:获取metric以及注册自己的metric

文章目录 一. Registering metrics&#xff1a;向flink注册新自己的metrics1. 注册metrics2. Metric types:指标类型2.1. Counter2.2. Gauge2.3. Histogram(ing)2.4. Meter 二. Scope:指标作用域1. User Scope2. System Scope ing3. User Variables 三. Reporter ing四. System…...

命令模式(Command Pattern)

命令模式&#xff08;Command Pattern&#xff09; 定义 命令模式是对命令的封装&#xff0c;每一个命令都是一个操作&#xff1a;请求的一方发出请求要求执行一个操作&#xff1b;接收的一方收到请求&#xff0c;并执行操作。 命令模式解耦了请求方和接收方&#xff0c;请求…...

掌握Symfony的模板继承:构建强大且灵活的Web界面

掌握Symfony的模板继承&#xff1a;构建强大且灵活的Web界面 在Symfony框架中&#xff0c;模板继承是一个强大的功能&#xff0c;它允许开发者创建可重用的布局模板&#xff0c;并通过扩展这些模板来构建具体的页面。这种机制不仅提高了代码的可维护性&#xff0c;还使得页面结…...

uboot基本使用网络命令和从服务器端下载linux内核启动

网络命令ip地址设置: setenv gmac_debug 0; setenv mdio_intf rgmii; setenv bootdelay 1; setenv ethaddr 00:xxxx:81:70; // mac地址 setenv ipaddr xxx; //开发板 IP 地址 setenv netmask 255.255.255.0; setenv gatewayip xxx.1; setenv serverip xxxx; //服…...

解决ArcGIS导出的svg格式的图片插入Word后的字体问题

背景 在ArcGIS中设置字体为Times New Roman&#xff0c;但导入Word后字体转为等线。 ArcGIS中的Layout 导入Word​​​​​​ 原因分析 Word无法识别嵌入进SVG格式文件中的字体。 解决方案 在Export Layer窗口中&#xff0c;将Embed fonts取消勾选&#xff0c;Convert cha…...

如何确保 Puppet 配置在复杂网络环境中的可靠分发和同步?

在复杂网络环境中确保 Puppet 配置的可靠分发和同步可以采取以下措施&#xff1a; 网络拓扑规划&#xff1a;在复杂网络环境中&#xff0c;首先需要进行网络拓扑规划&#xff0c;确保网络结构合理&#xff0c;并能够支持可靠的分发和同步机制。 Puppet Master 多节点部署&…...

2024最新!将mysql的数据导入到Solr

Solr导入mysql的数据 如何安装导入数据前准备配置Solr的Jar包以及Mysql驱动包1.1、将solr-8.11.3\dist下的两个包进行移动1.2、将mysql-connect包也移动到该位置1.3、重启Solr项目 配置xml2.1、第一步我们需要创建核心2.2、第二步修改xml(这里是结合19年的教程)2.3、 创建data-…...

Python数据分析第二课:conda的基础命令

Python数据分析第二课&#xff1a;conda的基础命令 1.conda是什么? conda是一个开源的包管理系统&#xff0c;可以帮助我们进行管理多个不同版本的软件包&#xff0c;还可以帮助我们建立虚拟环境&#xff0c;以便对不同的项目进行隔离。 简单来说&#xff0c;conda是一个软…...

LayoutInflater加载流程

简介 LayoutInflater在日常的Android开发中是经常使用的类&#xff0c;常常用于XML中View的加载相关流程。本文主要总结一些其常见api的源码流程。 获取LayoutInflater 我们一般会在Activity的onCreate方法中会通过setContentView方法设置自己的布局layoutId&#xff0c;Act…...

PLC数据采集案例

--------天津三石峰科技案例分享 项目介绍 项目背景 本项目为天津某钢铁集团下数字化改造项目&#xff0c;主要解决天津大型钢厂加氢站数字化改造过程中遇到的数据采集需求。项目难点PLC已经在运行了&#xff0c;需要采集里面数据&#xff0c;不修改程序&#xff0c;不影响P…...

基于单片机和LabVIEW 的远程矿井水位监控系统设计

摘要 &#xff1a; 针 对 现 有 矿 井 水 位 监 控 系 统 存 在 结 构 复 杂 和 不 能 远 程 监 控 的 问 题 &#xff0c; 设计了基于单片机和&#xff2c;&#xff41;&#xff42;&#xff36;&#xff29;&#xff25;&#xff37; 的远程矿井水位监控系统 &#xff0c; 详…...

element 表格嵌套表单验证指定行

elementui表格嵌套动态表单&#xff0c;单独验证某一行输入项是否符合校验规则&#xff1b; input动态绑定校验 :prop"imgTable. scope.$index .bxName" <el-form :model"formTable" ref"formTable" inline size"small"><…...

网站建设与管理课程视频/网络推广销售是做什么的

此HTML标签<input id"Radio1" type"radio"/>可完全取代以上2个服务器控件。RadioButtonList及RadioButton依赖于form窗体&#xff0c;产生很多垃圾代码&#xff0c;有时候只是用来显示此方法可取代。aspx:<input type"radio" name"…...

做网站分pc端和移动端的吗/灰色词seo推广

一对一关系以丈夫和妻子模型 配置文件 妻子配置文件&#xff1a; <?xml version"1.0" encoding"utf-8" ?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN""http://www.hibernate.org/dtd/hi…...

做神马网站快/seo怎么优化排名

正在学习iOS开发。如果玩玩的话mac里的模拟器就够用了&#xff0c;但由于mac模拟器的内存运算能力比真机强多了&#xff0c;好多问题不用真机测一下还发现不了。和Android开发不一样&#xff0c;iOS开发本身就是个费钱的玩意儿&#xff0c;首先得有个Mac机器&#xff0c;最不济…...

洛阳做网站公司汉狮价格/创建软件平台该怎么做

最近做U800电话的二次开发&#xff0c;需要调用厂商的C函数库来打电话&#xff0c;后来想加入通话录音功能&#xff0c;但发现程序默认生产的WAV文件过大&#xff0c;又找了个WAV转MP3的C函数库程序&#xff0c;出了点问题。下面是转MP3的程序接口&#xff08;头文件&#xff0…...

专业网站制作公司/交换友情链接的注意事项

昨天&#xff0c;中国教育学会会长顾明远来杭州&#xff0c;参加杭州师范大学主办的第九届亚洲比较教育学会年会。会上&#xff0c;他对本报记者确认&#xff0c;全国执行高考新方案&#xff0c;不会在2016年&#xff0c;而是2017年。语文、数学在新高考里&#xff0c;份量加重…...

做机械配件的网站/全网营销推广软件

上下文切换&#xff08;Context Switch&#xff09;&#xff0c;也称为PCB&#xff0c;性质为环境切换。上下文切换&#xff0c;有时也称做进程切换或任务切换&#xff0c;是指CPU 从一个进程或线程切换到另一个进程或线程。中文名上下文切换外文名Context Switch性质切换进程控…...