前端经典面试题合集(一)

1.谈谈变量提升

考察点:js基础知识,js执行机制,变量的提升
答:执行js代码时,会生成执行环境,在函数中的代码会产生函数执行环境,函数外的代码执行全局执行环境,我们看一个例子:

b() // call b   执行b函数,此时函数提升,已存入内存
console.log(a) // undefined 变量提升但未赋值

var a = 'Hello world'

function b() {
    console.log('call b')
}

此题需要注意,函数的变量提升直接将整个函数存入内存中,而变量则是只声明变量但是赋值undefined,我们来看下一题:

b() // call b second  
//执行b函数,此时相同函数会覆盖上一函数,函数提升优于变量提升。

function b() {
    console.log('call b fist')
}
function b() {
    console.log('call b second')
}
var b = 'Hello world'

同时还需注意,es6中let声明也会被js解析是进行变量提升,但是由于let的特性导致声明的变量不能在声明前使用。

2.函数的深拷贝

常用方式:JSON.parse(JSON.stringify(object)) 、 lodash中的cloneDeep函数
存在问题:
1.该方法会忽略undefined和symbol
2.不能够序列化函数
3.不能解决循环引用问题
接下来我们看看面试常考的手写递归函数进行深克隆。
我们先从一个对象的深克隆流程进行分析,
分析:首先,我们清晰对象中可以包含基础数据类型(string,number,null,undefined,bollen,function)和复杂数据类型(RegExp,Date,Synbol,Set,Map等等),还有dom节点也可以存在于对象中,
因此,对于我们整个函数的设计,我们传入两个参数,一个为目标对象source,一个为我们需要复制到的目标变量target,未传时我们设计为undefined。
1.判断传入的target是否为undefined,如果是的话,我们判断source是不是dom节点,是的话,使用cloneNode方法进行复制,不是的话进行new source.constructor进行给target赋值source的相同类型。
2.通过Object.getOwnPrototyNames的方法获取到source的所有属性,包括不可枚举属性。
3.遍历我们获取到的属性,再次判断,有三种情况,第一种:dom节点,第二种:基本数据类型,第三种:复杂数据类型。
4.声明desc,通过Object.getOwnPropertypertyDescriptor获取到此属性的描述属性 ,第一种dom节点,使用cloneNode进行赋值,第二种设计一个数组,包含所有基本类型,如果使用Includes去处理typeof后的遍历的项返回值是true,那么则为基础类型,使用Object.defineProperty去复制对象的此条属性,第三种:进行switch判断,找到指定的类型进行相应的处理,我们都设置一个对象o,将desc的描述属性如果是true,我们就添加给o,如果get,set也是,则同样添加,最后通过Object.definePropertu加到target的此项复杂数据类型中,再去执行递归。
talk is cheap , show me the code

  function cloneObj(source, target) { //两个参数,第一个是目标对象,第二个是我们要将对象赋值的目标
    var list = ["string", "number", "null", "undefined", "bollen", "function"]
    if (target === undefined) {
      if (HTMLElement.prototype.isPrototypeOf(source)) {
        target = source.cloneNode(false)
      } else {
        target = new source.constructor() //将target赋值为和传入的source一样的类型
      }
    }
    //获取对象的所有属性,包括不可枚举的属性
    var names = Object.getOwnPropertyNames(source)
    for (var i = 0; i < names.length; i++) { //循环遍历我们获得的属性
      var desc = Object.getOwnPropertyDescriptor(source, names[i]) // 获得每一个属性的描述属性
      if (list.includes(typeof desc.value)) { //基本数据类型包括,则添加到target中
        Object.defineProperty(target, names[i], desc)
      } else { //不是基本属性
        var t;
        if (HTMLElement.prototype.isPrototypeOf(desc.value)) {
          t = desc.value.cloneNode(false)
        } else {
          switch (desc.value.constructor) {
            case RegExp:
              t = new RegExp(desc.value.source, desc.value.flags)
              break;
            case Date:
              t = new Date(desc.value)
              break;
            case Symbol:
              t = Symbol
              break;
            case Set:
              t = new Set(desc.value.values())
              break;
            case Map:
              t = new Map(desc.value.entries())
              break;
            default:
              t = new desc.value.constructor();
              break;
          }
        }
        var o = {}
        o.value = t
        desc.enumerable && (o.enumerable = desc.enumerable)
        desc.writable && (o.writable = desc.writable)
        desc.configurable && (o.configurable = desc.configurable)
        desc.set && (o.set = desc.set)
        desc.get && (o.get = desc.get)
        Object.defineProperty(target, names[i], o)
        cloneObj(desc.value, t)
      }
    }
    return target
  }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容