小前端历程记录

前端工作这么多年了一直没整理过知识点内容，或者零零散散的整点，一个字总结：懒！！！！想要继续在这条路深耕还是得要会总结知识点啊，下面还是开始要慢慢的整理理解的知识吧，整理都是随笔，不分模块；将会不断更新！！

1：

var q = “213”
var func = function() {
    console.log(this.q)
}

var obj = {
    q: 'obj',
    func: func,
    anotherObj: {
        q: 'anotherObj',
        func: func
    }
}
作为函数调用时this指向：
let newQ = func() //213
作为对象的函数调用时zhis指向：
obj.func()   //obj
obj.anotherObj.func() //anotherObj

 

2：文字两端对齐：text-align:justify;比text-align:left or right;视觉阅读上更优秀一点，but如果只有一行也想两端对齐的话那就无效了，因为它默认不对最后一行进行处理（继承嘛，只有一行去继承谁呢），此时text-align-last：justify就出现了，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。but这个属性也只对最新的谷歌和火狐有效，想要兼容所有主流的浏览器的话还得粗暴点：首先在前面的基础之上再在每个文字的中间加上一个空格（多个也无所谓啦），然后再通过‘:after’去调整下content:""; display:inline-block;width:100%;啊之类的就可以了。

 

3:背景视觉差的实现方式：background-attachment

  值      描述

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

3.1、local 表示背景相对于元素的内容固定，如果元素可滚动，则背景将会随着元素的内容滚动

3.2、scroll 表示背景相对于元素本身固定，如果元素可滚动，背景不随着内容滚动

3.3、fixed 表示背景相对于视口固定，如果元素可滚动，背景不随着元素的内容滚动

4：如何将一个div垂直居中>(ab+margin auto)+(ab+负margin)+(ab+calc)+（ab+transform(translate)）+(flex justify-content,align-items)+(css-table>(vertical-align:middle+iniline-block)

 

5：css3的f'lexbox是什么（弹性布局），适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

 

6：shapes

 

想要实现上面这个文字排版的效果怎么办？其实

实现以上效果的主要属性是shape-outside，该属性使用形状值来定义浮动区域的浮动，这将使得内联内容环绕着形状，而不是产生浮动的边框。可以通过图形函数来定义基本形状。凡是这种不规则的文案布局都可以实现，具体的使用方法就百度下关键词 css shapes就知道了。

7：filter滤镜，图片默认灰色，hover上去显示本色，transition加了个延时，使之hover上去的时候不那么生硬；话不多说，直接上代码

.logo {
  transition: all 0.2s;
  cursor: pointer;
  filter: grayscale(100%);
}

.logo:hover {
  filter: none;
}

7.es6方法过滤掉两个数组中对象id值相等的项
方法1：

    let arr1=[{id:1,name:'老大'},{id:2,name:'老二'}]
    let arr2=[{id:1,name:'老大'},{id:3,name:'老三'},{id:4,name:'老四'},{id:5,name:'老五'},]
     
    let add=arr2.filter(item=>!arr1.some(ele=>ele.id===item.id))
    console.log(add)

方法2：

    const arr1 = [{ id: 1, name: '老大' }, { id: 2, name: '老二' }];
    const arr2 = [{ id: 1, name: '老大' }, { id: 3, name: '老三' }];
     
    // 获取到arr1的所有id集合
    let arr1Ids = arr1.map(item => item.id);
     
    // 过滤arr2中不包含arr1相同的id数组。
    const result = arr2.filter(item => !arr1Ids.includes(item.id));
    console.log(result);