面试学习3

发表于

盒模型

  • IE盒模型
    • width = border + padding + content
  • W3C标准盒模型
    • width = content

可以通过box-sizing来设置不同的盒模型，该属性默认是content-box，可以改为border-box

怪异模式和标准模式

  • 盒模型不同

尽量用border-box，这样可以直接设置子元素的width，不受padding的影响

new这个过程发生了什么

  • 创建了一个空对象
  • 将构造函数的this指向这个空对象
  • 为新对象添加属性
  • 返回新对象

vue双向绑定原理：数据劫持、发布-订阅模式

具体实现：数据劫持是通过Object.defineProperty()

视图到数据这一块可以通过事件监听来实现

比较关键的就是数据到视图这一块

定义一个observer观察者，用来劫持并监听所有数据的变化，如果有变化，就通知订阅者

定义一个watcher订阅者，接收来自观察者的信息，当数据发生变化时，执行函数，更新视图

定义一个compile，用来扫描解析节点和指令、初始化模板数据、初始化订阅者

任何没有设置doctype的Html都将以混杂模式来解析

浅拷贝

  • object.assgin
  • 展开运算符

深拷贝

  • JSON.parse(JSON.stringify(obj))
  • 递归逐一赋值

new运算符的执行过程

  • 创建一个空对象
  • 将构造函数的this指向空对象
  • 为空对象添加属性
  • 返回该对象

es6推出的新数据结构set和map

  • set集合中的元素是唯一的、不重复
  • map和对象类似，区别在于map的键可以是任意数据类型
  • 两者都提供了一些方法，让我们处理数据

函数柯里化

  • 为函数预置参数，以便重复利用

数组乱序

1
2
3
arr.sort(function (){
    return Math.random() - 0.5
})

数组扁平化

1
2
3
arr.flat = function (){
    return this.toString().split(',').map(item => +item)
}

数组去重

1
2
3
4
5
6
7
8
9
function only(arr){
    var newarr = []
    for(var i = 0; i < arr.length; i++){
        if(newarr.indexOf(arr[i]) == -1){
            newarr.push(arr[i])
        }
    }
    return newarr    
}