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;
}