218 元 / 年，微軟 Microsoft 365 家庭版五年訂閱雙 12 探底
阿新 • • 發佈：2021-12-12
有條件給物件新增屬性
const bool = true;
const obj1 = {
id: 1,
name: 'JOho me',
...(bool && {sex: 12})
};
reduce 和find的巧妙用法
統計total並且刪除物件陣列中重複項
const data = [ {tam: "S", color: "blue", total: 5}, {tam: "S", color: "blue", total: 10}, {tam: "S", color: "blue", total: 20}, {tam: "M", color: "blue", total: 5}, {tam: "L", color: "blue", total: 5}, {tam: "S", color: "blue", total: 20}, ]; const result = data.reduce((acc, curr) => { const objInAcc = acc.find((o) => o.tam === curr.tam && o.color === curr.color); if (objInAcc) objInAcc.total += curr.total; else acc.push(curr); return acc; }, []);
屬性hidden
顯示隱藏, boolean
<!--隱藏啦-->
<h1 [hidden]="true">我是一個div</h1>
<!--顯示啦-->
<h1 [hidden]="false">我是一個div-false</h1>
從別人的分支拉別人的元件到自己分支上
先切換到別人的分支(相當於把別人分支的程式碼下載到本地啦)
然後回到自己的分支
git checkout 別人的分支名 src/檔案路徑
Date的小問題
new Date(2019,10,18) //月份是索引0 Mon Nov 18 2019 00:00:00 GMT+0800 (中國標準時間) new Date('2019-10-18') Fri Oct 18 2019 08:00:00 GMT+0800 (中國標準時間) new Date('2019-11-18') Mon Nov 18 2019 08:00:00 GMT+0800 (中國標準時間)
獲取焦點的樣式問題
js
.focus();
css
.xxx:focus{
outline:0
}
不讓瀏覽器翻譯當前文字
<h1 translate="no">你是個孩子嗎?</h1>
angular 判斷可以else
*ngIf="bool;else Template"
cowsay 一直會說話的牛
npm install -g cowsay
控制檯輸入
cowthink 我愛js
SVG 線條的技巧
<path d="M66.039,133.545 ... " pathLength="1" />
然後我們設定stroke-dasharray
1
.path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
完整的程式碼
for /await
const add1 = (res1, time) => new Promise(res => setTimeout(() => res(res1), time));
const add2 = [add1('111', 1000), add1('222', 700), add1('333', 500)];
async function add3(arr) {
for await(const item of arr){
console.log(item);
}
}
add3(add2);
// 111 222 333
Array.prototype.at()
採用整數值並返回該索引處的專案，允許正整數和負整數。負整數從陣列中的最後一項開始計數。
at(index)
相容性問題堪憂
在任意的github專案按下 . 鍵
會出現不一樣的東西
或者把github.com 把com 改成dev
數字輸入框 valueAsNumber
<input type="number" id="aaa" onChange="clickMethods()">
const a = document.querySelector("#aaa");
function clickMethods() {
console.log(typeof a.value);// string
console.log(typeof a.valueAsNumber);// number
}
陣列互換位置
let a = [1, 2, 3];
[[a[2], a[0]] = [a[0], a[2]];
console.log(a);
// [ 3, 2, 1 ]
按鈕的外輪廓
outline:4px solid darkorchid;
outline-offset:4px;
完整的
button{
width: 100px;
height: 50px;
font-size:18px;
color:#fff;
background-color:darkorchid;
border:2px solid darkorchid;
border-radius:20px;
outline:4px solid darkorchid;
outline-offset:4px;
}
console.count 列印的次數
console.log(1)
enum 的實際使用
常量列舉
const enum DownloadStatus {
Idle = "idle",
Loading = 'loading',
Done = 'done'
}
const currentStatus: DownloadStatus = DownloadStatus.Idle;
console.log(currentStatus);
排序
arr.sort((a, b) => {
升序
// return a - b
降序
// return b - a
不變
return 0
});
科學計演算法的妙用
1.12e2 // 1.12
112e-2 // 1.12
const round = (n, decimals = 0) => {
let a = Math.round(`${n}e${decimals}`)
return +`${a}e-${decimals}`
};
console.log(round(1.005, 2));
有趣的正則
const str2='AAA111-222-333-444DDD'
str2.replace(/1{3}-2{3}-3{3}-4{3}/,'$`xxx-xxx-xxx')
// 'AAAAAAxxx-xxx-xxxDDD'
$` 好像是把前面的提出來啦
摺疊動畫
.yl-fb-hide {
transition: max-height .3s;
max-height: 0;
overflow: hidden;
}
.yl-fb-show {
overflow: auto;
max-height: 1000px;
animation: hide-scroll .3s backwards;
}
@keyframes hide-scroll {
from{
max-height: 0;
overflow:hidden;
}
to{
max-height: 1000px;
overflow:hidden;
}
}
欄位自動輸入的動畫
<style>
body {
background: #fff7ee;
font-family: Fira Mono;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
position: relative;
/*寬度總長度*/
width: 43ch;
font-weight: bold;
/*注意修改43這個欄位*/
animation: type 5s steps(43), blink 0.5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
@keyframes type {
0% {
width: 0;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
</style>
<h3>All work and no play makes Jack a dull boy.</h3>
進位制轉化
let a = "10100000100100110110010000010101111011011001101110111111111101000000101111001110001111100001101";
// 十進位制
const d = BigInt('0b' + a);
// 二進位制
const b = BigInt(a);
決定自己的高度的是你的態度，而不是你的才能
記得我們是終身初學者和學習者
總有一天我也能成為大佬
Angular學習群788980451