1.数组分类
1.1 会改变原数组的方法
数组方法 | 作用 |
---|
push() 、pop() | 向数组结尾添加(删除)一或多个元素 |
unshift() 、shift() | 向数组开头添加(删除)一或多个元素 |
reverse() | 反转数组 |
sort() | 数组排序 |
splice() | 数组任意位置增删改 |
fill() | 批量替换数组元素 |
copyWithin() | 拷贝数组内的元素到数组内指定位置 |
1.2 不会改变原数组的方法
数组方法 | 作用 |
---|
Array.isArray() | 判断一个值是否为数组 |
concat() | 合并数组 |
join() | 数组转字符串(整个数组转为一个字符串) |
toString() | 元素转字符串(每个元素分别转为一个字符串) |
slice() | 截取数组元素 |
indexOf()、lastIndexOf() | 检测某个元素在数组中第一次(最后一次)出现的位置 |
forEach()、map() | 遍历数组 |
filter() | 过滤数组 |
every()、some() | 判断数组所有(一个)元素是否满足条件 |
includes() | 判断某个元素是否存在数组中 |
find()、findIndex() | 获取数组中满足条件的第一个数据(的索引) |
reduce() | 数组元素叠加后的效果 |
flat() | 数组扁平化 |
flatMap() | 扁平化并加工数组 |
2. 数组方法详解
2.1 push 向数组(结尾)添加一或多个元素
var arr = ['a', 's', 'd']
var a = arr.push('q')
var b = arr.push('q', 'e')
console.log(arr);
console.log(a);
console.log(b);
2.2 pop 删除数组最后一位元素
var arr = ['a', 's', 'd', 'r']
var a = arr.pop()
console.log(arr);
console.log(a);
2.3 unshift 向数组(开头)添加一或多个元素
var arr = ['a', 's', 'd']
var a = arr.unshift('q')
var b = arr.unshift('q', 'e')
console.log(arr);
console.log(a);
console.log(b);
2.4 shift 删除数组第一位元素
var arr = ['a', 's', 'd', 'r']
var a = arr.shift()
console.log(arr);
console.log(a);
2.5 reverse 反转数组
var arr1 = ['a', 's', 'd', 'r']
var arr2 = arr1.reverse()
console.log(arr1);
console.log(arr2);
2.6 sort 数组排序
var arr1 = [6, 4, 3, 9]
var arr2 = arr1.sort()
console.log(arr1);
console.log(arr2);
var arr3 = [106, 4, 43, 9]
var arr4 = arr3.sort((a, b) => {
return a - b
})
console.log(arr3);
console.log(arr4);
var arr5 = [106, 4, 43, 9]
var arr6 = arr5.sort((a, b) => {
return b - a
})
console.log(arr5);
console.log(arr6);
var arr7 = ['a', 'c', 'z', 'b']
var arr8 = arr7.sort()
console.log(arr7);
console.log(arr8);
var arr9 = ['a', 'c', 'z', 'b']
var arr10 = arr9.sort((a, b) => {
return b.charCodeAt(0) - a.charCodeAt(0);
})
console.log(arr9);
console.log(arr10);
2.7 Array.isArray() 判断一个值是否为数组
- 返回值:是数组返回true,不是数组返回false
- 不改变原数组
var arr = ['a', 'b', 'c']
var a = Array.isArray(123)
var b = Array.isArray('asd')
var c = Array.isArray(arr)
console.log(a);
console.log(b);
console.log(c);
2.8 splice 数组任意位置增删改
var arr1 = ['a', 'c', 'd', 'b']
var arr2 = arr1.splice(0, 0, 'f', 'p')
console.log(arr1);
console.log(arr2);
var arr3 = ['a', 'c', 'd', 'b']
var arr4 = arr3.splice(0, 2)
console.log(arr3);
console.log(arr4);
var arr5 = ['a', 'c', 'd', 'b']
var arr6 = arr5.splice(0, 1, 'r', 'g')
console.log(arr5);
console.log(arr6);
2.9 fill 批量替换数组元素
var arr1 = ['e', 'f', 'o', 'p', 'o']
var arr2 = arr1.fill('a', 0, 3)
console.log(arr1);
console.log(arr2);
var arr3 = ['e', 'f', 'o', 'p', 'o']
var arr4 = arr3.fill('a')
console.log(arr3);
console.log(arr4);
2.10 copyWithin 拷贝数组内的元素到数组内指定位置
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var a = arr.copyWithin(3, 0, 4)
console.log(arr);
console.log(a);
2.11 concat 合并数组
var arr1 = [1, 2, 3, 4, 5]
var arr2 = ['a', 's', 'd']
var arr3 = 'e'
var a = arr1.concat(arr2, arr3)
console.log(arr1);
console.log(a);
2.12 join 数组转字符串(整个数组转为一个字符串)
var arr = [1, 2, 3, 4, 5]
var str = arr.join('-')
console.log(arr);
console.log(str);
2.13 toString 元素转字符串(每个元素分别转为一个字符串)
const arr = [22, 3, 31, 12];
const str = arr.toString();
console.log(arr);
console.log(str);
2.14 slice 截取数组元素
var arr1 = ['e', 'f', 'o', 'p']
var arr2 = arr1.slice(0, 2)
console.log(arr1);
console.log(arr2);
2.15 indexOf 检测某个元素在数组中第一次出现的位置
- 返回值:找到返回索引位置,找不到返回-1
- 不改变原数组
var arr = ['e', 'f', 'o', 'p', 'o']
var a = arr.indexOf('o')
var b = arr.indexOf('q')
console.log(arr);
console.log(a);
console.log(b);
2.16 lastIndexOf 检测某个元素在数组中最后一次出现的位置
- 返回值:找到返回索引位置,找不到返回-1
- 不改变原数组
var arr = ['e', 'f', 'o', 'p', 'o']
var a = arr.lastIndexOf('o')
var b = arr.lastIndexOf('q')
console.log(arr);
console.log(a);
console.log(b);
2.17 forEach 遍历数组
var arr1 = ['e', 'f']
arr1.forEach((item,index,arr)=>{
console.log(item, index,arr);
})
console.log(arr1);
2.18 map 映射数组
- 返回值:一个映射完毕的数组,要以return的形式执行返回条件
- 不改变原数组
var arr1 = ['e', 'f', 'h']
var arr2 = arr1.map((item,index,arr) => {
return item + '1'
})
console.log(arr1);
console.log(arr2);
2.19 filter 过滤数组
- 返回值:如果有,返回筛选后的元素组成的数组;如果没有返回一个空数组,要以return的形式执行返回条件
- 不改变原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.filter((item,index,arr) => {
return item >= 3
})
console.log(arr1);
console.log(arr2);
2.20 every 判断数组所有元素是否满足条件
- 返回值:所有元素都满足条件,返回true;只要有一个不满足,就返回false,要以return的形式执行返回条件
- 不改变原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.every((item) => {
return item >= 3
})
var arr3 = arr1.every((item) => {
return item >= 0
})
console.log(arr1);
console.log(arr2);
console.log(arr3);
2.21 some 判断数组是否有元素满足条件
- 返回值:有一个元素满足条件,返回true;没有一个元素满足条件,就返回false,要以return的形式执行返回条件
- 不改变原数组
var arr1 = [1, 2, 3, 4, 5, 6]
var arr2 = arr1.some((item) => {
return item >= 3
})
var arr3 = arr1.some((item) => {
return item >= 10
})
console.log(arr1);
console.log(arr2);
console.log(arr3);
2.22 includes 判断某个元素是否存在数组中
- 返回值:存在返回true,不存在返回false
- 不改变原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.includes(2)
var b = arr.includes(8)
console.log(arr);
console.log(a);
console.log(b);
2.23 find 获取数组中满足条件的第一个数据
- 返回值:返回满足条件的第一个元素;没有返回undefined,要以return的形式执行返回条件
- 不改变原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.find((item) => {
return item > 3
})
var b = arr.find((item) => {
return item > 10
})
console.log(arr);
console.log(a);
console.log(b);
2.24 findIndex 获取数组中满足条件的第一个数据的索引
- 返回值:返回满足条件的第一个元素索引;没有返回-1,要以return的形式执行返回条件
- 不改变原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.findIndex((item) => {
return item > 3
})
var b = arr.findIndex((item) => {
return item > 10
})
console.log(arr);
console.log(a);
console.log(b);
2.25 reduce 数组元素叠加后的效果
- 返回值:返回叠加后的结果,要以return的形式执行返回条件
- 不改变原数组
var arr = [1, 2, 3, 4, 5, 6]
var a = arr.reduce((prev, item) => {
return prev += item
})
console.log(arr);
console.log(a);
2.26 flat 数组扁平化
var arr1 = [0, 1, 2, [3, 4]];
var arr2 = arr1.flat()
console.log(arr1);
console.log(arr2);
var arr3 = [0, 1, 2, [[[3, 4]]]];
var arr4 = arr3.flat(2)
console.log(arr3);
console.log(arr4);
var arr5 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
var arr6 = arr5.flat(Infinity);
console.log(arr5);
console.log(arr6);
var arr7 = [1, 2, , 4, 5];
var arr8 = arr7.flat();
console.log(arr7);
console.log(arr8);
2.27 flatMap 扁平化并加工数组
- 返回值:加工后的降维数组(可以返回跟原数组长度不同的数组)
- 不改变原数组
var arr1 = [2, 3, 4];
var arr2 = arr1.flatMap((item) => [item, item * 2])
console.log(arr1);
console.log(arr2);
const arr3 = [1, 2, 3, 4]
const arr4 = arr3.flatMap(x => x % 2 === 0 ? [x] : [])
console.log(arr3);
console.log(arr4);
const arr5 = [1, 2, 3, 4]
const arr6 = arr5.flatMap(x => [x * 2])
console.log(arr5);
console.log(arr6);