首页 > 网络编程 > JavaScript > javascript技巧 > ES6 新增 API

ES6 新增 API 方法示例详解

2025-05-27 09:37:26 作者：超级土豆粉

ES6 引入了众多新特性和 API 方法,使 JavaScript 代码更加简洁、高效和易于维护,这些新增 API 极大地简化了开发流程,提高了代码质量,成为现代 JavaScript 开发的基础,这篇文章给大家介绍ES6新增API方法,感兴趣的朋友跟随小编一起看看吧

ES6 新增 API 方法

背景介绍

ECMAScript 6（简称 ES6）于 2015 年发布，带来了 JavaScript 语言的重大更新。ES6 引入了众多新特性和 API 方法，使 JavaScript 代码更加简洁、高效和易于维护。这些新增 API 极大地简化了开发流程，提高了代码质量，成为现代 JavaScript 开发的基础。

数组方法

1. Array.from()

// 类数组转数组
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
const arr = Array.from(arrayLike)
console.log(arr) // ['a', 'b', 'c']
// 带映射功能
const numbers = Array.from([1, 2, 3], x => x * 2)
console.log(numbers) // [2, 4, 6]
// Set转数组
const set = new Set(['a', 'b', 'c'])
const arrFromSet = Array.from(set)
console.log(arrFromSet) // ['a', 'b', 'c']

2. Array.of()

// 创建数组
const arr1 = Array.of(7)
console.log(arr1) // [7]
const arr2 = Array.of(1, 2, 3)
console.log(arr2) // [1, 2, 3]
// 对比Array构造函数
const arr3 = new Array(7)
console.log(arr3) // [empty × 7]

3. find/findIndex

const numbers = [1, 2, 3, 4, 5]
// find
const found = numbers.find(num => num > 3)
console.log(found) // 4
// findIndex
const foundIndex = numbers.findIndex(num => num > 3)
console.log(foundIndex) // 3
// 找不到时的返回值
const notFound = numbers.find(num => num > 10)
console.log(notFound) // undefined
const notFoundIndex = numbers.findIndex(num => num > 10)
console.log(notFoundIndex) // -1

4. includes

const array = [1, 2, 3, NaN]
// 基本使用
console.log(array.includes(2)) // true
console.log(array.includes(4)) // false
// 从指定位置开始查找
console.log(array.includes(1, 1)) // false
// 可以查找NaN
console.log(array.includes(NaN)) // true

5. flat/flatMap

// flat
const nested = [1, [2, 3], [4, [5, 6]]]
console.log(nested.flat()) // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2)) // [1, 2, 3, 4, 5, 6]
// flatMap
const sentences = ['Hello world', 'Good morning']
const words = sentences.flatMap(s => s.split(' '))
console.log(words) // ['Hello', 'world', 'Good', 'morning']

对象方法

1. Object.assign()

// 对象合并
const target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
const result = Object.assign(target, source1, source2)
console.log(result) // { a: 1, b: 2, c: 3 }
// 浅拷贝
const original = { a: 1, b: { c: 2 } }
const copy = Object.assign({}, original)
console.log(copy) // { a: 1, b: { c: 2 } }

2. Object.keys/values/entries

const obj = { a: 1, b: 2, c: 3 }
// Object.keys()
console.log(Object.keys(obj)) // ['a', 'b', 'c']
// Object.values()
console.log(Object.values(obj)) // [1, 2, 3]
// Object.entries()
console.log(Object.entries(obj)) // [['a', 1], ['b', 2], ['c', 3]]
// 实际应用
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

3. Object.getOwnPropertyDescriptors()

const obj = {
  get foo() {
    return 'foo'
  },
}
// 获取完整的属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))
// {
//   foo: {
//     get: [Function: get foo],
//     set: undefined,
//     enumerable: true,
//     configurable: true
//   }
// }
// 创建带有getter/setter的对象副本
const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj))

字符串方法

1. includes/startsWith/endsWith

const str = 'Hello world'
// includes
console.log(str.includes('world')) // true
console.log(str.includes('World')) // false
// startsWith
console.log(str.startsWith('Hello')) // true
console.log(str.startsWith('hello')) // false
// endsWith
console.log(str.endsWith('world')) // true
console.log(str.endsWith('World')) // false

2. padStart/padEnd

// 补全字符串长度
console.log('1'.padStart(3, '0')) // '001'
console.log('1'.padEnd(3, '0')) // '100'
// 常见应用：格式化日期
const month = '5'
const day = '3'
const formattedDate = `${month.padStart(2, '0')}/${day.padStart(2, '0')}` // "05/03"

3. repeat

// 重复字符串
console.log('ha'.repeat(3)) // 'hahaha'
// 实际应用：生成缩进
function indent(level) {
  return ' '.repeat(level * 2)
}

实际应用场景

1. 数据处理

// 数组去重
const unique = Array.from(new Set([1, 1, 2, 2, 3]))
// 数据转换
const prices = Object.entries(data).map(([key, value]) => ({
  item: key,
  price: value,
}))

2. 字符串处理

// 格式化显示
function formatNumber(num) {
  return String(num).padStart(6, '0')
}
// 检查文件类型
function isImageFile(filename) {
  return filename.toLowerCase().endsWith('.jpg') || filename.toLowerCase().endsWith('.png')
}

3. 对象操作

// 配置合并
const defaultConfig = { timeout: 1000, retry: 3 }
const userConfig = { timeout: 2000 }
const config = Object.assign({}, defaultConfig, userConfig)

最佳实践

数组方法使用建议

优先使用新方法代替传统实现
注意方法的返回值和副作用
合理使用链式调用

对象方法使用建议

使用 Object.assign 进行浅拷贝
使用 entries 进行对象遍历
注意属性描述符的处理

字符串方法使用建议

使用新方法提高代码可读性
注意大小写敏感性
合理使用字符串填充功能

Array.from 和扩展运算符的区别是什么？

参考答案：Array.from 和扩展运算符（…）都可以将类数组对象或可迭代对象转换为数组，但有以下区别：

Array.from 可以接受第二个参数(映射函数)，类似于 map 功能
Array.from 能处理的范围更广，可以处理有 length 属性的普通对象
扩展运算符只能处理可迭代对象(实现了 Iterator 接口)
性能上，一般来说扩展运算符在处理可迭代对象时略快

Object.assign 实现深拷贝需要注意什么？

参考答案：Object.assign 本身只实现浅拷贝，要实现深拷贝需注意：

Object.assign 只会复制属性值，如果属性是对象引用，只会复制引用而非对象本身
要实现深拷贝，可以递归处理嵌套对象
可以使用 JSON.parse(JSON.stringify(obj)) 简单实现深拷贝，但这种方法不能处理函数、循环引用、特殊对象(如 Date、RegExp)等
更复杂场景应使用专门的深拷贝库，如 lodash 的_.cloneDeep()方法

如何判断一个值在数组中的存在？includes 和 indexOf 的区别？

参考答案：判断值是否在数组中存在的方法有：

includes：返回布尔值，能正确处理 NaN
indexOf：返回索引或-1，不能处理 NaN
some：可以用自定义条件判断

主要区别：

includes 语义更清晰，直接返回 true/false
includes 可以查找 NaN，而 indexOf 不能
indexOf 可以精确知道元素位置，includes 不能
对于大型数组，性能基本相当

flat 和 flatMap 的使用场景是什么？

参考答案：

flat 适用于：
- 扁平化嵌套数组结构
- 清理数组中的空项(holes)
- 可以指定扁平化深度
flatMap 适用于：
- 处理需要先映射（map）再扁平化的场景
- 文本处理，如分词、过滤空值
- 替代常见的 map 后 flat 的链式调用，提高性能
- 生成一对多的数据映射

Object.entries 的实际应用有哪些？

参考答案：Object.entries 的实际应用包括：

遍历对象键值，比 Object.keys 更直接
将对象转换为 Map: new Map(Object.entries(obj))
对象的序列化和转换
实现对象的过滤和转换，如创建新对象时筛选特定属性
对象排序：先转 entries，排序后再转回对象

新增的字符串方法有什么优势？

参考答案：ES6 新增字符串方法的优势：

语义化更强：如 includes 比 indexOf 返回-1 更直观
功能更专一：startsWith/endsWith 替代 indexOf+复杂判断
简化常见操作：padStart/padEnd 处理格式化，repeat 处理重复
提高代码可读性：减少了冗长的条件判断和手动实现
性能优化：原生方法通常比自定义实现更高效

如何选择合适的 API 方法？

参考答案：选择合适的 API 方法应考虑：

功能需求：优先选择专为特定功能设计的 API
语义清晰度：选择能表达代码意图的方法
浏览器兼容性：考虑目标环境是否支持，是否需要 polyfill
性能因素：在性能关键场景，选择最优性能的方法
代码一致性：保持项目中 API 使用的一致风格
团队熟悉度：考虑团队对 API 的理解程度

到此这篇关于ES6 新增 API 方法的文章就介绍到这了,更多相关ES6 新增 API 方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

ES6 新增 API 方法示例详解