JavaScript 是前端开发中最重要的语言之一，它的快速发展和变化让开发者需要不断学习和更新自己的知识。ES6 和 ES8 是 JavaScript 中的两个重要版本，它们引入了许多新的功能和特性，其中包括了许多实用的工具函数，帮助开发者更加高效地完成工作。
在本文中，我们将介绍一些 ES6 和 ES8 中的实用工具函数，包括它们的使用方法、优化方法和示例代码，希望能够帮助读者更好地理解这些新功能，并在实践中应用它们。
ES6 中的实用工具函数
Array.from()
Array.from() 函数可以将一个类数组对象或可迭代对象转换为一个真正的数组。这个函数的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，arrayLike 参数是需要转换为数组的对象，mapFn 参数是一个可选的映射函数，thisArg 参数是可选的映射函数的上下文对象。
例如，我们可以使用 Array.from() 函数将一个字符串转换为一个数组：
const str = 'hello, world'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd']
Array.prototype.find()
Array.prototype.find() 函数可以在一个数组中查找符合条件的第一个元素，并返回这个元素的值。这个函数的语法如下：
arr.find(callback[, thisArg])
其中，callback 参数是一个用于测试每个元素的函数，它的返回值是一个布尔值，thisArg 参数是可选的回调函数的上下文对象。
例如，我们可以使用 Array.prototype.find() 函数在一个数组中查找第一个大于 10 的元素：
const arr = [1, 5, 10, 15, 20]; const result = arr.find((item) => item > 10); console.log(result); // 15
Array.prototype.findIndex()
Array.prototype.findIndex() 函数可以在一个数组中查找符合条件的第一个元素，并返回这个元素的索引。这个函数的语法和 Array.prototype.find() 函数类似：
arr.findIndex(callback[, thisArg])
例如，我们可以使用 Array.prototype.findIndex() 函数在一个数组中查找第一个大于 10 的元素的索引：
const arr = [1, 5, 10, 15, 20]; const index = arr.findIndex((item) => item > 10); console.log(index); // 3
Object.assign()
Object.assign() 函数可以将多个对象的属性合并到一个对象中，并返回这个合并后的对象。这个函数的语法如下：
Object.assign(target, ...sources)
其中，target 参数是目标对象，...sources 参数是一个或多个源对象。
例如，我们可以使用 Object.assign() 函数将多个对象合并为一个新的对象：
const obj1 = { name: 'Alice' };
const obj2 = { age: 18 };
const obj3 = { gender: 'female' };
const newObj = Object.assign({}, obj1, obj2, obj3);
console.log(newObj); // { name: 'Alice', age: 18, gender: 'female' }ES8 中的实用工具函数
Object.values()
Object.values() 函数可以返回一个对象自身的所有可枚举属性的值，组成一个数组。这个函数的语法如下：
Object.values(obj)
其中，obj 参数是需要获取值的对象。
例如，我们可以使用 Object.values() 函数获取一个对象的所有属性值：
const obj = { name: 'Alice', age: 18, gender: 'female' };
const values = Object.values(obj);
console.log(values); // ['Alice', 18, 'female']Object.entries()
Object.entries() 函数可以返回一个对象自身的所有可枚举属性的键值对，组成一个二维数组。这个函数的语法如下：
Object.entries(obj)
其中，obj 参数是需要获取键值对的对象。
例如，我们可以使用 Object.entries() 函数获取一个对象的所有键值对：
const obj = { name: 'Alice', age: 18, gender: 'female' };
const entries = Object.entries(obj);
console.log(entries); // [['name', 'Alice'], ['age', 18], ['gender', 'female']]String.prototype.padStart()
String.prototype.padStart() 函数可以在一个字符串的开头填充指定的字符，使得字符串达到指定的长度。这个函数的语法如下：
str.padStart(targetLength[, padString])
其中，targetLength 参数是需要填充的总长度，padString 参数是可选的填充字符，默认为一个空格。
例如，我们可以使用 String.prototype.padStart() 函数将一个字符串填充到指定的长度：
const str = 'hello'; const newStr = str.padStart(10, '!'); console.log(newStr); // '!!!!hello'
总结
ES6 和 ES8 中引入了许多实用的工具函数，它们可以帮助开发者更加高效地完成工作。在本文中，我们介绍了一些常用的工具函数，并提供了相应的示例代码和优化方法。希望读者能够在实践中应用这些新功能，并不断更新自己的知识，跟上 JavaScript 的发展和变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660acc4fd10417a222a98878