30个常用的JavaScript简写技巧

一、语法简写优化

1.声明变量

(1)const、let、var区别

主要从以下几个方面区分：

• 作用域不同(是否含有块级元素)
• 是否存在暂时性死区
• 是否存在变量提升
• 能否重复声明
• 变量能否被修改

①作用域不同
块级作用域：声明的变量只在该代码块作用域内有效
var没有块级作用域，let、const有块级作用域

for (var i = 0; i < 5; i++) {
  console.log(i)
}
console.log('外层')
console.log(i)

以上代码var改为let

for (let i = 0; i < 5; i++) {
  console.log(i)
}
console.log('外层')
console.log(i)

有些人会有疑问，为什么日常开发中没有显式的声明块级作用域，let/const声明的变量却没有变为全局变量

这个其实也是let/const的特点，ES6规定它们不属于顶层全局变量的属性，这里用chrome调试一下。

可以看到使用let声明的变量x是在一个叫script作用域下的，而var声明的变量因为变量提升所以提升到了全局变量window对象中，这使我们能放心的使用新语法，不用担心污染全局的window对象

②暂时性死区：只要块级作用域有let、const命令，他们所声明的变量就绑定这个区域，不受外部影响

var a = 10
if (true) {
  console.log(a)
  var a = 20
}
// 10

以上代码改为以下let或const均报错:

var a = 10
if (true) {
  console.log(a)
  let a = 20
}
或
var a = 10
if (true) {
  console.log(a)
  const a = 20
}
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

③是否存在变量提升
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升问题(注意这个‘问题’后缀，其实是有提升的，只不过是let和const具有一个暂时性死区的概念，即没有到其赋值时，之前就不能用)，即它们所声明的变量一定要在声明后使用，否则报错。

console.log(a)
var a = 10
// undefined

console.log(a)
let a = 10 || const a = 10
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

④能否重复声明
var声明的可以重复声明, let和const在同一作用域不允许重复声明变量。其中const声明一个只读的常量(因为如此，其声明时就一定要赋值，不然报错)。一旦声明，常量的值就不能改变。

var a = 10
var a = 20
console.log(a) // 20
var a = 10
let a = 20 || const a = 20
console.log(a)  // 报错：Uncaught SyntaxError: Identifier 'a' has already been declared

⑤变量能否被修改
①var、let声明的变量可以被修改，const声明的常量不可修改。当然如果声明的是一个引用类型(如对象)，则不能改变它的内存地址,但是可以是对象内属性可变。 如何使const声明的对象内属性不可变，只可读呢？如果const声明了一个对象，对象里的属性是可以改变的。

var a = 10  || let a = 10
a = 20
console.log(a)  // 20
const a = 10
a = 20
console.log(a)  // 报错：Uncaught TypeError: Assignment to constant variable.

不能改变它的内存地址

//因为const声明的obj只是保存着其对象的引用地址，只要地址不变，就不会出错。
const obj={name:'蟹黄'};
obj.name='同学';
console.log(obj.name);//同学

使用Object.freeze(obj) 冻结obj,就能使其内的属性不可变,但它有局限，就是obj对象中要是有属性是对象，该对象内属性还能改变，要全不可变，就需要使用递归等方式一层一层全部冻结。

②const声明变量的时候必须赋值，否则会报错，同样使用const声明的变量被修改了也会报错

【建议】 在日常开发中，我的建议是全面拥抱let/const，一般的变量声明使用let关键字，而当声明一些配置项（类似接口地址，npm依赖包，分页器默认页数等一些一旦声明后就不会改变的变量）的时候可以使用const，来显式的告诉项目其他开发者，这个变量是不能改变的(const声明的常量建议使用全大写字母标识,单词间用下划线)，同时也建议了解var关键字的缺陷（变量提升，污染全局变量等），这样才能更好的使用新语法。

(2)多个变量同时声明时用逗号分隔

//Longhand
let x;
let y = 20;
//Shorthand
let x, y = 20;

2.给多个变量赋值

我们可以使用数组解构来在一行中给多个变量赋值。

//Longhand
let a, b, c;
a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

8. 交换两个变量

为了交换两个变量，我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。

let x = 'Hello', y = 55;
//Longhand
const temp = x;
x = y;
y = temp;
//Shorthand
[x, y] = [y, x];

类型转换

(1) 数字转字符串

//Longhand
let num = 15;
let s = num.toString(); // number to string
// 专业
let num = 15;
let s = num + ""; //number to string

(2) 字符串转数字

有一些内置的方法，例如Number、parseInt、parseFloat可以用来将字符串转为数字。我们还可以简单地在字符串前提供一个一元运算符 (+) 来实现这一点。

//Longhand
let total = parseInt('453');
let average = parseFloat('42.6');
let n = Number('88'); 
//Shorthand
let total = +'453';
let average = +'42.6';
let n = +'88';

(3)

// 菜鸟
let number = {
	one: 1
	two: 2
 }
let keys = [];
for (let numbers in numbers) {
if (number.hasOwnProperty(number)) {
  keys.push(number);
}
//keys = ['one','two']

//
let number = {
	one: 1
	two: 2
 }
let key = Object.keys(numbers); // key = [ one', 'two' ]
let value = Object.values(numbers); // value = [ 1,2 ]
let entry = Object.entries(numbers); / entry = [['one' : 1],['two' : 1]]

3.简化分支条件语句

(1)三元运算符简化分支条件语句

①我们可以使用三元（条件）运算符在这里节省 5 行代码。

//Longhand
let marks = 26;
let result;
if(marks >= 30){
 result = 'Pass';
}else{
 result = 'Fail';
}
//Shorthand
let result = marks >= 30 ? 'Pass' : 'Fail';

②简短的函数调用语句

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}
// Shorthand
(test3 === 1? test1:test2)();

③三元表达式可以做复杂的条件分支判断，不过牺牲了一些可读性：

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

(2)key-value简化switch

例1

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

例2

//Longhand
const UserRole = {
  ADMIN: "Admin",
  GENERAL_USER: "GeneralUser",
  SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){


  switch(userRole){
    case UserRole.ADMIN:
      return "/admin"
    case UserRole.GENERAL_USER:
        return "/GENERAL_USER"
    case UserRole.SUPER_ADMIN:
        return "/superadmin"
    default:
      return "/" 
  }

}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path

// More cases if new arrive
// You can think if else instead of switch

// Shorthand
const UserRole = {
   ADMIN: "Admin",
   GENERAL_USER: "GeneralUser",
   SUPER_ADMIN: "SuperAdmin",
};
function getRoute(userRole = "default role"){
 const appRoute = {
  [UserRole.ADMIN]: "/admin",
  [UserRole.GENERAL_USER]: "/user",
  [UserRole.SUPER_ADMIN]: "/superadmin"
 };
 return appRoute[userRole] || "Default path";
}
console.log(getRoute(UserRole.ADMIN)) // return "/admin"
console.log(getRoute("Anything")) // return Default path
console.log(getRoute()) // return Default path
console.log(getRoute(null)) // return Default path
// No more switch/if-else here.
// Easy to Further expansion

(3)用key-value简化if…else…

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

参考阅读

1. 8种逻辑判断写法:JavaScript 复杂判断的更优雅写法
2. 代码太多if else？教你优化代码，老大对你刮目相看！

4. 多条件检查（含有多个条件的 if 语句）

对于多个值匹配，我们可以将所有的值放到数组中，然后使用indexOf()或includes()方法。

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
     // Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
    // Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {
    // Execute some code
}

5.判断变量是否存在的缩写法

这是普遍使用的缩写法，但在这里应当提一下。

// Longhand
if (test1 === true) or if (test1 !== "") or if (test1 !== null)

// Shorthand 
//it will check empty string,null and undefined too
if (test1)

注意：当 test1 为任何值时，程序都会执行 if(test1){ } 内的逻辑，这种写法在判断 NULL 或 undefined 值时普遍使用。

6. 使用||、??、!!对 Null、Undefined、Empty 这些值的检查

(1) 我们可以使用 OR(||) 短路运算来给一个变量赋默认值，如果预期值不正确的情况下。

//Longhand
let imagePath;
let path = getImagePath();
if(path !== null && path !== undefined && path !== '') {
  imagePath = path;
} else {
  imagePath = 'default.jpg';
}
//Shorthand
let imagePath = getImagePath() || 'default.jpg';

我们创建一个新变量，有时候需要检查是否为 Null 或 Undefined。JavaScript 本身就有一种缩写法能实现这种功能。

// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}
// Shorthand
let test2 = test1 || '';

(2)对 Null 值的检查以及默认赋值

let test1 = null,
    test2 = test1 || '';
console.log("null check", test2); // output will be ""

(3)对 Undefined 值的检查以及默认赋值

let test1 = undefined,
    test2 = test1 || '';
console.log("undefined check", test2); // output will be ""

(4)对正常值的检查

let test1 = 'test',
    test2 = test1 || '';
console.log(test2); // output: 'test'

(5) 聚合运算符

?? 是聚合运算符，又称为空值合并运算符，如果左值为 null 或 undefined，就返回右值。默认返回左值。

const test= null ?? 'default';
console.log(test);
// expected output: "default"const test1 = 0 ?? 2;
console.log(test1);
// expected output: 0

(6)比较结果的返回

在 return 语句中，我们也可以使用比较的语句。这样，原来需要 5 行代码才能实现的功能，现在只需要 1 行，大大减少了代码量。

// Longhand
let test;function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output testfunction callMe(val) {
    console.log(val);
}// Shorthandfunction checkReturn() {
    return test || callMe('test');
}

MDN
(7)js中!和!!的区别及用法
在 JavaScript 中，你可以使用 !! 在 JS 中将任何内容转换为布尔值。

例如，这里有一些例子：

!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true


!!false   // false
!!0       // false
!!""      // false

js中!和!!的区别及用法

7. 与 (&&) 短路运算

如果你只有当某个变量为 true 时调用一个函数，那么你可以使用与 (&&)短路形式书写。

//Longhand
if (isLoggedin) {
 goToHomepage();
}
//Shorthand
isLoggedin && goToHomepage();

当你在 React 中想要有条件地渲染某个组件时，这个与 (&&)短路写法比较有用。例如：

<div> { this.state.isLoading && <Loading /> } </div>

9. 箭头函数

隐式返回缩写法：使用箭头函数，我们可以直接得到函数执行结果，不需要写 return 语句。

//Longhand
function add(num1, num2) {
   return num1 + num2;
}
//Shorthand
const add = (num1, num2) => num1 + num2;

参考:JavaScript Arrow function
https://jscurious.com/javascript-arrow-function/

10. 赋值运算符缩写法

编程中使用算术运算符是很常见的情况。以下是 JavaScript 中赋值运算符的应用。

// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// Shorthand
test1++;
test2--;
test3 *= 20;

11. 延展操作符的缩写法

//longhand// joining arrays using concat
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);
//shorthand// joining arrays
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

我们也可以使用延展操作符来克隆。

//longhand

// cloning arrays
const test1 = [1, 2, 3];
const test2 = test1.slice()
//shorthand

// cloning arrays
const test1 = [1, 2, 3];
const test2 = [...test1];

12. Array.find/filter/map缩写法

当我们需要在一个对象数组中按属性值查找特定对象时，find 方法很有用。

const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

使用filter方法过滤原数组，形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    if (arr[i] > 4) {
        newArr.push(arr[i])
    }
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.filter(n => n > 4) // [5, 7]

使用map对数组中所有元素批量处理，形成新数组

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    newArr.push(arr[i] + 1)
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.map(n => n + 1) // [2, 4, 6, 8]

13. 默认参数值 / 默认对象

(1).使用默认参数代替短路或条件

①函数参数默认参数值

//Longhand
function add(test1, test2) {
  if (test1 === undefined)
    test1 = 1;
  if (test2 === undefined)
    test2 = 2;
  return test1 + test2;
}
//shorthand
add = (test1 = 1, test2 = 2) => (test1 + test2);add() //output: 3

②默认参数通常比短路更干净，并且false值，如’'，“”，false，null，0，和NaN将不会被默认值替代：

//短路写法
function SomeMethod(paramThatCanBeUndefined) {

   const localValue = paramThatCanBeUndefined || "Default Value";
   console.log(localValue)
   // ...
}
SomeMethod() // Default Value
SomeMethod("SomeValue") // SomeValue

//默认参数写法
function SomeMethod(paramThatCanBeUndefined = "Default Value") {        
  console.log(paramThatCanBeUndefined)  
  // ...
}
SomeMethod() // Default Value
SomeMethod(null) // will not Default Value, will null Instead
SomeMethod("SomeValue") // SomeValue

(2).使用Object.assign设置默认对象
这看起来很繁琐：

const someObject = {
 title: null,
 subTitle: "Subtitle",
 buttonColor: null,
 disabled: true
};
function createOption(someObject) {
 someObject.title = someObject.title || "Default Title";
 someObject.subTitle = someObject.subTitle || "Default Subtitle";
 someObject.buttonColor = someObject.buttonColor || "blue";
 someObject.disabled = someObject.disabled !== undefined ?  someObject.disabled : true;
 return someObject
}
console.log(createOption(someObject));

// Output be like 
// {title: 'Default Title', subTitle: 'Su

这种方法看起来更好：

const someObject = {
  title: null,
  subTitle: "Subtitle",
  buttonColor: null,
  disabled: true
 };
 function creteOption(someObject) {
  const newObject = Object.assign({
   title: "Default Title",
   subTitle: "Default Subtitle",
   buttonColor: "blue",
   disabled: true
 },someObject)
 return newObject
 }
 console.log(creteOption(someObject));

14. 模板字符串

(1)模板字符串和"+"拼接对比

我们一般使用 + 运算符来连接字符串变量。使用 ES6 的模板字符串，我们可以用一种更简单的方法实现这一点。

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);
//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

(2)${}中可以放入任意的JavaScript表达式

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

吐槽: 像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

改进

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

15. 多行字符串

对于多行字符串，我们一般使用 + 运算符以及一个新行转义字符（\n）。我们可以使用 (`) 以一种更简单的方式实现。

//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' +
'ECMAScript specification. JavaScript is high-level,\n' +
'often just-in-time compiled, and multi-paradigm.' );
//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

17. 重复一个字符串多次

为了重复一个字符串 N 次，你可以使用for循环。但是使用repeat()方法，我们可以一行代码就搞定。

//Longhand
let str = '';
for(let i = 0; i < 5; i ++) {
  str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
// Shorthand
'Hello '.repeat(5);

提示： 想要给某人发 100 遍“sorry”来道歉吗？用 repeat() 方法试试吧。如果你想要每次在新的一行重复字符串，可以在字符串后面加一个 \n 。

'sorry\n'.repeat(100);

18.获取字符串中的字符

let str = 'abc';
//Longhand 
str.charAt(2); // c
//Shorthand 
//注意：如果事先知道目标字符在字符串中的索引，我们可以直接使用该索引值。如果索引值不确定，运行时就有可能抛出 undefined。
str[2]; // c

19. 对象属性复制

如果变量名和对象的属性名相同，那么我们只需要在对象语句中声明变量名，而不是同时声明键和值。JavaScript 会自动将键作为变量的名，将值作为变量的值。

let firstname = 'Amitav';
let lastname = 'Mishra';
//Longhand
let obj = {firstname: firstname, lastname: lastname};
//Shorthand
let obj = {firstname, lastname};

20. 指数幂

我们可以使用Math.pow()方法来得到一个数字的幂。有一种更短的语法来实现，即双星号 (**)。

//Longhand
const power = Math.pow(4, 3); // 64
// Shorthand
const power = 4**3; // 64

21. 双非位运算符 (~~)

(两个按位非运算符只适用于 32 位整型)

//Longhand
const floor = Math.floor(6.8); // 6
// Shorthand
const floor = ~~6.8; // 6

来自 Caleb 的评论的改进： 双非位运算符只对 32 位整数有效，例如 (2**31)-1 = 2147483647。所以对于任何大于 2147483647 的数字，双非位运算符 (~~) 都会给出错误的结果，这种情况下推荐使用 Math.floor() 方法。

22. 找出数组中的最大和最小数字

我们可以使用 for 循环来遍历数组中的每一个值，然后找出最大或最小值。我们还可以使用 Array.reduce() 方法来找出数组中的最大和最小数字。

但是使用扩展符号，我们一行就可以实现。

// Shorthand
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

23. For 循环

(1)为了遍历一个数组，我们一般使用传统的for循环。我们可以使用for…of来遍历数组。为了获取每个值的索引，我们可以使用for…in循环。

let arr = [10, 20, 30, 40];
//Longhand
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Shorthand
//for of loop
for (const val of arr) {
  console.log(val);
}
//for in loop
for (const index in arr) {
  console.log(arr[index]);
}

// Longhand
for (var i = 0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

(2)Array for each variable

function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// logs: test[0] = 11, test[1] = 24, test[2] = 32

(3)我们还可以使用for…in循环来遍历对象属性。

let obj = {x: 20, y: 50};
for (const key in obj) {
  console.log(obj[key]);
}

参考：
JavaScript 中遍历对象和数组的不同方法

24. 合并数组

const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];

// LONG FORM
let newArray = nums1.concat(nums2);


// SHORTHAND
newArray = [...nums1, ...nums2];

25. 深拷贝多级对象

为了深拷贝一个多级对象，我们要遍历每一个属性并检查当前属性是否包含一个对象。如果当前属性包含一个对象，然后要将当前属性值作为参数递归调用相同的方法（例如，嵌套的对象）。

我们可以使用JSON.stringify()和JSON.parse()，如果我们的对象不包含函数、undefined、NaN 或日期值的话。

如果有一个单级对象，例如没有嵌套的对象，那么我们也可以使用扩展符来实现深拷贝。

let obj = {x: 20, y: {z: 30}};
//Longhand
const makeDeepClone = (obj) => {
  let newObject = {};
  Object.keys(obj).map(key => {
    if(typeof obj[key] === 'object'){
      newObject[key] = makeDeepClone(obj[key]);
    } else {
      newObject[key] = obj[key];
    }
  });
 return newObject;
}
const cloneObj = makeDeepClone(obj);
//Shorthand
const cloneObj = JSON.parse(JSON.stringify(obj));
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

来自评论的改进：如果你的对象包含 function, undefined or NaN 值的话，JSON.parse(JSON.stringify(obj)) 就不会有效。因为当你 JSON.stringify 对象的时候，包含 function, undefined or NaN 值的属性会从对象中移除。因此，当你的对象只包含字符串和数字值时，可以使用JSON.parse(JSON.stringify(obj))。
参考：JSON.parse() 和 JSON.stringify()

26. 获取字符串中的字符

let str = 'jscurious.com';
//Longhand
str.charAt(2); // c
//Shorthand
str[2]; // c

27. 数字分隔符

这是比较新的语法，ES2021 提出来的，数字字面量可以用下划线分割，提高了大数字的可读性：

// 旧语法
let number = 98234567

// 新语法
let number = 98_234_567

28.数据解构

const a1 = this.data.a1;
const a2 = this.data.a2;
const a3 = this.data.a3;

// 优化
const { a1, a2, a3 } = this.data;

29.Object.entries()

我们可以通过 Object.values() 将对象的内容转化为数组。如下：

const data = { a1: 'abc', a2: 'cde', a3: 'efg' };
Object.entries(data);

/** 输出:
[ [ 'a1', 'abc' ],
  [ 'a2', 'cde' ],
  [ 'a3', 'efg' ]
]
**/

30.Object.values()

这也是 ES8 中介绍的一个新特性，它的功能与 Object.entries() 类似，但没有其核心功能：

const data = { a1: 'abc', a2: 'cde' };
Object.values(data);

/** 输出:
[ 'abc', 'cde']
**/

31.过滤错误值

如果要过滤数组中的false、0、null、undefined等值，可以这样做：

const array = [1, 0, undefined, 6, 7, ‘’, false];
array.filter(Boolean);

1.代码整洁之道
2.2021 年需要了解的 34 个 JavaScript 优化技巧
3.葵花宝典之【前端代码简洁20招】
4.高级前端工程师都在用的17 个JavaScript专业技巧