前端小技巧-JS篇
你可能不知道的一些前端小技巧,干货满满~
If-Else 用 || 或 ?? 运算符进行简化
逻辑或操作符||
这里要注意的是0和''也会认为是false
function(obj){
var a = obj || {}
}
// 等价于 =>>
function(obj){
var a;
if(
obj === 0 ||
obj === "" ||
obj === false ||
obj === null ||
obj === undefined
){
a = {}
} else {
a = obj;
}
}
空值合并操作符??
如果没有定义左侧返回右侧。如果是,则返回左侧
function(obj){
var a = obj ?? {}
}
// 等价于 =>>
function(obj){
var a;
if(
obj === null ||
obj === undefined
){
a = {}
} else {
a = obj;
}
}
输入框非空的判断(有时候不想把0当成false可以用此方法)
if(value !== null && value !== undefined && value !== ''){}
// 等价于 ==>
if((value ?? '') !== ''){}
防止崩溃的可选链(?.)
可选链操作符?.
如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。
在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。
const student = {
name: "Matt",
age: 27,
address: {
state: "New York"
},
};
// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined
// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined
逻辑空赋值(??=)
逻辑空赋值??=
逻辑空赋值运算符(x ??= y)
仅在 x 是 nullish (null 或 undefined) 时对其赋值。
const a = { duration: 50 };
a.duration ??= 10;
console.log(a.duration);
// expected output: 50
a.speed ??= 25;
console.log(a.speed);
// expected output: 25
快速生成1-10的数组
生成0-10
// 方法一
const arr1 = [...new Array(10).keys()]
// 方法二
const arr2 = Array.from(Array(10), (v, k) => k)
生成1-10
const arr2 = [...Array(10)].map((v, i) => i + 1)
快速生成10个0的数组
const arr = new Array(10).fill(0)
快速生成10个[]的数组(二维数组)
二维数组不能直接写成new Array(10).fill([])
,fill里传入引用类型值会导致每一个数组都指向同一个地址,改变一个数据的时候其他数据也会随之改变,详见mdn官方说明
const arr = new Array(10).fill().map(() => new Array())
从数组中删除重复项
在 JavaScript 中,Set 是一个集合,它允许你仅存储唯一值。这意味着删除任何重复的值。
因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
它是如何工作的?
new Set(numbers)
从数字列表中创建一个集合。创建集合会自动删除所有重复值。- 展开运算符
...
将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]
在没有第三个变量的情况下交换两个变量
在 JavaScript 中,你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个
let x = 1;
let y = 2;
// LONGER FORM
let temp = x;
x = y;
y = temp;
// SHORTHAND
[x, y] = [y, x];
将对象的值收集到数组中
用于Object.values()
将对象的所有值收集到一个新数组中
const info = { name: "Matt", country: "Finland", age: 35 };
// LONGER FORM
let data = [];
for (let key in info) {
data.push(info[key]);
}
// SHORTHAND
const data = Object.values(info);
指数运算符
你Math.pow()
习惯把一个数字提高到一个幂吗?你知道你也可以使用**
运算符吗?
// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8
// SHORTHAND
4**2 // 16
2**3 // 8
Math.floor() 简写
四舍五入Math.floor()
并不是什么新鲜事。但是你知道你也可以使用~~
运算符吗?
// LONG FORM
Math.floor(5.25) // -> 5.0
// SHORTHAND
~~5.25 // -> 5.0
完结~