前端日常使用筆記整理（自用）
一、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; }flex
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};