js常用小技巧~

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

新年伊始，转眼2022年已过了18天。在22年的第2天我完成人生的一件大事，从此我的身份发生了重大的变化~ 文章的开头写一些祝词吧！祝大家在新的一年里，奔走在热爱里。 不畏将来，不念过往。 有趣有盼，虎力全开~ 同样这句话也送给自己！ 最近在项目开发中总结了一些东西，分享给大家，希望对大家有帮助。

1.可选链运算符

const parent = {
    child: {
        child1: {
            child2: {
                key: 10
            }
        }
    }
}

通常后台返回的结构会嵌套很多层，我们在取里层的数据时候，需要一层层判空，才能保证不报错，这样代码虎很冗余。

if(parent && parent.child && parent.child.child1 && parent.child.child1.child2){}

我们可以这样做，既简洁又明了

if(parent?.child?.child1?.child2){}

同样，也适用于数组

const array = [1, 2, 3];
if(array?.[5]){}

2.数组中元素转为数字型

const arr1 = ['1','2','3'];
arr1.map(Number);// [1,2,3]

3.console.log简化

我们前端在开发中，经常需要借助console.log输出，来查看参数，帮助我们开发，每次输出需要写很多console。有一种简单的方式,console.log.bind(document) 定义完之后，可以直接使用。

const c = console.log.bind(document);
c(1)

4.获取数组的最后一项

一般使用 arr[arr.length - 1]，可以使用 arr.splice(-1)， 当我们将slice方法的参数设置为负值时，就会从数组后面开始截取数组值，如果我们想截取后两个值，参数传入-2就可以了

// arr[arr.length - 1];
// arr.splice(-1)

5.计算两个日期之间的间隔

比如我们输入出生日期，和今天的日期就可以知道自己出生多久啦。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
let day = dayDif(new Date("2021-12-16"), new Date("2022-2-1")); 
c(day) // 90

6.去除字符串中的HTML

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
c(stripHtml('ddddddd<span>hahahah</span>')) // dddddddhahahah

7.复制内容到剪切板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

8.获取选中的文本

const getSelectedText = () => window.getSelection().toString();
getSelectedText();

9.滚动到页面顶部

常用于网页很长的时候，快速的回到开头

const goToTop = () => window.scrollTo(0, 0);
goToTop();

10.滚动到页面底部

常用于网页很长的时候，快捷的滚动到最后

window.scrollTo(0, document.documentElement.clientHeight);

新的 一年，希望我们多吃不胖，有颜有钱，健康快乐，涨薪~撒花