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) // undefinedconst 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)

最佳實踐

1. 數組方法使用建議

   • 優先使用新方法代替傳統實現
   • 注意方法的返回值和副作用
   • 合理使用鏈式調用

2. 對象方法使用建議

   • 使用 Object.assign 進行淺拷貝
   • 使用 entries 進行對象遍歷
   • 注意屬性描述符的處理

3. 字符串方法使用建議

   • 使用新方法提高代碼可讀性
   • 注意大小寫敏感性
   • 合理使用字符串填充功能

面試常見問題及參考答案

1. Array.from 和擴展運算符的區別是什么？

   參考答案：Array.from 和擴展運算符（…）都可以將類數組對象或可迭代對象轉換為數組，但有以下區別：

   • Array.from 可以接受第二個參數(映射函數)，類似于 map 功能
   • Array.from 能處理的范圍更廣，可以處理有 length 屬性的普通對象
   • 擴展運算符只能處理可迭代對象(實現了 Iterator 接口)
   • 性能上，一般來說擴展運算符在處理可迭代對象時略快

2. Object.assign 實現深拷貝需要注意什么？

   參考答案：Object.assign 本身只實現淺拷貝，要實現深拷貝需注意：

   • Object.assign 只會復制屬性值，如果屬性是對象引用，只會復制引用而非對象本身
   • 要實現深拷貝，可以遞歸處理嵌套對象
   • 可以使用 JSON.parse(JSON.stringify(obj)) 簡單實現深拷貝，但這種方法不能處理函數、循環引用、特殊對象(如 Date、RegExp)等
   • 更復雜場景應使用專門的深拷貝庫，如 lodash 的_.cloneDeep()方法

3. 如何判斷一個值在數組中的存在？includes 和 indexOf 的區別？

   參考答案：判斷值是否在數組中存在的方法有：

   • includes：返回布爾值，能正確處理 NaN
   • indexOf：返回索引或-1，不能處理 NaN
   • some：可以用自定義條件判斷

   主要區別：

   • includes 語義更清晰，直接返回 true/false
   • includes 可以查找 NaN，而 indexOf 不能
   • indexOf 可以精確知道元素位置，includes 不能
   • 對于大型數組，性能基本相當

4. flat 和 flatMap 的使用場景是什么？

   參考答案：

   • flat 適用于：

     • 扁平化嵌套數組結構
     • 清理數組中的空項(holes)
     • 可以指定扁平化深度

   • flatMap 適用于：

     • 處理需要先映射（map）再扁平化的場景
     • 文本處理，如分詞、過濾空值
     • 替代常見的 map 后 flat 的鏈式調用，提高性能
     • 生成一對多的數據映射

5. Object.entries 的實際應用有哪些？

   參考答案：Object.entries 的實際應用包括：

   • 遍歷對象鍵值，比 Object.keys 更直接
   • 將對象轉換為 Map: new Map(Object.entries(obj))
   • 對象的序列化和轉換
   • 實現對象的過濾和轉換，如創建新對象時篩選特定屬性
   • 對象排序：先轉 entries，排序后再轉回對象

6. 新增的字符串方法有什么優勢？

   參考答案：ES6 新增字符串方法的優勢：

   • 語義化更強：如 includes 比 indexOf 返回-1 更直觀
   • 功能更專一：startsWith/endsWith 替代 indexOf+復雜判斷
   • 簡化常見操作：padStart/padEnd 處理格式化，repeat 處理重復
   • 提高代碼可讀性：減少了冗長的條件判斷和手動實現
   • 性能優化：原生方法通常比自定義實現更高效

7. 如何選擇合適的 API 方法？

   參考答案：選擇合適的 API 方法應考慮：

   • 功能需求：優先選擇專為特定功能設計的 API
   • 語義清晰度：選擇能表達代碼意圖的方法
   • 瀏覽器兼容性：考慮目標環境是否支持，是否需要 polyfill
   • 性能因素：在性能關鍵場景，選擇最優性能的方法
   • 代碼一致性：保持項目中 API 使用的一致風格
   • 團隊熟悉度：考慮團隊對 API 的理解程度