23 个超实用 JS 技巧( 三 ) _JS

obj[property] = "这是A";
// {b: "b", name: "这是A"}
console.log(obj);
带有范围的随机数生成器有时你需要生成随机数，但希望这些数字在一定范围内，那就可以用这个工具。
function randomNumber(max = 1, min = 0) {
if (min >= max) {
return max;
}
return Math.floor(Math.random() * (max - min) + min);
}
生成随机颜色function getRandomColor() {
const colorAngle = Math.floor(Math.random() * 360);
return `hsla(${colorAngle},100%,50%,1)`;
}
获取列表最后一项其他语言里这个功能被做成了可以在数组上调用的方法或函数，但在 JavaScript 里面，你得自己做点工作。
let array = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(array.slice(-1)) >>> [7];
console.log(array.slice(-2)) >>> [6, 7];
console.log(array.slice(-3)) >>> [5, 6, 7];
function lastItem(list) {
if (Array.isArray(list)) {
return list.slice(-1)[0];
}
if (list instanceof Set) {
return Array.from(list).slice(-1)[0];
}
if (list instanceof Map) {
return Array.from(list.values()).slice(-1)[0];
}
}
图片懒加载在懒加载的实现中，有两个关键的数值：一个是当前可视区域的高度，另一个是元素距离可视区域顶部的高度。
当前可视区域的高度，在和现代浏览器及 IE9 以上的浏览器中，可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用
document.documentElement.clientHeight 获取，这里我们兼容两种情况：
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
而元素距离可视区域顶部的高度，我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释：

该方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 css 边框集合。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Lazy-Load</title>
<style>
.img {
width: 200px;
height: 200px;
background-color: gray;
}
.pic {
// 必要的img样式
}
</style>
</head>
<body>
<div class="container">
<div class="img">
// 注意我们并没有为它引入真实的src
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/1.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/2.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/3.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/4.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/5.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/6.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/7.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/8.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/9.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src=https://www.isolves.com/it/cxkf/yy/js/2021-09-27/"./images/10.png" />