js简单化技巧
1.交换两个变量而没有第三个
let x = 1;let y = 2;[x, y] = [y, x];console.log(x, y);
输出:
2 1
2、将数字转换为字符串
const num = 1 +“”;console.log(typeof num); console.log(num);
输出:
string1
3、将字符串转换为数字
const numStr = "124";const num = +numStr;console.log(typeof num);console.log(num);
输出:
number 124
4、将字符串拆分为数组
要将字符串拆分为数组,可以使用扩展运算符(...):
const str = "Test"const strAsArr = [...str]console.log(strAsArr)
输出:
["T", "e", "s", "t"]
5、可选链接
“可选的链接运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。” — MDN Web文档
假设你有一个data对象,并且想要安全地访问data.test.value。首先,你需要检查:
-
data 是否被定义。
-
data.test 是否被定义。
在data.test.value,你可以调用之前,因为,你显然无法读取undefined属性。
const data = {test:{value:1}}if(data && data.test){ console.log(data.test.value); }
输出:
1
幸运的是,使用可选链接的方法,你可以简单明了地编写上面的代码:
const value = data?.test?.value;console.log(value)
输出:
1
现在,你还可以安全地尝试访问不存在的属性,而不会出现问题:
console.log(data?.this?.does?.not?.exist?.for?.sure)
输出:
undefined
6、 较短的 If-Else 的空合并
这也是 if-else 的简写。
你可以使用看涨合并,而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??,如果没有定义左侧返回右侧。如果是,则返回左侧:
let maybeSomething;
// LONG FORM
if(maybeSomething){
console.log(maybeSomething)
} else {
console.log("Nothing found")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")
7、传播解构
使用扩展运算符将剩余元素分配给变量:
const student = {
name: "Matt",
age: 23,
city: "Helsinki",
state: "Finland",
};
// LONGER FORM
const name = student.name;
const age = student.age;
const address = { city: student.city, state: student.state };
// SHORTHAND
const { name, age, ...address } = student;
8、 从数组中查找特定元素
使用find()方法查找匹配特定条件的元素:
const fruits = [
{ type: "Banana", color: "Yellow" },
{ type: "Apple", color: "Green" }
];
// LONGER FORM
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) {
if (fruits[i].color === "Yellow") {
yellowFruit = fruits[i];
}
}
// SHORTHAND
yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");
9.将对象的值收集到数组中
用于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); // values值集合数组
const data = Object.keys(info);
// key值集合数组
10.压缩多个条件
避免使用长|| 检查多个条件链,你可以使用你刚刚在上一个技巧中学到的东西——即,使用 includes() 方法:
const num = 1;
// LONGER FORM
if(num == 1 || num == 2 || num == 3){
console.log("Yay");
}
// SHORTHAND
if([1,2,3].includes(num)){
console.log("Yay");
}
11、 指数运算符
你Math.pow()习惯把一个数字提高到一个幂吗?你知道你也可以使用**运算符吗?
// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8
// SHORTHAND
4**2 // 16
2**3 // 8
12、 Math.floor() 简写
四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗?
例如:
// LONG FORM
Math.floor(5.25) // -> 5.0
// SHORTHAND
~~5.25 // -> 5.0
13.用一行代码分配多个值(解构赋值)
使用解构语法在一行中分配多个值:
let num1, num2;
// LONGER FORM
num1 = 10;
num2 = 100;
// SHORTHAND
[num1, num2] = [10, 100];
这也适用于使用 JavaScript 对象:
student = {
name: "Matt",
age: 29,
};
// LONGER FORM
let name = student.name;
let age = student.age;
// SHORTHAND
let { name, age } = student;
14、JS 错误处理的方式的正确姿势(直接定位错误原因)
try {
// something
} catch (e) {
window.location.href =
"http://stackoverflow.com/search?q=[js]+" + e.message;
}
本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/15307318.html