把对象的value全部设置成null
function nullTest(val) {
return Object.keys(val).reduce((acc, key) => {
// val[key] === Object(val[key])
// 例如 val:10 为true 就是null
acc[key] = (val[key] === Object(val[key])) ? nullTest(val[key]) : null;
return acc
}, {})
}
var objs = {
a: {
prop1: {id: null, val: 10},
prop2: true,
prop3: null,
},
b: {
prop1: {id: null, val: 20},
prop2: true,
prop3: null,
},
c: 10
}
移动光标或者点击获取所在的单词
input.selectionStart 获取光标的所在位置
// 光标和位置获取所在的单词
function getWordAtNthPosition(str, position) {
if (!/^[A-Z]|^[0-9]|s$/i.test(str[position])) {
return null;
}
const nWord = str.substr(0, position).split(/W+/g).length;
const r = new RegExp(`(?=((\w+)\W*){${nWord}})`, 'g');
const segs = r.exec(str);
if (!segs || !segs.length) {
return null;
}
return r.exec(str)[2];
}
input.addEventListener('keyup', function(event) {
getWordAtNthPosition(input.value, input.selectionStart);
}, false);
input.addEventListener('click', function(event) {
getWordAtNthPosition(input.value, input.selectionStart);
}, false);
css背景图片的其妙用法
网格图片
body {
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://img2020.cnblogs.com/blog/1308525/202005/1308525-20200509164042506-85299340.jpg);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
三角形裁剪
<style>
.day {
100%;
height: 100%;
position:absolute;
background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.night {
100%;
height: 100%;
position:absolute;
background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
background-size: 100% 100%;
background-repeat: no-repeat;
clip-path: polygon(100% 0, 0% 0, 100% 100%);
}
</style>
<body>
<div class="box" style="800px;height:500px;position: relative;">
<div class="day"></div>
<div class="night"></div>
</div>
</body>
给背景加渐变叠加
body {
background-image:
linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center
}
把背景图片设置为文本颜色
.aaa{
800px;
height: 500px;
background-image:url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
background-clip: text;
-webkit-background-clip: text;
font-size:150px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color: transparent;
font-weight: 900;
}
伪元素的有趣用法
.aaa {
500px;
height: 400px;
background-color: #1976d2;
position: relative;
&:after {
content: '加载中.';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
animation: wating 3s steps(3,end) infinite;
// 参数: 第一个动画的名称,总时长,函数steps(步数,结束),速度曲线
}
}
@keyframes wating {
33% {
content: '加载中..'
}
66% {
content: '加载中...'
}
}
获取随机的图片
https://picsum.photos/
博客园添加codepan内容
# typescript 小技巧在pen的编辑界面右下方点击“Embed”按钮进入界面，有一些选项可以操作，这里使用的是“iframe”模式。
粘贴就可以啦
interface StringArray {
[index: number]: string,
lastName: string
}
const myString2: Array<number | string> = [1, 2, '3', 'c'];
const strArr: StringArray = {0: 'a', 1: 'b', lastName: 'x'}
type Field = [
Array<string | Boolean>,
Array<string | Boolean>
]
const a: Field = [['a', true], ['b', false, 'c']];
interface Point2D {
x: number,
y: number,
}
add(a: Point2D, b: Point2D): number {
return (a.x + a.y) * (b.x + b.y)
}
add({x: 1, y: 2}, {x: 2, y: 3})
type Spanish='是'|'否'
const a:Spanish='是'
console.cuont 打印次数
for (let i = 0; i < 100; i++) {
console.count()
}
Math.sign(x) 隐式转成数字类型
返回值分别是1,-1,-0,0,NaN
Math.sign(3) //1 Math.sign(-3) //-1 Math.sign(0) // 0 Math.sign(-0) // -0 Math.sign(-Infinity) // -1 Math.sign(Infinity) //1 Math.sign('x') //NaN 源码 if(!Math.sign){ Math.sign=function(x){ x=+x if(x===0||isNaN(x)){ return Number(x) } return x>0?1:-1 } }
Math.trunc(x)
将数字的小数部分去掉,只保留整数部分
不同于:
Math.ceilMath.floorMath.round()传入该方法的参数会被隐式转换成数字类型
Math.trunc(12.53) //12 Math.trunc(-12.52) // -12 Math.trunc("-1.123") // -1 Math.trunc(NaN) // NaN Math.trunc("foo") // NaN Math.trunc() // NaN
边框的颜色随着尺寸的改变
CSS代码：
textarea {
200px; height: 100px;
border-image: linear-gradient(deepskyblue, deeppink) 1;
}
HTML代码：
<textarea id="roElement">本文地址：https://www.zhangxinxu.com/wordpress/?p=9295
作者：zhangxinxu</textarea>
JS代码：
var eleRo = document.getElementById('roElement');
var objResizeObserver = new ResizeObserver(function (entries) {
var entry = entries[0];
var cr = entry.contentRect;
var target = entry.target;
var angle = (cr.width - 200) + (cr.height - 100);
target.style.borderImageSource = 'linear-gradient('+ angle +'deg, deepskyblue, deeppink)';
});
// 观察文本域元素
objResizeObserver.observe(eleRo);
将数组转成对象
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}