JS学习随笔

  1. 必考:ES 6 语法知道哪些,分别怎么用?
    举例法
    let :语句声明一个块级作用域的本地变量
    const:常量是块级作用域,很像使用let语句定义的变量。常量的值不能通过重新赋值来改
    变,并且不能重新声明。
    箭头函数 Promise
    import :导入由另一个模块导出的绑定
    export :从模块中导出函数、对象或原始值
    默认参数:function multiply(a, b = 1) { return a * b; }
    展开操作符:function sum(x, y, z) { return x + y + z;} const numbers = [1, 2, 3]; console.log(sum(...numbers));

  2. 必考 Promise、Promise.all、Promise.race 分别怎么用?

    1. 背代码 Promise 用法

       function fn(){
           return new Promise((resolve, reject)=>{
               成功时调用 resolve(数据)
               失败时调用 reject(错误)
           })
       }
       fn().then(success, fail).then(success2, fail2)
      
      
    2. 背代码 Promise.all 用法

       Promise.all([promise1, promise2]).then(success1, fail1)
      
      

      promise1和promise2都成功才会调用success1

    3. 背代码 Promise.race 用法

       Promise.race([promise1, promise2]).then(success1, fail1)
      
      

      promise1和promise2只要有一个成功就会调用success1

  3. 必考:手写函数防抖和函数节流

    1. 背代码

      
       // 节流(一段时间执行一次之后,就不执行第二次)
       function throttle(fn, delay){
           let canUse = true
           return function(){
               if(canUse){
                   fn.apply(this, arguments)
                   canUse = false
                   setTimeout(()=>canUse = true, delay)
               }
           }
       }
      
       const throttled = throttle(()=>console.log('hi'))
       throttled()
       throttled()
      
      

      注意,有些地方认为节流函数不是立刻执行的,而是在冷却时间末尾执行的(相当于施法有吟唱时间),那样说也是对的。

    2. 背代码

       // 防抖(一段时间会等,然后带着一起做了)
       function debounce(fn, delay){
           let timerId = null
           return function(){
               const context = this
               if(timerId){window.clearTimeout(timerId)}
               timerId = setTimeout(()=>{
                   fn.apply(context, arguments)
                   timerId = null
               },delay)
           }
       }
       const debounced = debounce(()=>console.log('hi'))
       debounced()
       debounced()
      
      
  4. 必考:手写AJAX

    1. 背代码,完整版

       var request = new XMLHttpRequest()
       request.open('GET', '/a/b/c?name=ff', true);
       request.onreadystatechange = function () {
         if(request.readyState === 4 && request.status === 200) {
           console.log(request.responseText);
         }};
       request.send();
      
      
    2. 背代码,简化版

       var request = new XMLHttpRequest()
       request.open('GET', '/a/b/c?name=ff', true)
       request.onload = ()=> console.log(request.responseText)
       request.send()
      
      
  5. 必考:这段代码里的 this 是什么?

    1. 背代码
      1. fn()
        this => window/global
      2. obj.fn()
        this => obj
      3. fn.call(xx)
        this => xx
      4. fn.apply(xx)
        this => xx
      5. fn.bind(xx)
        this => xx
      6. new Fn()
        this => 新的对象
      7. fn = ()=> {}
        this => 外面的 this
    2. 看调用
      《this 的值到底是什么?一次说清楚》
  6. 必考:闭包/立即执行函数是什么?

    1. 闭包 https://zhuanlan.zhihu.com/p/22486908 一个函数能访问这个函数作用域外的变量,那么这个函数和这个变量就叫闭包。
    2. 立即执行函数 https://zhuanlan.zhihu.com/p/22465092 立即执行函数,声明一个函数,然后立马执行。!function(){alert('我是匿名函数')}(),他的作用是创建一个独立的作用域。
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6,而不是 0、1、2、3、4、5
  }
}
/* 因为 i 是贯穿整个作用域的,而不是给每个 li 分配了一个 i */
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(ii){
    liList[ii].onclick = function(){
      alert(ii) // 0、1、2、3、4、5
    }
  }(i)
}
  1. 必考:什么是 JSONP,什么是 CORS,什么是跨域?
    1. JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行,提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。JSONP不能post,JSONP是通过动态创建script实现的,动态创建script只能用GET
      比如:请求方:frank.com 的前端程序员(浏览器)
      响应方:jack.com 的后端程序员(服务器)
      请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
      响应方根据查询参数callbackName,构造形如
      yyy.call(undefined, '你要的数据')
      yyy('你要的数据')
      这样的响应
      浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
      那么请求方就知道了他要的数据
    2. CORS 跨域资源共享,它使用额外的 HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
      response.setHeader('Access-Control-Allow-Origin','需要共享的URL')
    3. 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互,所以才需要跨域。
  2. 常考:async/await 怎么用,如何捕获异常?
    1. 阮一峰的书讲了
    2. 方方的视频课讲了 最后一节。
  3. 常考:如何实现深拷贝?
    背代码,要点:
    1. 递归
    2. 判断类型
    3. 检查环(也叫循环引用)
    4. 需要忽略原型
  4. 常考:如何用正则实现 trim()?
    背代码
```
String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, '')
}
//或者 
function trim(string){
    return string.replace(/^\s+|\s+$/g, '')
}

```
  1. 常考:不用 class 如何实现继承?用 class 又如何实现?

  2. 背代码,不用 class 这样实现

     function Animal(color){
         this.color = color
     }
     Animal.prototype.move = function(){} // 动物可以动
     function Dog(color, name){
         Animal.call(this, color) // 或者 Animal.apply(this, arguments)
         this.name = name
     }
     // 下面三行实现 Dog.prototype.__proto__ = Animal.prototype
     function temp(){}
     temp.prototye = Animal.prototype
     Dog.prototype = new temp()
    
     Dog.prototype.constuctor = Dog // 这行看不懂就算了,面试官也不问
     Dog.prototype.say = function(){ console.log('汪')}
    
     var dog = new Dog('黄色','阿黄')
    
    
  3. 背代码,用 class 就简单了

     class Animal{
         constructor(color){
             this.color = color
         }
         move(){}
     }
     class Dog extends Animal{
         constructor(color, name){
             super(color)
             this.name = name
         }
         say(){}
     }
    
    
  4. 常考:如何实现数组去重?

  5. 计数排序变形,背代码

  6. 使用 Set(面试已经禁止这种了,因为太简单)

  7. 使用 WeakMap

  8. 放弃:== 相关题目(反着答)
    不要背,记不住,太复杂且没有规律

  9. 送命题:手写一个 Promise
    提前写一遍,放在博客里,参考 https://juejin.im/post/5aafe3edf265da238f125c0a

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

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0 2
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,063评论 1 10
  • 一、es6中的箭头函数和普通函数有什么区别? 1、普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己...
    百事皆可乐_5eed阅读 10,076评论 0 9
  • 1.1 函数声明 //ES5 function getSum(){} function (){}//匿名函数 //...
    i_木木木木木阅读 251评论 0 0
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,576评论 0 7