前端学习(面试):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 展开运算符'...'

通过展开运算符可以用于

函数参数传递

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

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

//数组
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()

深拷贝

遍历递归

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;
}

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
博客：倒霉蛋儿_才才