匠心独运，通识JS中隐匿却实用的秘笈：ES6重要不常用方法揭秘

前端

2024-02-10 20:23:26

鲜为人知的ES6方法：提升代码效率与可读性的秘密武器

导语

ES6（又称ES2015）彻底革新了JavaScript，引入了一系列强大的语法特性和方法，大大提高了编程效率和代码可读性。本文将揭秘几个重要却不常用的ES6方法，它们在底层发挥着关键作用，能够帮助我们编写出更加简洁高效的代码。

数组相关方法

数组相关方法扩展了数组的原生功能，使处理数组数据更加灵活便捷。

1. Array.from()

Array.from()方法将类数组对象或可迭代对象转换为真正的数组。它可以将字符串、类数组对象（如arguments）、Set对象、Map对象等转换成数组。

const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
const array = Array.from(arrayLike);
console.log(array); // 输出：['a', 'b', 'c']

2. Array.of()

Array.of()方法创建新的数组，其元素为传入的参数。与Array.from()不同，Array.of()不会将类数组对象或可迭代对象转换为数组，而是直接将参数值作为数组元素。

const array = Array.of(1, 2, 3, 4, 5);
console.log(array); // 输出：[1, 2, 3, 4, 5]

3. Array.prototype.find()

Array.prototype.find()方法在数组中查找第一个满足指定条件的元素，并返回该元素。如果数组中没有满足条件的元素，则返回undefined。

const array = [1, 2, 3, 4, 5];
const result = array.find(element => element > 3);
console.log(result); // 输出：4

4. Array.prototype.findIndex()

Array.prototype.findIndex()方法在数组中查找第一个满足指定条件的元素的索引，并返回该索引。如果数组中没有满足条件的元素，则返回-1。

const array = [1, 2, 3, 4, 5];
const result = array.findIndex(element => element > 3);
console.log(result); // 输出：3

对象相关方法

对象相关方法极大地扩展了处理对象的灵活性，简化了对象的创建、复制和访问。

1. Object.assign()

Object.assign()方法将一个或多个对象的属性复制到另一个对象中。它可以接受任意数量的对象作为参数，并将它们的属性复制到第一个参数对象中。

const obj1 = {name: 'John', age: 30};
const obj2 = {city: 'New York'};
const obj3 = Object.assign(obj1, obj2);
console.log(obj3); // 输出：{name: 'John', age: 30, city: 'New York'}

2. Object.keys()

Object.keys()方法返回一个数组，其中包含对象的所有可枚举属性的名称。

const obj = {name: 'John', age: 30, city: 'New York'};
const keys = Object.keys(obj);
console.log(keys); // 输出：['name', 'age', 'city']

3. Object.values()

Object.values()方法返回一个数组，其中包含对象的所有可枚举属性的值。

const obj = {name: 'John', age: 30, city: 'New York'};
const values = Object.values(obj);
console.log(values); // 输出：['John', 30, 'New York']

4. Object.entries()

Object.entries()方法返回一个数组，其中包含对象的所有可枚举属性的键值对。

const obj = {name: 'John', age: 30, city: 'New York'};
const entries = Object.entries(obj);
console.log(entries); // 输出：[['name', 'John'], ['age', 30], ['city', 'New York']]

函数相关方法

函数相关方法增强了函数的功能，为代码执行提供了更大的控制力和灵活性。

1. Function.prototype.bind()

Function.prototype.bind()方法创建一个新的函数，该函数的this被绑定到指定的对象。换句话说，我们可以使用bind()方法来改变函数的执行上下文。

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const boundGreet = obj.greet.bind(obj);
boundGreet(); // 输出：Hello, my name is John

2. Function.prototype.apply()

Function.prototype.apply()方法用于调用一个函数，并将一个数组作为函数的参数。

const numbers = [1, 2, 3, 4, 5];
const sum = function(a, b, c, d, e) {
  return a + b + c + d + e;
};

const result = sum.apply(null, numbers);
console.log(result); // 输出：15

3. Function.prototype.call()

Function.prototype.call()方法与apply()方法类似，用于调用一个函数，但call()方法接受参数列表作为参数，而不是数组。

const numbers = [1, 2, 3, 4, 5];
const sum = function(a, b, c, d, e) {
  return a + b + c + d + e;
};

const result = sum.call(null, 1, 2, 3, 4, 5);
console.log(result); // 输出：15