前端日常使用笔记整理（自用）
一、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
