数组的常用操作
数组的常用操作API及其常用操作
取最值
Math.min最小值
const arr = [1, 2, 3, 4, 5, 6]
console.log(Math.min(...arr)) //1
Math.max最大值
const arr = [1, 2, 3, 4, 5, 6]
console.log(Math.max(...arr)) //6
获取当前数组的长度(length)
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.length) // 6
console.log(arr[0]) // 1
用来判断一个数组是否包含一个指定的值(includes)
includes（searchElement，fromIndex）
searchElement 必须。需要查找的元素值。 fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.includes(1)) // true
分隔为字符串(join)
join 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串 默认用“,” 分隔。join()可以将一个数组转为字符串,并将新的数组作为函数返回值返回,不会改变原数组。
const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.join()) // 1,2,3,4,2,6
console.log(arr.join('')) // 123426
console.log(arr.join(' ')) // 1 2 3 4 2 6
console.log(arr.join('-')) // 1-2-3-4-2-6
浅拷贝截取某一个片段(slice)
方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。(如果是复杂数据类型 因为是浅拷贝，拷贝的只是指向原数组的指针，会修改原数组)注意：字符串也有一个slice() 方法是用来提取字符串的，参数给0 ，表示什么都不截取，拷贝一份。
begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.slice(1, 3)) // [ 2, 3 ]
console.log(arr.slice(0)) // [ 1, 2, 3, 4, 5, 6 ]
获取某个元素在数组当中第一次出现的位置(indexOf)
返回指定字符在原字符串中的第一个匹配项的索引。如省略第二个参数，则将从字符串的首字符开始检索。
可指定字符开始检索位置和指定长度的字符，若没有找到该字符，则返回 -1。
也可以判断数组中是否包含某个值。
const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.indexOf(4)) // 3
获取某个字符最后出现在字符串的位置(lastIndexOf)
const arr = [1, 2, 3, 4, 2, 6]
console.log(arr.lastIndexOf(2)) // 4
数组合并拼接(contact)
const arr = [1, 2, 3, 4, 5, 6]
const arr1 = [8, 9, 10]
console.log([...arr, ...arr1]) // [1, 2, 3, 4, 5, 6, 8, 9, 10]
console.log(arr.concat(arr1)) // [1, 2, 3, 4, 5, 6, 8, 9, 10]
向数组末尾进行追加(push)
注: 会更改原数组
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.push(7)) // 7
console.log(arr) // [1, 2, 3, 4, 5, 6, 7]
向数组最前面进行追加(unshift)
注: 会更改原数组
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.unshift(0, 100)) // 8
console.log(arr) // [0, 100, 1, 2, 3, 4, 5, 6]
删除数组的第一个元素,并返回这个元素(shift)
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.shift()) // 1
console.log(arr) // [ 2, 3, 4, 5, 6 ]
从数组的末尾开始删除 并且返回这个元素(pop)
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.pop()) //6
console.log(arr) //[ 1, 2, 3, 4, 5 ]
排序(sort)
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.sort((a, b) => a - b)) // 正序
console.log(arr.sort((a, b) => b - a)) // 倒序
数组多条件排序
var array = [
{ id: 2, age: 12 },
{ id: 11, age: 42 },
{ id: 2, age: 0 },
{ id: 6, age: 9 },
{ id: 20, age: 3 },
{ id: 12, age: 23 }
]
array.sort(function (a, b) {
if (a.id === b.id) {
// 如果id的值相等，按照age的值降序
return b.age - a.age
} else {
// 如果id的值不相等，按照id的值升序
return a.id - b.id
}
})
console.log(array)
// [ { id: 2, age: 12 }, { id: 2, age: 0 }, { id: 6, age: 9 },
// { id: 11, age: 42 }, { id: 12, age: 23 },{ id: 20, age: 3 }]
对数组进行遍历循环(forEach)
语法:array.forEach(function(currentValue , index , arr){}, thisValue);
currentValue : 必需。当前元素
index： 可选。当前元素的索引值。
arr : 可选。当前元素所属的数组对象。
thisValue： 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。
const arr = ['red', 'green', 'blue']
const result = arr.forEach(function (item, index) {
console.log(item); // 数组元素 red green blue
console.log(index); // 索引号
})
//console.log(result); //不会返回数组
// 1. forEach 主要是遍历数组
// 2. 参数当前数组元素是必须要写的， 索引号可选。
将数组进行翻转(reverse)
const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.reverse()) // [6, 5, 4, 3, 2, 1]
删除，替换，插入(splice)
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
语法: array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数:
- start 指定修改的开始位置（从0计数）。
如果超出了数组的长度，则从数组末尾开始添加内容；
如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
- deleteCount （可选）
整数，表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
- item1, item2, ... （可选） 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
返回值:
由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组
const arr = [1, 2, 3, 4, 5, 6]
// 删除：第一个参数表示你要删除的索引，第二个参数删多少个 返回被删除的元素数组
console.log(arr.splice(2, 1)) // [ 3 ]
console.log(arr) // [ 1, 2, 4, 5, 6 ]
// 替换：4, 5 -> x
// 第一个参数，开始替换的索引位置;第二个参数要替换多少个;第三个参数要替换的值
arr.splice(2, 2, 'x')
console.log(arr) // [ 1, 2, 'x', 6 ]
// 插入：6 -> y, 插入是在开始的元素前面添加的
arr.splice(3, 0, 'y') // [ 1, 2, 'x', 'y', 6 ]
console.log(arr)
判断当前数组是不是都满足某个条件(every)
const groups = [
{ id: 1, name: 'red' },
{ id: 2, name: 'Yellow' },
{ id: 3, name: 'Green' }
]
// 判断当前数组中的每一项的id是不是都是2
const flag = groups.every(function (group) {
return group.id === 2
})
// const flag = groups.every(group => group.id === 2)
console.log(flag) // false
判断当前数组是不是有一个满足某个条件(some)
const groups = [
{ id: 1, name: 'red' },
{ id: 2, name: 'Yellow' },
{ id: 3, name: 'Green' }
]
const flag = groups.some(group => group.id === 3)
console.log(flag) // true
对数组中的每个元素进行处理(map)
map 表示映射 对数组中的每个元素进行处理，返回新的数组 数组中的元素为原始数组元素调用函数处理后的值。
回调函数的参数
- currentValue(必须),数组当前元素的值
- index(可选), 当前元素的索引值
- arr(可选),数组对象本身
const groups = [
{ id: 1, name: 'red' },
{ id: 2, name: 'Yellow' },
{ id: 3, name: 'Green' }
]
const ids = groups.map(group => {
return {
'xx': group.id + 100
}
})
console.log(ids) // [ { xx: 101 }, { xx: 102 }, { xx: 103 } ]
console.log(groups) // 不会改变原数组
// 对原数组元素进行平方后再赋值给新的数组
let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray) // [1, 4, 9, 16, 25]
过滤(filter)
const groups = [
{ id: 1, name: 'red' },
{ id: 3, name: 'Yellow' },
{ id: 3, name: 'Green' }
]
// 把所有id为3的全部拿出来
const ids3 = groups.filter(group => group.id === 3 && group.name === 'Yellow')
console.log(ids3) // [ { id: 3, name: 'Yellow' } ]
查找满足条件的第一个元素(find)
const groups = [
{ id: 1, name: 'red' },
{ id: 2, name: 'Yellow' },
{ id: 3, name: 'Green' },
{ id: 3, name: 'blue' },
]
// 只要找到一个符合立马返回
const group = groups.find(item => item.id === 3)
console.log(group) // { id: 3, name: 'Green' }
查找某一个符合条件的索引(findIndex)
const groups = [
{ id: 1, name: 'red' },
{ id: 2, name: 'Yellow' },
{ id: 3, name: 'Green' }
]
const index = groups.findIndex(group => group.name === 'Yellow')
console.log(index) // 1
为数组提供累加器，合并为一个值(reduce)
定义：reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：
function(必须): 数组中每个元素需要调用的函数。
回调函数的参数
1. total(必须)，初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身
initialValue(可选): 指定第一次回调 的第一个参数。
回调第一次执行时:
如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；
如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。
如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。
// 数组求和
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
// 将二维数组转化为一维 将数组元素展开
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
(a, b) => a.concat(b),
[]
);
// [0, 1, 2, 3, 4, 5]
const calendarTypeOptions = [
{ key: 'CN', display_name: 'China' },
{ key: 'US', display_name: 'USA' },
{ key: 'JP', display_name: 'Japan' },
{ key: 'EU', display_name: 'Eurozone' }
]
let obj={}
calendarTypeOptions.forEach(item=>[
obj[item.key]=item.display_name
])
console.log(obj);
// console.log(calendarTypeOptions.reduce((prev,next)=>{
// prev[next.key]=next.display_name
// return prev
// },{}));
数组扁平化处理(flat)
方法创建一个新数组，其中所有子数组元素以递归方式连接到特定深度。
const arr = [[1, 2], [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]
