旅游管理App开发 第二天：技术点汇总以及遇到问题的解决办法

1.for in 和 for of 的区别

• for in：

1. 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性，语句都会被执行。
2. 不建议使用for in 遍历数组 ，因为输出的顺序是不固定的。
3. 如果迭代的对象的变量值是null或者undefined, for in不执行循环体，建议在使用for in循环之前，先检查该对象的值是不是null或者undefined

• for of：

1.for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句, 适合遍历数组

---

2.flex=1 的作用

flex=1：让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

3.stylus的样式穿透 >>>

scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透 scoped。

拓展：

2、sass和less的样式穿透 使用 /deep/

// 语法
外层 /deep/ 第三方组件 {
    样式
}

// eg
.wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}

4.判断icon图标应放在哪个页面算法

 computed: {
    pages () {
     // 注意遍历的时候记得是遍历 pages 不再是icons 用 for of 
      const pages = []
      this.icons.forEach((item, index) => {
        // 判断展示在下标为0还是1的页面上，floor向下取整，<8,则都在第一页
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        // 二维数组，[page][item]
        pages[page].push(item)
      })
      return pages
    }
  }

---

5.超出div不溢出，用省略号代替方法

• 新建一个styl文件(我的文件名为：mixins.styl)，添加如下代码：

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

• 在组件中引入：

• 在当前组件的样式表中可能会溢出文本标签中加入 ellipsis() 就可以了