分享19个JavaScript 有用的简写写法

下面为您详细讲解“分享19个JavaScript 有用的简写写法”的完整攻略。

前言

JavaScript 是目前应用广泛的编程语言之一，对于初学者来说，熟练使用一些简写写法可以提高编码效率，降低调试成本。本文将分享19个 JavaScript 有用的简写写法，方便开发者们在使用 JavaScript 过程中更加高效、便捷地完成编码工作。

内容

1. Ternary Operator 简写

使用三元表达式替代 if-else 表达式进行判断，以达到简化代码的目的。

const x = 3;
let text = "";

if (x > 5) {
  text = "x 大于 5";
} else {
  text = "x 小于等于 5";
}

// 简写为：
const text = x > 5 ? "x 大于 5" : "x 小于等于 5";

2. 合并数组简写

使用 es6 的 ... 语法来简写数组合并操作。

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [6];

// 普通写法
const arr4 = arr1.concat(arr2).concat(arr3);

// 简写为
const arr4 = [...arr1, ...arr2, ...arr3];

3. 对象属性简写

在对象定义时，可以将属性简写为一个枚举变量。

const name = "张三";
const age = 18;

// 普通写法
const obj1 = { name: name, age: age };

// 简写为
const obj2 = { name, age };

4. 分解数组简写

可以使用 [] 数组解构来生成和分解数组。该语法常用于调用函数返回多个值时。

const arr = [1, 2, 3];

// 普通写法
const x = arr[0];
const y = arr[1];
const z = arr[2];

// 简写为
const [x, y, z] = arr;

5. 分解对象简写

类似第四条，“{}”对象解构可用于分解对象，以获取对象的属性值。

const user = { name: "张三", age: 18, sex: "男" };

// 普通写法
const name = user.name;
const age = user.age;

// 简写为
const { name, age } = user;

6. 箭头函数简写

使用箭头函数写单行代码，可以代替传统函数定义语法。

// 普通写法
function square(x) {
  return x * x;
}

// 箭头函数简写
const square = (x) => x * x;

7. 箭头函数和 map() 的简写

使用箭头函数和 map() 简写完成遍历数组并加倍。

const arr1 = [1, 2, 3];

// 普通写法
const arr2 = arr1.map(function (num) {
  return num * 2;
});

// 箭头函数和 map() 简写
const arr2 = arr1.map((num) => num * 2);

8. 使用默认参数值简写

可以使用默认参数值来简化函数参数的初始化操作。

// 普通写法
function sayHello(name) {
  if (name === undefined) {
    name = "张三";
  }

  console.log("你好，" + name);
}

// 简写为
function sayHello(name = "张三") {
  console.log("你好，" + name);
}

9. 字符串连接简写

使用${}操作符来简写字符串连接操作。

const name = "张三";
const age = 18;

// 普通写法
const message = "我的名字是 " + name + "，年龄是 " + age;

// 简写为
const message = `我的名字是 ${name}，年龄是 ${age}`;

10. forEach() 简写

使用 forEach() 方法实现遍历数组。

const arr1 = [1, 2, 3];

// 普通写法
arr1.forEach(function (x) {
  console.log(x);
});

// 简写为
arr1.forEach((x) => console.log(x));

11. Find() 简写

使用 find() 方法来查找数组中的元素。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const x = arr1.find(function (num) {
  return num > 3;
});

// 简写为
const x = arr1.find((num) => num > 3);

12. Filter() 简写

Filter() 方法根据指定条件返回数组元素。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const arr2 = arr1.filter(function (num) {
  return num > 3;
});

// 简写为
const arr2 = arr1.filter((num) => num > 3);

13. Some() 简写

some() 方法判断数组中是否包含指定元素。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const isLargeNumber = arr1.some(function (num) {
  return num > 3;
});

// 简写为
const isLargeNumber = arr1.some((num) => num > 3);

14. Every() 简写

every() 方法判断数组中所有元素是否都符合指定条件。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const isAllLargeNumber = arr1.every(function (num) {
  return num > 0;
});

// 简写为
const isAllLargeNumber = arr1.every((num) => num > 0);

15. Reduce() 简写

reduce() 方法将数组中的所有元素缩减为一个值。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const sum1 = arr1.reduce(function (total, num) {
  return total + num;
}, 0);

// 简写为
const sum2 = arr1.reduce((total, num) => total + num, 0);

16. Promise() 简写

使用 Promise() 方法实现异步操作的简写方法。

// 普通写法
function getData(url) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function () {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject("Error occurred");
      }
    };
    xhr.onerror = function () {
      reject("Error occurred");
    };
    xhr.send();
  });
}

// 简写为
function getData(url) {
  return fetch(url)
    .then((response) => response.json())
    .catch((error) => console.error(error));
}

17. 延迟执行简写

使用 setTimeout() 方法实现延迟执行的简写方法。

// 普通写法
setTimeout(function () {
  console.log("hello world");
}, 3000);

// 简写为
setTimeout(() => console.log("hello world"), 3000);

18. 求数组元素最大值简写

使用 Math.max() 方法求出数组中的最大值。

const arr1 = [1, 2, 3, 4, 5];

// 普通写法
const max1 = Math.max(...arr1);

// 简写为
const max2 = Math.max.apply(null, arr1);

19. 获取 URL 参数简写

用于获取 URL 参数的简写方法。

// 获取 URL 参数
const urlParams = new URLSearchParams(window.location.search);

// 获取指定参数
const id = urlParams.get("id");

结语

本文分享了19个 JavaScript 有用的简写写法，希望对开发者们在工作中有所帮助。使用简写写法需要注意语法规范、易读性和代码质量等方面的问题，不可一味地追求简单快捷，而忽略了代码的可维护性和阅读性。