手记

JavaScript初级面试技巧

侠客岛的含笑
2019-07-01 09:05:46浏览 2471
  • 基础
    • 原型 原型链
    • 作用域 闭包
    • 异步 单线程
  • HS API
    • DOM操作
    • Ajax
    • 事件绑定
  • 开发
    • 版本管理
    • 模块化
    • 打包工具
  • 运行
    • 页面渲染
    • 性能优化

经典例题

  • JS中使用typeof 能得到的哪些类型？
    • JS数据类型
  • 何时使用===何时使用==?
    • 强制类型转换
  • window.onload 和DOMContentLoaded的区别？
    • 浏览器渲染过程
  • 用JS创建10个<a>标签，点击的时候弹出来对应的序号
    • 作用域
  • 简述如何实现一个模块加载器，实现类似require.js的基本功能
    • JS模块化
  • 实现数组的随机排序
    • JS基础解法
  • 拿到一个面试题，你第一时间看到的是什么->考点
  • 又如何看待网上搜出来的永远也看不完的题海->不变应万变
  • 如何对待接下来遇到的面试题？->题目到知识再到题目

变量类型和变量计算

  • 几种基本数据类型?
  • 复杂数据类型?
  • 值类型和引用数据类型?
  • 堆栈数据结构?
  • 基本数据类型：Undefined、Null、Boolean、Number、String
  • 值类型：数值、布尔值、null、undefined。
  • 引用类型：对象、数组、函数。
  • 堆栈数据结构：是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!
  • js数组中提供了以下几个方法可以让我们很方便实现堆栈：
    • shift:从数组中把第一个元素删除，并返回这个元素的值。
    • unshift: 在数组的开头添加一个或更多元素，并返回新的长度
    • push:在数组的中末尾添加元素，并返回新的长度
    • pop:从数组中把最后一个元素删除，并返回这个元素的值。

JS内置函数

  • 内置函数
    • Object
    • Array
    • Boolean
    • Number
    • String
    • Function
    • Date
    • RegExp
    • Error
  • 内置对象
    • Math
    • JSON

值类型和引用类型

  • 值类型：数值、布尔值、null、undefined
  • 引用类型：对象、数组、函数

JSON

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

原型和原型链-构造函数问题

  • 如何准确判断一个变量是数组类型
  • 写一个原型链继承的例子必领会
  • 描述new一个对象的过程
  • zepto（或其他框架）源码中如何使用原型链

instanceof的妙用

object instanceof constructor
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

  • var a={}其实是var a=new Object（)的语法糖
  • var a=[]其实是var a=new Array)的语法糖
  • function Foo(){…}其实是var Foo=nea Function(…)
  • 使用instanceof判断一个函数是否是一个变量的构造函数
  • 判断一个变量是否为“数组”：变量 instanceof Array
  • typeof无法判断数组

new对象过程

  • 创建一个新对象
  • this 指向这个新对象
  • 执行代码，即对this 赋值
  • 返回 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('tisi',22)//创建多个对象

原型链继承

循环对象自身的属性

var item
for(item in f){
//高级浏览器已经在for in中屏蔽了来自原型的属性
//但是这里建议大家还是加上这个判断，保证程序的健壮性
	if(f.hasownProperty(item)){
		console.Log(item)
	}
}

原型规则（隐式原型和显式原型）

  • f instanceof Foo的判断逻辑是：
  • f的__proto_一层一层往上，能否对应到Foo.prototype
  • 再试着判断 f instanceof Object

原型链继承例子

//动物

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()

zepto原型链

  • 阅读源码是高效提高技能的方式
  • 但不能“埋头苦钻”有技巧在其中

链式操作

作用域和闭包-执行上下文

  • 说一下对变量提升的理解
    • 变量定义
    • 函数声明
  • 说明this几种不同的使用场景
  • 创建10个<a>标签，点击的时候弹出来对应的序号
  • 如何理解作用域
  • 实际开发中闭包的应用

自由变量

var a=100
function fn(){
	var b=200
	//当前作用域没有定义的变量，即“自由变量”
	console.log(a)
	console.1og(b)
}
fn()

this

  • this 要在执行时才能确认值，定义时无法确认
var a = {
	name:'A',
	fn:function(){
		console.Log(this.name)
	}
}
a.fn()// this ===a
a.fn.call({name:‘B'})// this==={name:'B'}
var fnl=a.fn
fn1() //this===window

作用域

//无块级作用域
if(true){
	var name='zhangsan'
}
console.log(name)
//函数和全局作用域
var a*100
function fn(){
	var a=200
	console.log('fn'，a)
}
console.Log('global',a)
fn()

确定点击按钮的作用域

立即函数

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。
函数声明和函数表达式不同之处在于，一、Javascript引擎在解析javascript代码时会‘函数声明提升’（Function declaration Hoisting）当前执行环境（作用域）上的函数声明，而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式，二、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用 。
匿名函数属于函数表达式
JQuery使用的就是这种方法，将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中，在全局作用域中调用JQuery代码时，可以达到保JQuery内部变量的作用。

闭包

function F1(){
	var a=100
	//返回一个函数（函数作为返回值）
	return function(){
		console.log(a)
	}
}	
//f1得到一个函数
var f1=F1()
var a=200
f1()

异步和单线程

  • 同步和异步的区别是什么？分别举一个同步和异步的例子
  • 一个关于setTimeout的笔试题
  • 前端使用异步的场景有哪些

console.Log('start') //该函数等待数据返回然后执行
$.get('./datal.json',function(datal){
	console.Log(data1)
})
console.1og('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')

setTimeout过程

  • 执行第一行，打印100
  • 执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）
  • 执行最后一行，打印300
  • 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行。
  • 发现暂存起来的setTimeout中的函数无需等待时间，就立即来过来执行
console.Log(1)
setTimeout(function(){
	console.1og(2)
}，0)
console.1og(3)
setTimeout(function(){
	console.log（4)
}，1000)
console.1og(5)

JS-Web-API

  • 获取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)

数组API

forEach 遍历所有元素
every 判断所有元素是否都符合条件
some 判断是否有至少一个元素符合条件
sort 排序
map对元素重新组装，生成新数组
filter 过滤符合条件的元素

遍历数组和对象

使用if判断数组（for,forEach）和对象(for in)

对象API

var obj={
	x:100,
	y:200,
	z:300,
}
var key
for(key in obj){
	if(obj.hasOwnProperty(key)){
	console.log(key,obj[key]]
	}
}
  • 页面弹框是window.alert(123)，浏览器需要做：
  • 定义一个window全局变量，对象类型
  • 给它定义一个alert属性，属性值是一个函数

随机数（长度一定）

var random=Math.random)
var random=random+'0000000000'//后面加上10个零
var random=random.slice(0,10)
console.log(random)

Dom

  • DOM是哪种基本的数据结构？树
  • DOM操作的常用API有哪些
  • DOM 节点的attr和property有何区别
  • Dom操作常用API
  • 获取Dom节点getElementById
  • 获取父元素 parentElement
  • 获取子元素 childNodes
  • 新增节点appendChild
  • 创建元素createElement
  • 删除节点 removeChild
  • 获取DOM节点，以及节点的property和Attribute
  • 获取父节点，获取子节点
  • 新增节点，删除节点

JS中Attribute 和prototype 的区别是一个是标签属性 一个是对象属性

  • oraperty 只是一个JS对象的属性的修改
  • Attribute 是对html标签属性的修改

网络基础

  • 从输入url到得到html的详细过程
  • window.onload 和DOMContentLoaded的区别
window.addEventListener('load',function(){
	//页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行，此时图片、视频还可能没有加载完
})

//未缓存DOM查询
var i
for(i=0;i< document.getElementsByTagName('p').1ength;i++){
	//todo
}
//缓存了DOM查询
var pList=document.getElementsByTagName('p')
var i
for(i=0;i<pList.length;i++){
//todo
}


BOM

  • 如何检测浏览器的类型
  • 拆解url的各部分
//navigator
var ua=navigator.userAgent
var isChrome=ua.indexof('Chrome')
console.log(ismrome)
//screen
console.Log(screen.width)
console.Log(screen.height)
// location
console.log(location.href)
console.log(location.protocol)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
// history
history.back()
history.forward()

事件绑定

  • 编写一个通用的事件监听函数
  • 描述事件冒泡流程
  • 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

事件代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

冒泡

  • DOM树形结构
  • 事件冒泡
  • 阻止冒泡
  • 冒泡的应用

ajax请求（包括http协议）

  • 手动编写一个ajax，不依赖第三方库
  • 跨域的几种实现方式
  • 请描述一下cookie，sessionStorage和localStorage的区别？
  • 容量
  • 是否会携带到ajax中
  • API易用性

js模块化

utiljs getFormatDate函数
a-util.js aGetFormatDate函数使用getFormatDate
a.js aGetFormatDate

不使用模块化


export和require

requires.js


CommonJS

webpack

  • 注意事项
    • 使用严格模式，注意作用域
    • 使用类与对象，结合模块化构建中大型项目
    • 使用Promise替换传统的回调函数
    • 使用箭头函数要注意this的指向
    • 学会使用Generator完成异步操作应用
相关标签
JavaScript
面试
2人推荐
随时随地看视频
慕课网APP

相关阅读

基础数组算法，函数作用域链，变量的提升，String对象的常用方法
最新BAT前端面试题：大公司问的核心都在于JavaScript！
JavaScript初级面试技巧
92道JavaScript面试题附加回答「干货分享」
JavaScript面试要点(上)