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 =
"//stackoverflow.com/search?q=[js]+" + e.message;
}