vue 和 js 没使用过的一些方法

1.getBoundingClientRect

一.getBoundingClientRect()分析

getBoundingClientRect()获取元素位置，这个方法没有参数
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 
getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

// 我的需求就是在鼠标移入button的时候显示当前tootip
1.通过 ref="rtButtonTooltip"获取 tootip
2.通过getBoundingClientRect获取当前的宽高
  <rt-tooltip
    v-if="tooltip"
    ref="rtButtonTooltip"
    popper-class="rt-button-tooltip"
    :content="String(tooltip)"
    placement="bottom"
   >
     <div style="position:absolute;top:-1px;left:-1px"></div>
   </rt-tooltip>

  mounted () {
    this.$nextTick(() => {
      if (this.tooltip && this.$refs.rtButton && this.$refs.rtButtonTooltip) {
        const { width, height } = this.$refs.rtButton.getBoundingClientRect();
        this.$refs.rtButtonTooltip.$el.style.width = width;
        this.$refs.rtButtonTooltip.$el.style.height = height;
      }
    })
  },

2. ES6 新增可选链操作符号

1.可选链操作符的使用场景
const obj= {
    school:{
        classroom:{
            room1:'班级1'
            room2:'班级2'
        }
    }
}
2.你是否遇到过这样的数据嵌套结构？接下来我们去打印数据
console.log(obj.school.classroom.room1)  // 班级1
如果classroom不存在了就会报错了
const obj= {
    school:{
    }
}
console.log(obj.school.classroom.room1)  // 这种情况下就会报错
在没有可选链之前我们要一层一层对数据判断
console.log(obj.school&&obj.school.classroom&&obj.school.classroom.room1)
可选链操作符处理
console.log(obj?.school?.classroom?.room1)

3.JavaScript 相关方法

Array.prototype.map()：对数组中的每个元素执行操作并返回新的数组。
Array.prototype.filter()：根据条件筛选数组中的元素并返回新的数组。
Array.prototype.reduce()：对数组中的元素进行累积操作并返回最终结果。
Array.prototype.find()：返回符合条件的第一个素。
Array.prototype.findIndex()：返回符合条件- Object.assign()：用于将多个对象合并到一个新对象中。
Array.from()：将类数组对象或可迭代对象转换为。
Array.isArray()：检查一个值是否为数组。
Object.keys()：返回一个包含对象可枚举属性的数组。
document.querySelector()：根据选择器返回第一个匹配的元素。
document.querySelectorAll()：根据选择器返回所有匹配的元素。
这些方法可以大大简化代码的编写，提高开发效率。

开源项目学习地址 [vue3-element-admin]-https://gitee.com/youlaiorg/vue3-element-admin