顶级 JavaScript 技巧

1、与Javascript对象相关的

01)、对象解构

将对象的值解构为变量是另一种在传统点表示法之外读取其值的方法。

下面的示例比较了用于读取对象值的经典点表示法和对象解构快捷方式。

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 使用回调函数对数组元素及其索引执行操作

在 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）、模板文字

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

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

顶级 JavaScript 技巧相关推荐

javascript获取系统时间时区_5个JavaScript技巧让你成为更好的开发者
英文 | https://levelup.gitconnected.com/5-javascript-tricks-that-are-good-to-know-78045dea6678翻译 | web ...
21个值得收藏的Javascript技巧
在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率. 1 Javascript数组转换为CSV格式首先考虑如下的应用场景,有一个Javscri ...
四十四种Javascript技巧大全
四十四种Javascript技巧大全 1.第一个给变量分配值时不要忘了var关键字. 分配值给未定义的变量将是该变量自动成为全局变量,应该避免全局变量. 2.使用 === 而不是 == 使用 == ( ...
好程序员Web前端分享无法忽视的JavaScript技巧
好程序员Web前端培训分享无法忽视的JavaScript技巧.在大家从事web前端的工作中,很容易忽视一些JavaScript的小技巧,今天为大家总结了一些容易被大家忽略的技巧,希望能够对大家有所帮助 ...
JavaScript技巧
JavaScript技巧 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 < table bord ...
javascript技巧参考
javascript技巧参考 javascript技巧参考原文:http://www.cnblogs.com/xh831213/archive/2006/03/17/352224.html 事件源对 ...
12 个非常有用的 JavaScript 技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是 ...
2020年用于前端开发的顶级JavaScript框架
Front-end developers might know this game already: you type "top JavaScript frameworks" in ...
本期期刊主题：ASP.NET技术与JavaScript技巧，包括控件等
本期主题是:ASP.NET技术与JavaScript技巧,包括控件等,另外还有相关的开发心得等. 请各栏目的编辑在28日前提交推荐的文章,提交的文章,请遵照第二期的文章格式,如有需要,请与我联系,更进 ...

顶级 JavaScript 技巧

顶级 JavaScript 技巧相关推荐

最新文章

热门文章