《前端JavaScript面试技巧》

《前端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);
  })

标签: js, 面试, 前端

相关阅读:
react ts axios 配置跨域
 npm run eject“Remove untracked files, stash or commit any changes, and try again.”错误
 java 进程的参数和list的线程安全
 帆软报表大屏列表跑马灯效果JS
帆软报表快速复用数据集，避免重复劳动
 分析云 OA中部门分级思路和实现方法
 分析云分段器只显示一个块的数据
 分析云更改服务默认的端口号
 分析云U8项目配置方法新版本（2）
Oracle 创建时间维度表并更新是否工作日字段
原文地址：https://www.cnblogs.com/rswl/p/8674457.html