js中数组的常用操作

1. 遍历

1.1 for循环

const array = [1, 2, 3, 4, 5]
for (let i = 0; i < array.length; i++) {
    console.log(array[i])
}

1.2 forEach方法

无索引

const array = [1, 2, 3, 4, 5]
array.forEach((item) => {
    console.log(item)
})

有索引（index从0开始）

const array = [1, 2, 3, 4, 5]
array.forEach((item, index) => {
    console.log(item, index)
})

2. 转成字符串

2.1 toString方法

const array = [1, 2, 3, 4, 5]
console.log(array.toString())

输出结果（逗号与数字之间没有空格）

1,2,3,4,5

2.2 join方法

const array = [1, 2, 3, 4, 5]
console.log(array.join('->'))

->可换成自定义的分隔符

输出结果

1->2->3->4->5

3. 筛选（filter方法）

示例：筛选出数组中的偶数

const array = [1, 2, 3, 4, 5]
const newArray = array.filter((item) => {
    return item % 2 === 0
})
console.log('newArray =', newArray)

4. 排序（sort方法）

const array = [3, 1, 4, 1, 5, 9]
array.sort((previous, next) => {
    return previous - next
})
console.log(array)

输出结果

1,1,3,4,5,9

5. 添加元素

5.1 添加元素到数组的开头（unshift方法）

const array = [1, 2, 3, 4]
array.unshift(-1)
console.log(array.join(', '))

输出结果

-1, 1, 2, 3, 4

5.2 添加元素到数组的末尾（push方法）

const array = [1, 2, 3, 4]
array.push(10)
console.log(array.join(', '))

输出结果

1, 2, 3, 4, 10

6. 删除元素

6.1 移除数组的第一个元素(shift方法)

const array = [1, 2, 3, 4]
array.shift()
console.log(array.join(', '))

输出结果

2, 3, 4

6.2 移除数组的最后一个元素（pop方法）

const array = [1, 2, 3, 4]
array.pop()
console.log(array.join(', '))

输出结果

1, 2, 3

7. 查找元素

7.1 找到数组中满足条件的第一个元素（find方法）

• find 方法会返回数组中满足条件的第一个元素
• 若没有满足条件的元素，find 方法将会返回 undefined

const array = [5, 12, 8, 130, 44]
let target = array.find((item) => {
    return item > 10
})
console.log('target =', target)

target = array.find((item) => {
    return item > 1024
})
console.log('target =', target)

输出结果

target = 12

target = undefined

7.2 找到数组中满足条件的第一个元素的下标（findIndex方法）

• findIndex方法会返回数组中满足条件的第一个元素的下标
• 若没有满足条件的元素，findIndex方法将会返回 -1

const array = [5, 12, 8, 130, 44]
let target = array.findIndex((item) => {
    return item > 10
})
console.log('target =', target)

target = array.findIndex((item) => {
    return item > 1024
})
console.log('target =', target)

输出结果

target = 1

target = -1

7.3 找到给定元素第一次在数组中出现的位置（indexOf方法）

• indexOf 方法返回给定元素在数组中第一次出现的位置
• 如果数组中不存在不存在该元素，则返回 -1

const array = [2, 9, 9, 5, 1]
let index = array.indexOf(9)
console.log('index =', index)

index = array.indexOf(1024)
console.log('index =', index)

输出结果

index = 1

index = -1

7.4 判断数组是否包含指定元素（includes方法）

const array = [1, 2, 3]
let result = array.includes(2)
console.log('result =', result)

result = array.includes(1024)
console.log('result =', result)

输出结果

result = true

result = false

7.5 找到指定元素在数组中最后一次出现的位置（lastIndexOf方法）

const array = [2, 5, 9, 2, 5, 1]

let index = array.lastIndexOf(2)
console.log('index =', index)

// 查找元素 5 最后一次出现的位置，从索引 3 开始往前找
index = array.lastIndexOf(5, 3)
console.log('index =', index)

index = array.lastIndexOf(3)
console.log('index =', index)

输出结果

index = 3

index = 1

index = -1

7.6 判断数组中是否有至少一个元素满足条件（some方法）

const array = [1, 2, 3, 4, 5]
let exist = array.some(( item) => {
    return  item % 2 === 0
})
console.log('exist =', exist)

exist = array.some(( item) => {
    return  item % 7 === 0
})
console.log('exist =', exist)

输出结果

exist = true

exist = false

8. 对数组中的每个元素执行一个自定义函数（map方法）

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

// 将数组中的每个元素乘以2
const doubled = array.map((item) => {
    return item * 2
})
console.log('doubled :', doubled.join(', '))

// 使用索引
const withIndexes = array.map((item, index) => {
    return `array[${index}] = ${item}`
})
console.log('withIndexes :', withIndexes.join(', '))

输出结果

doubled : 2, 4, 6, 8, 10

withIndexes : array[0] = 1, array[1] = 2, array[2] = 3, array[3] = 4, array[4] = 5

注意：map 方法不会改变原始数组，而是返回一个新数组

9. 两个数组之间的操作

9.1 合并（merge，包含重复元素）

const array1 = [1, 2, 3, 4, 5]
const array2 = [9, 2, 4, 5, 6, 7, 8]

const merged1 = [...array1, ...array2]
console.log('merged1 =', merged1.join(', '))

const merged2 = array1.concat(array2)
console.log('merged2 =', merged2.join(', '))

输出结果

merged1 = 1, 2, 3, 4, 5, 9, 2, 4, 5, 6, 7, 8

merged2 = 1, 2, 3, 4, 5, 9, 2, 4, 5, 6, 7, 8

9.2 并集（union，不包含重复元素）

const array1 = [1, 2, 3]
const array2 = [3, 4, 5]

const union = Array.from(new Set(array1.concat(array2)))
console.log('union =', union.join(', '))

输出结果

union = 1, 2, 3, 4, 5

9.3 差集（difference）

const array1 = [1, 2, 3, 4, 5]
const array2 = [4, 5, 6, 7, 8]

const set1 = new Set(array1)
const set2 = new Set(array2)

// array1有但array2没有的元素
const difference1 = array1.filter((item) => {
    return !set2.has(item)
})
console.log('difference1 =', difference1.join(', '))

// array2有但array1没有的元素
const difference2 = array2.filter((item) => {
    return !set1.has(item)
})
console.log('difference2 =', difference2.join(', '))

输出结果

difference1 = 1, 2, 3

difference2 = 6, 7, 8

9.4 交集（intersection）

const array1 = [1, 2, 3, 4, 5]
const array2 = [4, 5, 6, 7, 8]

const set2 = new Set(array2)
const intersection = array1.filter(item => {
    return set2.has(item)
})
console.log('intersection =', intersection.join(', '))

输出结果

intersection = 4, 5

10. 截取数组的某个部分（slice方法）

const array = [9, 8, 7, 6, 0, 1, 2, 3, 4, 5]

// 从索引2开始截取到索引4（不包括4）
const sliced1 = array.slice(2, 4)
console.log('sliced1 =', sliced1.join(', '))

// 从索引2开始截取到最后
const sliced2 = array.slice(2)
console.log('sliced2 =', sliced2.join(', '))

sliced1 = 7, 6

sliced2 = 7, 6, 0, 1, 2, 3, 4, 5