阿里淘天面经⚠️

下午阿里一面，不出意外的凉了，记录一下。

分片上传的逻辑

怎么获得一个DOM距离页面顶部的高度

没见过这个需求，没实现过，傻傻的和面试官说根据兄弟节点和父节点的高度来计算，乐。

const box = document.getElementById('box')
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

快速排序

见此文

ES6新特性

• let和const
• 模板字符串
• Symbol
  Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是JavaScript中的第七种数据类型，与undefined、null、Number（数值）、String（字符串）、Boolean（布尔值）、Object（对象）并列。反正我没用过也不知道好不好用emmm……
• 数组解构

  let [a, b, c] = [1, 2, 3] // 1,2,3
  let [a, b, c] = [1, , 3] // 1,undefined,3
  let [a, , b] = [1, 2, 3] // 1,3 
  let [a, ...b] = [1, 2, 3] // 1,[1,2]
  

• 对象结构
• Map
  Map对象用于保存键值对，任何值JavaScript支持的值都可以作为一个键（key）或者一个值（value）。与object不同的是object的key只能是字符串或者symbol，而且Map有一个size属性存储了键值对的个数，而object没有。

  const myMap = new Map([['name', 'boyiao'], ['age', 12]])
  myMap.set('sex', 'male')
  console.log(myMap.size)
  console.log(myMap.get('name')) // boyiao
  console.log(myMap.has('age')) // true
  console.log(myMap.delete('sex')) // true
  

• Set
  Set不是键值对，它与数组类似，而且每一个元素都是唯一的 。

  let mySet = new Set([1, 2, 3]) // {1, 2, 3}
  mySet.add(4)
  mySet.delete(1)
  mySet.has(1) // false
  // 实现数组去重
  const arr = [1, 2, 2, 3]
  const set = new Set(arr)
  const newArr = Array.from(set) // [1, 2, 3]
  

• …对象扩展符
• 箭头函数
• 类
• promise和proxy
• 模块化
• 运算符

ES6模块化和CommonJS

见此文

函数的作用域链是如何挂载的

他怎么能问出这个问题啊我真的想不明白，除了闭包和函数的作用域我觉得没啥好讲的。是没讲到每个函数都是一个实例吗？
前置知识

每个函数调用都有自己的上下文。当代码流进入函数的时候，函数的上下文会被推到一个上下文栈上面，在函数执行完毕之后上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。ECMAScript程序的执行就是通过这个上下文栈来控制的。
上下文中的代码在执行的时候，会创建变量对象的一个作用域链。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文变量对象始终位于作用域链的最前端。如果上下文是函数，则其活动对象用作变量对象。活动对象最初只有一个定义变量：arguments。作用域链中的下一个变量对象来自包含上下文，再下一个对象来自再下一个包含上下文。以此类推至全局上下文；全局上下文的变量对象始终是作用域链的最后一个变量对象。
——《红宝书》

DOM和BOM

他俩的使用场景我觉得红宝书的目录就概括好了。

BOM

• window对象
  • Global作用域
  • 窗口关系
  • 窗口位置与像素比
  • 窗口大小
  • 视口位置
  • 导航与打开新窗口
  • 定时器
  • 系统对话框
• location对象
  • 查询字符串
  • 操作地址
• navigator对象
  • 检测插件
  • 注册处理程序
• screen对象
• history对象
  • 导航
  • 历史状态管理

DOM

• 节点层级
  • Node类型
  • Document类型
  • Element类型
  • Text类型
  • Comment类型
  • CDATASection类型
  • DucomentType类型
  • DocumentFragment类型
  • Attr类型
• DOM编程
  • 动态脚本
  • 动态样式
  • 操作表格
  • 使用NodeList
• MutationObserver接口（基本用法在此文中有提及）
• Selectors API
  • querySelector()
  • querySelectorAll()
  • matches()
• 元素遍历
• HTML5
• 专有扩展