清浮动技巧

了解为什么页面元素会浮动之前先明白一个概念—— 块级格式化上下文:BFC(block formatting contexts) 默认是关闭状态
BFC的特性
* 块级格式化上下文会阻止外边距叠加
* 块级格式化上下文不会重叠浮动元素
* 块级格式化上下文通常可以包含浮动
CSS3里面对触发BFC这个规范做了改动,称之为:flow root

float
overflow
display
position(absolute,fixed)

表单元素
所有css3清浮动的几种方式为

overflow: hidden;
overflow: auto;
float: left;
display:inline-block;
position: fixed;

 

 

力扣算法第1题:两数之和

给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。
例如:
给定 nums = [2, 7, 11, 15], target = 9 。 ·8
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]

解题思路:
1. 把nums想象成相亲者
2. 把target想象成匹配条件
3. 用字典建立一个婚姻介绍所,存储相亲者的数字和下标

解题步骤:
新建一个字典作为婚姻介绍所
遍历nums里的值,有合适的就牵手成功,没有就先登记,字典里面Key就是nums里的值,value就是下标。

var twoSum = function (nums, target) {
    let map = new Map() // 婚姻介绍所
    for (let i = 0; i < nums.length; i++) {
        const n = nums[i] //自己
        const n2 = target - n //对象
        if (map.has(n2)) { //是否有合适的对象
            return [map.get(n2), i] //有就返回对象的下标和自己的下标
        } else {
            map.set(n, i) // 没有合适的对象就把自己登记到介绍所
        }
    }
}
let res = twoSum([2, 7, 11, 15], 9)

 

 

js 多重条件过滤

假设一组JSON数据中,需要你根据某一个值去筛选出来当前值所在的对象,最基本的做法:
遍历数组然后判断这个值是否等于你要查找的那个值,如果等于就返回当前遍历的节点对象。

那么问题来了,如果是5个条件呢,你要嵌套遍历5次吗?那如果是10个条件呢?嵌套遍历比较笨,而且性能也不好,所以使用es6的filter方法更好。

思路是先定义个空对象来保存筛选条件,然后再遍历数组,然后通过比较数组的数组项和条件对象的健值,找到后返回。

// 多重过滤
function multiFilter(array, filters) {
    const filterKeys = Object.keys(filters) // 先把筛选条件保存下来
    // 主要是用filter方法来过滤
    const res = array.filter((item) => {
        const isHave = filterKeys.every((key) => {
            let targetValue = filters[key] // 条件的值
            let originValue = item[key] // 元数据的值
            if (!targetValue) { // 如果条件为空就返回对象
                return true
            } else {
                if (originValue === targetValue) { // 否则返回条件相等的的对象
                    return true
                } else {
                    return false
                }
            }
        })
        return isHave
    })
    return res
}

 

 

CSS布局垂直居中(已知高度和未知高度)

已知高度使用用传统的绝对定位-margin高度的一半方法,这里不多介绍。
未知高度常用的三种方法:
1.表格 cell-table方法

.parent1{
display: table;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
}

2. 决定定位 transform:translate(-50%;-50%)

.parent2{
position: relative;
}
.parent2 .child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.弹性布局 flex

.parent3{
display: flex;
justify-content: center;
align-items: center;
}

 

 

实现深拷贝函数

ES6的Object.assign()函数其实只能拷贝一层,所以需要手写一个深拷贝函数。
有个小技巧判断一个对象是否为数组,instanceof是否等于Array。
主要思路就是使用in方法遍历对象的每个key和值,用递归的方式拷贝到新的对象里面去

function deepClone(obj) {
    let newObj = obj instanceof Array ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
            }
        }
    }
    return newObj
}