数组方法

数组方法体系
├── 基本操作方法
│   ├── 栈方法 - push, pop
│   ├── 队列方法 - shift, unshift
│   ├── 操作方法 - concat, slice, splice
│   └── 填充方法 - fill, copyWithin
├── 搜索排序方法
│   ├── 搜索方法 - indexOf, lastIndexOf, includes
│   ├── 查找方法 - find, findIndex
│   └── 排序方法 - sort, reverse
├── 迭代方法
│   ├── 遍历方法 - forEach
│   ├── 转换方法 - map, filter, flat, flatMap
│   ├── 归约方法 - reduce, reduceRight
│   └── 检测方法 - every, some
├── 转换方法
│   └── 字符串转换 - join, toString, toLocaleString
└── ES6+ 新增方法
    ├── 迭代器 - keys, values, entries
    └── 其他 - at, Array.from, Array.of

let colors = new Array() // 创建一个数组
let count = colors.push("red", "green") // 推入两项
console.log(count) // 2

count = colors.push("black") // 再推入一项
console.log(count) // 3

let item = colors.pop() // 取得最后一项
console.log(item) // black
console.log(colors.length) // 2

let colors = new Array()
let count = colors.push("red", "green")
console.log(count) // 2
count = colors.push("black")
console.log(count) // 3

let item = colors.shift() // 取得第一项
console.log(item) // red
console.log(colors.length) // 2

let colors = new Array()
let count = colors.unshift("red", "green") // 从数组开头推入两项
console.log(count) // 2
count = colors.unshift("black") // 再推入一项
console.log(count) // 3
let item = colors.pop() // 取得最后一项
console.log(item) // green
console.log(colors.length) // 2

let colors = ["red", "green", "blue"]
let colors2 = colors.concat("yellow", ["black", "brown"])
console.log(colors) // ["red", "green","blue"]
console.log(colors2) // ["red", "green", "blue", "yellow", "black", "brown"]

let colors = ["red", "green", "blue"]
let newColors = ["black", "brown"]

let moreNewColors = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: "pink",
  1: "cyan"
}
newColors[Symbol.isConcatSpreadable] = false

// 强制不打平数组
let colors2 = colors.concat("yellow", newColors)

// 强制打平类数组对象
let colors3 = colors.concat(moreNewColors)

console.log(colors) // ["red", "green", "blue"]
console.log(colors2)
/**
[
  'red',
  'green',
  'blue',
  'yellow',
  [ 'black', 'brown', [Symbol(Symbol.isConcatSpreadable)]: false ]
]
*/
console.log(colors3) // ["red", "green", "blue", "pink", "cyan"]

let colors = ["red", "green", "blue", "yellow", "purple"]
let colors2 = colors.slice(1) // 从索引 1 到末尾
let colors3 = colors.slice(1, 4) // 从索引 1 到 4（不包括 4）
console.log(colors2) // ['green', 'blue', 'yellow', 'purple']
console.log(colors3) // ['green', 'blue', 'yellow']

// 负数索引（从末尾开始计算）
let colors4 = colors.slice(-3) // 最后 3 个元素
console.log(colors4) // ['blue', 'yellow', 'purple']

let colors5 = colors.slice(-3, -1) // 倒数第 3 个到倒数第 1 个（不包括）
console.log(colors5) // ['blue', 'yellow']

// 浅拷贝整个数组
let colorsCopy = colors.slice()
console.log(colorsCopy === colors) // false（新数组）

let colors = ["red", "green", "blue"]
let removed = colors.splice(0, 1) // 删除第一项
console.log(colors) // green,blue
console.log(removed) // red，只有一个元素的数组

removed = colors.splice(1, 0, "yellow", "orange") // 在位置 1 插入两个元素
console.log(colors) // green,yellow,orange,blue
console.log(removed) // 空数组

removed = colors.splice(1, 1, "red", "purple") // 插入两个值，删除一个元素
console.log(colors) // green,red,purple,orange,blue
console.log(removed) // yellow，只有一个元素的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(numbers.indexOf(4)) // 3
console.log(numbers.lastIndexOf(4)) // 5
console.log(numbers.includes(4)) // true
console.log(numbers.indexOf(4, 4)) // 5
console.log(numbers.lastIndexOf(4, 4)) // 3
console.log(numbers.includes(4, 7)) // false

let person = { name: "Nicholas" }
let people = [{ name: "Nicholas" }]
let morePeople = [person]
console.log(people.indexOf(person)) // -1
console.log(morePeople.indexOf(person)) // 0
console.log(people.includes(person)) // false
console.log(morePeople.includes(person)) // true

const people = [
  {
    name: "Matt",
    age: 27
  },
  {
    name: "Nicholas",
    age: 29
  }
]

console.log(people.find((element, index, array) => element.age < 28)) // {name: "Matt", age: 27}

console.log(people.findIndex((element, index, array) => element.age < 28)) // 0

const evens = [2, 4, 6]

// 找到匹配后，永远不会检查数组的最后一个元素
evens.find((element, index, array) => {
  console.log(element)
  console.log(index)
  console.log(array)
  return element === 4
})

// 2
// 0
// [2, 4, 6]
// 4
// 1
// [2, 4, 6]

arrayObject.reverse()
let array = [1, 2, 3, 4, 5]
let array2 = array.reverse()

console.log(array) // [5,4,3,2,1]
console.log(array2 === array) // true

let values = [0, 1, 5, 10, 15]
values.sort()
console.log(values) // 0,1,10,15,5

function compare(value1, value2) {
  if (value1 < value2) {
    return -1
  } else if (value1 > value2) {
    return 1
  } else {
    return 0
  }
}

let values = [0, 1, 5, 10, 15]
values.sort(compare)
console.log(values) // 0,1,5,10,15

if (value1 < value2) {
  return 1
} else if (value1 > value2) {
  return -1
} else {
  return 0
}

let values = [0, 1, 5, 10, 15]
values.sort(compare)
console.log(values) // 15,10,5,1,0

let values = [0, 1, 5, 10, 15]

values.sort((a, b) => (a < b ? 1 : a > b ? -1 : 0))

console.log(values) // 15,10,5,1,0

function compare(value1, value2) {
  return value2 - value1
}

let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  console.log(index + ":" + item)
})
/**
0:1
1:2
2:3
3:4
4:5
*/

let arr = [1, 2, 3, 4, 5]
let arr1 = [9, 8, 7, 6, 5]

arr.forEach(function (item, index, arr) {
  console.log(this[index]) //  9 8 7 6 5
}, arr1)

let arr = [1, 2, 3]

let arr1 = arr.map((item) => {
  return item + 1
})
console.log(arr1) // [2, 3, 4]

var arr = ["a", "b", "c"]

let arr1 = [1, 2].map(function (e) {
  return this[e]
}, arr)
console.log(arr1) // ['b', 'c']

let arr = [1, 2, 3]

arr.map((item) => item + 1).map((item) => item + 1) // [3, 4, 5]

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]

let everyResult = numbers.every((item, index, array) => item > 2)
console.log(everyResult) // false

let someResult = numbers.some((item, index, array) => item > 2)
console.log(someResult) // true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let filterResult = numbers.filter((item, index, array) => item > 2)

console.log(filterResult) // 3,4,5,4,3

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.filter((item) => item > 2)
console.log(arr1) // [3, 4, 5]

const array = [1, undefined, "hello", null, NaN, 0, false, "", 42]

// 方法 1：使用 filter 方法移除所有"假值"（繁琐）
const filteredArray1 = array.filter((item) => {
  return item !== undefined && item !== null && !isNaN(item) && item !== 0 && item !== false && item !== ""
})

// 方法 2：使用 Boolean 构造函数（简洁，但会过滤掉所有假值）
const filteredArray2 = array.filter(Boolean)
console.log(filteredArray2) // [1, "hello", 42]

// 方法 3：只过滤 null 和 undefined
const filteredArray3 = array.filter((item) => item != null)
console.log(filteredArray3) // [1, "hello", NaN, 0, false, "", 42]

var users = [
  { name: "tom", email: "tom@example.com" },
  { name: "peter", email: "peter@example.com" }
]

users
  .map(function (user) {
    return user.email
  })
  .filter(function (email) {
    return /^t/.test(email)
  })
  .forEach(function (email) {
    console.log(email)
  })
// "tom@example.com"

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
})
console.log(arr, sum)

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
}, 5)
console.log(arr, sum)

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

let arr = [1, 2, 3, 4]
let sum = arr.reduceRight((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
}, 5)
console.log(arr, sum)

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

const zeroes = [0, 0, 0, 0, 0]

// 用 5 填充整个数组
zeroes.fill(5)
console.log(zeroes) // [5, 5, 5, 5, 5]
zeroes.fill(0) // 重置

// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3)
console.log(zeroes) // [0, 0, 0, 6, 6]
zeroes.fill(0) // 重置

// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3)
console.log(zeroes) // [0, 7, 7, 0, 0];
zeroes.fill(0) // 重置

// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1)
console.log(zeroes) // [0, 8, 8, 8, 0];

const zeroes = [0, 0, 0, 0, 0]

// 索引过低，忽略
zeroes.fill(1, -10, -6)
console.log(zeroes) // [0, 0, 0, 0, 0]

// 索引过高，忽略
zeroes.fill(1, 10, 15)
console.log(zeroes) // [0, 0, 0, 0, 0]

// 索引反向，忽略
zeroes.fill(2, 4, 2)
console.log(zeroes) // [0, 0, 0, 0, 0]

// 索引部分可用，填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes) // [0, 0, 0, 4, 4]

let ints,
  reset = () => (ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
reset()

// 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
ints.copyWithin(5)
console.log(ints) // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

reset()
// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5)
console.log(ints) // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]

reset()
// 从 ints 中复制索引 0 开始到索引 3 结束的内容插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3)
console.log(ints) // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset()

// JavaScript 引擎在插值前会完整复制范围内的值，因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6)
console.log(ints) // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset()

// 支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3)
console.log(ints) // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

let ints,
  reset = () => (ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9])

reset()
// 索引过低，忽略
ints.copyWithin(1, -15, -12)
console.log(ints) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引过高，忽略
ints.copyWithin(1, 12, 15)
console.log(ints) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引反向，忽略
ints.copyWithin(2, 4, 2)
console.log(ints) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引部分可用，复制、填充可用部分
ints.copyWithin(4, 7, 10)
console.log(ints) // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];

const a = ["foo", "bar", "baz", "qux"]

console.log(a.keys()) // Object [Array Iterator] {}
console.log(a.values()) // Object [Array Iterator] {}
console.log(a.entries()) // Object [Array Iterator] {}

// 因为这些方法都返回迭代器，所以可以将它们的内容，通过 Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys())
const aValues = Array.from(a.values())
const aEntries = Array.from(a.entries())
console.log(aKeys) // [0, 1, 2, 3]
console.log(aValues) // ["foo", "bar", "baz", "qux"]
console.log(aEntries) // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

const a = ["foo", "bar", "baz", "qux"]
for (const [idx, element] of a.entries()) {
  console.log(idx)
  console.log(element)
}
// 0、foo
// 1、bar
// 2、bax
// 3、qux

const arr1 = [1, 2, [3, 4]]
console.log(arr1.flat()) // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]]
console.log(arr2.flat()) // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]]
console.log(arr3.flat(2)) // [1, 2, 3, 4, 5, 6]

const deeplyNested = [1, [2, [3, [4, [5]]]]]
console.log(deeplyNested.flat(Infinity)) // [1, 2, 3, 4, 5]

const arr4 = [1, 2, , 4, 5]
console.log(arr4.flat()) // [1, 2, 4, 5]

// 使用 reduce 和 concat 实现扁平化
const flatten = (arr) => arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), [])

console.log(flatten([1, [2, [3]]])) // [1, 2, 3]

const arr = [1, 2, 3, 4]

// 相当于 map + flat(1)
const result = arr.flatMap((x) => [x * 2])
console.log(result) // [2, 4, 6, 8]

const arr = [1, 2, 3]

// 使用 map + flat
const mappedThenFlattened = arr.map((x) => [x * 2]).flat()
console.log(mappedThenFlattened) // [2, 4, 6]

// 使用 flatMap（更高效，只遍历一次）
const flatMapped = arr.flatMap((x) => [x * 2])
console.log(flatMapped) // [2, 4, 6]

const sentences = ["Hello world", "Good morning", "JavaScript is fun"]

// 分割单词并扁平化
const words = sentences.flatMap((sentence) => sentence.split(" "))
console.log(words)
// ["Hello", "world", "Good", "morning", "JavaScript", "is", "fun"]

const numbers = [1, 2, 3, 4, 5, 6]

// 过滤掉偶数
const oddNumbers = numbers.flatMap((num) => (num % 2 !== 0 ? [num] : []))
console.log(oddNumbers) // [1, 3, 5]

const apiResponse = [
  { id: 1, tags: ["javascript", "web"] },
  { id: 2, tags: ["node", "backend"] }
]

const allTags = apiResponse.flatMap((item) => item.tags)
console.log(allTags) // ['javascript', 'web', 'node', 'backend']

let colors = ["red", "green", "blue"]
console.log(colors.join(",")) // "red,green,blue"
console.log(colors.join("||")) // "red||green||blue"
console.log(colors.join()) // "red,green,blue"（默认逗号）
console.log(colors.join("")) // "redgreenblue"（无分隔符）
console.log(colors.join(" - ")) // "red - green - blue"

// 处理空值和 undefined
const arr = [1, null, undefined, 4]
console.log(arr.join("-")) // "1--4"（null 和 undefined 转为空字符串）

const arr = [1, 2, 3, 4, 5]

// 正数索引（从前往后）
console.log(arr.at(0)) // 1
console.log(arr.at(2)) // 3

// 负数索引（从后往前）
console.log(arr.at(-1)) // 5（最后一个元素）
console.log(arr.at(-2)) // 4（倒数第二个元素）

// 超出范围返回 undefined
console.log(arr.at(10)) // undefined
console.log(arr.at(-10)) // undefined

// 对比传统方式
console.log(arr[arr.length - 1]) // 5（需要计算长度）
console.log(arr.at(-1)) // 5（更简洁）

let colors = ["red", "blue", "green"] // 创建一个包含 3 个字符串的数组

console.log(colors.toString()) // red,blue,green
console.log(colors.valueOf()) // red,blue,green
console.log(colors) // red,blue,green

let person1 = {
  toLocaleString() {
    return "Nikolaos"
  },
  toString() {
    return "Nicholas"
  }
}

let person2 = {
  toLocaleString() {
    return "Grigorios"
  },
  toString() {
    return "Greg"
  }
}

let people = [person1, person2]
console.log(people) // Nicholas,Greg 。这里默认调用的是 toString 方法
console.log(people.toString()) // Nicholas,Greg
console.log(people.toLocaleString()) // Nikolaos,Grigorios

需要什么操作？
│
├─ 增删元素
│  ├─ 末尾操作 → push() / pop()
│  ├─ 开头操作 → shift() / unshift()
│  └─ 任意位置 → splice()
│
├─ 查找元素
│  ├─ 按值查找 → indexOf() / includes()
│  ├─ 按条件查找 → find() / findIndex()
│  └─ 是否存在 → some() / includes()
│
├─ 遍历转换
│  ├─ 只遍历 → forEach()
│  ├─ 转换数组 → map()
│  ├─ 过滤元素 → filter()
│  └─ 累积结果 → reduce()
│
├─ 检测条件
│  ├─ 所有满足 → every()
│  └─ 任一满足 → some()
│
├─ 排序反转
│  ├─ 排序 → sort()
│  └─ 反转 → reverse()
│
└─ 其他操作
   ├─ 截取 → slice()
   ├─ 合并 → concat()
   ├─ 扁平化 → flat() / flatMap()
   └─ 转字符串 → join()

// 示例1：数据管道处理
const products = [
  {name: 'Apple', price: 5, category: 'fruit'},
  {name: 'Carrot', price: 2, category: 'vegetable'},
  {name: 'Banana', price: 3, category: 'fruit'}
]

// 过滤水果 -> 按价格排序 -> 提取名称
const result = products
  .filter(p => p.category === 'fruit')
  .sort((a, b) => a.price - b.price)
  .map(p => p.name)

console.log(result) // ['Banana', 'Apple']

// 示例2：复杂数据聚合
const orders = [
  {product: 'Apple', quantity: 2, price: 5},
  {product: 'Banana', quantity: 3, price: 3},
  {product: 'Apple', quantity: 1, price: 5}
]

// 按产品分组并计算总销售额
const salesByProduct = orders
  .reduce((acc, order) => {
    const key = order.product
    acc[key] = (acc[key] || 0) + order.quantity * order.price
    return acc
  }, {})

console.log(salesByProduct) // {Apple: 15, Banana: 9}

// 1. 避免在循环中修改数组
// ❌ 差
for (let i = 0; i < arr.length; i++) {
  if (condition) {
    arr.splice(i, 1)  // 修改数组长度，影响性能
    i--
  }
}

// ✅ 好
const filtered = arr.filter(x => !condition)


  // ... 中间省略 ...


// 5. 缓存数组长度
// ✅ 在密集循环中
for (let i = 0, len = arr.length; i < len; i++) {
  // 处理逻辑
}

// ❌ 错误：想复制数组却用了 splice
const copy = arr.splice()  // 返回空数组，原数组不变

// ✅ 正确：使用 slice
const copy = arr.slice()   // 返回数组副本

// 记忆技巧：splice 有 'p'（破坏性的），slice 没有

// ❌ 错误：数字排序结果不正确
[10, 2, 30].sort()  // [10, 2, 30]（按字符串排序）

// ✅ 正确：提供比较函数
[10, 2, 30].sort((a, b) => a - b)  // [2, 10, 30]

// ❌ 错误：map 中忘记 return
const doubled = arr.map(x => {
  x * 2  // 忘记 return，结果全是 undefined
})

// ✅ 正确：显式 return 或使用箭头函数简写
const doubled = arr.map(x => x * 2)

// ❌ 错误：想中断循环但 return 无效
arr.forEach(x => {
  if (x === target) {
    return  // 只是跳过当前迭代，不会中断循环
  }
  console.log(x)
})

// ✅ 正确：使用 for...of 或 some
for (const x of arr) {
  if (x === target) break
  console.log(x)
}

// 或使用 some
arr.some(x => {
  if (x === target) return true  // 中断
  console.log(x)
  return false
})

// ❌ 错误：空数组没有初始值会报错
[].reduce((a, b) => a + b)  // TypeError: Reduce of empty array with no initial value

// ✅ 正确：提供初始值
[].reduce((a, b) => a + b, 0)  // 0

// ✅ 正确：对象累积时必须提供初始值
const result = arr.reduce((acc, item) => {
  acc[item.id] = item.value
  return acc
}, {})  // 初始值为空对象

// ❌ 错误：filter 返回新数组，但赋值给了原变量
let arr = [1, 2, 3, 4, 5]
arr.filter(x => x > 2)  // 返回新数组，但没有接收
console.log(arr)  // [1, 2, 3, 4, 5]（原数组未改变）

// ✅ 正确：接收返回值
arr = arr.filter(x => x > 2)
console.log(arr)  // [3, 4, 5]