8 个无人传授的 JavaScript 技巧和窍门

JavaScript 无疑是世界上最酷的语言之一，而且越来越受欢迎。开发者社区在使用 JS 一段时间后，也发现了一些技巧和窍门。今天，我将与大家分享 8 个技巧和窍门！

让我们开始吧

函数式继承

函数式继承是通过对对象实例应用增强函数来获取特性的过程。该函数提供了一个闭包作用域，可用于将某些数据保持为私有。增强函数使用动态对象扩展来为对象实例添加新的属性和方法。

它们看起来像：

// Base function
function Drinks(data) {
  var that = {}; // Create an empty object
  that.name = data.name; // Add it a "name" property
  return that; // Return the object
};

// Fuction which inherits from the base function
function Coffee(data) {
  // Create the Drinks object
  var that = Drinks(data);
  // Extend base object
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// Usage
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Output: "This is Cappuccino"

感谢@loverajoel在这里深入解释这个主题 - JS 技巧中的函数式继承，我在上面已经解释过了

.map() 替代

.map()还有一个我们可以使用的替代品，那就是.from()：

let dogs = [
    { name: ‘Rio’, age: 2 },
    { name: ‘Mac’, age: 3 },
    { name: ‘Bruno’, age: 5 },
    { name: ‘Jucas’, age: 10 },
    { name: ‘Furr’, age: 8 },
    { name: ‘Blu’, age: 7 },
]


let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames); // returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

数字转字符串/字符串转数字

通常，要将字符串转换为数字，我们使用如下方法：

let num = 4
let newNum = num.toString();

要将字符串转换为数字，我们使用：

let num = "4"
let stringNumber = Number(num);

但是我们可以用来快速编码的是：

let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number

使用长度来调整数组大小和清空数组

在 javascript 中，我们可以覆盖一个名为的内置方法length并为其分配我们选择的值。

让我们看一个例子：

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

它还可以用于清空数组，如下所示：

let array_values = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

使用数组解构来交换值。

解构赋值语法是一种 JavaScript 表达式，它能够将数组中的值或对象的属性解包到不同的变量中。我们还可以使用它来快速交换值，如下所示：

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 1

从数组中删除重复项

这个技巧很简单。假设我创建了一个包含数字、字符串和布尔值的数组，但这些值重复出现多次，我想删除重复的值。那么我可以这样做：

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

短 For 循环

您可以为这样的循环编写更少的代码：

const names = ["Kio", "Rio", "Mac"];

// Long Version
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// Short Version
for (let name of names) console.log(name);

表现

在 JS 中，你还可以像 Google 一样获取代码执行的时间：

它看起来像这样：

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);

⚡️赠品⚡️

我们正在 Udemy 上免费赠送您所需的任何课程。任何价格，任何课程。
参与赠品活动的步骤
--> 回复此帖子
--> 订阅我们的新闻通讯<-- 非常重要--> 在Twitter
上关注我<-- 中奖概率 x2

获奖者将于 5 月 1 日通过 Twitter 公布

非常感谢您阅读这篇文章。

评论您所知道的任何技巧和窍门！

请点赞、分享和评论

在Dev和Twitter上关注我

文章来源：https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1