前端日常使用笔记整理（自用）

一、css布局

1.Flex布局：阮一峰大佬的flex布局讲解推送门：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器（container）六大属性小结：（主轴即水平方向轴、交叉轴即垂直方向轴）

①主轴排列方向：flex-direction:row/row-reverse/column/column-reverse

②主轴对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around

③交叉轴对齐方式：align-items:flex-start/flex-end/center/baseline/stretch

④换行方式：flex-wrap:nowrap/wrap/wrap-reverse

⑤多轴线对齐方式：align-content:flex-start/flex-end/center/space-between/space-around/stretch

⑥flex-flow

项目（item）六大属性小结：

①排列顺序：order：-1/0/1/...(数值越小越靠前，默认值是0）

②放大比例：flex-grow:1/2/...（默认值是0）

③缩小比例：flex-shrink:1/2/...(默认值是1，负值无效）

④项目大小：flex-basis：350px/...(默认值是auto，可以设置为同它的width/height大小）

⑤flex：flex-grow   flex-shrink  flex-basis （默认值是（0 1 auto），两个快捷值none（0 0 auto）和 auto（1 1 auto），改属性优于分开使用②③④）

⑥单个项目设置对齐方式：align-self:auto/flex-start/flex-end/center/baseline/stretch

基本使用：

.div{
display:flex;
justify-content:space-between;
}

2.div垂直居中：https://blog.csdn.net/liufeifeinanfeng/article/details/78615567

<div id="parent">
<div id="child">Text here</div>
</div>

#child:{height:200px;line-hight:200px;}

///////

<div id="parent">
<img src="image.png" alt="" />
</div>

#parent:{height:200px;line-hieght:200px;}
#parent img:{vertical-align:middle;
}

<div id="floater">
  <div id="content">Content here</div>
</div>

#floater:{float:left;height:50%;margin-bottom:-120px}
#content:{clear:both;height:240px;position:relative;}

二、js

1.map函数及split分割字符使用：

var arr = [{key:1,name:"n1",updatedAt:“2019-01-07 11:03:50”},{key:2,name:"n2",updatedAt:“2019-01-07 11:03:55”}];

arr.map((item) => item.updatedAt = (item.updatedAt.split(' ')[1]));

输出结果：

arr =  [{key:1,updatedAt:“11:03:50”},{key:2,updatedAt:“11:03:55”}];

2.splice使用

for(let it for arr){

if(it.name == "n1"){

arr.splice(it.key-1,1);

}

}

3.数组去重

uniq:function(array){

        var temp = [];

        for (var i = 0; i < array.length; i++) {

            //如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的

            if (array.indexOf(array[i]) == i) {

                temp.push(array[i]);

            }

        }

        return temp;

    },

结合map去重

uniq2:function(){

let map = {};

if(arr&&Array.isArray(arr)){

for(let i = arr.length;i >= 0; --i;){

if(arr[i] in map){

arr.splice(arr[i],1);

}else{

map[arr[i]]  = true;

}

}

}

}

4.数组合并和对象合并

数组合并：

var brr = [{key:3,name:"n3",updatedAt:"2019-01-07 12:39:09"}];

var crr = arr.concat(brr);

//得到结果

crr = [[{key:1,name:"n1",updatedAt:“2019-01-07 11:03:50”},{key:2,name:"n2",updatedAt:“2019-01-07 11:03:55”},{key:3,name:"n3",updatedAt:"2019-01-07 12:39:09"}]

对象合并：

方法1：

var aa = {a:1},bb = {b:2};

var cc = Object(aa,bb);

//输出结果

cc = {a:1,b:2};

5.对象和字符串相互转换

① JSON.parse(str);

②JSON.stringify(obj);

6.去除两端多余空白的正则表达式

const TRIM_REGX = /(^s*)|(s*$)/g ；

' ScriptOJ '.replace(TRIM_REGX, '') // => ScriptOJ