JS基础

JavaScript 面试

JS基础篇

变量类型和计算

  • JS中使用typeof能得到哪些类型
    -undefinded
    • string
    • number
    • boolean
    • object
    • function
  • 何时使用 === 何时用 ==
    if (obj.a == null) {
        // 这里相当于obj.a === null || obj.a === undefined
    }
  • JS中有哪些内置函数
    • Array
    • Object
    • RegExp
    • Date
    • Error
    • Function
    • Boolean
    • String
    • umber
  • JS变量按照存储方式区分为哪些类型,并描述其特点

区分为值类型、引用类型。值类型的值复制之后不会相互干涉,引用类型的值复制是变量指针的复制,并不是真正的值的拷贝

  • 如何理解JSON

JSON只不过是JS对象

原型和原型链

JS三座大山之一

  • 如何准确判断一个变量是数组类型

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

  • 写一个原型继承的例子
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.html()
    }
}
Elem.prototype.on = function (type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
    return this
}
var fuck = new Elem('fuck')
fuck.html('<p>hello</p>').on('click', function () {
    alert('clicked!')
})
  • 描述new一个对象的过程
    • 创建一个新对象
    • this指向这个新对象
    • 执行代码,即对this赋值
    • 返回this
  • zepto源码中如何使用原型链

作用域和闭包

  • 说下对变量提升的理解

变量定义函数声明都会提前定义

  • 说明this几种不同的使用场景
    • 作为构造函数执行
    • 作为对象属性执行
    • 作为普通函数执行
    • call apply bind
  • 创建10个<a>标签,点击时弹出对应的序号
for (var 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)
}
  • 如何理解作用域
    • 自由变量
    • 作用域链
    • 闭包的两个场景 (函数作为值返回,函数作为参数传递)
  • 实际开发中闭包的应用

封装变量,收敛权限

function isFirstLoad() {
    var _list = []
    // 保护了_list变量
    return function (id) {
        if (_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}
var firstLord = isFirstLoad()
firstLord(10)   // true
firstLord(10)   // false
firstLord(20)   // true

异步和单线程

  • 同步和异步的区别是什么

同步会阻塞代码执行,异步不会

  • 一个关于setTimeout的笔试题
  • 前端使用异步的场景有哪些
    • 定时任务:setTimeout、setInterval
    • 网络请求:ajax加载、动态<img>加载
    • 事件绑定

其他

  • 获取2017-06-10格式的日期
function formateDate(dt) {
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth()
    var date = dt.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (date < 10) {
        date = '0' + date
    }
    return year + '-' + month + '-' + date
}
  • 获取随机数,要求是长度一致的字符串格式
  • 写一个能遍历对象和数组的通用forEach函数
function forEach(obj, fn) {
    var key
    if (obj instanceof Array) {
        obj.forEach(function (item, index) {
            fn(item, index)
        })
    } else {
        for (key in obj) {
            fn(key, obj[key])
        }
    }
}

webAPI

DOM操作

  • DOM是哪种数据结构

  • DOM操作的常用API有哪些
    • 获取DOM节点,以及节点的property和attribute
    • 获取父节点,获取子节点
    • 新增节点,删除节点
  • DOM节点的attr和property有何区别
    • property只是一个JS对象的属性的修改
    • attribute是对html标签的修改

BOM操作

  • 如何检测浏览器的类型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
  • 拆解url的各部分

location....

事件

  • 编写一个通用的事件监听函数
function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
      var target
      if (selector) {
          target = e.target
          if (target.matches(selector)) {
              fn.call(target, e)
          }
      } else {
          fn(e)
      }  
    })
}
  • 描述事件冒泡流程
    • DOM树形结构
    • 事件冒泡
    • 阻止冒泡
    • 冒泡的应用 ==> 事件代理
  • 对于无限下拉加载图片的页面,如何给每个图片绑定事件

事件代理:代码简介、减小浏览器的压力

项目运行环境

页面加载

  • 从输入url到得到html的详细过程
    • 浏览器根据DNS服务器得到域名的IP地址
    • 向这个IP的机器发送http请求
    • 服务器收到、处理并返回http请求
    • 浏览器得到返回的内容
  • window.onload和DOMContentLoaded的区别
    • window.onload是等
      待全部资源都加载完毕才会执行,包括图片、视频
    • DOMContentLoaded是当DOM结构渲染完成即执行,此时图片、视频可能没有加载完成

性能优化

  • 多使用内存、缓存或者其他方法
  • 减少CPU计算、减少网络

安全性

Snippets

发生类型转换的场景

  • 字符串拼接
  • == 运算符
  • if语句
  • 逻辑运算

原型规则

原型规则是学习原型链的基础

  1. 所有的引用类型都具有对象的特性,即可用自由扩展属性('null'除外)
  2. 所有的引用类型都有一个proto属性(隐式原型),属性值是一个普通对象
  3. 所有的函数都有一个prototype属性(显式原型),属性值是一个普通对象
  4. 所有引用类型的proto属性值指向它的构造函数的prototype属性值
  5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的proto(即它的构造函数的prototype)中寻找

执行上下文

  • 范围:一段<script>或者一个函数
  • 全局:变量定义、函数声明
  • 函数:变量定义、函数声明、this、arguments

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 fn1 = a.fn
fn1()   // this ==> window

作用域

  • 没有块级作用域
  • 只有函数和全局作用域
  • 自由变量:当前作用域未定义的变量

linux命令

  • mkdir 创建新文件夹
  • ls 查看当前文件夹内容
  • pwd 查看当前文件夹路径
  • rm -rf a 删除文件夹
  • cp 拷贝文件
  • mv 移动文件
  • rm 删除文件
  • vim 创建并编辑文件
  • cat 查看文件内容
  • head 查看文件前部内容
  • tail 查看文件末尾内容

加载资源的形式

  • 输入url(或跳转页面)加载html
  • 加载html中的静态资源

加载资源的过程

  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个IP的机器发送http请求
  • 服务器收到、处理并返回http请求
  • 浏览器得到返回的内容

浏览器渲染页面的过程

  • 根据HTML结构生成DOM tree
  • 根据CSS生成CSSOM
  • 将DOM和CSSOM整合成RenderTree
  • 根据将DOM和CSSOM整合成RenderTree开始渲染和展示
  • 遇到script时,会执行并阻塞渲染

加载资源优化

  • 静态资源合并压缩
  • 静态资源缓存
  • 使用CDN让资源加载更快(不同区域的网络优化)
  • 使用SSR后端渲染,数据直接输出到HTML中

渲染优化

  • CSS放钱、JS放后面
  • 懒加载(图片懒加载,下拉加载更多)
  • 减少DOM查询,对DOM查询做缓存
  • 减少DOM操作,多个操作尽量合并在一起执行
  • 事件节流
  • 尽早执行操作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Js中使用typeof能得到的类型typeof underfined //underfinedtypeo...
    Primers阅读 80评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,615评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,007评论 1 10
  • 一、DOM 什么是DOM?Document Object Model(文档对象模型)。DOM是针对HTML和XML...
    空谷悠阅读 896评论 0 2
  • 首先给大家分享一个交流平台http://kotlin.cn/ 由于我的Android项目在转换Kotlin编码后我...
    年少常慕楼外楼阅读 236评论 1 2