JavaScript实用代码片段

单行if-else语句

如果if-else语句中只有一条语句，那么可以使用三目运算符代替。
例如：

const AGE = 10;
let ageGroup;
// before
if (AGE > 18) {
  ageGroup = 'An adult';
} else {
  ageGroup = 'A child';
}
// after
ageGroup = AGE > 18 ? 'An adult' : 'A child';

相较于简单的if-else语句，三目运算符可能会增加代码的阅读难度，因此需要选择简单的表达式进行替换。

从数组中删除重复项

利用ES6中新增的集合Set

• Set是一个集合，集合中的值不能重复

const NUMBERS = [1, 1, 2, 3, 5, 5, 8, 9, 9];
const UNIQUE = [...new Set(NUMBERS)]; // → [ 1, 2, 3, 5, 8, 9 ]

原理：

• 首先将NUMBERS中数据存储在Set中，创建Set会删除数组中重复值
• 利用展开运算符号...将任意可迭代对象转换为数组，将集合转换为数组。

利用??空值合并操作符

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。

• 判断数据是否为null或undefined

  let temp;
  let demo = 1;
  console.log(temp ?? "Not found"); // → Not found
  console.log(demo ?? "Not found"); // → 1
  

• 给变量设置初始值

  const DEMO = null ?? 'DEFAULT STRING';
  console.log(DEMO); // → DEFAULT STRING
  const DEMO1 = 0 ?? 'DEFAULT STRING';
  console.log(DEMO1); // → 0
  const DEMO2 = "" ?? 'DEFAULT STRING';
  console.log(DEMO2); // → ""
  

利用?.可选链操作符防止错误

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值

let DEMO = {
  name: "kai",
  age: 24,
  gender: "boy"
}
console.log(DEMO?.age); // → 24
console.log(DEMO.age); // → 24
DEMO = null;
console.log(DEMO?.sex); // → undefined
console.log(DEMO.sex); // → 报错 TypeError: Cannot read property 'sex' of null

短路计算

const DEMO = null;
let x = 0;
const RES = DEMO?.[x++];
console.log(x);  // → 0

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算

在没有第三个变量的情况下交换两个变量

在 JavaScript 中，可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

let x = 1, y = 2;
// before
let temp;
temp = x;
x = y;
y = temp;
// after
[x, y] = [y, x]

使用!!将内容转换为布尔值

在JavaScript中，可以使用!!将任何内容转换为布尔值，例如：

console.log(!!true); // → true
console.log(!!2); // → true
console.log(!![]); // → true
console.log(!!"Test"); // → true
console.log(!!-1); // → true
console.log(!!false); // → false
console.log(!!0); // → false
console.log(!!""); // → false

扩展运算符

使用扩展运算符合并两个数组…：

const DEMO1 = [1, 2, 3];
const DEMO2 = [4, 5, 6];
// before
const DEMO3 = DEMO1.concat(DEMO2);
// after
const DEMO4 = [...DEMO1, ...DEMO2];
let DEMO = [];
// before
DEMO.push(1);
DEMO.push(2);
// after
DEMO = [...DEMO, 3, 4];

传播解构

使用扩展运算符将剩余元素分配给变量：

const student = {
  name: "kai",
  age: 24,
  city: "beijing",
  state: "university",
};
// before
const name = student.name;
const age = student.age;
const address = {city: student.city, state: student.state};
// after
const {name, age, ...address} = student;

使用 && 进行短路评估

不必用if语句检查某事是否为真，使用&&运算符：

const TEMP = true;
function DEMO() {
  console.log("Yay!");
}
// before
if (TEMP) {
  DEMO();
}
// after
TEMP && DEMO();

模板字符串

通过将字符串包装在反引号内并${}用于嵌入值，从而在字符串之间插入变量。

const SOMETHING = '白菜';
const MOOD = '高兴';
const STR = `我买了${SOMETHING}很${MOOD}` // → 我买了白菜很高兴

从数组中查找特定元素

使用find()方法查找匹配特定条件的元素：

const STUDENT = [
  {name: "kai", age: 24},
  {name: "hui", age: 23}
];
let name;
// before
for (let i = 0; i < STUDENT.length; ++i) {
  if (STUDENT[i].age === 23) {
    name = STUDENT[i].name;
  }
}
// SHORTHAND
name = STUDENT.find(item => item.age === 23);

对象属性赋值

对象赋值的时候省略键名称使得键值保持一致

const name = 'kai', age = 24;
// before
const PERSON = {
  name: name,
  age: age
};
// after 
const PERSON = {name, age};

使用forEach代替For循环

const NUMBERS = [1, 2, 3];
// before
for (let i = 0; i < NUMBERS.length; i++) {
  console.log(NUMBERS[i]);
}
// after
NUMBERS.forEach(number => console.log(number))

使用默认参数

为函数参数提供默认值

// before 
function DEMO(params) {
  if (params === undefined) {
    params = 'DEFAULT';
  } else {
    console.log(params);
  }
}

// after
function DEMO(params = 'DEFAULT') {
  console.log(params)
}

将对象的键、值收集到数组中

使用Object.keys()收集对象的键

使用Object.values()收集对象的值

const OBJ = {
  name: 'kai',
  age: 24
}
const KEYS = Object.keys(OBJ);
const VALUES = Object.values(OBJ);
console.log(KEYS);  // → [ 'name', 'age' ]
console.log(VALUES); // → [ 'kai', 24 ]

检查一个项目是否存在于数组中

使用 includes() 方法来检查元素是否在数组

const NUMBERS = [1, 2, 3];
// before
console.log(NUMBERS.indexOf(1) > -1); // → true
// after
console.log(NUMBERS.includes(1)); // → true

压缩多个条件

避免使用长|| 检查多个条件链，可以使用刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;
// before
if(num === 1 || num === 2 || num === 3){
  console.log("Yep");
}
// after
if([1,2,3].includes(num)){
  console.log("Yep");
}

指数运算符

使用**运算符代替Math.pow()

// before
console.log(Math.pow(4, 2)); // → 16
console.log(Math.pow(2, 3)); // → 8
// after
console.log(4 ** 2); // → 16
console.log(2 ** 3); // → 8

Math.floor() 简写

使用~~运算符代替Math.floor()

// before
console.log(Math.floor(5.25)); // → 5.0
// SHORTHAND
console.log(~~5.25); // → 5.0

用一行代码分配多个值

let demo1, demo2;
// before
demo1 = 1;
demo2 = 2;
console.log(demo1); // → 1
console.log(demo2); // → 2
// after
[demo1, demo2] = [1, 2];
console.log(demo1); // → 1
console.log(demo2); // → 2
const PERSON = {
  name: "kai",
  age: 24,
};
// before
let name = PERSON.name;
let age = PERSON.age;
// after
let {name, age} = PERSON;