ES6 新增 API 方法示例详解

// 类数组转数组
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']

// 创建数组
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]

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

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

// 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']

// 对象合并
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 } }

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}`)
})

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

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

// 补全字符串长度
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"

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

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

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

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