2020-12-23

JS基础面试题（一）

1.javascript的typeof返回哪些数据类型

object number function boolean undefined string

eg:

`typeof null;  // object`
typeof isNaN; // function 
typeof isNaN(123); // boolean
typeof [] ; // object
typeof Array.isArray(arr); // boolean
typeof toString.call(); //string
typeof arr.constructor ;// function

2、例举 3 种强制类型转换和 2 种隐式类型转换
强制

（parseInt , parseFloat , Number()）

隐式

（==）
eg：1 == ‘1’ //true
	null == undefined //true

3、split()和 join() 的区别
split()是切割成数组的形式

eg: var str ='how are you';
//split('切割符',length) 将字符串转为数组
console.log(str.split('o',2)); // ['h','w are y','u']

join()是将数组转换成字符串

eg: var arr=[1,2,3,4,5];
console.log(arr.join('&'));//1&2&3&4&5

4.数组方法pop() push() unshift() shift()
unshift() 头部添加
push() 尾部添加
shift() 头部删除
pop() 尾部删除

eg: var arr=['a','b','c','d','e'];
	console.log(arr.unshift('f'));//['f','a','b','c','d','e']
	console.log(arr.push('g'));//['a','b','c','d','e','g']
	console.log(arr.shift());//['b','c','d','e','g']
	console.log(arr.pop());//['b','c','d','e']	

5、事件绑定和普通事件有什么区别
传统事件绑定和符合 W3C 标准的事件绑定有什么区别？

div.onclick=function(){};
<button on mouseover=" "><button>

①如果说同一个元素绑定了两次或多次相同类型的事件，那么后面的绑定会覆盖前面的绑定
②不支持DOM事件流 事件捕获阶段 -> 目标元素阶段 -> 事件冒泡阶段

addEventLister

①如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发
②支持DOM事件流
③进行事件绑定传参不需要on前缀
IE9以前：attachEvent/detachEvent
①进行事件类型传参需要带上on前缀
②这种方式只支持事件冒泡，不支持事件捕获
IE9开始， addEventLister

事件绑定是指把事件注册到具体的元素上，普通事件指的是可以用来注册的事件

6、IE 和 DOM 事件流的区别
①执行顺序不一样
②参数不一样
③事件加不加on
④this指向问题
IE9 以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9 开始跟 DOM 事件流是一样的，都是 addEventListener

7、IE 和标准下有哪些兼容性的写法
①滚动条距离顶端的距离

var scroll_top=Math.floor(document.documentElement.scorllTop || document.body.scrollTop);

②获取事件对象的兼容

var e=evt||window.event;

③获取事件源的兼容

var target=e.srcElement || e.target;

④获取非行内样式的兼容

function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : obj.getComputedStyle(obj,1)[attr];
}

⑤阻止默认行为的兼容

e.stopPropagation ? e.stopPropagetion() : e.cancelBubble = true;

stopPropagation//标准浏览器
cancelBubble = true //IE
⑥阻止默认行为的兼容

e.preventDefault ? e.preventDefault() : e.returnValue = false;

注意：return false 既阻止默认行为，又阻止冒泡

8、把两个数组合并，并删除第二个元素。

		var arr1 = ['a', 'b', 'c'];
        var arr2 = ['d', 'e', 'f'];
        var arr3 = arr1.concat(arr2);//拼接数组
        arr3.splice(1, 1);
        console.log(arr3);

9、看下列代码输出为何？解释原因。

var a;
alert(typeof a);//undefined
//alert(b);//报错
b=10;
alert(typeof b);//number

解释：Undefined是一个只有一个值的数据类型，这个值是’undefined’,在使用var 声明变量但并未对其赋值进行初始化时，，这个变量的值就是Undefined。而b由于未声明将报错。
注意：未声明的变量和声明了未赋值的变量是不一样的。
undefined会在以下三种情况下产生：

①一个变量定义了却没有被赋值；
② 想要获取一个对象上不存在的属性或方法；
③一个数组中没有被赋值的元素；

注意区分 undefined 跟 not defnied(语法错误)是不一样的

10、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？
①直接在DOM里绑定事件：<div onclick="test()"></div>
②在JS里通过onclick绑定: xxx.onclick = test
③通过事件添加进行绑定: addEventListener(xxx, 'click', test)

注意：js的事件流模型都有哪些呢？
“事件捕获阶段”：事件由上到下，由祖先元素向子孙元素依次传递事件的过程；
“时间目标阶段”
“时间冒泡阶段”：事件由下到上，由子孙元素向祖先元素依次传递事件的过程；

DOM事件流：三个阶段  事件捕获、目标阶段、事件冒泡

11、闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数.通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包的特性：

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外 界提供访问接口；

②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调 用之后，闭包结构依然保存在；

对页面的影响：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。
12、javascript 的本地对象，内置对象和宿主对象
本地对象为 array obj regexp 等可以 new 实例化
内置对象为 gload Math 等不可以实例化的
宿主为浏览器自带的 document,window 等
13、document load 和 document ready 的区别

①load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

②问题是如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

③$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以
会比load较快执行，在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

14、解释 jsonp 的原理，以及为什么不是真正的 ajax
通过动态创建script标签，设置src属性，指向对方接口地址，并将请求和响应的全局函数传递给后端，对方将数据通过回调函数的方法传递回来。原理是利用了src天然跨域的特点。
Ajax 是页面无刷新请求数据操作