前端学习(面试):JavaScript篇

前端主要包括HTML(5)、CSS(3)、JavaScript三个部分，其中JavaScript负责前端交互即逻辑处理，与后端服务进行沟通。熟练掌握JavaScript以及新特性，对于搞好前端开发是非常重要的。虽然有各种前端框架或者组件UI库可以适用，但是对待编程我们要有一颗虔诚的心，因为我们可是要“Write the code, change the world!”的人啊！
（本内容适合具有一定JavaScript基础的人群，部分内容引自小火柴的博客、Dunizb：2017我遇到的前端面试题、小白白白：2017前端面试总结，侵删!)

如有问题,还请批评指正

1. ES6特性

1.1 let与块级作用域

• let声明的变量具有块级作用域
• let声明的全局变量不能通过window[name]访问
• let在迭代时使用，会为每个i创建绑定（之前通过匿名函数（闭包）解决这个问题）
• 先使用后定义会引发错误（临时死区），可以被编译器捕捉，改善编程体验

1.2 const

• const声明的变量为常量（值类型），即其值不可改变
• 但是当值为引用类型是，其属性值可以改变

//const 声明变量
const num = 100
num = 200 //error
const person = { name  :'zhangsan' , age : 25 }
person.age = 26 //ok

1.3 Map（对比Set）

• 映射,可以存储键值对
• 可以通过get(key)/set(key,val)/has(key)等方法实现键值对的取/存/查
• 可以使用forEach(val,key)实现迭代,以及通过size属性获取其键值对的数量

1.4 Symbol

• 具有静态属性和静态方法，不支持new操作符
• 每个Symbol([name])返回值唯一,即使两个name相同
• 给对象创建匿名属性,不可枚举,如obj[new Symbol()] = 'foo',但是可以更通过Object.getOwnPropertySymbols(obj)获取

1.5 字符串模板

• 模板字面量是增强版的字符串，它用反引号（`）标识
• 支持多行字符串

const str1 = 'Hello, my name is Xiao Wang!' //普通字符串
const str2= `Hello, 
             my name is Xiao Wang!` //多行字符串

• 变量占位符,类似于C#中的format或者Vue中的{{}}

const name = 'Xiao Wang'
let str = `Hello, my name is ${name}` //'Hello, my name is Xiao Wang!'

• 标签模板,可以允许对传入的参数进行加工并返回最终的字符串

function myTag(literals, name) {
     let str1 = lierals[0] //'Hello, my name is '
     name = name ? name : 'undefined'
     return str1 + name
}
let name = ''
message = myTag`Hello, my name is ${name}`; //'Hello, my name is undefined!'
name = 'Xiao Wang'
message = myTag`Hello, my name is ${name}`; //'Hello, my name is Xiao Wang!'

1.6 函数默认值

• 当传递参数为 undefined时候,会触发默认值
• 默认值形式可以为具体数值，也可以为表达式
• 函数的length属性，将返回没有指定默认值的参数个数

function fn1(name, id = 0){
console.log(`${name},${id}`) 
}
let  index  = 0
function fn2(name,id = index +1 ){
console.log(`${name},${id}`) 
}
fn1('zhang') // 'zhang,0'
fn1('zhang',2) // 'zhang,2'
fn2('zhang') // 'zhang,1'
fn2('zhang',5) // 'zhang,5'

1.7 对象属性和方法简写

• 当对象属性名与变量名相同时，可只写一个变量，而不需要属性名：
• 当定义对象方法时，也可省去:function,直接这样方法名()即可

let name = 'Xiao Wang',
    person = {
        name,
        sayHi(){
        //this通过隐式绑定为person对象
        console.log(`Hello,my name is ${this.name}!`)
        }
    }
person.sayHi() // 'Hello, my name is Xiao Wang!'
let sayHi2 = person.sayHi //导致this隐式绑定消失,转而绑定为window对象
sayHi2() // 'Hello, my name is undefined!'

• 可计算属性名称，通过中括号[]包裹,有点类似于占位符，具体数值需要运行时计算得到

let index = 1
let obj = {
    ['name '+index]:'Wang'
}
console.log(obj) //{'name 0','Wang'}

1.8 数组创建、转换与索引

• 通过Array.of(2)，可以创建一个长度为1而不是2的数组；注意Array(2)创建的是长度为2的数组，但是数组前两位均为undefined
• 通过Array.from()可以将类数组对象转化为数组，如arguments等以数字为属性名的对象；ES6之前通过Array.prototype.slice.call(arguments)实现
• 实例属性includes，可以判断是否存在某元素，避免了indexOf中===严格相等对NAN的误判
• fill与copyWithin制定填充

1.9 Class

• 通过constructor创建实例属性
• 函数声明与类声明的不同
  1. 函数声明可以被提升，类声明与let 相似不能被提升
  2. 类声明中的所有代码将自动运行在严格模式下，而且无法强行让代码脱离严格模式执行
  3. 在自定义类型中，需要通过Object.defineProperty()方法手工指定某个方法为不可枚举；而在类中，所有方法都是不可枚举的
  4. 使用除关键字new以外的方式调用类的构造函数会导致程序抛出错误

1.10 模块化

• 模块定义的规范：
  1. AMD -- requireJS对模块定义的规范，对于依赖的模块提前执行
  2. CMD -- SeaJS对模块 定义的规范，对于依赖就近加载并执行
  3. CommonJS规范主要在NodeJS后端使用，前端浏览器不支持该规范
  4. ES6的模块主要通过export和import来进行模块的导入和导出

1.11 异步编程

• 事件机制，如页面的onload时间，只有在页面加载完成后才会执行
• 回调函数机制，与事件类似，区别在于回调函数是以参数的形式传入
• Promise实现链式编程
  1. 三个状态：Pending(初始状态)、Fulfilled（成功）与Rejected（失败）
  2. 通过Promise构造函数创建新的promise实例，接收两个参数resolve（成功）和reject（失败）,用于触发异步操作；通过then(fnSuc,fnErr)和catch(fnErr)处理成功和失败后的操作

function getData(){
    //返回一个Promise的实例
    return new Promise(resolve,reject => {
        //do somthing
        //触发成功后的操作
        if(successed) resolve('suc msg')
        else reject('err msg')
    })
}
//链式编程
getData().then(sucMsg => {
    //监听成功与失败
    console.log(sucMsg) //suc msg
}).catch(err => {
    //监听失败
    console.log(err) //er msg
})

1.12 展开运算符'...'

• 通过展开运算符可以用于
  1. 函数参数传递

  function test(a,b,c){ return a+b+c }
  let params = [1,2,3]
  //通过apply方法实现函数的参数传递
  test.apply(null,params) // 6
  //通过展开运算符 更加简便
  test(...params) //6
  

  2. 数组、类数组对象与解构赋值

  //数组
  let ary1 = [1,2,3],
      ary2 = [...ary1,4,5,6] // [1,2,3,4,5,6]
  //类数组对象转数组（Array.from(args) || Array.prototype.slice.call(args)）
  let args = [...arguments]
  //解构赋值
  let {a,b,...c} = [1,2,3,4]
  console.log(a) //1
  console.log(b) //2
  console.log(c) //[3,4]
  

---

2. 箭头函数

• 箭头函数不具备动态上下文，其中this指向外层上下文
• 没有构造器（constructor）,不能使用call、apply等方法调用

---

3. Unicode与UTF-8

• Unicode是一种统一的文字编码方案，为每一个符号分配独一无二的二进制字节表示（可能是多字节，如汉字等）
• UTF-8是一种可变长Unicode编码，由于不同符号分配的字节数不同，其表示规则亦不同
  1. 一个字节（8位）：与ASCII码相同，如英文字符等
  2. 多个字节：假设某符号通过二进制表示需要n个字节，那么第一个字节的前n位表示为1，第n+1位为0;剩余字节的前两位统一表示为10；其余为编码位

1个字节： 10xxxxxx 
2个字节： 110xxxxx 10xxxxxx
3个字节： 1110xxxx 10xxxxxx 10xxxxxx
以此类推

---

4. Array

• push()、pop()、sort()、reverse()、splice()、shift()、unshift()会修改原始数组
• shift()删除数组头部元素,返回被移除元素;unshift()添加元素到数组头部并返回修改后数组的长度
• push()追加元素到数组尾部，返回新的数组长度；pop删除数组尾部元素，返回被删除元素
• slice复制一个数组
• map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let ary1 = [1,2,3],
    ary2 = ary1.map(x => x ** 2) // [1,4,9]

---

5. Object

• assign()复制一个或多个对象来创建一个新对象（浅拷贝）
• defineProperty()定义属性并指定该属性的配置，包括enumerable、configurable/value、writable/get、set
• getOwnPropertySymbols()返回一个数组，包含自身的所有符号属性
• getPropertyOf()获取指定对象的原型

---

6. 日期和字符串格式

• 日期时间完整格式为: YYYY-MM-DDTHH:mm:ss.sssZ

YYYY        公历中年的十进制数字，如果这个参数值在0-99之间，则向它加上1900
-           在字符串中直接以“-”(破折号)出现两次
MM          一年中的月份，从01(一月)到12(十二月)
DD          月份中的日期，从01到31
T           在字符串中直接以“T”出现，用来表明时间元素的开始
HH          用两个十进制数字表示的，自午夜0点以来的小时数
:           在字符串中直接以“:”(冒号)出现两次
mm          是用两个十进制数字表示的，自小时开始以来的分钟数
ss          是用两个十进制数字表示的，自分开始以来的秒数
.           在字符串中直接以“.”(点)出现
sss         是用三个十进制数字表示的，自秒开始以来的毫秒数
Z           是时区偏移量，由（“Z”(指UTC)或“+”或“-”）和后面跟着的时间表达式hh:mm组成

• 能够被400整除或者能够同时被4 和100整除的年份为闰年，2月29天；其他年份2月28天

---

7. 类型判断

• typeOf obj :udefined、object（null的结果为object）、function、boolean、number、string;
  1. 不能判断那具体对象类型；
  2. 不能判断null
• obj instanceOf 指定类型,判断是否为指定类型的实例
  1. 只能判断内置非标准对象、自定义类型及其父类型
• Object.prototype.toString.call(obj),如[object Number]
  1. 只能判断内置对象，包括标准类型
• constructor
  1. 可以判断具有构造函数的对象，除undefined、null
• Object.getPropertyOf(obj),通过比较原型判断

---

8. 数组判断

• typeOf无法完成判断
• instanceOf存在多框架问题(不同框架Array构造函数可能不同)
• Object.prototype.toString.call(obj)与isArray

---

9. 函数重载

• 检查传入参数数量和参数类型，执行不同的操作
• 通过检查形参与实参数量，执行不同方法,通过闭包巧妙地使上一次添加的函数不被释放,源自渔歌

function addMethod(object, name, fn) {
　　var old = object[name];
　　object[name] = function() {
　　　　if(fn.length === arguments.length) {
　　　　　　return fn.apply(this, arguments);
　　　　} else if(typeof old === "function") {
　　　　　　return old.apply(this, arguments);
　　　　}
　　}
} 

10. 对象拷贝

• 浅拷贝
  1. 复制,Object.assign()
  2. 迭代:for in;Object.keys()
• 深拷贝
  1. 遍历递归

  function deepClone(obj,cloneObj){
      if(typeof obj != 'object'){
          return false;
      }
      var cloneObj = isArray(obj) ? [] : {};
      for(var i in obj){
          if(typeof obj[i] === 'object'){
              arguments.callee(obj[i],cloneObj[i]);
          }else{
              cloneObj[i] = obj[i]; 
          }  
      }
      return cloneObj;
  }
  

  2. Json.parse(Json.stringify()) ,不能够拷贝function

---

11. 闭包

• 函数嵌套函数且内部函数作用域被外部函数访问时才形成闭包,其上下文中的变量一直保存的内存中且不会污染全局变量
• 严格来说，闭包需要满足三个条件：
  1. 访问所在作用域；
  2. 函数嵌套；
  3. 在所在作用域外被调用

12. this

• 闭包和IIFE(Imediately Invoked Function Expression)的 this绑定为window对象,可通过箭头函数解决

---

13. 创建对象的方式

• 对象字面量
• 工厂模式,通过new Object()创建对象添加属性并返回
• 构造函数模式,即通过new 类型名关键字,具有this上下文
• 原型模式,Object.create(proto),指定类型的原型对象
• Object.assign()

---

14. 继承

• 构造函数继承,只继承了实例属性部分
• 原型链继承,只继承了公共方法和属性部分
• 原型式,只继承了公共方法和属性部分

function Create(o){
    function F(){} 
    F.prototype = o 
    return new F() 
}

• 寄生继承(工厂模式)
• 组合继承(call/apply和prototype)

function Super(name){ 
    this.name = name || 'super' 
}
Super.prototype.sayHi = function(){ 
    console.log(`My name is ${this.name}!`) 
}
let parent =new Super('Xiao Wang')
s.sayHi() //'My name is Xiao Wang!'

//1 构造函数继承
function Sub1(name,age){ 
    Super.apply(this,name) 
    this.age = age || 0  
}
let child1 = new Sub1('San Zhang')
child1.sayHi() //Error 因为构造函数继承,只能继承属性不能继承原型中的方法

//2 原型链继承
function Sub2(name,age){ 
    this.name = name || 'super'
    this.age = age || 0  
}
Sub2.prototype = new Super()
Sub2.constructor = Sub2
Sub2.prototype.sayHi2 = function(){
    console.log(`My name is ${this.nam} and i'm ${this.age} years old!`)
}
let child2 = new Sub1('San Zhang',26)
child2.sayHi() //'My name is San Zhang!'
child2.sayHi2() // 'My name is San Zhang and i'm 26 years old!'

//3 原型式继承
function Sub3(name,age){ 
    Super.call(this,name)
    this.age = age || 0  
}
Sub3.prototype = new Super()
Sub3.constructor = Sub3
Sub3.prototype.sayHi = function(){
    console.log(`My name is ${this.nam} and i'm ${this.age} years old!`)
}

---

15. 当new Foo()时发生了什么?

• 创建一个新对象
• 将新创建对象的隐式原型指向其构造函数的显示原型
• 将this指向该新对象
• 如果无返回值或者返回值为非对象,则返回创建的新对象;如果返回值为对象,则返回该对象

---

16. 函数防抖和函数节流

• 函数防抖，有足够的空闲时间才执行一次

function test(callback,interval){
    let timerId = -1
    return function(){
            //清楚上次计时，重新开始
            clearTimeout(timerId)
            //设置计时回调
            timerId = setTimeout(callback,interval)
    }
}
let testFun = test(() => { console.log('嘀嘀') }，1000*5)
console.log('第一次调用')
testFun()
console.log('第二次调用')
testFun()
console.log('第三次调用')
testFun()
//输出结果为
第一次调用
第二次调用
第三次调用
嘀嘀

• 函数节流，如果函数正在执行，则返回

function test2() {
    let running = false
    return function () {
        if (running) {
            console.log('函数正在执行中...')
            return
        }
        running = true
        //do somthing
        setTimeout(() => {
            running = false
            console.log('函数在执行完毕')
        }, 1000 * 3);
    }
}

let testFun2 = test2()
console.log('第1次调用')
testFun2()
console.log('第2次调用')
testFun2()
setTimeout(() => {
    console.log('第3次调用')
    testFun2()
}, 1000 * 5);

// 运行结果
第1次调用
第2次调用
函数正在执行中...
函数在执行完毕
第3次调用
函数在执行完毕

---

如果您感觉有所帮助，或者有问题需要交流，欢迎留言评论，非常感谢！
前端菜鸟，还请多多关照！

• Git： BuggMaker
• 博客：倒霉蛋儿_才才

---