Javascript收集前端面试学习

前端学习(面试):JavaScript篇

2018-03-04  本文已影响103人  倒霉蛋儿_才才

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

如有问题,还请批评指正

1. ES6特性

1.1 let与块级作用域

1.2 const

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

1.3 Map（对比Set）

1.4 Symbol

1.5 字符串模板

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

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 函数默认值

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 对象属性和方法简写

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 数组创建、转换与索引

1.9 Class

1.10 模块化

1.11 异步编程

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 展开运算符'...'

2. 箭头函数

3. Unicode与UTF-8

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

4. Array

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

5. Object

6. 日期和字符串格式

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

7. 类型判断

8. 数组判断

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. 对象拷贝

11. 闭包

12. this

13. 创建对象的方式

14. 继承

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

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()时发生了什么?

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次调用
函数在执行完毕

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

上一篇 下一篇

猜你喜欢

热点阅读