JavaScript面试题

伊莎贝尔塔 發表於 2020-1-19 09:43:00

1.下面代码执行结果是（）
var a=123;
fn(a);
function fn(){a=456}
document.write(a);
 
A.456　　B.122　　C.报错　　D.undefined 
<div class="cnblogs_code">
<pre>考点：变量的作用域，全局变量和局部变量的转换</pre>
</div>
2.html文档中怎么区分节点对象的节点类型（）
A.typeof 　　B.type 　　C.nodeType 　　D.nodeName
<div class="cnblogs_code">
<pre>typeof 　获取数据类型
type 没有这个方法
nodeType节点类型
元素节点 1
属性节点2
文本节点 3
注释节点 8
文档节点9
nodeName节点名称
元素节点标签名相同 DIV
属性节点属性名称
文本节点 #text</pre>
</div>
4.下面对象或数组的创建方式错误的是（）
A.var obj={};
B.Var obj={[]};
C.Var obk=[{}];
D.Var obj={age:123};
 
5.下面代码的执行结果是（）
var i=12;
var sum=i++ + ++i + ++i*2 + i-- + i--
document.write(sum+’ ’+i);
A.85   13  　　B.84 12　　C.83 11　　D.85 14
 
5.数组中哪个方法不可以实现删除数组本身中的数据（）
A.shift()　　B.pop()　　C.splice()　　D.slice()
<div class="cnblogs_code">
<pre>shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
pop() 方法用于删除最后一个元素，并返回被删除的元素
splice(开始位置，删除的个数，要添加的新内容)
Slice(开始位置，结束位置)，从已有的数组中返回选定的内容</pre>
</div>
 
6.下面哪个不是javascript中的数据类型（）
A.string 　　B.number 　　C.undefined 　　D.num
 
7.下面哪个不是javascript中的关键字或保留字 （）
A.class　　B.var　　C.link　　D.Instanceof
<div class="cnblogs_code">
<pre>object instanceod constructor //object要检测的对象，constructor某个构造函数。
"string" instanceof String//返回false，检查原型链会找到undefined。
new String() instanceof String//true
new String('string') instanceof String//true
new String() instanceof Object//true
console.log('123' instanceof Object);// false
console.log(new String('123') instanceof Object);//true</pre>
</div>
 
8.下面代码的执行结果肯定不会是（）
document.write(parseInt(Math.random()*3));
A.1 　　B.0 　　C.2 　　D.3
<div class="cnblogs_code">
<pre>Math.random()*3的结果最大为2.7，所有，取整之后最大为2</pre>
</div>
9.New Date(2012,12,8).getMonth()的结果是什么
A.12   　　 B. 11 　　C.0   　　D.13
<div class="cnblogs_code">
<pre>月份是从0开始到11，月12会向年进1，年变成2013，月为0</pre>
</div>
 
10.请阅读下面代码  var arr=;如何将上面数组按照降序排序
A.arr.sort()
B.arr.sort(function(a,b){return a-b;})
C.arr.sort(function(a,b){return b-a;})
D.arr.sort(b-a)
<div class="cnblogs_code">
<pre>sort方法加比较函数，return a-b，做的就是升序；return b-a，做的就是降序</pre>
</div>
 
11.下面描述错误的是
A.document.head 返回head元素
B.document.body 返回body元素
C.document.html  返回html元素
D.document.documentElement  返回html元素
<div class="cnblogs_code">
<pre> console.log(document.head);// head
console.log(document.body);// body
 console.log(document.html);
console.log(document.documentElement); // 整个文档结构 </pre>
</div>
 
12.var n=’liang zi ju zhen’.indexOf(‘zi’,7); n的值为
A.-1　　B.5　　C.报错　　D.-10
<div class="cnblogs_code">
<pre>indexOf(查找的内容,开始查找的位置)查找字符串第一次出现的位置，它的取值是0到字符串的长度-1，如果省略就从字符串的首字符开始检索，如果没有检索到就返回-1，对大小写敏感</pre>
</div>
 
13. 0.1+0.7==0.8该表达式返回
　A.true　　B.false　　C.infinity　　D.NaN
 
14.哪个属性可以获得滚动条已经滚动的垂直距离
A.document.scrollTop
B.document.top
C.document.body.scrollTop
D.window.scrollTop
<div class="cnblogs_code">
<pre>document.body.scrollTop; 对应的是 body 标签
还可以使用
document.documentElement.scrollTop; 对应的是 html 标签；</pre>
</div>
 
15.var arr=; alert(arr.concat(1,2,3,,5).length)
A.4　　B.9　　C.11　　D.5
<div class="cnblogs_code">
<pre>concat会把拆分开，concat的返回值是拼接成的新数组
如果是alert(arr.length);=>4</pre>
</div>
 
16.下面结果返回值为4的有(多选)
A.Number(‘4’)
B.parseInt(‘4aa11’)
C.Math.floor(3.5)
D.Math.round(3.5)
 
17.以下返回结果为类数组对象的语句为(多选)
A.document.getElementById()
B.document.getElementsByClassName()
C.document.querySelector()
D.document.querySelectAll() 
<div class="cnblogs_code">
<pre>document.getElementById是通过id查找元素；
document.querySelector是ES5新方法，能够根据id，类名，标签名查找元素，如果参数写的是类名或者标签名，找到的是第一个元素，这两个方法找到的都是单个元素
document.getElementByClassName()和document.querySelectAll()找到的是集合，是多个元素</pre>
</div>
 
18.var now=new Date(),设置3天后的事件正确写法是（多选）
A.now.setDate(now.getDate()+3);
B.now.setTime(now.getTime()+3);
C.now.setTime(now.getTime()+3*1000*3600*24);
D.now.setTime(now.getDate()+3*1000*3600*24);
<div class="cnblogs_code">
<pre>now.getDate()获取的是当前时间的天；
now.getTime() 获取的是时间戳
now.setTime() 以毫秒设置 Date 对象
var d = new Date()
d.setTime(77771564221)
document.write(d)</pre>
</div>
 
19.下面对字符串的描述正确的是（多选）
A.字符串的长度可以通过length属性获取
B.字符串可以通过charAt()获取某个字符对应的索引
C.字符串可以通过indexOf()获取某个字符对应的索引
D.字符串可以通过join()转为数组
<div class="cnblogs_code">
<pre>length 获取常速
charAt() 获取下标值
indexOf() 自字符串第一次出现的位置
Join 数组转为字符串
Split 字符串转为数据</pre>
</div>
 
20.下面那些是属于DOM操作的方法(多选)
A.removeChildren()
B.appendChild()
C.children
removeChild()
<div class="cnblogs_code">
<pre>removeChildren是错误方法，应该是removeChild
children是选择器，是获取元素的，不能操作元素
appendChildren 插入节点</pre>
</div>
 
21.请选择结果为真的表达式（）
A. null  instanceof  Object
B. null == undefined
C. NaN == NaN
D.  false == undefined
<div class="cnblogs_code">
<pre>A instanceof B 判断A是否是B类型
NaN（不是一个数字），任何一个NaN !=NaN</pre>
</div>
 
22. 下面程序的执行结果是（）
<div>
<div class="cnblogs_code">
<pre>var name = 'world';
(function(){
if(typeof name === 'undefined'){
 var name = 'Jack';
 console.log("Goodbye " + name );
}else{
 console.log('hello '+name);
}
})(); </pre>
</div>
A. Goodbye  Jack
B. Hello Jack
C. Hello undefined
D. Hello World
</div>
<div class="cnblogs_code">
<pre>在函数外声明的是全局变量，在函数内部声明的是局部变量
var 拥有预先声明的作用</pre>
</div>
 
23. 下面关于DOM事件流的表述哪些是正确的
A. 时间流包括两个阶段：事件捕获阶段、事件冒泡阶段
B. IE跟标准浏览器对于DOM事件流实现不一样
C. 假设parentEle是childEle的父节点绑定事件：parentEle.addEventListener('click', fn1, false); 和  childEle.addEventListener('click', fn2, false); 当点击childEle的时候，fn1将先于fn2触发
D. addEventListener 第三个参数true代表支持捕获，false代表不支持捕获
 
24. 当链接指向下列哪一种文件时，不打开该文件，而是提供给浏览器下载（）
A. ASP
B. HTML
C. ZIP
D. CGI
<div class="cnblogs_code">
<pre>ZIP，rar，7Z这几种都属于压缩格式，直接点击的时候，执行的是下载功能而不是打开的方式</pre>
</div>
 
25. 下列哪一项表示的不是按钮（）
A. type=‘button’
B. type=‘reset’
C. type=‘image’
D. type=‘button’
<div class="cnblogs_code">
<pre>type=image可以用来作为表单的图片按钮
表面上 type=image和type=submit都可以相应回车，并且都能提交。
不过唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。
对于通常的表单应用来说，这样多一两个参数并没有问题，因为我们在接收端中都是按照指定的名称来处理参数，所以即使多了两个参数也不会有任何问题。</pre>
</div>
 
26.下列哪一项是在新窗口中打开网页（）
A. _self
B. _blank
C. _top
D. _parent
 
27.在html中，一下选项不是链接的目标属性（）
A. self
B. new
C. blank
D. top
 
 
JavaScript面试题 - 简答题
1.列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。
<div class="cnblogs_code">
<pre>主要数据类型：string, boolean, number

复合数据类型：function, object

特殊类型：undefined，null</pre>
</div>
 
2.思考：输出"B" + "a" + + "B" + "a"的值
<div class="cnblogs_code">
<pre>BaNaNa。</pre>
</div>
3.思考：[] == [] 的值为？
<div class="cnblogs_code">
<pre>false</pre>
</div>
 4.以下代码输出结果为？
 
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">var bool=true;
setTimeout(function(){bool=false},0);
console.log(bool); // 结果true</pre>
</div>
 
5.请阅读下面代码
<div class="cnblogs_code">
<pre>var arr = ;
var arr2 = arr;
arr2.push(0);
arr2.concat(6);
console.log(arr);
// </pre>
</div>
6.请阅读下面代码
<div class="cnblogs_code">
<pre>function aa(){
return 1;
}
console.log(aa == aa());//false
console.log(aa || aa());
//ƒ aa(){
// return 1;
// }</pre>
</div>
 7.请描述一下cookie，sessionStrorage，和localStorage的区别
<div class="cnblogs_code">
<pre>浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。
1.cookie和session
cookie和session都是用来跟踪浏览器用户身份的会话方式。
区别：
保持状态：cookie保存在浏览器端，session保存在服务器端

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

具体来说，Web Storage又分为两种：
1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

到目前为止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的浏览器支持sessionStorage与localStorage的使用。</pre>
</div>
 
8. 写一个function，清除字符串前后的空格（兼容所有浏览器）
<div class="cnblogs_code">
<pre>function trim(str) {
if (str && typeof str === "string") {
 return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
 }
}</pre>
</div>
 
9. position包含几种属性？absolute和relative的区别？
 
10.js中this的工作原理
<div class="cnblogs_code">
<pre>1.函数默认执行 :此时this指向Window
2.函数的隐式执行 : this指向函数的直接执行对象
3.函数的显式执行 : this指向指定对象
4.构造函数执行(通过new执行)</pre>
</div>
 
11.利用@media screen 实现网页布局的自适应，判断媒体类型，执行不同的css样式属性，重要属性：max-width：设置最小分辨率大小；max-width：设置最大分辨率大小
 
12. 程序题
<div>
<div>function foo(){</div>
<div>　　var a=2;</div>
<div>　　this.bar();</div>
<div>}</div>
<div>function bar(){</div>
<div>　　console.log(this.a);</div>
<div>}</div>
<div>A = 6;</div>
<div>bar();会输出什么？为什么？</div>
</div>
<div class="cnblogs_code">
<pre>undefined 因为不存在全局变量a</pre>
</div>
 
13. data-*属性的作用是什么，日常工作中如何使用？
 
14. call，apply，bind的区别？
 
15. 简述css的flex布局
 
 16. 请用JS手写快速排序
<div class="cnblogs_code">
<pre>var arr = [5, 11, 23, 54, 0, 22, 12, 43, 9];

function quickSort(arr){
if(arr.length <= 1) {
 return arr
};
var mNumIndex = Math.floor(arr.length/2);
var mNum = arr.splice(, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
 if (arr < mNum){
 left.push(arr)
 }else {
 right.push(arr)
 };
};
return quickSort(left).concat(, quickSort(right));
}
console.log(quickSort(arr));</pre>
</div>
 
 
17. 阅读以下html和js代码，分别写出两段代码点击按钮后控制台的输出，并简述理由
<div class="cnblogs_code">
<pre><button id='test'>click me </button>

<script>
function Button(){
 this.clicked = false;
 this.click = function(){
 this.clicked = true;
 console.log(this);
 }
}
let button = new Button();
var elem = document.querySelector('#test');
elem.addEventListener('click',button.click); // <button id='test'>click me </button>

let button = {
 clicked: false,
 click:()=>{
 this.clicked = true
 console.log(this);
 }
}
var elem = document.querySelector('#test');
elem.addEventListener('click',button.click); // window 对象
</script></pre>
</div>
理由：let 和全局function 的区别
 
 
 
 
 
 
 
 
 
 
<div class="cnblogs_code"> </div> 
来源：https://www.cnblogs.com/ranyihang/p/12212465.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript面试题