您的位置:首页 > Web前端 > JavaScript

JavaScript中的经典题型(数组归类、预编译、时间线、冒泡排序、异步加载、附带思路流程和源码)

2020-07-28 20:06 211 查看

JavaScript中的经典题型

一.JavaScript中的经典题型

1、position几个常见属性的作用是什么?

relative 相对定位,相对于自身元素定位,一般只是设置,配合absolute使用
absolute 绝对定位,相对于有定位最近的元素进行定位,一般情况是和relative一起使用
fixed 固定定位,相对于浏览器的窗口进行定位

2、标签上的title和alt属性的区别是什么?

title是大部分标签都有的属性,鼠标移入上去提示
alt属性是img标签的属性,当图片加载失败时显示其内容

3、请说出清除浮动的几种常见方式?

①. 父元素增加overflow:hidden
我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中。然而"overflow:hidden"还有另外一个特殊的用途,那就是清除包含块内子元素的浮动。
②追加一个空的块级元素,设置属性clear:both
③伪类 父元素:after{ content:""; display:"block"; clear:both; }
在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置 clear:both 来清理浮动。

4、常见的创建对象的方式有几种?

1.new Object() 系统构造函数
2.new 自定义构造函数
3.var obj = {} 对象字面量(对象直接量)
4.Object.create(obj) 以obj为原型创建对象

5、请将数组中常见的方法归类,哪些可以改变原数组,哪些不能改变原数组?

改变原数组方法: splice() 用于添加或删除数组中的元素。
sort()方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。 默认排序顺序为按字母升序。
pop() 删除尾部元素,返回删除的值
push() 数组尾部添加,返回新数组长度
shift() 数组头部元素删除,返回删除元素
unshift() 数组头部增加, 返回新数组长度
reverse()方法用于颠倒数组中元素的顺序。
不改变原数组的方法: slice()方法可从已有数组中返回选定的元素,返回一个新数组,
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
toLocalString():把数组转换为本地数组,并返回结果。
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
“lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置

6、描述一下预编译过程

关于预编译的详细过程可以看我发表的《 JavaScript中函数的生命周期与预编译》
1.函数在执行前的一瞬间,创建一个对象
2.形参最为对象的属性名,实参作为对象的属性值
3.变量名作为对象的属性名,值为undefined,跟参数同名,不做任何改变
4.函数声明,函数名作为对象的属性名,值为函数体,跟参数或者变量同名,直接覆盖

7、描述一下时间线的顺序、状态以及触发的函数

1.浏览器开始解析页面 状态为loading
2.遇到外部文件创建线程加载,碰到没有设置async或defer的js文件,阻塞加载
3.文档解析完成 状态为interactive 触发DOMcontentLoaded事件
4.所有文档下载完成 状态为complete或者loaded,window触发onload事件

8、HTML5中本地存储有哪些?常用的方法有什么?

HTML5 提供了两种在客户端存储数据的新方法:
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
保存数据方法:setItem("key", "value");
读取数据方法:getItem("key");
删除指定键的数据方法:removeItem("key");
删除所有数据方法:clear();

9、请写出冒泡排序的代码?

首先什么是冒泡排序?
冒泡排序就是把小的元素往前调或者把大的元素往后调。比较是相邻的两个元素比较,交换也发生在这两个元素之间。所以,如果两个元素相等,是不会再交换的;如果两个相等的元素没有相邻,那么即使通过前面的两两交换把两个相邻起来,这时候也不会交换,所以相同元素的前后顺序并没有改变,所以冒泡排序是一种稳定排序算法。
冒泡排序算法的原理如下:
1.比较相邻的元素。如果第一个比第二个大,就交换他们两个。
2.对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
3.针对所有的元素重复以上的步骤,除了最后一个。
4.持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
//冒泡排序
var arr=[5,6,2,1,8,22,12,548,12,356,22];
for(var i=0;i<arr.length;i++){  //循环arr数组
//i在数组下标中为0的时候,j就是下标1,j=i+1就是获取到i下标的后一位
for(var j=i+1;j<arr.length;j++){
//如果当数组中前一位大于后一位的时候,就让他们换一下位置
if(arr[i]>arr[j]){
var num;   //定义一个变量保存arr[i]当前的位置
num=arr[i];
arr[i]=arr[j]; //arr[i]换位到arr[j]的位置
arr[j]=num;  //arr[j]换位到arr[i]之前的位置
}
}
}
console.log(arr);

10、js异步加载的方案

①async ,加载完就执行,只能加载外部脚本,不能把js写在script 标签里.
②defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用内部外部js均可使用
③按需求加载,考虑浏览器兼容
//3.按需求加载,考虑浏览器兼容
function loadScript(url,callback){
var script = document.createElement("script");

if(script.readyState){  IE浏览器兼容
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readState == "loaded"){
callback()
}
}
}else{         大部分浏览器兼容
script.onload = function(){
callback()
}
}
script.src = url;
document.head.appendChild(script)
}
loadScript("08.js",function(){
test()
})

//外部js
function test(){
console.log("hello world")
}





喜欢小编的可以关注点一点。

小编虽然不能陪你一生,但能让你的基础知识满满登登。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: