【前端面试题整理】【Js基础+概念理解】

2018-11-21更新

目录

别人的

Ruthevil的一堆面试题

1.Js基础

this几种不同的使用场景

• 作为构造函数执行（指代new出来的对象）
• 作为对象属性执行（指代对象方法）
• 作为普通函数执行（指代当前函数）
• call、apply、bind（参数为空时，默认调用全局对象window。有参数则按照以上）

类型

• js的基本类型有
  undefined、null、string、array、number、boolean、object、function
• js中使用typeof能得到哪些类型
  
  （undefined、string、number、boolean）全部数值类型、（object、function）部分引用类型

解释null由于属于空对象多以为object！

如何判断array和null

• array用instanceof判断！(arr instanceof Array)
• typeof(null) 返回的是 : object，所以要typeof(x) == ’ object ’ && x == null结合判断

=== 和 ==

• == 运算符只比较值，不进行类型的比较，比较之前会进行隐式转化，null==undefined 返回true.
• === 区分两者，不仅仅比较内容，还比较数据类型 null===undefined false

-何时使用=何时使用？
当需要判断一个值是空时，使用双等anull或者aundefind，这相当于a=null || a=undefind。其他都用===。这是JQ的推荐写法！

内置函数（数据封装类对象）

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

JS变量按照存储方式区分为哪些类型，并描述其特点

值类型
var a=10
var b=a
a=11
console.log(b) //10
特点：ab数值分块存储，所以b还是10而非=a=11

引用类型
var obj1={x:1}
var obj2=obj1
obj1.x=2
console.log(b) //2
特点：obj1、2则是引用，所以obj2=obj1={x:2}

强类型转换(===不进行强制类型转换)

100+‘10’ //‘10010’
100 == ‘100’ //true
‘’ == 0 //true
100 === ‘100’ //false
‘’ === 0 //false
null == undefined //true
null === undefined //false
if(100){console.log(110)} //110
if(’’){console.log(110)} //undefined
10 && 0 //0 （与if的转换一致。将10或空字符串进行了0,1转换）
‘’ || ‘abc’ “abc”
if(0){}、if(NaN){}、if(’’){}、if(null){、if(undefined){}、if(false){}括号中的值都转换为0的情况！！

setTimeout（）和setInterval（）

setTimeout（设定结束时间）在规定时间后执行完某个操作就停止了
setInterval（设定时间间隔）则可以一直循环执行下去

js全局属性/全局函数

js全局属性（infinity/NaN/undefined）/全局函数（编码类/转换类型类）

随机数

Math.random()取0-1随机数 
同理拓展例子： 
Math.random()*10取0-10随机数（包括一大堆小数点） 
Math.random()*9+1取1-10随机数 
Math.random()*8+2取2-10随机数 
Math.random()*899+100取100-999随机数 
Math.random()*(m-n)+n取n-m随机数 
其中常用：Math.floor(）只取随机数整数部分

关于IFrame表述正确的有

A、可以通过脚本调整IFrame的大小
B、在相同域名下，外层网页脚本可以获取IFrame网页内的对象
C、在相同域名下，内嵌的IFrame可以获取外层网页的对象
D、通过IFrame，网页可以嵌入其他网页内容，并可以动态更改
答案：ABCD

DIV和Span

div占用的位置是一行;块标签
span占用的是内容有多宽就占用多宽的空间距离;行内标签

块元素、行内元素

块元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

行内元素
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

将块元素变为行内元素

display：inline-block

将行内元素变为块元素

display：block
float
position（absolute和fixed）

splice

var a = [1,2,3];
a.splice(1,1,2,3,4);
console.log(a);
输出结果是[ 1, 2, 3, 4 ,3]

splice(index,delLength,addElements);
删除index1处的delLength个元素，在index1处插入addElements2，3，4

关于==的题

下面程序得到的结果分别是什么？（D）

console.log(([])?true:false);

console.log(([]==false?true:false));

console.log(({}==false)?true:false)

A.false true true B.true true true C.true false true D.true true false

解析：
Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0

因此：

console.log(([])?true:fasle);// => console.log((true)?true:false); //true

console.log([]false?true:false); // => console.log(00?true:false); //true

console.log(({}false)?true:false); // => console.log((NaN0)?true:false); //false

理解在“==”运算符作用下值的“过滤”
如果一个值是null，另一个值是undefined，则它们相等
如果一个值是数字，另一个值是字符串，先将字符串转换为数学，然后使用转换后的值进行比较。
如果其中一个值是true，则将其转换为1再进行比较。如果其中的一个值是false，则将其转换为0再进行比较。
如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值，再进行比较。

所以在js更加严格的判一帮更推荐用 ===

Math.max.apply

var a = [1,4,5,2,9];
下面求a中最大值正确的是D
A、Math.max(a)
B、Array.max(a)
C、Math.max.call(null,a)
D、Math.max.apply(null,a)
E、以上均不是

Math.max.apply(null,a)=Math.max.apply(null, [a, b, c, d, …])=Math.max(a, b, c, d, …)

这里，我们有方法把数组，一个一个拆分开来，传递到Math.max()方法中，就实现了传递数组的方法。apply(Function, Args)调用盖函数，并用指定对象替换函数的 this 值，同时用指定数组替换函数的参数

2.概念理解

DOM、BOM

DOM文档对象模型（Bom的子集），BOM浏览器对象模型。

变量提升

var 、函数所有声明提升到提到执行环境顶端（初始化不会提升，函数为最顶端）

闭包（函数内部和函数外部连接的桥梁）

在函数内部声明变量的时候，一定要使用var命令，如果不用的话，实际上声明的是一个全局变量！！！！！

闭包就是有权访问另一个函数作用域的变量的函数。只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

优点：
一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在外函数调用后被自动清除而内函数可以用。

缺点：内存消耗大，过多影响性能（且注意，内函数取变量最后的值的问题！）

//闭包实际应用中主要用于封装变量，收敛权限
//Exp1
function F1(){
	var a =100;
	return function(){
		console.log(a);
	}
}
var f1 = F1();
function F2(fn){
	var a = 200;
	fn()
} 
F2(f1);
 
//Exp2
function ifFirstLoad(){
	var _list =[];
	return function(id){
		if(_list.indexOf(id)>=0){
			return false;
		}else{
			_list.push(id);
			return true;
		}
	}
}
var firstLoad = isFirstLoad();
firstLoad(10); //true

--------------------- 
原文：https://blog.csdn.net/hannah1116/article/details/80078547 

作用域

同步和异步的理解

首先，js是单线程的。
同步和异步的差别就在于同一条流水线上各个流程的执行顺序不同。
最基础的异步是setTimeout和setInterval函数

console.log( "1" );
        setTimeout(function() {
            console.log( "2" )
        }, 0 );
        setTimeout(function() {
            console.log( "3" )
        }, 0 );
        setTimeout(function() {
            console.log( "4" )
        }, 0 );
        console.log( "5" );
--------------------- 
1
5
2
3
4

尽管setTimeout的time延迟时间为0，其中的function也会被放入一个队列中，等待下一个机会执行，当前的代码（指不需要加入队列中的程序）必须在该队列的程序完成之前完成，

同步任务

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务

不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。
举例子：
1.回调函数
2.微信小程序api里面常出现的complie（）

ajax

原生：

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",true);
xhr.onreadystatechange = function(）{
    if(xhr.readyState == 4){//客户端可以使用
        if(xhr.status == 200){//表示成功处理请求
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

json

js对象（有两个API ：JSON.stringify() 、JSON.parse()）和数据格式

obj = {
	name:"kxx",
	last:"0000",
}

stringify（转字符串 如果 是 对象）将对象变成字符串
parse（理解）将字符串变成对象

微信小程序，React循环里的key

【官方解释】当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

所以优点为：key相当于数组的键值，代表了对应下标下的唯一标识。只是将对应的对象重新排序。未发生变化的对象，不会重新创建（不必重新渲染全部对象）。
【注意！】此处使用数组下标做key是不被推荐的，如果遇到数组排序的情况下此效果发挥不了，将降低渲染性能。

面向对象（对象是对现实世界事务的理解和抽象）

理解js的对象就是普通名值对的集合，oop即面向对象编程中，对象就是类的实例，类定义了对象的特征。如自带的Stack，Set，LinkedList,Dictionary,Tree,Graph等.而面向对象则是对对象的抽象、封装，继承和多态。将对象和行为于情景结合的过程：比方说人具有什么特征“抽象”其特性，而世界上有多种人，我将之“封装”为各种类型，同时该人可能是“继承”的上代的特性，他们都会有对应的技能比如开门，看书等。
那么！！！方法：人.打开门()就是面向对象。解读为人做了一个打开的功能。
而面向过程方法：门被打开（），则是这个门被打开了，是一个状态。

所以在我看来面向对象的思想怎样都离不开对象的动作。（这是我的个人理解，若有不对望指正，谢谢）

创建对象的方法：

1.var obj = new Object();

2.var obj = {};
或：obj = {
	name:"kxx",
	last:"0000",
}

声明一个类：

function Book（title,author）{
	this.title = title;
	this.author = author;
}

实例化一个类

var book = new Book('title','author')

访问和修改对象属性

book.title = 'newTitle'
console.log(book.title)

包含函数的类

1.另外声明
Book.prototype.printTitle = function(){
console.log(book.title)
}
book.printTitle ();


2.在类里面定义
function Book（title,author）{
	this.title = title;
	this.author = author;
	this.printTitle = function(){
		console.log(book.title)
	}
}

跨域

跨域构成原因：
ajax，flash，iframe的document对象不支持跨域
后台解决：反代理
js解决方法：
第一种方式：jsonp请求；jsonp的原理是利用

事件冒泡

以最具体是元素接收时间发生逐步向上级传播到doc节点
对比鼠标放到li上对应的li背景变灰。

利用事件冒泡实现：

$("ul").on("mouseover",function(e){
      $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})

我们直接给所有li都绑上事件也可以：

$("li").on("mouseover",function(){
	                $(this).css("background-color","#ddd").siblings().css("background-color","white");
 })

虽然从代码简洁程度上两者是相若仿佛的，但是前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~