JavaScipt 面试题+知识点

值类型 vs 引用类型

// 值类型
let a = 100;
let b = a;
a = 200;
console.log(b); //100

// 引用类型
let a = { age: 20 };
let b = a;
b.age = 21;
console.log(a.age); //21

// 常见值类型
let  a // undefined
const s = 'abc' 
const n = 100
const b = true
const m = Symbol('m');

// 常见引用类型
const obj = { x: 100 };
const arr = ['a', 'b', 'c'];
const n = null // 特殊引用类型 指针指向空地址

// 特殊引用类型 因为不用于存储数据，所以没有“拷贝、复制函数”一说
function fn(){}

逻辑运算

• truthy变量：!!a === true 的变量

  let a = 100;
  !a; //false
  !!a; //true
  

• falsy变量：!!a === false 的变量

  在 Javascript 中只有 8 个 falsy 值。

  // 以下是falsely变量 除此之外都是truely变量
  !!0 === false
  !!-0 ===false
  !!NaN === false
  !!0n ===false (bigInt)
  !!'' === false
  !!null === false
  !!undefined === false
  !!false === false
  

1. if 语句 判断的是否为truthy或者falsy。

2. 与或非同样判断的是 truthy或者falsy

   console.log(10&&0); //0
   console.log(''||'abc') //'abc'
   console.log(!window.abc) //true
   

自由变量

• 一个变量在当前作用域没有定义，但是被使用了
• 向上一级作用域，一层一层依次寻找，直至找到为止
• 如果到全局作用域都没有找到，则报错xx is not defined

作用域

• 全局作用域
• 函数作用域
• 块级作用域

闭包

• 作用域应用的特殊情况，有两种表现：①函数作为参数传递 ②函数作为返回值被返回

• 最关键的地方：在函数定义的位置找！

• 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方。

  // 函数作为返回值
  function create() {
      let a = 100;
      return function () {
          console.log(a);
      }
  }
  
  let fn = create();
  
  let a = 200;
  
  fn(); //100
  

  // 函数作为参数
  function print(fn){
      let a = 200;
      fn();
  }
  
  let a =100;
  
  function fn(){
      console.log(a);
  }
  print(fn); //100
  

this

this的值是在函数调用时确定的，不是在函数定义时确定的。

• 作为普通函数

  function fn1(){
      console.log(this);
  }
  
  fn1(); // window
  

• 使用call apply bind

  fn1.call({x:100});  // this指向 {x:100}
  
  const fn2 = fn1.bind({x:200});
  fn2();  //{x:200}
  

• 作为对象方法被调用

  const zhangsan = {
      name: '张三',
      sayHi(){
          // this 即当前对象
          console.log(this);
      },
      wait(){
          setTimeout(function(){
              // this指向window
              console.log(this);
          },10);
      },
      waitAbitLonger(){
          setTimeout(() => {
              console.log(this);
          }, 100);
      }
  }
  
  zhangsan.sayHi();
  zhangsan.wait(); //window
  zhangsan.waitAbitLonger(); //指向对象张三
  
  const wait = zhangsan.waitAbitLonger;
  wait(); // window
  

• 在class方法中被调用

  class People{
      constructor(name){
          this.name = name;
          this.age = 20;
      }
      sayHi(){
          console.log(this);
      }
  }
  
  const zhangsan = new People('张三');
  zhangsan.sayHi(); // zhangsan 对象
  

• 箭头函数

• 单线程：js是单线程语言，只能同时做一件事情。因为js可以修改DOM结构，所以js和dom渲染必须共用同一个线程。
• 异步：遇到等待（网络请求，定时任务）不能卡住，因此需要异步，异步是基于callback函数形式，当存在许多callback时，容易导致回调地狱，因此又诞生了promise。
  • 因为js是单线程语言，异步不会阻塞代码执行，同步会阻塞代码执行
• 应用场景：
  • 网络请求：如ajax加载图片
  • 定时任务：如setTimeOut

DOM 本质

• 文档对象模型（document Object Model），简称 DOM，将所有页面内容表示为可以修改的对象。DOM 将 HTML 表示为标签的树形结构。

DOM 节点的操作

• 获取DOM节点

  方法名	搜索方式	可以在元素上调用？	实时的？
  querySelector	CSS-selector	✔	-
  querySelectorAll	CSS-selector	✔	-
  getElementById	id	-	-
  getElementsByName	name	-	✔
  getElementsByTagName	tag or '*'	✔	✔
  getElementsByClassName	class	✔	✔

  • elem.getElementsByTagName(tag) 查找具有给定标签的元素，并返回它们的集合。tag 参数也可以是对于“任何标签”的星号 "*"。
  • elem.getElementsByClassName(className) 返回具有给定CSS类的元素。
  • document.getElementsByName(name) 返回在文档范围内具有给定 name 特性的元素。很少使用。

• attribute

  • attribute是HTML标签上的特性，它的值只能够是字符串；修改标签的属性，会改变html结构。

    const span = document.querySelector('span');
    span.setAttribute('data-name','hello');
    console.log(span.getAttribute('data-name')); //hello
    span.setAttribute('class','hello')
    

• property

  • property是DOM中的属性，是Javascript里的对象；修改对象属性，不会体现到html结构中。

    const span = document.querySelector('span');
    console.log(span.style.width);
    console.log(span.className); // hello work 字符串
    console.log(span.classList);// ['hello', 'work', length: 2 value: 'hello work']
    console.log(span.parentNode);
    console.log(span.nodeName); //SPAN
    console.log(span.nodeType); //1
    

    property和attribute两者都可能导致重新渲染dom。

DOM 结构操作

• 新增节点

  • appenChild:

    target.appendChild(newChild)

    newChild作为target的子节点插入最后的一子节点之后

    const box = document.querySelector('.box');
    // 新建节点
    const p = document.createElement('p');
    p.innerHTML = 'this is p';
    // 插入节点
    box.appendChild(p);
    

  • insertBefore

    target.insertBefore(newChild,existingChild)

    newChild作为target的子节点插入到existingChild节点之前

    existingChild为可选项参数，当为null时其效果与appendChild一样

    const box = document.querySelector('.box');
    const ul = document.querySelector('ul');
    const p = document.createElement('p');
    p.innerHTML = 'hello world';
    // box为父盒子 p为新增元素 ul为已经存在的元素
    box.insertBefore(p,ul)
    

• 移动节点

  如果元素已经存在，使用insertBefore或者appendChild即可移动元素。

• 获取子元素或者父元素

  功能	获取节点	获取纯元素
  获取父节点	parentElement	parentNode
  获取上一个节点（元素）	previousSibling	previousElementSibling
  获取下一个节点（元素）	nextSibling	nextElementSibling
  获取第一个节点（元素）	firstChild	firstElementChild
  获取最后一个节点（元素）	lastChild	lastElementChild
  获取子节点（元素）	childNodes	children

• 删除子元素：

  const box = document.querySelector('.box');
  const ul = document.querySelector('ul');
  box.removeChild(ul);
  

DOM 性能

• Dom操作非常昂贵，避免频繁的DOM操作

• 对DOM查询做缓存

• 将频繁操作改为一次性操作

  const list = document.querySelector('ul');
  // 创建一个文档片段，还没有插入到文档片段中
  const frag = document.createdocumentFragment();
  for(let i = 0; i<10;i++){
      const li = document.createElement('li');
      li.innerHTML = `list item ${i}`;
      // 将li标签插入到文档片段中
      frag.appendChild(li);
  }
  list.appendChild(frag);
  

navigator

navigator 对象提供了有关浏览器和操作系统的背景信息。navigator 有许多属性，但是最广为人知的两个属性是：navigator.userAgent — 关于当前浏览器，navigator.platform — 关于平台（可以帮助区分 Windows/Linux/Mac 等）。

console.log(navigator.userAgent);
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36
console.log(navigator.platform);
// Win32

location

// 在resume.jiaqicoder.com测试
location.href //'https://resume.jiaqicoder.com/#about'
location.protocol //'https:'
location.host //'resume.jiaqicoder.com'
location.search //'?a=100&b=200'
location.hash //'#about'
location.pathname // '/'

history

history.back(); // history.go(-1);
history.forward();//history.go(1);

事件绑定

const button = document.querySelector('button');
// 通用的事件绑定函数

function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}
bindEvent(button,'click',(e)=>{
    e.preventDefault();
    console.log(e.target);
})

事件冒泡

event.stopPropagation();阻止事件冒泡。

event.stopImmediatePropagation(); 阻止事件冒泡并且阻止该元素之后的相同事件类型的监听器触发。

事件代理

    1
    2
    3
    4
    加载更多...

fetch

fetch('https://reqres.in/api/users/',{
    method:'POST',
    headers:{
        'Content-Type':'applicaton/json'
    },
    body:JSON.stringify(
        {
        name:'User 21'
    }
    )
}).then(res=>{
    return res.json();
}).then(data=>{
    console.log(data);
})

XMLHttpRequest

// get 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', './0.data.json', true); //代表异步
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // console.log(xhr.responseText);
            // 解析为json格式
            console.log(JSON.parse(xhr.responseText))
        }
    }
}
xhr.send(null);

// send 请求
const xhr = new XMLHttpRequest();
xhr.open('POST','./0.data.json',true);
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status >= 200 &&xhr.status<300 ||xhr.status===304){
      console.log(xhr.responseText);
    }
  }
}  
const postData ={
  userName:'zhangsan',
  age:32
};
xhr.send(JSON.stringify(postData));

• xhr.readyState

  • 0 - （未初始化） 还没有调用send()方法
  • 1 - （载入）已经调用send()方法，正在发送请求
  • 2 - （载入完成）send（）方法，已经接收到全部响应内容
  • 3 - （交互）正在解析响应内容
  • 4 - （完成） 响应内容解析完成，可以在客户端调用

• xhr.status

  • 2xx - 表示成功处理请求 如200
  • 3xx - 需要重新定向，浏览器直接跳转，如301,302,304
  • 4xx - 客户端请求错误，如404,403
  • 5xx - 服务器端错误

同源策略

• ajax请求时，浏览器要求当前网页必须和server端同源

• 同源：协议、域名、端口，三者必须一致

• 加载图片、css、js可以无视同源策略

  • 可以用于统计打点，使用第三方统计服务

  • 服务器设置header

    const express = require('express')
    const bodyParser = require('body-parser')
    
    const app = express()
    // 处理参数
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    
    // 设置允许跨域访问该服务
    app.all('*', function (req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      next();
    });
    
    // 启动监听
    app.listen(3000, () => {
      console.log('running...')
    })
    

  题目

  1. 手写一个简易的ajax

     function ajax(url) {
         const p = new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
             xhr.open('GET', url, true);
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status > 199 && xhr.status < 300 || xhr.status === 304) {
                         resolve(xhr.responseText);
                     } else {
                         reject('someting went wrong');
                     }
                 }
             }
             xhr.send(null);
     
         });
     
         return p;
     }
     ajax('https://reqres.in/api/users/').then(data => console.log(JSON.parse(data))).catch(err => console.log(err));
     

  2. 跨域的常见方式

  • jsonp

  • cors

  存储 前置知识

  • cookie

    cookie全称为HTTP cookie，简称cookie，是浏览器存储数据的一种方式。cookie是本地存储，一般会自动随着浏览器发送请求时发送到服务器端。本身用于浏览器和服务器通讯，一般最大为4kb。

    document.cookie = 'username=zs';
    document.cookie = `user=${encodeURIComponent('张三')}`; //中文需要用到encodeURIComponent
    // 告知失效时间 如果不设置，默认会是session
    document.cookie = `hobby=sleep;expires=${new Date('2022-09-09')}`
    // 还可以设置domain path 当domain、path以及name的值完全相同时，下一个cookie才会覆盖上一个
    document.cookie = `hobby=eat;path='/info';domain='jiaqicoder.com;max-age=100 `; 
    // 该cookie只能在 jiaqicoder.com/info下读写 且100s后cookie被删除
    // 一个一个的设置但是会一起打印 
    console.log(document.cookie); //username=zs; user=%E5%BC%A0%E4%B8%89;  hobby=sleep
    

  • localStorage和sessionStorage

    localStorage也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端。而cookie会随着浏览器向服务器发送请求时发送到服务器。localStorage 中的键值对总是以字符串的形式存储。

    localStorage.setItem('name','jiaqii');
    localStorage.setItem('age',332);
    console.log(localStorage.getItem('age'));
    localStorage.removeItem('age');
    localStorage.clear();//清空所有的
    

    localStorage是持久化本地存储，除非手动清除（比如通过Javascript删除，或者清除浏览器缓存），否则数据是永远不会过期的。

    但是当会话结束（比如关闭浏览器）的时候， sessionStorage中的数据会被清空，它的方法和localStorage完全一样。

  题目
  1. 描述cookie、localStorage、sessionStorage的区别
  HTTP 前置知识

  • http状态码

    • 状态码分类
      • 1xx 服务器收到请求
      • 2xx 请求成功
      • 3xx 重定向
      • 4xx 客户端错误
      • 5xx 服务端错误
    • 常见的状态码
      • 200 成功
      • 301 永久重定向 （配合location，浏览器自动处理）
      • 302 临时重定向 （配合location，浏览器自动处理）
      • 304 资源未被修改，从缓存中读取数据
      • 403 没有权限
      • 404 资源不存在
      • 500 服务器错误
      • 504 网关超时

  • http方法

    • 传统的 methods

      • get 获取服务器的数据
      • post 向服务器提交数据

    • 现在的methods

      • get 获取数据

      • post 新建数据

      • patch/put 更新数据

      • delete 删除数据

        这些方法只是一个规范，比如get可以用来新建数据，但是尽量遵守规范

    • Restful API

      • 传统的api设计：把每个url当做一个功能

      • restful api设计：把每个url当做一个唯一的资源（标识）

      • 如何将url设置为资源？

        • 尽量不用url参数

          传统的api设计：/api/list?pageIndex=2

          restful api设计：/api/list/2

        • 用 method 表示操作类型

          传统的api：

          • post请求 /api/create-blog
          • put请求 /api/update-blog?id=100
          • get请求 /api/get-blog?id=100

          restful api:用method 表示操作类型

          • post请求 /api/blog 如axios.post('/api/blog',{name:12,age:18})
          • put请求 /api/blog/100 如axios.put('/api/blog/100',{age:12})
          • get请求 /api/blog/100 如axio.get('/api/blog/100')

  • http headers

    • 常见的request headers
      • Accept 浏览器可接收的数据格式
      • Accept-Encoding 浏览器可接收的压缩算法，如gzip
      • Accept-Language 浏览器可接收的语言，如zh-CN
      • Connection: keep-alive 一次TCP连接重复使用
      • cookie 同域一般浏览器会自动发送cookie
      • Host 域名
      • UserAgent 浏览器信息
      • Content-Type 发送数据的格式，如果application/json
    • 常见的response headers
      • Content-Type 返回数据的格式，如果application/json
      • Content-Length 返回的数据的大小
      • Content-Encoding 返回数据的压缩算法，如gzip
      • Set-cookie 设置cookie
    • 缓存相关的headers：
      • Cache-Control:Expires
      • Last-Modified:If-Modified-Since
      • Etag:If-None-Match

  • http 缓存

    https://juejin.cn/post/6844903763665240072

    • 关于缓存的介绍

      • 什么是缓存？

      • 为什么需要缓存？

        部分数据可以直接从缓存中读取，减少网络请求的数据，加快页面加载速度。

    • http缓存策略（强制缓存 + 协商缓存）

      • 强制缓存

        简单粗暴，如果资源没过期，就取缓存，如果过期了，则请求服务器。

        Cache-Control 在Response-Headers中，控制强制缓存的逻辑。

        Cache-Control 的几个取值含义：

        private： 仅浏览器可以缓存

        public： 浏览器和代理服务器都可以缓存（对于private和public，前端可以认为一样，不用深究）

        max-age=xxx 过期时间（重要）

        no-cache 不进行强缓存（重要）

        no-store 不强缓存，也不协商缓存，基本不用，缓存越多才越好呢

        注意：规则可以同时多个。

      • 协商缓存

        触发条件：

        1. Cache-Control 的值为 no-cache （不强缓存）
        2. 或者 max-age 过期了 （强缓存，但总有过期的时候）

        也就是说，不管怎样，都可能最后要进行协商缓存（no-store除外）

        服务器端判断客户端资源，是否和服务端资源一样，如果判断一直则返回304，否则返回200和最新的资源。

        response header里面的设置

        etag: '5c20abbd-e2e8'
        last-modified: Mon, 24 Dec 2018 09:49:49 GMT
        

        etag：每个文件有一个，改动文件了就变了，就是个文件hash，每个文件唯一。

        last-modified：文件的修改时间，精确到秒。

        也就是说，每次请求返回来 response header 中的 etag 和 last-modified，在下次请求时在 request header 就把这两个带上，服务端把你带过来的标识进行对比，然后判断资源是否更改了，如果更改就直接返回新的资源，和更新对应的 response header 的标识 etag、last-modified 。如果资源没有变，那就不变 etag、last-modified，这时候对客户端来说，每次请求都是要进行协商缓存了，即：发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>没过期–>返回304状态码–>客户端用缓存的老资源。

        这就是一条完整的协商缓存的过程。

    • 刷新操作方式，对缓存的影响

  题目

  1. http 常见的状态码有哪些？

  2. http 常见的header有哪些？

  3. 什么是Restful Api？

  4. 描述http的缓存机制？（重要）

  手写 防抖
  • 监听输入框，文字变化后会触发change事件
  • 直接用keyup事件，则会频繁触发change事件
  • 防抖：用户输入结束或暂停时，才会触发change事件