关于javascript:有个开发者总结这-15-优雅的-JavaScript-个技巧

作者：Haseeb Anwar
译者：前端小智
起源：medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

JavaScript 有很多很酷的个性，大多数初学者和中级开发人员都不晓得。明天分享一些，我常常在我的项目中应用一些技巧。

1. 有条件地向对象增加属性

咱们能够应用开展运算符号 (...) 来有条件地向 JS 对象疾速增加属性。

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16}),
};

如果每个操作数的值都为 true，则 && 操作符返回最初一个求值表达式。因而返回一个对象 {age: 16}，而后将其扩大为person 对象的一部分。

如果 condition 为 false，JavaScript 会做这样的事件:

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 开展 `false` 对对象没有影响
console.log(person); // {id: 1, name: 'John Doe'}

2. 查看属性是否存在对象中

能够应用 in 关键字来查看 JavaScript 对象中是否存在某个属性。

const person = {name: '前端小智', salary: 1000};
console.log('salary' in person); // true
console.log('age' in person); // false

3. 对象中的动静属性名称

应用动静键设置对象属性很简略。只需应用 ['key name'] 来增加属性:

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // {name: '前端小智', flavour: '巧克力'}

同样的技巧也可用于应用动静键援用对象属性：

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4. 应用动静键进行对象解构

咱们晓得在对象解构时，能够应用 : 来对解构的属性进行重命名。但，你是否晓得键名是动静的时，也能够解构对象的属性？

const person = {id: 1, name: '前端小智'};
const {name: personName} = person;
console.log(personName); // '前端小智'

当初，咱们用动静键来解构属性：

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';

const {[templateName]: template } = templates;

console.log(template); // Good bye

5. 空值合并 ?? 操作符

当咱们想查看一个变量是否为 null 或 undefined 时，??操作符很有用。当它的左侧操作数为 null 或 undefined 时，它返回右侧的操作数，否则返回其左侧的操作数。

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'

const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'

const baz = 0 ?? 'Hello';
console.log(baz); // 0

在第三个示例中，返回 0，因为即便 0 在 JS 中被认为是假的，但它不是 null 的或 undefined 的。你可能认为咱们能够用 || 算子但这两者之间是有区别的

你可能认为咱们能够在这里应用 || 操作符，但这两者之间是有区别的。

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5

const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

6. 可选链 ?.

咱们是不是常常遇到这样的谬误：TypeError: Cannot read property‘foo’of null。这对每一个毅开发人员来说都是一个烦人的问题。引入可选链就是为了解决这个问题。一起来看看：

const book = {id:1, title: 'Title', author: null};

// 通常状况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null

// 应用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

还能够应用如下函数可选链：

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

7. 应用 !! 操作符

!! 运算符可用于将表达式的后果疾速转换为布尔值 (true 或false):

const greeting = 'Hello there!';
console.log(!!greeting) // true

const noGreeting = '';
console.log(!!noGreeting); // false

8. 字符串和整数转换

应用 + 操作符将字符串疾速转换为数字:

const stringNumer = '123';

console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

要将数字疾速转换为字符串，也能够应用 + 操作符，前面跟着一个空字符串:

const myString = 25 + '';

console.log(myString); //'25'
console.log(typeof myString); //'string'

这些类型转换十分不便，但它们的清晰度和代码可读性较差。所以理论开发，须要谨慎的抉择应用。

9. 查看数组中的假值

大家应该都用过数组办法：filter、some、every，这些办法能够配合 Boolean 办法来测试虚实值。

const myArray = [null, false, 'Hello', undefined, 0];

// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']

// 查看至多一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true

// 查看所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

上面是它的工作原理。咱们晓得这些数组办法承受一个回调函数，所以咱们传递 Boolean 作为回调函数。Boolean 函数自身承受一个参数，并依据参数的真实性返回 true 或 false。所以：

myArray.filter(val => Boolean(val));

等价于：

myArray.filter(Boolean);

10. 扁平化数组

在原型 Array 上有一个办法 flat，能够从一个数组的数组中制作一个繁多的数组。

const myArray = [{id: 1}, [{id: 2}], [{id: 3}]];

const flattedArray = myArray.flat(); 
//[{ id: 1}, {id: 2}, {id: 3} ]

你也能够定义一个深度级别，指定一个嵌套的数组构造应该被扁平化的深度。例如：

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

11.Object.entries

大多数开发人员应用 Object.keys 办法来迭代对象。此办法仅返回对象键的数组，而不返回值。咱们能够应用 Object.entries 来获取键和值。

const person = {
  name: '前端小智',
  age: 20
};

Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

为了迭代一个对象，咱们能够执行以下操作：

Object.keys(person).forEach((key) => {console.log(`${key} is ${person[key]}`);
});

// 应用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {console.log(`${key} is ${value}`);
});

// name is 前端小智
// age is 20 

上述两种办法都返回雷同的后果，但 Object.entries 获取键值对更容易。

12.replaceAll 办法

在 JS 中，要将所有呈现的字符串替换为另一个字符串，咱们须要应用如下所示的正则表达式：

const str = 'Red-Green-Blue';

// 只规制第一次呈现的
str.replace('-', ' '); // Red Green-Blue

// 应用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

然而在 ES12 中，一个名为 replaceAll 的新办法被增加到 String.prototype 中，它用另一个字符串值替换所有呈现的字符串。

str.replaceAll('-', ' '); // Red Green Blue

13. 数字分隔符

能够应用下划线作为数字分隔符，这样能够不便地计算数字中 0 的个数。

// 难以浏览
const billion = 1000000000;

// 易于浏览
const readableBillion = 1000_000_000;

console.log(readableBillion) //1000000000

下划线分隔符也能够用于 BigInt 数字，如下例所示

const trillion = 1000_000_000_000n;

console.log(trillion); // 1000000000000

14.document.designMode

与前端的 JavaScript 无关，设计模式让你能够编辑页面上的任何内容。只有关上浏览器控制台，输出以下内容即可。

document.designMode = 'on';

15. 逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符 &&、||、?? 和赋值运算符 = 组合而成。

const a = 1;
const b = 2;

a &&= b;
console.log(a); // 2

// 下面等价于
a && (a = b);

// 或者
if (a) {a = b}

查看 a 的值是否为真，如果为真，那么更新 a 的值。应用逻辑或 ||操作符也能够做同样的事件。

const a = null;
const b = 3;

a ||= b;
console.log(a); // 3

// 下面等价于
a || (a = b);

应用空值合并操作符 ??:

const a = null;
const b = 3;

a ??= b;
console.log(a); // 3

// 下面等价于
if (a === null || a === undefined) {a = b;}

留神：??操作符只查看 null 或 undefined 的值。

~~ 完，我是刷碗智，点赞和在看是对我最大的反对，我会好好的刷碗的。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：

https://betterprogramming.pub…
https://betterprogramming.pub…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。