广州蓝景分享—开发人员都知道的JavaScript技巧

JavaScript包含各种对典型编程思想有用的一些技巧，在实际开发中，我们通常希望减少代码行数；因此，今天这些技巧代码希望可以帮助到你。
现在我们就开始今天的内容吧。
1、与Javascript对象相关的

01)、对象解构

将对象的值解构为变量是另一种在传统点表示法之外读取其值的方法。
下面的示例比较了用于读取对象值的经典点表示法和对象解构快捷方式。

const restaurant = {
  name: "Classico Italiano",
  menu: ["Garlic", "Bread", "Salad", "Pizza", "Pasta"],
  openingHours: {
    friday: { open: 11, close: 24 },
    saturday: { open: 12, close: 23 },
  },
};
// Longhand
console.log("value of friday in restaurant:", restaurant.openingHours.friday);
console.log("value of name in restaurant:", restaurant.name);
// Shorthand
const { name, openingHours } = restaurant;
const { openingHours: { friday } } = restaurant;
//we can go further and get the value of open in friday
const { openingHours: { friday: { open } } } = restaurant;
console.log(name, friday, open);

02）、Object.entries()

Object.entries() 是 ES8 中引入的一项功能，它允许您将文字对象转换为键/值对数组。

const credits = {
  producer: "Open Replay",
  editor: "Federico",
  assistant: "John",
};
const arr = Object.entries(credits);
console.log(arr);
Output: [
  ["producer", "Open Replay"],
  ["editor", "Federico"],
  ["assistant", "John"],
];

03）、Object.values()

Object.values() 也是 ES8 中引入的新特性，与 Object 具有类似的功能。entries() 但这没有关键部分：

const credits = {
  producer: "Open Replay",
  editor: "Federico",
  assistant: "John",
};
const arr = Object.values(credits);
console.log(arr);
Output: ["Open Replay", "Federico", "John"];

04）、对象循环速记

传统的 JavaScript for 循环语法是 for (let i = 0; i < x; i++) { … }。通过引用迭代器的数组长度，此循环语法可用于遍历数组。共有三个 for 循环快捷方式，它们提供了用于遍历数组中的对象的各种方法：

for…of 创建一个循环遍历内置字符串、数组和类似数组的对象，甚至是 Nodelist

for…in 在记录属性名称和值的字符串时访问数组的索引和对象文字上的键。

Array.forEach 使用回调函数对数组元素及其索引执行操作

const arr = ["Yes", "No", "Maybe"];
// Longhand
for (let i = 0; i < arr.length; i++) {
  console.log("Here is item: ", arr[i]);
}
// Shorthand
for (let str of arr) {
  console.log("Here is item: ", str);
}
arr.forEach((str) => {
  console.log("Here is item: ", str);
});
for (let index in arr) {
  console.log(`Item at index ${index} is ${arr[index]}`);
}
// For object literals
const obj = { a: 1, b: 3, c: 5 };
for (let key in obj) {
  console.log(`Value at key ${key} is ${obj[key]}`);
}

05）、对象属性简写

在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 在为对象赋予属性方面提供了更多的简单性。如果变量名和对象键相同，则可以使用速记符号。

通过在对象字面量中声明变量，您可以在 JavaScript 中快速将属性分配给对象。为此，必须使用预期的键命名变量。这通常在您已经有一个与对象属性同名的变量时使用。

const a = 1;
const b = 2;
const c = 3;
// Longhand
const obj = {
  a: a,
  b: b,
  c: c,
};
// Shorthand
const obj = { a, b, c };

06）、Javascript For 循环

如果你想要简单的 JavaScript 并且不想依赖第三方库，这个小技巧很有用。

// Longhand:
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++) { /* something */ }
// Shorthand:
for (let fruit of fruits) { /* something */  }

如果您想访问文字对象中的键，这也适用：

const obj = { continent: "Africa", country: "Ghana", city: "Accra" };
for (let key in obj) console.log(key); // output: continent, country, city

07）、Array.forEach 的简写：

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 4, 6].forEach(logArrayElements);
// a[0] = 2
// a[1] = 4
// a[2] = 6

2、与Javascript数组相关的

01）、数组解构

ES6 的一个有趣的新增功能是解构赋值。解构是一种 JavaScript 表达式，可以将数组值或对象属性分离到单独的变量中。换句话说，我们可以通过从数组和对象中提取数据来将数据分配给变量。

const arr = [2, 3, 4];
// Longhand
const a = arr[0];
const b = arr[1];
const c = arr[2];
// Shorthand
const [a, b, c] = arr;

02）、Spread Operator

得益于 ES6 中引入的展开运算符，JavaScript 代码使用起来更加高效和愉快。它可以代替特定的数组函数。展开运算符中有一系列的三个点，我们可以用它来连接和克隆数组。

const odd = [3, 5, 7];
const arr = [1, 2, 3, 4];
// Longhand
const nums = [2, 4, 6].concat(odd);
const arr2 = arr.slice();
// Shorthand
const nums = [2, 4, 6, ...odd];
const arr2 = [...arr];

与 concat() 函数不同，您可以使用扩展运算符将一个数组插入另一个数组中的任意位置。

const odd = [3, 5, 7];
const nums = [2, ...odd, 4, 6]; // 2 3 5 7 4 6

3、与Javascript字符串相关

01）、多行字符串

如果您曾经发现自己需要在代码中编写多行字符串，那么您可以这样写：

// Longhand
const lorem =
  "Lorem, ipsum dolor sit amet" +
  "consectetur adipisicing elit." +
  " Quod eaque sint voluptatem aspernatur provident" +
  "facere a dolorem consectetur illo reiciendis autem" +
  "culpa eos itaque maxime quis iusto quisquam" +
  "deserunt similique, dolores dolor repudiandae!" +
  "Eaque, facere? Unde architecto ratione minus eaque" +
  "accusamus, accusantium facere, sunt" +
  "quia ex dolorem fuga, laboriosam atque.";

但是有一种更简单的方法，只需使用反引号即可完成。

// Shorthand:
const lorem = `Lorem, ipsum dolor sit amet
 consectetur adipisicing elit.
 Quod eaque sint voluptatem aspernatur provident
 facere a dolorem consectetur illo reiciendis autem
 culpa eos itaque maxime quis iusto quisquam
 deserunt similique, dolores dolor repudiandae!
 Eaque, facere? Unde architecto ratione minus eaque
 accusamus, accusantium facere, sunt
 quia ex dolorem fuga, laboriosam atque.`;

02）、将字符串转换为数字

您的代码可能偶尔会收到必须以数字格式处理的字符串格式的数据。这不是一个大问题；我们可以快速转换它。

// Longhand
const num1 = parseInt('1000');
const num2 = parseFloat('1000.01')
// Shorthand
const num1 = +'1000'; //converts to int datatype
const num2 = +'1000.01'; //converts to float data type

03）、模板文字

我们可以在不使用 (+) 的情况下将许多变量附加到字符串中。模板文字在这里派上用场。用反引号包裹你的字符串，用 ${ } 包裹你的变量，以利用模板文字。

const fullName = "Ama Johnson";
const job = "teacher";
const birthYear = 2000;
const year = 2025;
// Longhand
const Fullstr =
  "I am " + fullName + ", a " + (year - birthYear) + " years old " + job + ".";
// Shorthand
const Fullstr = `I am ${fullName}, a ${year - birthYear} years old ${job}. `;

模板字面量为我们省去了许多使用 + 运算符连接字符串的麻烦。

4、与指数有关的

01）、指数幂速记

将第一个操作数乘以第二个操作数的幂的结果是求幂运算符 ** 返回的结果。它与 Math.pow 相同，只是 BigInts 也被接受为操作数。

// Longhand
Math.pow(2, 3); //8
Math.pow(2, 2); //4
Math.pow(4, 3); //64
// Shorthand
2 ** 3; //8
2 ** 4; //4
4 ** 3; //64

02）、十进制底指数

这个可能以前见过。本质上，这是一种写整数的奇特方法，没有最后的零。例如，表达式 1e8 表示 1 后跟八个零。它表示十进制基数 100,000,000，JavaScript 将其解释为浮点类型。

// Longhand
for (let i = 0; i < 10000000; i++) { /* something */ }
// Shorthand
for (let i = 0; i < 1e7; i++) { /* something */ }
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
1e6 === 1000000;
1e7 === 10000000;
1e8 === 100000000;

5、其他操作的 JavaScript 简写

01）、短路评估

短路评估也可以替代 if…else 子句。当变量的预期值为 false 时，此快捷方式使用逻辑或运算符 || 为变量提供默认值。

let str = "";
let finalStr;
// Longhand
if (str !== null && str !== undefined && str != "") {
  finalStr = str;
} else {
  finalStr = "default string";
}
// Shorthand
let finalStr = str || "default string"; // 'default string'

02）、默认参数

if 语句用于定义函数参数的默认值。在 ES6 中，您可以在函数声明本身中定义默认值。如果没有传递任何值或未定义，则默认函数参数允许使用默认值初始化参数。

以前都是在函数体中测试参数值，如果没有定义就赋值。

默认情况下，JavaScript 中的函数参数是未定义的。然而，设置不同的默认设置通常是有利的。在这里，默认设置可能很有用。

// Longhand
function volume(a, b, c) {
  if (b === undefined) b = 3;
  if (c === undefined) c = 4;
  return a * b * c;
}
// Shorthand
function volume(a, b = 3, c = 4) {
  return a * b * c;
}

03）、隐式返回函数

我们经常使用关键字 return 来指示函数的最终输出。单语句箭头函数将隐式返回其计算结果（该函数必须省略方括号 {} 才能这样做）。

对于多行语句，例如表达式，我们可以将返回表达式包裹在括号 () 中。

function capitalize(name) {
  return name.toUpperCase();
}
function add(numG, numH) {
  return numG + numH;
}
// Shorthand
const capitalize = (name) => name.toUpperCase();
const add = (numG, numH) => numG + numH;
// Shorthand TypeScript (specifying variable type)
const capitalize = (name: string) => name.toUpperCase();
const add = (numG: number, numH: number) => numG + numH;

04）、声明变量

在函数的开头声明变量赋值是个好主意。这种精简方法可以帮助您在一次创建大量变量时节省大量时间和空间。

// Longhand
let x;
let y;
let z = 3;
// Shorthand
let x, y, z=3;

但是，请注意，出于易读性考虑，许多人更喜欢用手写方式声明变量。

05）、可选链接

我们可以使用点表示法访问对象的键或值。我们可以通过可选链接更进一步并读取键或值，即使我们不确定它们是否存在或是否已设置。如果键不存在，则可选链接的值未定义。

下面是一个可选链的例子：

const restaurant = {
  details: {
    name: "Classico Italiano",
    menu: ["Garlic", "Bread", "Salad", "Pizza"],
  },
};
// Longhand
console.log(
  "Name ",
  restaurant.hasOwnProperty("details") &&
    restaurant.details.hasOwnProperty("name") &&
    restaurant.details.name
);
// Shorthand
console.log("Name:", restaurant.details?.name);

06）、双位非运算符

JavaScript 中的内置 Math 对象通常用于访问数学函数和常量。一些函数提供了有用的技术，让我们可以在不引用 Math 对象的情况下调用它们。

例如，我们可以通过使用两次按位非运算符来获得整数的 Math.floor() ~~。

const num = 7.5;
// Longhand
const floorNum = Math.floor(num); // 7
// Shorthand
const floorNum = ~~num; // 7

以上就是小蓝今天跟大家分享的内容，觉得有帮助的话，可以点个赞，或者关注我们。