基础知识总结-前端面试（一）

打算写一个前端面试系列的知识，博客很久没有进行更新，更新的都是一些的基础知识。

最近在投简历进行面试，说是面试，其实就是一个自己的使用自己大白话的知识概括吧。欢迎感兴趣的小伙伴进行学习或者提出建议和改正！

大概计划章节如下

1-1 关于面试题

2-1 变量类型和计算-变量类型

2-2 变量类型和计算-强制类型转换

2-3 变量计算-理解json

2-4 原型和构造函数-构造函数

2-5 原型和构造函数-原型规则

2-6 原型和构造函数-原型链

3-1 作用域和闭包-变量提升

3-2 作用域和闭包-this

3-3 作用域和闭包-作用域

3-4 作用域和闭包-闭包

4-1 异步和单线程-异步

4-2 异步和单线程-单线程

5-1 日期常用API

5-2 数组常用API

5-3 undefined和null

 

1-1 关于面试题

关于面试，虽然我个人还在面试过程当中，但是我有抽空看一点点的题目。我觉得认为万变不离其宗，基础知识把握好，题目做起来就不会错得那么难看哈哈哈。

看到题目，1：看考点；2：知识点；3：扩展；

 

2-1 变量类型和计算-变量类型（按存储方式区分类型）

变量类型分为：值类型和引用类型

基本数据类型（值类型）分为：undefined,null,number,boolean,string.

引用类型分为：对象、数组、函数等

两者之间的区别在于：值类型每个变量的储存各自的值不会相互影响，不可以添加属性和方法。而引用类型刚好相反

 

值类型简单代码演示

var a = 100;
var b = a;
a = 200;
console.log(b)//100

引用类型代码演示

var a = {age:20};//a赋值对象
var b = a;//b的指针指向a
b.age =
4000
21;
console.log(a.age)//21

使用typeof可以进行检测值类型和函数，但是引用类型的对象数组区分不出来，也可以用instanceof指定类型对象来检测

推荐文章：https://segmentfault.com/a/1190000008472264

 

 2-2 变量类型和计算-强制类型转换：变量的计算会导致类型的强制转换

变量的计算大概有以下几种：

1、字符串的拼接：

以下代码输出的结果是什么

console.log(1+'2'+'2');//122
console.log(1++'2'+'2');//1++'2'变成1+2，等于3拼接成为32
console.log('A'-'B'+'2');//NAN加上拼接的字符2  结果为NAN2
console.log('A'-'B'+2);//前面是NAN，后面是加法运算+2。运算操作中其中一个为NAN则整体为NAN

 

2、== 运算符

什么时候用==，什么时候用===

==值相等，===完全相等（包括类型）；

if (obj.a==null){
//相当于obj.a==null||obj.a===undefined的简写形式
//这个是jquery源码推荐的写法
}

 

3、if语句

var b = 100;
if(b){
//此处的b强制转换成布尔类型
}

 

4、逻辑运算符号

console.log(10&&0);//0;
console.log("||'abc'");//||'abc';
console.log(!window.abc);//true;
var a = 100;
console.log(!!a);//两个！！则是true

 

2-3 变量计算-理解json

json在js中是对象和数组，常用的json就是将json转换成字符串，字符串转换成对象。

json是一种数据交换的文本格式，目的是取代繁重的xml

json常用Api：

json.stringify({a:10,b:20}); //json转换成字符串
json.parse('{"a":10,"b":20}') //字符串转换成json

推荐文章：http://blog.csdn.net/qq_32528231/article/details/52783210

 

2-4 原型和构造函数-构造函数

 什么是构造函数？

普通函数要创建一类对象时，就被称为构造函数，也叫构造器。new fn（）的形式创建，new对象的过程也克隆了obj.prototype对象

function Foo(){
//建议构造函数首字母大写
this.name = 20;
}
var Foo2 = new Foo;
console.log(Foo2.name);//20

 

函数的创建方式

fn();//不报错
function fn(){
//函数声明式，定义在哪都能调用
}

fn1();//报错
var fn1 = function(){
//函数表达式，继承的是变量，调用只能在定义后面
}

 

2-5 原型和构造函数（constructor）-原型规则

1、所有引用类型，_proto_属性值指向它的构造函数的prototype属性值：

obj._proto_ === object.prototype;

Fn.prototype.constructor === Fn：

instanceof方法可以判断引用类型属于哪个构造函数的方法，判断变量是否是数组类型。

2、可扩展性

推荐文章：https://www.cnblogs.com/pompey/p/6675559.html

极力推荐，配合文章中的代码实战更为清晰

 

2-6 原型和构造函数-原型链

原型链：是一种行为委托机制。

配合__proto__指向的链路从下往上寻找，找不到就是unefined

一个原型链继承的例子。【注意修改id，此处演示id为div1】

function Elem(id){
this.elem =  document.getElementById(id)
};
Elem.prototype.html = function(val){
var elem = this.elem;
if (val){
elem.innerHTML = val;
return this;
}else {
return elem.innerHTML
}
}
var div1 = new Elem('div1');
div1.html('<p> hello </p>');

 

new 一个对象的过程

创建、this指向、执行对this赋值、返回this

 

3-1 作用域和闭包-变量提升

一个变量，在局部作用域的级别优先于全局作用域

自由变量：即当前作用域没有定义的变量

var a = 250;
function fn(){
var b = 100;
console.log(a);//自由变量
console.log(b);
}
fn();
//250
//100

换一种情况

var a = 250;
function fn(){

console.log(a);//自由变量，变量在局部得到提升，还未赋值状态
var a = 100;//得到提升
console.log(a);
}
fn();
//undefined
//100

以上另一种情况的代码演示，就叫做提升自由变量

 

 

3-2 作用域和闭包-this

this在执行时才能确认值，定义时无法确认

扩展认识：

call、apply、bind绑定this指向。这其中最常用的是call

function fn1(name,age){
alert(name);
console.log(this);
}

fn1.call({x:100},'zhangsan',20);
//弹出“zhangsan”
//this指向{x: 100}

 

 

3-3 作用域和闭包-作用域

分为局部作用域和全局作用域。局部同名变量优先级高于同名全局变量。js没有块级作用域

作用域链：自由变量从下往上往父类进行查找是否存在这个属性。这个一整个的过程就是作用域链

 

3-4 作用域和闭包-闭包

内部函数能引用外部函数中的变量，和作用域链密不可分，存储私有属性，封装变量。

 

 

4-1 异步和单线程-异步

js是单线程，异步和单线程是相辅相成的。

单线程就意味着不能同时做两件事，而同步会阻塞代码的运行，所以只能排队。而异步就是个插队的。

什么时候会用到异步？

需要进行耗时较长的操作都会用到异步。比如网络请求ajax、动态<img>加载等

 

 

4-2 异步和单线程-单线程

单线程一次只能完成一件事，其余的任务都得排队按顺序完成，前一个完成了才能进行下一个

 

5-1 日期常用API

getTime();//毫秒数
getFullYear();//年
getMonth();//月 （0~11）要+1
getDate();//日
getHours();//小时
getMinutes();//分钟
getSeconds();//秒

Date.now();//当前时间毫秒数
new Date();//当前时间

 

5-2数组常用API

forEach:遍历
every:判断所有元素是否都符合条件
some:判断是否至少有一个元素符合条件
map:重新组装数组元素
filter:过滤符合条件的元素
sort:排序（从小到大、从大到小）

 

 

5-3 undefined和null

var a = undefined;
var b = null;
a == b;//true
a === b;//true

以上代码显示出null和undefined的行为非常相似

但是根据用法来说

null表示“没有对象“的意思，就是此处不应该有值

undefined表示”缺少值“，就是此处应该有值，但是还没有定义

 

null常用情况

作为参数，表示这个参数不是对象

作为原型链的终点

 

undefined常用情况

变量声明了，没有赋值

调用函数时，没有提供该有的参数，该参数为undefined

对象没赋值属性，属性值为undefined

函数没返回值时，默认返回undefined