美文网首页
javascript面试准备（一）

javascript面试准备（一）

作者: 前端小飞象 | 来源:发表于2019-10-19 11:58 被阅读0次

    interview

    js 基础

    原型 原型链

    作用域 闭包

    异步 单线程

    js Api dom 操作 ajax 事件绑定

    版本管理 模块化 打包工具

    题

    1. js 中使用 typeof 能得到哪些类型 （js 变量类型）
    
typeof undefined //undefined

typeof 'abc' //string

typeof 123 //number

typeof true //object

typeof {} //object

typeof [] //object

typeof null //object

typeof console.log //function
    1. 何时用=== 何时使用==（强制类型转换）
    
//除了这两种其他都用===

if (obj.a == null) {

  //这里相当于obj.a===null ||obj.a===undefined 简写

  //这是jquery源码推荐写法

}

function(a,b){

  if(a==null){

  }

}
    • 字符串拼接
    
var a = 100 + 10 //110

var a = 100 + '10' //'10010'
    • ==运算符
    
100 == '100' //true

0 == '' //true 0和空字符串都转换成false

null == undefined //true
    • if 语句
    
var a = true

if (a) {

}

var b = 100 //转换成bool true

if (b) {

}

if ('') {

  //false

}

if (0) {

  //false

}

if (null) {

  //false

}

if (NaN) {

  //false

}

if (false) {

  //false

}

if (undefined) {

  //false

}
    • 逻辑运算 与或非
    
console.log(100 && 0) //0 100换成了true

console.log('' || 'abc') //'abc'

console.log(!window.abc) //true

//判断一个变量会被当做true 还是false

var a = 100

console.log(!!a)
    1. js 有哪些内置函数
    
Object

Array

Boolean

Number

String

Function

Date

RegExp

Error
    1. js 变量按照存储方式区分为哪些类型
    
// 值类型

var a = 10

var b = a

a = 11

console.log(b) //10

// 引用类型 :对象、数组、函数

var obj1 = { x: 100 }

var obj2 = obj1

obj1.x = 200

console.log(obj2.x) //200
    1. 如何理解 JSON
    
//JSON只是一个js对象而已

//从一个对象解析出字符串

JSON.stringify({ a: 10, b: 20 }) //{"a":10,"b":20}

//parse用于从一个字符串中解析出json对象如

JSON.parse('{"a":10,"b":20}') //{a:10,b:20}

//注意：对象名必须用双引号 {}使用单引号包裹

    原型和原型链

    构造函数

    
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)

    构造函数-扩展

    • var a ={} 其实是 var a =new Object()的语法糖

    • var a =[] 其实是 var a =new Array()的语法糖

    • function Foo(){..}其实是 var Foo =new Function(...)

    • 使用 instanceof 判断一个函数是否是一个变量的构造函数

    原型规则和示例

    • 所有的引用类型（数组、对象、函数），都具有对象特性，既可自由扩展属性（除了“null”外）
    
var obj = {}

obj.a = 20

var arr = []

arr.a = 10

function fn() {}

fn.a = 100
    • 所有的引用类型（数组、对象、函数），都有一个__proto__(隐式原型)属性，属性值是一个普通对象
    
console.log(obj.__proto__)

console.log(arr.__proto__)

console.log(fn.__proto__)
    • 所有的函数，都有一个 prototype(显示原型) 属性，属性值是一个普通对象
    
console.log(fn.prototype)
    • 所有的引用类型（数组、对象、函数），都有一个__proto__属性值指向它的构造函数的“prototype”属性值
    
console.log(obj.__proto__ === Object.prototype)
    • 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__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()

f.alertName()

for (var item in f) {

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

f.alertName()

f.toString() //要去f.__proto__.__proto__中查找
    原型链

    )
    [图片上传失败...(image-531d0f-1571457332167)]

    • instanceof 用于判断引用类型属于哪个构造函数的方法
    
f instanceof Foo

    题

    1. 如何准确判断一个变量是数组类型
    
var arr = []

arr instanceof Array //true

typeof arr //object 无法判断是否时数组
    1. 写一个原型链继承的例子
    • 用于理解
    
//动物

function Animal() {

  this.eat = function() {

    console.log('animal eat')

  }

}

//狗

function Dog() {

  this.bark = function() {

    console.log('this bark')

  }

}

Dog.prototype = new Animal()

//哈士奇

var hashiqi = new Dog()

hashiqi.eat()

hashiqi.bark()
    • 用于面试
    
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)

}

var div1 = new Elem('div1')

// console.log(div1.html())

div1

  .html('<p>hello hihi</p>')

  .on('click', function() {

    alert('clicked')

  })

  .html('<p>javascrip</p>')
    1. 描述 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)
    1. zepto(或其他框架)源码中如何使用原型链
    • 阅读源码是高效提高技能的方式 zepto 设计与源码分析 jquery

    作用域与闭包

    执行上下文

    • 范围：一段<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

}

    this

    • 作为构造函数执行
    
function Foo(name) {

  this.name = name

}

var f = new Foo('zhangsan')
    • 作为对象属性执行
    
//函数表达式

var obj = {

  name: 'A',

  printName: function() {

    consolo.log(this.name)

  }

}

obj.printName() //this===abj
    • 作为普通函数执行
    
var fn1 = a.fn

fn1() //this===window
    • call apply bind
    
//this要在执行时确定值，定义时无法确认

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

    作用域

    • js 没有块级作用域
    
if (true) {

  var name = 'zhangsan'

}

console.log(name) //true
    • 只有函数作用域和全局作用域
    
var a = 100

function fn() {

  var a = 200

  console.log('fn', a) //200

}

console.log('global', a) //100

fn()
    • 作用域链
    
var a = 100

function fn() {

  var b = 200

  function fn2() {

    var c = 300

    //当前作用域没有定义的变量，既“自由变量”

    console.log(a) //100自由变量

    console.log(b) //200自由变量

    console.log(c)

  }

}

fn()

    题

    1. 说一下对变量提升的理解（执行上下文）

    • 变量定义

    • 函数声明（注意与函数表达式的区别）

    1. 说明 this 几种不同的使用场景（this）

    2. 用 js 创建 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. 如何理解作用域(作用域)

    • 自由变量

    • 作用域链 自由变量的查找

    • 闭包的两个场景

    1. 实际开发中闭包的应用（闭包）
    
function isFristLoad() {

  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

    异步和单线程

    异步

    • 在可能发生等待的情况

    • 等待的过程中不能像 alert 一样阻塞程序执行

    1. 定时任务: setTimeout setInverval

    2. 网络请求: ajax 请求 动态<img>加载

    3. 事件绑定

    
console.log(100)

setTimeout(function() {

  console.log(200)

}, 1000)

console.log(300)

//100 300 200异步 不阻塞

console.log(100)

alert(200)

console.log(300)

//同步100 200 300

    题

    • 异步和同步的区别是什么 ？ 分别举一个同步和异步的例子

    1. 同步会阻塞代码执行，而异步不会

    2. alert 是同步。setTimeout 是异步

    • 一个关于 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
    • 前端使用异步的场景有哪些

    1. 定时任务: setTimeout setInverval

    2. 网络请求: ajax 请求 动态<img>加载

    3. 事件绑定

    日期

    
Date.now() //获取当前时间毫秒数

var dt = new Date()

dt.getTime() //获取毫秒数

dt.getFullYear() //年

dt.getMonth() //月

dt.getDate() //日

dt.getHours() //小时

dt.getMinutes() //分钟

dt.getSeconds() //秒

    Math

    • 获取随机数 Math.random()

    数组 API

    • forEach 遍历所有元素
    
var arr = []

arr.forEach(function(item, index) {

  console.log(index, item)

})
    • every 判断所有元素是否都符合条件
    
var arr = []

var result = arr.every(function(item, index) {

  if (item < 4) {

    return true

  }

})

console.log(result)
    • some 判断是否有至少一个元素符合条件
    
var arr = []

var result = arr.some(function(item, index) {

  if (item < 2) {

    return true

  }

})

console.log(result)
    • sort 排序
    
var arr = [1, 6, 3, 5]

var arr2 = arr.sort(function(a, b) {

  return a - b

}) //[1, 3, 5, 6]
    • 对象 API
    
var obj = {

  x: 100,

  y: 200,

  z: 300

}

var key

for (key in obj) {

  if (obj.hasOwnProperty(key)) {

    console.log(kay, obj[key])

  }

}

    • map 对元素重新组装，生成新数组

    • filter 过滤符合条件的元素

    • 获取 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 formaDate = formatDate(dt)

console.log(formatDate)
    • 获取随机数，要求是长度一致的字符串格式
    
var random = Math.random()

var random = random + '0000000000'

var random = random.slice(0, 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 (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)

})

    相关文章

      网友评论

          本文标题：javascript面试准备（一）

          本文链接：https://www.haomeiwen.com/subject/orwgmctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|javascript面试准备（一）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！