《前端JavaScript面试技巧》笔记一
思考：
- 拿到一个面试题，你第一时间看到的是什么 -> 考点
- 又如何看待网上搜出来的永远也看不完的题海 -> 不变应万变
- 如何对待接下来遇到的面试题 -> 题目到知识再到题目
知识体系：
JS基础知识
一、变量类型和计算
题目：
- JS中使用typeof能得到哪些类型？
- 何时使用 === 何时使用 == ？
- JS中有哪些内置函数
- JS变量按照存储方式区分为哪些类型，并描述其特点
- 如何理解JSON
知识点：
/*一、变量类型*/ /*值类型vs引用类型*/ //从内存来说，值类型是把每个值分块存放在内存中，而引用类型是好几个变量公用一个内存块，节省内存空间。 //引用类型包括：对象、数组、函数。引用类型的属性是可以无限扩展的，属性多了，就会占用更多的内存空间，所以引用类型是为了公用内存空间。 //值类型 var a = 100; var b = a; a = 200; console.log(b); //100 //引用类型 var a = {age:20}; var b = a; b.age = 21; console.log(a.age); //21 /*typeof运算符详解*/ //typeof只能区分值类型，引用类型也只能区分function，因为function的定位非常高。 typeof undefined //undefined (值类型) typeof 'abc' //string (值类型) typeof 123 //number (值类型) typeof true //boolean (值类型) typeof {} //object (引用类型) typeof [] //object (引用类型) typeof null //object (引用类型) typeof console.log //function (引用类型)
/*二、变量计算---强制类型转换*/ //字符串拼接 var a = 100+10; //110 var b = 100+'10'; //'10010' //运算符 //==会把两边的值转换为true或false 100 == '100'; //true 0 == ''; //true null == undefined; //true //if语句 //if会把括号里面的值转换为true或false var a = true; if(a){...} var b = 100; if(b){...} var c = ''; if(c){...} //逻辑运算 console.log(10 && 0); //0 console.log('' || 'abc'); //'abc' console.log(!window.abc); //true //判断一个变量会被当作true还是false var a = 100; console.log(!!a);
解题：
JS中使用typeof能得到哪些类型？
undefined、string、number、boolean、object、function
何时使用 === 何时使用 == ？
if(obj.a==null){
//这里相当于 obj.a === null || obj.a ===undefined ,简写形式
//这是 jquery 源码中推荐的写法
}
双等会进行强制类型转换，三等不会进行强制类型转换。
除了上面的例子用双等，其它的都用三等。
JS中有哪些内置函数
数据封装类对象
Object
Array
Boolean
Number
String
Function
Date
RegExp ：正则表达式
Error
JS变量按照存储方式区分为哪些类型，并描述其特点
值类型和引用类型。
从内存来说，值类型是把每个值分块存放在内存中，而引用类型是好几个变量公用一个内存块，节省内存空间。
如何理解JSON
JSON只不过是一个JS对象，也是一种数据格式。
JSON基本的api只有两个：
JSON.stringify({a:10,b:20}); //对象转字符串
JSON.parse('{"a":10,"b":20}'); //字符串转对象
二、原型和原型链
题目：
- 如何准确判断一个变量是数组类型
- 写一个原型链继承的例子
- 描述new一个对象的过程
- zepto（或其他框架）源码中如何使用原型链
知识点：
//大写开头的函数基本都是构造函数，这么写提高代码可读性 /*一、构造函数*/ function Foo(name,age){ this.name = name; this.age = age; this.class = 'class-1'; //return this //默认有这一行，最好不要写 } var f = new Foo('zhangsan',20); //var f1 = new Foo('lisi',22); //创建多个对象 //new时把参数传进去。new函数执行时里面的this会变成空对象，给this赋值后，再把this给return回来，return回来就把值赋值给了f，这时f就具备f.name = 'zhangsan',f.age = 20,f.class ='' 'class-1' /*二、构造函数-扩展*/ /* var a = {} 其实是 var a = new Object() 的语法糖。 构造函数是Object函数。 var a = [] 其实是 var a = new Array() 的语法糖。 构造函数是Array函数。 function Foo(){...} 其实是 var Foo = new Function(...)。 构造函数是Function。 推荐前面的书写方式。 使用instanceof判断一个函数是否是一个变量的构造函数。比如：判断一个变量是否为“数组”：变量 instanceof Array */
/*三、原型规则和示例*/ //5条原型规则-原型规则是学习原型链的基础 //1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了null以外） var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn(){}; fn.a = 100; //2、所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象。 __proto__ 隐式原型 console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__); //3、所有的函数，都有一个prototype属性，属性值也是一个普通的对象。 prototype显式原型 console.log(fn.prototype); //4、所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的"prototype"属性值。 console.log(obj.__proto__ === Object.prototype); //5、当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的 __proto__(即它的构造函数的prototype)中寻找。 //构造函数 function Foo(name,age){ this.name = name; } Foo.prototype.alertName = function(){ alert(this.name); } //创建示例 var f = new Foo('zhangsan'); f.printName = function(){ console.log(this.name); } //测试 f.printName(); //zhangsan f.alertName(); //zhangsan //补充 -- 循环对象自身的属性 var item; for(item in f){ //高级浏览器已经在 for in 中屏蔽了来自原型的属性 //但是这里建议还是加上这个判断，保证程序的健壮性 if(f.hasOwnProperty(item)){ console.log(item); } } /*四、原型链*/ //构造函数 function Foo(name,age){ this.name = name; } Foo.prototype.alertName = function(){ alert(this.name); } //创建示例 var f = new Foo('zhangsan'); f.printName = function(){ console.log(this.name); } //测试 f.printName(); //zhangsan f.alertName(); //zhangsan f.toString(); //要去f.__proto__.__proto__中查找 /*五、instanceof*/ //用于判断引用类型属于哪个构造函数的方法 //构造函数 function Foo(name,age){ this.name = name; } Foo.prototype.alertName = function(){ alert(this.name); } //创建示例 var f = new Foo('zhangsan'); f.printName = function(){ console.log(this.name); } //测试 f.printName(); //zhangsan f.alertName(); //zhangsan f.toString(); //要去f.__proto__.__proto__中查找 //instanceof //f instanceof Foo 的判断逻辑是： //1、f 的 __proto__ 一层一层往上，能否对应到 Foo.prototype //2、再试着判断 f instanceof Object
解题：
如何准确判断一个变量是数组类型
var arr = [];
arr instanceof Array; //true
typeof arr; //object typeof是无法判断是否是数组的
写一个原型链继承的例子
//动物
function Animal(){
this.eat = function(){
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
/*面试时千万不要写这个例子，要写更贴近于实战的原型链例子*/
/*用下面的例子*/
//写一个封装DOM查询的例子
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;
}
}
Elem.prototype.on = function(type,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
return this;
}
var div1 = new Elem('div1');
console.log(div1.html());
div1.html('<h2>新内容</h2>').on('click',function(){
alert(div1.html());
}).html('<h2>新内容新内容新内容</h2>').on('click',function(){
alert('第二次');
}); //链式操作
/*div1.html('<h2>新内容</h2>')
div1.on('click',function(){
alert(div1.html());
})*/
描述new一个对象的过程
/*
1、创建一个新对象
2、this指向这个新对象
3、执行代码，即对this赋值
4、返回this
*/
/*构造函数*/
function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class-1';
//return this //默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22); //创建多个对象
zepto（或其他框架）源码中如何使用原型链
- 阅读源码是高效提高技能的方式。如zepto
- 但不能“埋头苦钻”，有技巧在其中
- 慕课网搜索“zepto设计和源码分析”
三、作用域和闭包
题目：
- 说一下对变量提升的理解
- 说明this几种不同的使用场景
- 创建10个<a>标签，点击时弹出对应的序号
- 如何理解作用域
- 实际开发中闭包的应用
知识点：
/*一、执行上下文*/
//范围：一段<script>或者一个函数
//全局：变量定义、函数声明（一段<script>）
//函数：变量定义、函数声明、this、arguments（函数）
//PS：注意“函数声明”和“函数表达式”的区别
//实际代码中不要下面这种写法，都是先定义，再执行，提高代码可读性。
console.log(a); //undefined
var a = 100;
fn('zhangsan'); //'zhangsan' 20
function fn(name){ //函数声明
age = 20;
console.log(name,age);
var age;
}
var fn = function(){} //函数表达式
/*二、this*/
//this要在执行时才能确认值，定义时无法确认。
//作为构造函数执行
//作为对象属性执行
//作为普通函数执行
//call、apply、bind
var a = {
name:'A',
fn:function(){
console.log(this.name);
}
}
a.fn(); //this===a
a.fn.call({name:'B'}); //this==={name:'B'}
var fn1 = a.fn;
fn1(); //this===window
/*作用域*/
/*无块级作用域*/
//没有块级作用域，写在里面和外面是一样的。不建议下面这种写法，程序不易读。
if(true){
var name = 'zhangsan';
}
console.log(name); //zhangsan
/*函数和全局作用域*/
var a = 100; //全局变量
function fn(){
var a = 200; //局部变量
console.log('fn',a);
}
console.log('global',a);
fn();
/*作用域链*/
//函数的父级作用域是函数定义时的作用域，不是函数执行时的作用域。
var a = 100;
function fn(){
var b = 200;
//当前作用域没有定义的变量，即“自由变量”
console.log(a); //100
console.log(b); //200
}
fn();
//例子
var a = 100;
function F1(){
var b = 200;
function F2(){
var c = 300;
console.log(a); //100 //自由变量
console.log(b); //200 //自由变量
console.log(c); //300
}
F2();
}
F1();
/*闭包*/
function F1(){
var a = 100;
//返回一个函数（函数作为返回值）
return function(){
console.log(a);
}
}
//f1得到一个函数
var f1 = F1();
var a = 200;
f1();
//f1执行的是return里的函数，return里的a是个自由变量，要去父级作用域寻找，父级作用域F1里面定义了a，所以打印出来的a的值是100.
/*闭包的使用场景
1、函数作为返回值（上一个demo）
2、函数作为函数传递(下面这个例子)
*/
function F1(){
var a = 100;
return function(){
console.log(a);
}
}
var f1 = F1();
function F2(fn){
var a = 200;
fn();
}
F2(f1);
解题：
说一下对变量提升的理解
变量定义
函数声明（注意和函数表达式的区别）
执行上下文的概念。
各个函数中，它的变量的声明和定义，以及函数的声明都会提前，放在前面，由此就是变量提升主观上、形象上的理解。
说明this几种不同的使用场景
作为构造函数执行
作为对象属性执行
作为普通函数执行
call、apply、bind
创建10个<a>标签，点击时弹出对应的序号
var i;
for(i=0;i<10;i++){
(function(i){
var a = document.createElement('a');
a.innerHTML = i+'<br>';
a.addEventListener('click',function(e){
e.preventDefault();
alert(i);
})
document.body.appendChild(a);
})(i);
}
如何理解作用域
要领：
1、自由变量
2、作用域链，即自由变量的查找
3、闭包的两个场景
实际开发中闭包的应用
//闭包实际应用中主要用于封装变量，收敛权限 function isFirstLoad(){ var _list = []; return function(id){ if(_list.indexOf(id)>=0){ return false; }else { _list.push(id); return true; } } } //使用 var firstLoad = isFirstLoad(); firstLoad(10); //true firstLoad(10); //false firstLoad(20); //true
//在 isFirstLoad 函数外面，根本不可能修改掉 _list 的值
四、异步和单线程
题目：
- 同步和异步的区别是什么？分别举一个同步和异步的例子
- 一个关于setTimeout的笔试题
- 前端使用异步的场景有哪些
知识点：
/*什么是异步（对比同步）*/
//同时执行，不会阻塞程序执行
console.log(100);
setTimeout(function(){
console.log(200);
},1000);
console.log(300);
setTimeout(function(){
console.log(400);
},1000);
//下面这个例子类似同步
console.log(100);
alert(200);
console.log(300);
/*前端使用异步的场景*/
/*何时需要异步：
在可能发生等待的情况
等待过程中不能像alert一样阻塞程序进行
因此，所有的“等待的情况”都需要异步
1、定时任务：setTimeout、setInterval
2、网络请求：ajax请求、动态<img>加载
3、事件绑定
*/
//ajax请求代码示例
console.log('start');
$.get('./data1.json',function(data1){
console.log(data1);
})
console.log('end');
//<img>加载示例
console.log('start');
var img = document.createElement('img');
img.onload = function(){
console.log('loaded');
}
img.src = '/xxx.png';
console.log('end');
//事件绑定示例
console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
alert('clicked');
})
console.log('end');
/*异步和单线程*/
console.log(100);
setTimeout(function(){
console.log(200);
});
console.log(300);
//执行结果：100、300、200
//setTimeout是异步，最后执行。这个例子的setTimeout没有等待时间，所以待其它执行完之后立马执行setTimeout。
//单线程就是一次只能做一件事
/*解析：
1、执行第一行，打印100
2、执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
3、执行最后一行，打印300
4、待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行。
5、发现暂存起来的setTimeout中的函数无需等待时间，就立即拿过来执行。
*/
解题：
同步和异步的区别是什么？分别举一个同步和异步的例子
同步会阻塞代码执行，而异步不会。
alert是同步，setTimeout是异步。
例子：
//异步
console.log(100);
setTimeout(function(){
console.log(200);
},1000);
console.log(300);
//同步
console.log(100);
alert(200);
console.log(300);
一个关于setTimeout的笔试题
console.log(1);
setTimeout(function(){
console.log(2);
},0)
console.log(3);
setTimeout(function(){
console.log(4);
},1000)
console.log(5);
//1 3 5 2 4
前端使用异步的场景有哪些
- 定时任务：setTimeout、setInterval
- 网络请求：ajax请求、动态<img>加载
- 事件绑定
五、其它知识点
题目：
- 获取2017-06-10格式的日期
- 获取随机数，要求是长度一致的字符串格式
- 写一个能遍历对象和数组的通用forEach函数
知识点：
/*日期*/
Date.now(); //获取当前时间毫秒数
var dt = new Date();
dt.getTime(); //获取毫秒数
dt.getFullYear(); //年
dt.getMonth(); //月（0-11）
dt.getDate(); //日（0-31）
dt.getHours(); //小时（0-23）
dt.getMinutes(); //分钟（0-59）
dt.getSeconds(); //秒（0-59）
/*Math*/
Math.random(); //获取随机数。（返回的是 >0 和 <1 的小数）。有清除缓存的作用。
/*数组API*/
//forEach //遍历所有元素
var arr = [1,2,3];
arr.forEach(function(item,index){
//遍历数组的所有元素。item：元素的值。index：元素的位置
console.log(index,item);
})
//every //判断所有元素是否都符合条件
var arr = [1,2,3];
// var arr = [1,2,3,4,5];
var result = arr.every(function(item,index){
if(item<4){
return true;
}
})
console.log(result); //true
//some //判断是否有至少一个元素符合条件
var arr = [1,2,3];
var result = arr.some(function(item,index){
if(item<2){
return true;
}
})
console.log(result); //true
//sort //排序
var arr = [1,4,2,5,3];
var arr2 = arr.sort(function(a,b){
//从小到大排序
return a -b;
//从大到小排序
//return b-a;
})
console.log(arr2);
//map //对元素重新组装，生成新数组
var arr = [1,2,3,4];
var arr2 = arr.map(function(item,index){
return '<b>' + item + '</b>';
})
console.log(arr2);
//filter //过滤符合条件的元素
var arr = [1,2,3,4];
var arr2 = arr.filter(function(item,index){
if(item>=2){
return true;
}
})
console.log(arr2);
/*对象API*/
var obj = {
x:100,
y:200,
z:300
}
var key;
for(key in obj){ //key是obj的属性名
//注意这里的 hasOwnProperty ,再讲原型链时候讲过了
if(obj.hasOwnProperty(key)){ //判断key是obj原生的属性，而不是原型里面的属性
console.log(key,obj[key]);
}
}
解题：
获取2017-06-10格式的日期
function formatDate(dt){
if(!dt){
dt = new Date();
}
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
if(month<10){
//强制类型转换
month = '0'+month;
}
if(date<10){
//强制类型转换
date = '0'+date;
}
//强制类型转换
return year + '-' + month + '-' + date;
}
var dt = new Date();
var formatDate = formatDate();
console.log(formatDate);
获取随机数，要求是长度一致的字符串格式
var random = Math.random();
var random = random + '0000000000'; //后面加上10个零,为了确保长度一致
var random = random.slice(0,10); //截取前10位
console.log(random);
写一个能遍历对象和数组的通用forEach函数
function forEach(obj,fn){
var key;
if(obj instanceof Array){
//准确判断是不是数组
obj.forEach(function(item,index){
fn(index,item);
})
}else{
//不是数组就是对象，对象用for in循环
for(key in obj){
fn(key,obj[key]);
}
}
}
var arr = [1,2,3];
//注意，这里参数的顺序换了，为了和对象的遍历格式一致
forEach(arr,function(index,item){
console.log(index,item);
})
var obj = {x:100,y:200};
forEach(obj,function(key,value){
console.log(key,value);
})
