23 个超实用 JS 技巧
带有多个条件的 if 语句
把多个值放在一个数组中，然后调用数组的 includes 方法。
// bad
if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
//logic
}
// better
if (["abc", "def", "ghi", "jkl"].includes(x)) {
//logic
}
使用条件表达式简化 if true...else
// bad
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// better
let test = x > 10 ? true : false;
//或者这样
let test = x > 10;
console.log(test);
假值(undefined、null、0、false、NaN、空字符串)检查
当我们创建了新变量，有时候想要检查引用的变量是不是null 或 undefined或空字符串 等假值。JAVAScript 确实有一个很好的快捷方式来实现这种检查-逻辑或操作符(||)
||会在左侧操作数为假值时返回右侧操作数
只有当左侧为:
- 空字符串: ''或``
- NaN
- 0
- null
- undefined
- false
逻辑或操作符(||) 会返回有右侧的值
// bad
if (test1 !== null || test1 !== undefined || test1 !== "") {
let test2 = test1;
}
// better
let test2 = test1 || "";
// bad
if (test1 === true) or if (test1 !== "") or if (test1 !== null)
// better
if (test1){
// do some
}else{
// do other
}
注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null,undefinded,空字符串 检查。
使用空值合并操作符-??
只有当左侧为
- null
- undefined
空值合并操作符(??) 会返回右侧的值
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
注意:与逻辑或操作符(||)不同，||会在左侧操作数为假值时返回右侧操作数
只有当左侧为:
- 空字符串: ''或``
- NaN
- 0
- null
- undefined
逻辑或操作符(||) 会返回有右侧的值
var a = "" || 1;
// 输出 1
console.log(a);
null 检查和默认赋值
let test1 = null;
let test2 = test1 ?? "";
console.log("null check", test2); // 输出空字符串 ""
undefined 检查和默认赋值
const test = undefined ?? "default";
console.log(test);
// expected output: "default"
比较后返回
// bad
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe("test");
}
}
// better
function checkReturn() {
return test ?? callMe("test");
}
使用可选链操作符-?.
?. 也叫链判断运算符。它允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回 undefined
const travelPlans = {
destination: "DC",
monday: {
location: "National Mall",
budget: 200,
},
};
// bad
const res =
travelPlans &&
travelPlans.tuesday &&
travelPlans.tuesday.location &&
travelPlans.tuesday.location.href;
// better
// 输出 undefined
const res1 = travelPlans?.tuesday?.location?.href;
用于多个条件判断的 && 操作符
如果只在变量为 true 时才调用函数，可以使用 && 操作符。
// bad
if (test1) {
callMethod();
}
// better
test1 && callMethod();
当你在 React 中想要有条件地渲染某个组件时，这个与 (&&)短路写法比较有用。例如：
<div> {this.state.isLoading && <Loading />} </div>
switch 简化
我们可以将条件保存在键值对象中，并根据条件来调用它们。
// bad
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// better
var data = {
1: test1,
2: test2,
3: test,
};
// 如果type 在 data中存在， 则执行对应的函数
data[type] && data[type]();
默认参数值
// bad
function add(test1, test2) {
if (test1 === undefined) test1 = 1;
if (test2 === undefined) test2 = 2;
return test1 + test2;
}
// better
add = (test1 = 1, test2 = 2) => test1 + test2;
add(); //output: 3
条件查找简化
如果我们要基于不同的类型调用不同的方法，可以使用多个 else if 语句或 switch，但有没有比这更好的简化技巧呢？其实是前面的 switch 简化方式一样！
// bad
if (type === "test1") {
test1();
} else if (type === "test2") {
test2();
} else if (type === "test3") {
test3();
} else if (type === "test4") {
test4();
} else {
throw new Error("Invalid value " + type);
}
// better
var types = {
test1,
test2,
test3,
test4,
};
types[type] && types[type]();
对象属性赋值
let test1 = "a";
let test2 = "b";
// bad
let obj = { test1: test1, test2: test2 };
// better
let obj = { test1, test2 };
解构赋值
// bad
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
// better
const { test1, test2, test3 } = this.data;
模板字符串
如果你厌倦了使用 + 将多个变量连接成一个字符串，那么这个简化技巧将让你不再头痛。
// bad
const welcome = "Hi " + test1 + " " + test2 + ".";
// better
const welcome = `Hi ${test1} ${test2}`;
跨行字符串
// bad
const data =
"abc abc abc abc abc abcnt" + "test test,test test test testnt";
// better
const data = `abc abc abc abc abc abc
test test,test test test test`;
indexOf 的按位操作简化
在查找数组的某个值时，我们可以使用 indexOf() 方法。但有一种更好的方法，让我们来看一下这个例子。
// bad
if (arr.indexOf(item) > -1) {
// item found
}
if (arr.indexOf(item) === -1) {
// item not found
}
// better
if (~arr.indexOf(item)) {
// item found
}
if (!~arr.indexOf(item)) {
// item not found
}
按位 (~) 运算符将返回 true（-1 除外），反向操作只需要!~。另外，也可以使用 includes() 函数。
if (arr.includes(item)) {
// true if the item found
}
字符串转成数字
有一些内置的方法，例如 parseInt 和 parseFloat 可以用来将字符串转为数字。我们还可以简单地在字符串前提供一个一元运算符 (+) 来实现这一点。
// bad
let total = parseInt("453");
let average = parseFloat("42.6");
// better
let total = +"453";
let average = +"42.6";
顺序执行 promise
如果你有一堆异步或普通函数都返回 promise，要求你一个接一个地执行，怎么办？
async function getData() {
const promises = [fetch("url1"), fetch("url2"), fetch("url3"), fetch("url4")];
for (const item of promises) {
// 打印出promise
console.log(item);
}
// better
for await (const item of promises) {
// 打印出请求的结果
console.log(item);
}
}
等待所有 promise 完成
Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected，包装实例才会结束
有时候，我们不关心异步请求的结果，只关心所有的请求有没有结束。这时，Promise.allSettled()方法就很有用
const promises = [fetch("index.html"), fetch("https://does-not-exist/")];
const results = await Promise.allSettled(promises);
// 过滤出成功的请求
const successfulPromises = results.filter((p) => p.status === "fulfilled");
// 过滤出失败的请求，并输出原因
const errors = results
.filter((p) => p.status === "rejected")
.map((p) => p.reason);
交换数组元素的位置
// bad
const swapWay = (arr, i, j) => {
const newArr = [...arr];
let temp = newArr[i];
newArr[i] = list[j];
newArr[j] = temp;
return newArr;
};
ES6 开始，从数组中的不同位置交换值变得容易多了
// better
const swapWay = (arr, i, j) => {
const newArr = [...arr];
const [newArr[j],newArr[i]] = [newArr[i],newArr[j]];
return newArr;
};
使用变量作为对象键
当你有一个字符串变量，并想将其用作对象中的键以设置一个值时可以用它
let property = "a";
const obj = {
b: "b",
};
property = "name";
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="./images/1.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/2.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/3.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/4.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/5.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/6.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/7.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/8.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/9.png" />
</div>
<div class="img">
<img class="pic" alt="加载中" data-src="./images/10.png" />
</div>
</div>
</body>
</html>
<script>
// 获取所有的图片标签
const imgs =
document.getElementsByTagName('img')
// 获取可视区域的高度
const viewHeight = window.innerHeight ||
document.documentElement.clientHeight
// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
let num = 0
function lazyload(){
for(let i=num; i<imgs.length; i++) {
// 用可视区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - imgs[i].getBoundingClientRect().top
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
if(distance >= 0 ){
// 给元素写入真实的src，展示图片
imgs[i].src = imgs[i].getAttribute('data-src')
// 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
num = i + 1
}
}
}
// 监听Scroll事件
window.addEventListener('scroll', lazyload, false);
</script>
图片预加载
class PreLoadImage {
constructor(imgNode) {
// 获取真实的DOM节点
this.imgNode = imgNode;
}
// 操作img节点的src属性
setSrc(imgUrl) {
this.imgNode.src = imgUrl;
}
}
class ProxyImage {
// 占位图的url地址
static LOADING_URL = "xxxxxx";
constructor(targetImage) {
// 目标Image，即PreLoadImage实例
this.targetImage = targetImage;
}
// 该方法主要操作虚拟Image，完成加载
setSrc(targetUrl) {
// 真实img节点初始化时展示的是一个占位图
this.targetImage.setSrc(ProxyImage.LOADING_URL);
// 创建一个帮我们加载图片的虚拟Image实例
const virtualImage = new Image();
// 监听目标图片加载的情况，完成时再将DOM上的真实img节点的src属性设置为目标图片的url
virtualImage.onload = () => {
this.targetImage.setSrc(targetUrl);
};
// 设置src属性，虚拟Image实例开始加载图片
virtualImage.src = targetUrl;
}
}
ProxyImage 帮我们调度了预加载相关的工作，我们可以通过 ProxyImage 这个代理，实现对真实 img 节点的间接访问，并得到我们想要的效果。
https://www.ixiera.com
