谁还不知道这8个JavaScript的小技巧!!

123 阅读3分钟

函数的继承

代码示例:

// 基础函数
function Drinks(data) {
  var that = {}; // 创建一个空对象
  that.name = data.name; // 添加一个 "name" 属性
  return that; // 返回该对象
};

// 继承于基础函数的函数
function Coffee(data) {
  // 创建 Drinks 对象
  var that = Drinks(data);
  // 扩展基础对象
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// 使用示例
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// 输出: "This is Cappuccino"

用.from替代.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); // 返回 [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

3. 将数字转换为字符串/字符串转换为数字快速方法

通常,我们将字符串转换为数字会使用以下方式:

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

将字符串转换为数字会使用以下方式:

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

但是为了快速编写代码,我们可以使用以下方式:

let num = 15;
let numString = num + ""; // 数字转字符串
let stringNum = +"123"; // 字符串转数字

原理:

  • 当一个数字变量和一个空字符串相加时,JavaScript 引擎会自动将数字转换成字符串,因为字符串连接操作符 + 可以用于字符串拼接和数字相加,但只要其中一个操作数是字符串,结果就会是字符串。在这种情况下,空字符串作为连接的起始点,因此数字会被隐式地转换为字符串。
  • 当一元操作符+应用于字符串时,它会尝试将该字符串转换为数字类型。如果字符串可以转换为有效的数字,将返回该数字,否则将返回NaN

使用 length 来调整数组的长度或者清空数组

在 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 = 5;
console.log(array_values.length);
// 输出

使用数组解构快速交换值。

解构赋值是 JavaScript 中的一种语法,它可以将数组中的值或对象中的属性解构为不同的变量。我们还可以使用它来快速交换变量的值,如下所示:

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // 输出结果 -> 2
console.log(b) // 输出结果 -> 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"]

使用更简洁的循环。

我们可以使用以下代码来减少使用循环时的代码量:

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

// 常规写法
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// 简洁写法
for (let name of names) console.log(name);

监测函数执行性能

image.png 如果我们也想想谷歌浏览器一样监控我们某个函数的执行性能我们就可使用下面的代码。

代码如下所示:

const firstTime = performance.now();
something();//我们被监测的代码段
const secondTime = performance.now();
console.log(`something 函数执行时间为 ${secondTime - firstTime} 毫秒。`);