数组的常用方法

目录

1. 遍历数组

2. 过滤数组

3. 迭代数组

4. 累计器

5. 数组拼接成字符串

6. 数组中查找元素

7. 数组是否包含指定的值

8. 数组中新增元素

9. 数组中删除元素

10. 数组任意位置的增/删/改

11. 数组的合并和截取

12. 数组的排序

13. 数组的索引方法

14. 数组去重

---

1. 遍历数组

• 我们可以通过 for循环 遍历数组中的每一项，代码如下：

let arr= ['red','green','blue']
for (let i = 0; i < arr.length; i++) {
     console.log( arr[i] )  // red, green, blue
}

• 也可以通过 forEach 遍历数组的每一项，代码如下：

// 基本语法 
arr.forEach(function (当前数组元素[, 当前元素索引号]) {
    ...
})
// 实例
const arr = ['a', 'b', 'c', 'd']
arr.forEach( (item) => {
    console.log( item )  // a, b, c, d
})

• every   // 遍历数组成员，一假为假，返回 true 或者 false（严格）  // 如果数组为空，不看条件是什么，直接返回 true

const arr = [1, 30, 39, 29, 10, 13]
const res = arr.every(item => item < 40)
console.log( res )  // 结果 true

• some   // 遍历数组成员，一真为真，返回 true 或者 false（宽松）  // 如果数组为空，不看条件是什么，直接返回 false

const arr = [1, 30, 39, 29, 10, 13]
const res = arr.some(item => item < 10)
console.log( res )  // 结果 true

2. 过滤数组

filter   // 过滤数组，筛选数组，并生成新数组

// 基本语法
arr.filter(function (当前数组元素[, 元素索引号]) {
    return 筛选条件
})
// 实例
const arr = [10, 22, 100, 107]
const res = arr.filter( item => item < 100 )
console.log( res )  // 结果 [10, 22]

3. 迭代数组

map   // 迭代数组，返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据

// 基本语法
// 将函数的返回结果收集到一个新数组中
arr.map(function (当前数组元素[, 元素索引号]) {
    return 表达式
})
// 实例
const arr = [10, 22, 101, 107]
const res = arr.map( item => item > 100)
console.log( res )  // 结果 [false, false, true, true]

4. 累计器

reduce   // 累计器，返回函数累计处理的结果，经常用于求和

// 基本语法 
arr.reduce(function (累计值, 当前数组元素[, 元素索引号]) {
    return 表达式
}, 起始值)  // 如果没有起始值, 则以数组的第一个元素作为起始值
// 实例
const arr = [1, 2, 3, 4]
const res = arr.reduce( (sum, item) => sum + item, 0)
console.log( res )  // 结果 10

5. 数组拼接成字符串

join   // 用逗号或指定的分隔符将数组元素拼接为字符串，返回新的字符串

const arr = ['Fire', 'Air', 'Water']
console.log( arr.join() )  // 结果 'Fire,Air,Water'
console.log( arr.join('') )  // 结果 'FireAirWater'
console.log( arr.join('-'))  // 结果 'Fire-Air-Water'

6. 数组中查找元素

 find   // 在数组中查找元素，返回符合测试条件的第一个数组元素值，找不到则返回 undefined

 findIndex   // 查找符合测试条件的第一个数组元素的索引值

const arr= [5, 12, 8, 130, 44]
const found = arr.find(element => element > 10)
console.log( found )  // 结果 12

const foundIndex = arr.findIndex(element => element > 10)
console.log( foundIndex )  // 结果1

7. 数组是否包含指定的值

includes   // 判断一个数组是否包含一个指定的值，返回 true 或者 false

const array1 = [1, 2, 3]
console.log( array1.includes(2) )
// 结果: true

const pets = ['cat', 'dog', 'bat']
console.log( pets.includes('cat') )
// 结果: true
console.log( pets.includes('at') )
// 结果: false

8. 数组中新增元素

push("新数据")   // 往数组的最后添加一项或者多项，并且返回添加之后数组的长度
unshift("新数据")   // 往数组的最前添加一项或者多项，并且返回添加之后数组的长度

let arr = ['red', 'green', 'blue', 'pink']
arr.push('hotpink', 'deeppink', 'orange')
arr.unshift('yellow', 'black')
console.log( arr )  // 结果 ...

9. 数组中删除元素

pop( )   // 删除数组的最后一项，并且返回删除的这一项
shift( )   // 删除数组的第一项，并且返回删除的这一项

let arr = ['red', 'green', 'blue', 'pink']
arr.pop()  // 删除'pink'
arr.shift()  // 删除'red'
console.log( arr )  // 结果 ['green', 'blue']

10. 数组任意位置的增/删/改

splice(从哪开始删除, 删除几项, 添加的项1, 添加的项2, 添加的项3, ...)

let arr = ['刘备', '关羽', '张飞', '诸葛亮', '庞统']
// 删
arr.splice(3, 2)
// 增(插入)
arr.splice(3, 0, '赵云', '马超')
// 替换
arr.splice(4, 1, '法正')
console.log( arr )  // 结果 ['刘备', '关羽', '张飞', '赵云', '法正']

11. 数组的合并和截取

concat(value1, value2.....)  // 合并两个数组，返回生成的新数组   
slice(begin, end)  // 数组截取，返回被截取项目的新数组

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
let newArr = arr1.concat(arr2, arr3)
console.log( newArr )  // 结果 [1,2,3,4,5,6,7,8,9]
console.log( newArr.slice(0, 3) )  // 结果 [1,2,3]

12. 数组的排序

sort   // 对原数组单元值排序，此方法会修改原数组

reverse   // 反转原数组，此方式会修改原数组

let arr = [1, 5, 0, 11, 22, 15];
arr.reverse()
console.log( arr )  // 结果 [15, 22, 11, 0, 5, 1]
arr.sort(function (a, b) {
    // return a - b;  // 升序
    return b - a;  // 降序
})
console.log( arr )  // 结果 [22, 15, 11, 5, 1, 0]

13. 数组的索引方法

indexOf(数组元素)  // 返回匹配数组元素的索引号，从前面开始查找，只会返回第一个满足条件的索引号，如果在数组里面找不到匹配元素，则返回 -1 
lastIndexOf(数组元素)  // 返回匹配数组元素的索引号，从后面开始查找

let arr = ['red', 'green', 'blue', 'pink', 'black', 'red']
console.log( arr.indexOf('red') )  // 结果 0
console.log( arr.lastIndexOf('red') )  // 结果 5
console.log( arr.indexOf('orange') )  // 结果 -1

和find、findIndex方法的区别在于：indexOf、lastIndexOf调用时可以直接写值，find、findIndex调用时要设置回调函数

14. 数组去重

let arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
let newArr = []
// 遍历旧数组, 判断新数组中有没有和旧数组匹配的元素, 没有的话才新增
for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log(newArr)  // 结果 ['c', 'a', 'z', 'x', 'b']