本周学习总结

把对象的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 {
    width: 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 {
    width: 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="width: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{
    width: 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 {
  width: 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/
![](https://picsum.photos/800/400)

博客园添加codepan内容

在pen的编辑界面右下方点击“Embed”按钮进入界面，有一些选项可以操作，这里使用的是“iframe”模式。

粘贴就可以啦

# typescript 小技巧 
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.ceil Math.floor Math.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 {
    width: 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”}
posted @ 2020-05-16 08:39  猫神甜辣酱  阅读(259)  评论(0)  编辑  收藏  举报