盒模型、省略、浮动、MVVM

1、盒模型

      1.1怪异盒子模型的width和height包括border和padding的宽度。

            使用属性：box-sizing = border-box 来创建一个怪异盒模型。

            在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，

            盒子总宽度/高度=width/height + margin 。

     1.2 box-sizing = context-box是标准盒模型。在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;

            盒子总宽度/高度=width/height+padding+border+margin。

2、元素的显示和隐藏

display
display:none;是直接将元素不在dom树上挂载了，适用于只渲染一次的场景。
隐藏元素时-该元素被隐藏，不占据位置；
隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；
元素隐藏时-对该元素设置的事件将不起做用；
visibility
visibility:hidden；是将元素还在dom树上挂载，但是隐藏掉了，适用于元素频繁显示隐藏的场景。
隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；
元素隐藏时-对该元素设置的事件将不起做用；
opacity
opacity:0;本质并没有将元素隐藏，仅是将元素变透明了，但是具有穿透性！
隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
隐藏元素时-子元素被一起隐藏，且不可以通过opacity:1;将子元素显示；
元素隐藏时-对该元素设置的事件还有做用(可以通过点击空白触发事件)；

3、实现单行文本溢出显示省略号

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

4、css中清除浮动的方式有哪些

是为了解决元素因子元素浮动而导致高度塌陷问题

使用overflow属性清除浮动：将父元素的“overflow” 属性设置为`hidden`或者`auto`，可以触发BFC（块级格式化上下文）机制，从而包含浮动元素.

使用空div清除浮动：在浮动元素的末尾添加一个空的`div`元素，并给其设置`clear:both`样式。这样可以强制将浮动元素后的内容放置在下方，从而清除浮动。

使用clearfix 清除浮动

使用   display：flow-root 清除浮动

5、当img和文字位于同一行中时，img默认是按照文字的基线baseline对齐，因此img就会和盒子底部存在一定的空隙，怎么清除呢？

使用vertical-align属性，其值取top、bottom、middle都行。只有baseline不行。也就是说让img和文字的顶线、中线、底线对齐都可以清除图片下面的空隙。

通常使用top和middle。

6、flex常用属性

flex-direction、flex-wrap、just-content、align-items

7、grid常用属性

 grid-template-columns:列 ；grid-template-rows:行 ；

grid-column-gap: 列之间的距离 ; grid-row-gap: 行之间的距离

8、数组求和

function sum(array){

        let sum = 0;

        for(let x of array){

                sum+=x;

        }

        return sum;

}

sum([3,2,1])

9、for in 和 for of的区别

        循环数组：for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。

        循环对象：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array

const object = { name: 'lx', age: 23 }
    // for ... in
    for (const key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 lx,23
    }
 
    // for ... of
    for (const key of object) {
      console.log(key) // 报错 Uncaught TypeError: object is not iterable
    }
10、数组去重

includes判断新数组里有没有这个元素，如果有就不添加，没有就添加 

var newArr = [];

for(var i=0;i<arr.length-1;i++){

        if(!newArr.includes(arr[i])){

                newArr.push(arr[i])

       }

}

IndexOf是数组的一个原生方法，当你传入一个参数的时候，它会返回入参数的索引值。如果未找到就返回 -1

function unique(array) {
    var res = []
    for(var i = 0; i < array.length; i++) {
        if(res.indexOf(array[i]) === -1) {
            res.push(array[i])
        }
    }
   return res
}

11、 防抖的原理就是：你尽管触发事件，但是我一定会在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。

• 防抖: n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时
• 电梯里第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

• function  debounce(fn, time) {
      let timer = null;
      return function() {
          clearTimeout(timer);
          timer = setTimeout(() => {
              fn.apply(this, arguments);
          }, time)
      }
  }

12、 

MVVM

M：模型 ==》data中的数据

V：视图 ==》模板

VM：视图模型 ==》Vue实例对象

数据代理就是通过一个对象代理对另一个对象中属性的操作(读/写)；vue中通过vm代理data对象（vm代理vm._data）中所有属性的操作，更方便的操作data中的数据

vue中数据代理：将vue文件中的data保存一份到vm._data; 然后对将vue文件中data中的每个属性添加到vm实例上，通过Object.defineProperty实现数据的代理；当我们读取vm上的属性时，他会到vm._data中找到对应的属性返回当，我们修改vue实例对象的属性后，对应的setter就会监听到变化，然后去修改实例对象上vm._data对应的属性

 Object.defineProperty(me, key, {
      configurable: false, // 不可以重新定义
      enumerable: true, // 可枚举遍历
      // 当执行vm.name获取属性值时自动调用返回属性值
      get: function proxyGetter() {
        // 读取data中对应的属性值返回
        return me._data[key];
      },
      // 当执行vm.name = "xxx"时自动调用
      set: function proxySetter(newVal) {
        // 将最新的值保存给data对应的属性上
        me._data[key] = newVal;
      }
    });

 13、使用 Partial 实用程序类型使一个类中的所有属性都是可选的，例如 const emp: Partial<Employee> = {};。 Partial 实用程序类型构造一个新类型，其中提供的类型的所有属性都设置为可选。

14、

 

 15、数组方法

forEach map filter find findIndex every some reduce flat contat 

push pop shift unshift slice splice indexOf includes sort join

16、判断数组类型

17、const 程序运行时值不变