<article data-v-998d2dcc="" itemscope="itemscope" itemtype="http://schema.org/Article" class="article" data-v-3052fef0="">

JavaScript 初识

• 《① JS 速览——进入 JS 的世界》[编号：js_01]

涉及面试题：
1\. 简单介绍 JavaScript 的发展历史。ES3、ES5、ES6 分别指什么？
2\. 说几条写 JavaScript 的基本规范？
3\. JavaScript 代码中的 “use strict” 是什么意思？
4\. 说说严格模式的限制？
复制代码

• 《② 运算符、运算符优先级》[编号：js_02]

涉及面试题：
 1\. NaN 是什么？有什么特别之处？
 2\. == 与 === 有什么区别？
 3\. console.log(1+"2") 和 console.log(1-"2") 的打印结果？
 4\. 为什么 console.log(0.2+0.1==0.3) 输出 false ？
 5\. 请用三元运算符（问号冒号表达式）改写以下代码：
    if(a > 10) {
      b = a
    }else {
      b = a - 2
    }

 6\. 以下代码输出的结果是？
    var a = 1;  
    a+++a;  
    typeof a+2;

 7\. 以下代码输出什么？
    var d = a = 3, b = 4
    console.log(d)

 8\. 以下代码输出什么？
    var d = (a = 3, b = 4)
    console.log(d)

 9\. 以下代码输出结果是？为什么？
    var a = 1, b = 2, c = 3;
    var val = typeof a + b || c >0
    console.log(val)
    var d = 5;
    var data = d ==5 && console.log('bb')
    console.log(data)
    var data2 = d = 0 || console.log('haha')
    console.log(data2)
    var x = !!"Hello" + (!"world", !!"from here!!");
    console.log(x)

10\. 以下代码输出结果是？为什么？
    var a = 1;
    var b = 3;
    console.log( a+++b );

11\. 以下代码输出的结果是？为什么？
    console.log(1+1);
    console.log("2"+"4");
    console.log(2+"4");
    console.log(+"4");
复制代码

• 《③ 变量、值、数据类型、数据类型转换》[编号：js_03]

涉及面试题：
1\. JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？null 是对象吗？
2\. 对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？
3\. 怎样判断“值”属于哪种类型？typeof 是否能正确判断类型？instanceof 呢？
   instanceof 有什么作用？内部逻辑是如何实现的？
4\. null，undefined 的区别？
5\. 说一下 JS 中类型转换的规则？
6\. 以下代码的输出？为什么？
    console.log(a);
    var a = 1;
    console.log(b);

7\. 以下代码输出什么？
    var a = typeof 3+4
    console.log(a)

8\. 以下代码输出什么？
    var a = typeof typeof 4+4
    console.log(a)
复制代码

• 《④ 流程控制语句》[编号：js_04]

涉及面试题：
1\. break 与 continue 有什么区别？
2\. switch...case 语句中的 break 有什么作用？
3\. for...of、 for...in 和 forEach、map 的区别？
4\. 写出如下知识点的代码范例：
    ① if...else 的用法；
    ② switch...case 的用法；
    ③ while 的用法；
    ④ do...while 的用法；
    ⑤ for 遍历数组的用法；
    ⑥ for...in 遍历对象的用法；
    ⑦ break 和 continue 的用法。

5\. 以下代码输出什么？
    var a = 2
    if(a = 1) {
      console.log("a 等于 1")
    }else {
      console.log("a 不等于 1")
    }
复制代码

▽ JavaScript 入门

• 《① JS 函数——养成函数思维》[编号：js_05]

涉及面试题：
1\. 写一个函数，返回参数的平方和？
    function sumOfSquares() {
      // 补全
    }
    var result = sumOfSquares(2, 3, 4)
    var result2 = sumOfSquares(1, 3)
    console.log(result) // 29
    console.log(result2) // 10

2\. 如下代码的输出？为什么？
    sayName("world");
    sayAge(10);
    function sayName(name) {
      console.log("hello ", name);
    }
    var sayAge = function(age) {
      console.log(age);
    };

3\. 如下代码的输出？为什么？
    var x = 10;
    bar() 
    function bar() {
      var x = 30;
      function foo() {
        console.log(x) 
      }
      foo();
    }

4\. 如下代码的输出？为什么？
    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar() {
      var x = 30
      foo()
    }

5\. 如下代码的输出？为什么？
    var a = 1
    function fn1() {
      function fn3() {
        function fn2() {
          console.log(a)
        }
        fn2()
        var a = 4
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() // ？

6\. 如下代码的输出？为什么？
    var a = 1
    function fn1() {
      function fn2() {
        console.log(a)
      }
      function fn3() {
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() // ？

7\. 如下代码的输出？为什么？
    var a = 1
    function fn1() {
      function fn3() {
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    function fn2() {
      console.log(a)
    }
    var fn = fn1()
    fn() // ？

8\. 如下代码的输出？为什么？
    var a = 1
    var c = {name: "oli", age: 2}
    function f1(n) {
      ++n
    }
    function f2(obj) {
      ++obj.age
    }
    f1(a) 
    f2(c) 
    f1(c.age) 
    console.log(a) 
    console.log(c)

9\. 如下代码的输出？为什么？
    var obj1 = {a:1, b:2};
    var obj2 = {a:1, b:2};
    console.log(obj1 == obj2);
    console.log(obj1 = obj2);
    console.log(obj1 == obj2);
复制代码

• 《② JS 数组——让数据排排坐》[编号：js_06]

涉及面试题：
1\. 写一个函数 squireArr，其参数是一个数组，作用是把数组中的每一项变为原值的平方。
    var arr = [3, 4, 6]
    function squireArr(arr) {
      // 补全
    }
    squireArr(arr)
    console.log(arr) // [9, 16, 36]

2\. 写一个函数 squireArr，其参数是一个数组，返回一个新的数组，新数组中的每一项是原数组
   对应值的平方，原数组不变。
    var arr = [3, 4, 6]
    function squireArr(arr) {
      // 补全
    }
    var arr2 = squireArr(arr)
    console.log(arr) // [3, 4, 6]
    console.log(arr2) // [9, 16, 36]

3\. 遍历 company 对象，输出里面每一项的值。
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }

4\. 遍历数组，打印数组里的每一项的平方。
    var arr = [3, 4, 5]
复制代码

• 《③ JS 对象——理解对象》[编号：js_07]

涉及面试题：
1\. 介绍 JS 有哪些内置对象？
2\. 以下代码输出什么？
    var name = "sex"
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }
    console.log(company[name])

3\. 以下代码输出什么？
    var name = "sex"
    var company = {
      name: "qdywxs",
      age: 3,
      sex: "男"
    }
    console.log(company.name)
复制代码

• 《④ 了解 DOM——与网页交互》
• 《⑤ JS 事件——异步编码》

▽ JavaScript 基础

• 《JS 函数：① 把函数视为“值”》
• 《JS 函数：② 嵌套函数、作用域和闭包》[编号：js_11]

涉及面试题：
1\. 闭包是什么？闭包的作用是什么？闭包有哪些使用场景？
2\. 使用递归完成 1 到 100 的累加？
3\. 谈谈垃圾回收机制的方式及内存管理？
4\. 谈谈你对 JS 执行上下文栈和作用域链的理解？
5\. 如下代码输出多少？如果想输出 3，那如何改造代码？
    var fnArr = [];
    for(var i=0; i<10; i++) {
      fnArr[i] =  function() {
        return i
      };
    }
    console.log(fnArr[3]())

6\. 封装一个 Car 对象。
    var Car = (function() {
      var speed = 0;
      // 补充
      return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        speedUp: speedUp,
        speedDown: speedDown
      }
    })()
    Car.setSpeed(30)
    Car.getSpeed() // 30
    Car.speedUp()
    Car.getSpeed() // 31
    Car.speedDown()
    Car.getSpeed() // 30

7\. 如下代码输出多少？如何连续输出 0，1，2，3，4？
    for(var i=0; i<5; i++) {
      setTimeout(function() {
        console.log("delayer:" + i)
      }, 0)
    }

8\. 如下代码输出多少？
    function makeCounter() {
      var count = 0
      return function() {
        return count++
      };
    }
    var counter = makeCounter()
    var counter2 = makeCounter();
    console.log(counter()) // 0
    console.log(counter()) // 1
    console.log(counter2()) // ？
    console.log(counter2()) // ？
复制代码

• 《JS 数组：① ES3 数组方法》[编号：js_12]

涉及面试题：
1\. 数组的哪些 API 会改变原数组？
2\. 写一个函数，操作数组，返回一个新数组，新数组中只包含正数。
    function filterPositive(arr) {
      // 补全
    }
    var arr = [3, -1, 2, true]
    filterPositive(arr)
    console.log(filterPositive(arr)) // [3, 2]

3\. 补全代码，实现数组按姓名、年纪、任意字段排序。
    var users = [
      {name: "John", age: 20, company: "Baidu"},
      {name: "Pete", age: 18, company: "Alibaba"},
      {name: "Ann", age: 19, company: "Tecent"}
     ]

    users.sort(byField("age"))
    users.sort(byField("company"))

4\. 用 splice 函数分别实现 push、pop、shift、unshift 方法。
   如：
    function push(arr, value) {
      arr.splice(arr.length, 0, value)
      return arr.length
    }
    var arr = [3, 4, 5]
    arr.push(10) // arr 变成 [3, 4, 5, 10]，返回 4。
复制代码

• 《JS 数组：② ES5 数组方法》[编号：js_13]

涉及面试题：
1\. for...of、 for...in 和 forEach、map 的区别？

2\. 数组的哪些 API 会改变原数组？
3\. 如何消除一个数组里面重复的元素？
4\. 判断一个变量是否是数组，有哪些办法？
5\. ["1", "2", "3"].map(parseInt) 答案是多少？
6\. 取数组的最大值（ES5、ES6）？
7\. 实现一个 reduce 函数，作用和原生的 reduce 类似下面的例子。
   Ex：
    var sum = reduce([1, 2, 3], function(memo, num) {return memo + num;}, 0); => 6

8\. 怎样用原生 JS 将一个多维数组拍平？
    var array = [1, [2], [3, [4, [5]]]]
    function flat(arr) {
      // 补全
    }
    console.log(flat(array)) // [1, 2, 3, 4, 5]
复制代码

• 《面向对象编程：① 对象构造函数》[编号：js_14]

涉及面试题：
1\. new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？
2\. Object.create 有什么作用？
3\. 怎样判断“值”属于哪种数据类型？typeof 是否能正确判断类型？instanceof 呢？instanceof 有什么作用？内部逻辑是如何实现的？
4\. JavaScript 有哪些方法定义对象？
5\. 如下代码中？new 一个函数本质上做了什么？
    function Modal(msg) {
      this.msg = msg
    }
    var modal = new Modal()
复制代码

• 《面向对象编程：② 使用原型》[编号：js_15]

涉及面试题：
 1\. JS 原型是什么？如何理解原型链？
 2\. JS 如何实现继承？
 3\. 实现一个函数 clone 可以对 JavaScript 中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制？
 4\. 对 String 做扩展，实现如下方式获取字符串中频率最高的字符：
    var str = "ahbbccdeddddfg";
    var ch = str.getMostOften();
    console.log(ch); // d，因为 d 出现了 5 次

 5\. 有如下代码，代码中并未添加 toString 方法，这个方法是哪里来的？画出原型链图进行解释：
    function People() {
    }
    var p = new People()
    p.toString()

 6\. 有如下代码，解释 Person、 prototype、__proto__、p、constructor 之间的关联：
    function Person(name) {
      this.name = name;
    }
    Person.prototype.sayName = function() {
      console.log("My name is :" + this.name);
    }
    var p = new Person("Oli")
    p.sayName();

 7\. 下面两种写法有什么区别？
    // 方法一：
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
      this.printName = function() {
        console.log(this.name);
      }
    }
    var p1 = new People("Oli", 2)
    // 方法二：
    function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    Person.prototype.printName = function() {
      console.log(this.name);
    }
    var p1 = new Person("Aman", 2);

 8\. 补全代码，实现继承：
    function Person(name, sex){
      // 补全
    };
    Person.prototype.getName = function() {
      // 补全
    };
    function Male(name, sex, age) {
      // 补全
    };
      // 补全
    Male.prototype.getAge = function() {
      // 补全
    };
    var catcher = new Male("Oli", "男", 2);
    catcher.getName();

 9\. 如下代码中 call 的作用是什么？
    function Person(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    function Male(name, sex, age) {
      Person.call(this, name, sex); // 这里的 call 有什么作用？
      this.age = age;
    }
复制代码

• 《JS 提供的对象：① 作为对象的“字符串”》[编号：js_16]

涉及面试题：
1\. 多行字符串的声明有哪几种常见写法？
2\. 以下代码输出什么？
    var str = "C:\Users\Document\node\index.js"
    console.log(str.length)
   如何声明 str 让 console.log(str) 输出 C:\Users\Document\node\index.js ？
复制代码

• 《JS 提供的对象：② 正则表达式》[编号：js_17]

涉及面试题：
1\. 写一个函数 isValidUsername(str)，判断用户输入的是不是合法的用户名（长度 6-20 个字符，
   只能包括字母、数字、下划线）？
2\. 写一个函数 isPhoneNum(str)，判断用户输入的是不是手机号？
3\. 写一个函数 isEmail(str)，判断用户输入的是不是邮箱？
4\. 写一个函数 trim(str)，去除字符串两边的空白字符？
5\. \d，\w，\s，[a-zA-Z0-9]，\b，.，*，+，?，x{3}，^，$ 分别是什么?
6\. 什么是贪婪模式和非贪婪模式？
复制代码

• 《JS 提供的对象：③ Date》[编号：js_18]

涉及面试题：
写一个函数，参数为时间对象毫秒数的字符串格式，返回值为字符串。假设参数为时间对象毫秒数 t，
根据 t 的时间分别返回如下字符串：
  - 刚刚（t 距当前时间不到 1 分钟时间间隔）
  - 3 分钟前（t 距当前时间大于等于 1 分钟，小于 1 小时）
  - 8 小时前（t 距离当前时间大于等于 1 小时，小于 24 小时）
  - 3 天前（t 距离当前时间大于等于 24 小时，小于 30 天）
  - 2 个月前（t 距离当前时间大于等于 30 天小于 12 个月）
  - 8 年前（t 距离当前时间大于等于 12 个月）
  function friendlyDate(time) {
    // 补充
  }
  var str = friendlyDate("1556286683394") // x 分钟前（以当前时间为准）
  var str2 = friendlyDate("1555521999999") // x 天前（以当前时间为准）
复制代码

• 《JS 提供的对象：④ Math》[编号：js_19]

涉及面试题：
1\. 写一个函数，返回从 min 到 max 之间的随机整数，包括 min 不包括 max ？
2\. 写一个函数，生成一个随机颜色字符串，合法的颜色为 #000000 ~ #ffffff。
    function getRandColor() {
      // 补全
    }
    var color = getRandColor()
    console.log(color) // #3e2f1b

3\. 写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括 0 到 9，a 到 z，A 到 Z。
    function getRandStr(len) {
      // 补全
    }
    var str = getRandStr(10); // 0a3iJiRZap

4\. 写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0 ~ 255.255.255.255。
    function getRandIP() {
      // 补全
    }
    var ip = getRandIP()
    console.log(ip) // 10.234.121.45
复制代码

• 《JS 提供的对象：⑤ JSON》[编号：js_20]

涉及面试题：
1\. JSON 格式的数据需要遵循什么规则？
2\. 使用 JSON 对象实现一个简单的深拷贝函数（deepCopy）？
3\. XML 和 JSON 的区别？
4\. eval 是做什么的？
5\. 深拷贝和浅拷贝的区别？如何实现？
复制代码

• 《浏览器提供的对象：① BOM》[编号：js_21]

涉及面试题：
1\. URL 如何编码解码？为什么要编码？
2\. iframe 有那些缺点？
3\. 补全如下函数，判断用户的浏览器类型。
    function isAndroid() {
      // 补全
    }
    function isIphone() {
      // 补全
    }
    function isIpad() {
      // 补全
    }
    function isIOS() {
      // 补全
    }
复制代码

• 《浏览器提供的对象：② DOM》[编号：js_22]

涉及面试题：
1\. 什么是 Virtual DOM，为何要用 Virtual DOM？
2\. 怎么添加、移除、复制、创建、和查找节点？
3\. offsetWidth/offsetHeight，clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？
4\. attribute 和 property 的区别是什么？
5\. 写一个函数，批量操作 CSS。
    function css(node, styleObj){
      // 补全
    }
    css(document.body, {
      "color": "red",
      "background-color": "#ccc"
    })

6\. 补全代码，要求：当鼠标放置在 li 元素上，会在 img-preview 里展示当前 li 元素的
   data-img 对应的图片。
    <ul class="ct">
      <li data-img="1.png">鼠标放置查看图片 1</li>
      <li data-img="2.png">鼠标放置查看图片 2</li>
      <li data-img="3.png">鼠标放置查看图片 3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      // 补全
    </script>
复制代码

• 《浏览器提供的对象：③ 定时器》[编号：js_23]

涉及面试题：
 1\. setTimeout、setInterval、requestAnimationFrame 各有什么特点？
 2\. 实现一个节流函数？
 3\. setTimeout 倒计时为什么会出现误差？
 4\. 简单解释单线程、任务队列的概念？
 5\. 简述同步和异步的区别？
 6\. JS 延迟加载的方式有哪些？
 7\. 函数防抖节流的原理？
 8\. defer 和 async ？
 9\. 下面这段代码输出结果是？ 为什么？
    var flag = true;
    setTimeout(function() {
      flag = false;
    }, 0)
    while(flag) {}
    console.log(flag);

10\. 下面这段代码输出结果是？为什么？
    var a = 1;
    setTimeout(function() {
      a = 2;
      console.log(a);
    }, 0);
    var a ;
    console.log(a);
    a = 3;
    console.log(a);
复制代码

• 《JS 事件：① 事件流和 DOM2 事件处理程序》[编号：js_24]

涉及面试题：
1\. DOM 事件模型是什么？
2\. 解释 DOM2 事件传播机制？
复制代码

• 《JS 事件：② 事件对象和事件代理》[编号：js_25]

涉及面试题：
1\. 解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理？
2\. 写一个 Demo，演示事件传播的过程，演示阻止传播的效果？
3\. JS 的事件委托是什么，原理是什么？
复制代码

• 《JS 事件：③ 常见事件使用》[编号：js_26]

涉及面试题：
window.onload 和 document.onDOMContentLoaded 有什么区别？
复制代码

▽ 🚀原生 JS 实战：小 DEMO 系列（难度：☆☆）

• 《Tab 切换》
• 《模态框》
• 《JS 动画》
• 《图片懒加载》
• 《瀑布流布局》

▽ 专项突破 | 学活 ES6+

• 《利用 Parcel 进行环境搭建》
• ES2015
• 《JS 基础：var、let 和 const》
• 《JS 数组：① ES5 和 ES6 中各有哪些“遍历”的方法？》
• 《JS 数组：② 如何将“类数组对象”转换成数组？》
• 《JS 数组：③ 如何生成新数组？》
• 《JS 数组：④ 如何查找数组？》
• 《JS 函数：① 函数参数的默认值》
• 《JS 函数：② 怎么处理不确定参数？》
• 《JS 函数：③ rest 参数的逆运算》
• 《JS 函数：④ 箭头函数》[编号：es6_09]

涉及面试题：
1\. 箭头函数？
2\. 箭头函数与普通函数有什么区别？
3\. 反引号 ` 标识？
4\. 使用 ES6 改下面的模板？
    let iam  = "我是";
    let name = "Oli";
    let str  = "大家好，" + iam + name + "，多指教。";

5\. 属性简写、方法简写？
6\. for...of 循环？
7\. 字符串新增方法？
复制代码

• 《JS 函数：⑤ 彻底弄懂各种情况下的 this 指向》[编号：es6_10]

涉及面试题：
1\. 如何改变函数内部的 this 指针的指向？
2\. 如何判断 this？箭头函数的 this 是什么？
3\. call、apply 以及 bind 函数内部实现是怎么样的？
复制代码

• 《JS 对象：① Object Property》

• 《JS 对象：② Set 数据结构》

• 《JS 对象：③ Map 数据结构》

• 《JS 对象：④ 对象拷贝》

• 《面向对象编程：① 怎么声明一个类？》

• 《面向对象编程：② “属性读写”和“静态方法”》

• 《面向对象编程：③ “继承”和“ ES6 模块化”》[编号：es6_17]

涉及面试题：
1\. import 和 export？
2\. ES6 中的 class 了解吗？ES6 中的 class 和 ES5 的类有什么区别？
3\. 知道 ECMAScript6 怎么写 class 么？为什么会出现 class 这种东西？
4\. 原型如何实现继承？Class 如何实现继承？Class 本质是什么？
复制代码

• 《JS 内置的对象：作为对象的“字符串”——字符串拼接问题》

• 《JS 内置的对象：正则表达式——① y 修饰符》

• 《JS 内置的对象：正则表达式——② u 修饰符》

• 《解构赋值：数组、对象、函数的解构赋值》[编号：es6_21]

涉及面试题：
1\. var、let 及 const 区别？
1. var : 定义的变量可以修改，如果不初始化会输出undefined，不会报错
2. let : 块级作用域，函数内部使用let定义后，对函数外部无影响
3. const : const定义的变量不可以修改，而且必须初始化。
var 和 let 第一点不同就是 let 是块作用域，即其在整个大括号 {} 之内可见。如果使用 let 来重写上面的 for 循环的话，会报错

var：只有全局作用域和函数作用域概念，没有块级作用域的概念。但是会把{}内也假称为块作用域。

let：只有块级作用域的概念 ，由 { } 包括起来，if语句和for语句里面的{ }也属于块级作用域。
2\. 使用解构，实现两个变量的值的交换？
3\. 解构赋值？
4\. 函数默认参数？
5\. JavaScript 中什么是变量提升？什么是暂时性死区？
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部
复制代码

• 《异步操作：Promise 对象》[编号：es6_22]

涉及面试题：
1\. Promise 有几种状态？Promise 的特点是什么，分别有什么优缺点？
pending/reslove/reject 。pending就是未决，resolve可以理解为成功，reject可以理解为拒绝
2\. Promise 构造函数是同步还是异步执行？then 呢？Promise 如何实现 then 处理？
 promise构造函数是同步执行的，then方法是异步执行的
3\. Promise 和 setTimeout 的区别？
etTimeout的执行方式是异步执行，用处一般为，延迟指定时间再执行移步函数
4\. 如何实现 Promise.all() ？
5\. 如何实现 Promise.prototype.finally() ？
6\. all() 的用法？
7\. 说说你对 Promise 的了解？
复制代码

• ES2016（🔥更新中……）
• ES2017（🔥更新中……）
• ES2018（🔥更新中……）
• ES2019（🔥更新中……）

▽ 🚀原生 JS 实战：造轮子系列（难度：☆☆☆☆）

• 《实现一个简单的左右滑动手势库》
• 《Web 轮播：① “面向过程”写法》
• 《Web 轮播：② “面向对象”写法》
• 《Web 轮播：③ 给轮播加动画》

▽ 前后端交互

• 《交互的规则、标准：HTTP——① 五层网络模型和 HTTP 协议的发展历史》[编号：interaction_01]

涉及面试题：
1\. HTTPS 是如何实现加密的？

2\. HTTP 和 HTTPS 的区别？
HTTP属于超文本传输协议，用来在Internet上传送超文本，而HTTPS为安全超文本传输协议，在HTTPS基础上拥有更强的安全性，简单来说HTTPS是HTTP的安全版，是使用TLS/SSL加密的HTTP协议
3\. 如何实现页面每次打开时清除本页缓存？
 （1）用HTML标签设置HTTP头信息
（2） 在需要打开的url后面增加一个随机的参数
复制代码

• 《交互的规则、标准：HTTP——② HTTP 三次握手、URI、URL 和 URN》
• 《交互的规则、标准：HTTP——③ HTTP 报文》
• 《响应请求的“服务器”：用 Node.js 搭建简单“Web 服务器”》
• 《发出请求的“客户端”：① 认识 HTTP 客户端》
• 《发出请求的“客户端”：② 浏览器异步发送“HTTP 数据请求”——初识 AJAX》[编号：interaction_06]

涉及面试题：
1\. HTTP 状态码知道哪些？
•200 - 请求成功
•301 - 资源（网页等）被永久转移到其它URL
•404 - 请求的资源（网页等）不存在
•500 - 内部服务器错误

2\. 301 和 302 的区别是什么？
3\. AJAX 是什么？有什么作用？
4\. HTTP 的几种请求方法和区别？
5\. AJAX 原理？
复制代码

• 《发出请求的“客户端”：③ 浏览器异步发送“HTTP 数据请求”——XMLHttpRequest 对象详解》[编号：interaction_07]

涉及面试题：
1\. 把 GET 和 POST 类型的 AJAX 的用法手写一遍？
2\. 封装一个 AJAX 函数？
复制代码

• 《发出请求的“客户端”：④ 浏览器异步发送“HTTP 数据请求”——用 AJAX 实现简单新闻列表切换》
• 《发出请求的“客户端”：⑤ 同源策略和跨域》[编号：interaction_09]

涉及面试题：
1\. 什么是同源策略？
2\. 什么是跨域？列举跨域有几种实现形式？
3\. JSONP 的原理是什么？
4\. JSON 和 JSONP 的区别？
复制代码

• 《发出请求的“客户端”：⑥ 浏览器存储——Cookie 和 Session》[编号：interaction_10]

涉及面试题：
1\. Cookie、Session、localStorage 分别是什么？
2\. Cookie，sessionStorage 和 localStorage 的区别？
3\. 如何实现同一个浏览器多个标签页之间的通信？
4\. HTML5 的离线储存怎么使用，工作原理能不能解释一下？
5\. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
6\. Web 开发中会话跟踪的方法有哪些？

7\. 使用 localStorage 封装一个 Storage 对象，达到如下效果：
    Storage.set("name", "前端一万小时") // 设置 name 字段存储的值为“前端一万小时”。
    Storage.set("age", 2, 30);
    Storage.set("people", ["Oli", "Aman", "Dante"]
    ,  60)
    Storage.get("name") // "前端一万小时"
    Storage.get("age") /*
                       如果不超过 30 秒，返回数字类型的 2；如果超过 30 秒，返回 undefined，
                       并且 localStorage 里清除 age 字段。
                        */
    Storage.get("people") // 如果不超过 60 秒，返回数组； 如果超过 60 秒，返回 undefined。
复制代码

• 《发起请求的“客户端”：⑦ 简析浏览器缓存》

▽ 前端拓展

• 《NPM 与 Node.js 入门：① Node.js》
• 《NPM 与 Node.js 入门：② NPM 初识》
• 《NPM 与 Node.js 入门：③ NPM 详解》
• 《NPM 与 Node.js 入门：④ 开发天气命令行应用》
• 《前端工程化：① “前端工程化”初识》[编号：engineering_01]

涉及面试题：
1\. 模块化开发怎么做？
2\. Webpack 如何实现打包的？
复制代码

• 《前端工程化：② JS 模块加载方案和“组件化”初探》[编号：engineering_02]

涉及面试题：
谈谈你对 AMD、CMD 的理解？
复制代码

▽ 🚀原生 JS 项目实战：移动端音乐播放器（难度：☆☆☆）

• 《① 项目概览和环境搭建》
• 《② 静态页面（大结构 + 移动端适配 + header）》
• 《③ 静态页面（SVG + panels）》
• 《④ 静态页面（SVG Sprite + buttons + bar-area + actions）》
• 《⑤ JS 效果实现（大体结构 + mock 数据）》
• 《⑥ JS 效果实现（播放/暂停 + 上/下一曲）》
• 《⑦ JS 效果实现（滑动窗口切换 + 歌词加载）》
• 《⑧ JS 效果实现（歌词定位 + 时间进度条 + 项目上线）》

▷ React.js 基础语法学习

▷ 🚀React.js 项目实战——PC 端“简书”项目开发（难度：☆☆☆☆）

▷ Vue.js 基础语法学习

▷ 🚀Vue.js 项目实战： 移动端“旅游网站”开发（难度：☆☆☆☆）

</article>

关注下面的标签，发现更多相似文章

前端

[<meta itemprop="url" content="https://juejin.im/user/5c7e4848f265da2db1563bfe"><meta itemprop="image" content="https://user-gold-cdn.xitu.io/2019/4/25/16a5292cece0c638?w=874&h=874&f=png&s=260203"><meta itemprop="name" content="itsOli"><meta itemprop="jobTitle" content="Front End Engineer">

<meta itemprop="name" content="前端一万小时">](/user/5c7e4848f265da2db1563bfe)

itsOli[图片上传失败...(image-7f810f-1584327512155)] Front End Engineer @ 前端一万小时

发布了 27 篇专栏 · 获得点赞 1,876 · 获得阅读 129,913

关注

安装掘金浏览器插件

打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！

作者：itsOli
链接：https://juejin.im/post/5ce4171ff265da1bd04eb4f3
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。