JavaScript-Array的知识总结

数组方法中那些会改变原数组？ 那些不会？

会改变原数组

push
unshift
pop
shift
sort
reverse

不会改变原数组

concat
join
split
forEach
map
reduce
slice
findIndex
find

实践

会改变原数组的属性

1. push:在数组尾部添加，返回的是新数组的长度

// 1. push:在数组尾部添加，返回的是新数组的长度
// (method) Array<string>.push(...items: string[]): number

const arr = ['nice','a','day','1','2','3'];
let arrPush = arr.push('push')
console.log('arrpush','返回值：', arrPush, arr);
// arrpush 返回值： 7 ['nice', 'a', 'day', '1', '2', '3', 'push']

2. unshift:在数组尾部添加，返回的是新数组的长度

// 2. unshift: 在数组的头部添加一个新元素，返回的是新数组的长度
// (method) Array<string>.unshift(...items: string[]): number

const arr = ['nice','a','day','1','2','3'];
let arrUnshift = arr.unshift('unshift')
console.log('unshift', '返回值：',arrUnshift,'原数组：', arr);
// unshift 返回值： 8 原数组：[ 'unshift', 'nice', 'a', 'day', '1', '2', '3', 'push' ]

3. pop: 删除最后一个元素，返回的是删除的那个元素

// 3. pop: 删除最后一个元素，返回的是删除的那个元素
// (method) Array<string>.pop(): string | undefined

const arr = ['nice','a','day','1','2','3'];
let arrPop = arr.pop()
console.log('pop','返回值：',arrPop,'原数组：', arr);
// pop 返回值： push 原数组：[ 'unshift', 'nice', 'a', 'day', '1', '2', '3' ]

4. shift: 删除数组中的第一个元素， 返回的是删除的值

// 4. shift: 删除数组中的第一个元素， 返回的是删除的值
// (method) Array<string>.shift(): string | undefined

const arr = ['nice','a','day','1','2','3'];
let arrShift = arr.shift()
console.log('shift','返回值：', arrShift,'原数组：',  arr);
// shift 返回值： unshift 原数组：[ 'nice', 'a', 'day', '1', '2', '3' ]

5. sort: sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换字符串,然后比较它们的 UTF-16 代码单元值序列时构建的。它返回的就是排序后的数组。

// 5. sort: sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换：字符串，
// 然后比较它们的 UTF-16 代码单元值序列时构建的。它返回的就是排序后的数组。
// (method) Array<string>.sort(compareFn?: ((a: string, b: string) => number) | undefined): string[]

const arr = ['nice','a','day','1','2','3'];
let arrSort = arr.sort()
console.log('Sort','返回值：', arrSort,'原数组：',  arr);
// Sort 返回值： [ '1', '2', '3', 'a', 'day', 'nice' ] 原数组：[ '1', '2', '3', 'a', 'day', 'nice' ]

const arr1 = [1,3,4,12,5,2,6];
let arrSort1 = arr1.sort()
console.log('Sort1','返回值：', arrSort1,'原数组：', arr1);
// Sort1 返回值： [1, 12, 2, 3, 4, 5, 6] 原数组：[1, 12, 2, 3, 4, 5, 6]

// 注意：
// 因： sort 的默认排序是将元素转化：字符串后排序的，所以上述代码中的排序结果可能不是我们想要的，
// 想要获得正确的排序结果，我们可以传入一个函数，来规定排序的规则
// 从小到大排序
let arrSort2 = arr1.sort((a,b) => a - b);
console.log('Sort2','返回值：', arrSort2,'原数组：', arr1);
// Sort2 返回值： [1, 2, 3, 4, 5, 6, 12] 原数组：[1, 2, 3, 4, 5, 6, 12]
let arrSort3 = arr1.sort((a,b) => b - a);
console.log('Sort3','返回值：', arrSort3,'原数组：',  arr1);
// Sort3 返回值： [12, 6, 5, 4, 3, 2, 1] 原数组： [12, 6, 5, 4, 3, 2, 1]

6. reverse: 反转数组，将数组的顺序颠倒过来，返回的是反转后的数组

// 6. reverse: 反转数组，将数组的顺序颠倒过来，返回的是反转后的数组
// (method) Array<string>.reverse(): string[]

const arr = ['nice','a','day','1','2','3'];
let arrReverse = arr.reverse();
console.log('reverse', '返回值：',arrReverse,'原数组：',arr );
// reverse 返回值： [ 'nice', 'day', 'a', '3', '2', '1' ] 原数组： [ 'nice', 'day', 'a', '3', '2', '1' ]

不会改变原数组的属性

1. concat: 用于连接两个或多个数组，不会改变原数组，返回的是连接后的数组的副本

let arr2 = ['俺是'];
let arr3 = ['凌晨'];
let arr4 = ['啊'];

// 1.concat： 用于连接两个或多个数组，不会改变原数组，返回的是连接后的数组的副本
// (method) Array<string>.concat(...items: ConcatArray<string>[]): string[]

let arrConcat = arr2.concat(arr3)
console.log('concat','返回值：', arrConcat);
// concat 返回值： [ '俺是', '凌晨' ]

// 连接多个数组
let arrConcat1 = arr2.concat(arr3,arr4)
console.log('concat','返回值：', arrConcat1);
// concat 返回值： [ '俺是', '凌晨', '啊' ]

2. join: 把数组中的所有元素转换一个字符串，join 里的参数就是字符串之间的连接符，返回的是字符串

// 2. join: 把数组中的所有元素转换一个字符串，join 里的参数就是字符串之间的连接符，返回的是字符串
// (method) Array<number>.join(separator?: string | undefined): string

let arrArr = [1, 2, 3];
let arrJoin = arrArr.join('')
console.log('join','返回值：', arrJoin);
// join 返回值： 123

let arrJoin1 = arrArr.join('#')
console.log('join','返回值：', arrJoin1);
// join 返回值： 1#2#3

3. split: split：将字符串转化为数组，split的参数是字符串之间的连接符

// 3. split：将字符串转化为数组，split的参数是字符串之间的连接符
// 如：将 字符串 1#2#3 转化为 [1,2,3]，返回的是一个数组
// (method) String.split(separator: string | RegExp, limit?: number | undefined): string[]

let arrSplit = arrJoin1.split('#')
console.log('split', '返回值：', arrSplit);
// split 返回值： [ '1', '2', '3' ]

let arrStr = '1-2-3';
let arrSplit1 = arrStr.split('-')
console.log('split', '返回值：', arrSplit1);
// split 返回值： [ '1', '2', '3' ]

4. reduce: 接受一个函数作为累加器，返回值是累加后的值

// 4. reduce: 接受一个函数作为累加器，返回值是累加后的值
// (method) Array<number>.reduce(callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: number[]) => number): number
// function(total,currentValue, index,arr) 该函数必不可少
// 参数	描述
// total	必需。初始值, 或者计算结束后的返回值。
// currentValue	必需。当前元素
// currentIndex	可选。当前元素的索引
// arr	可选。当前元素所属的数组对象。
let arrReduce = arrArr.reduce((total, currentValue) => total + currentValue)
console.log('reduce', '返回值：', arrReduce);
// reduce 返回值： 6

5. map: 映射 ，返回一个新数组

// 5. map : 映射 ，返回一个新数组
// (method) Array<number>.map<number>(callbackfn: (value: number, index: number, array: number[]) => number, thisArg?: any): number[]

let arr5 = [1,2,3,4,5]
let arr6 = [
    {size: 3},
    {size: 6},
    {size: 9}
]
let arrMap = arr5.map((item) => item + 1)
console.log('map', '返回值：', arrMap);
// map 返回值： [ 2, 3, 4, 5, 6 ]

let arrMap1 = arr6.map((item) => {
    return item.size

})
console.log('map','返回值：', arrMap1);
// map 返回值： [ 3, 6, 9 ]

let maxValue = Math.max(...arrMap1);
console.log('maxValue','返回值最大值：', maxValue);
// maxValue 返回值： 9

6. forEach: 遍历数组中的元素，没有返回值， 可以在里面对数组中的元素进行操作，不会改变原数组

// 6. forEach ： 遍历数组中的元素，没有返回值， 可以在里面对数组中的元素进行操作，不会改变原数组
// (method) Array<{ size: number; }>.forEach(callbackfn: (value: {
//     size: number;
// }, index: number, array: {
//     size: number;
// }[]) => void, thisArg?: any): void

// 声明一个新数组 将arr6 中的size 值取出 存储在arrs 中 ， 然后求arrs中的最大值

let arr6 = [
    {size: 3},
    {size: 6},
    {size: 9}
]
let arrs = []
let arrMap2 = arr6.forEach((item) => {
    arrs.push(item.size)
    // console.log(item.size);
})
console.log('arrs','返回值：', arrs,'arrsMax:', Math.max(...arrs));
// arrs 返回值： [ 3, 6, 9 ] arrsMax: 9

7. filter: 过滤，新建一个数组用于存储满足过滤条件的元素

// 7. filter： 过滤，新建一个数组用于存储满足过滤条件的元素
// (method) Array<number>.filter<number>(predicate: (value: number, index: number, array: number[]) => value is number, thisArg?: any): number[] 
let arr7 = [1,2,3,4,5];
let arrFilter = arr7.filter((item) => item > 3);
console.log('filter','返回值大于3的值：', arrFilter);
// filter 返回值大于3的值： [ 4, 5 ]

8. slice: 提取，根据slice中的索引区间进行提取，然后将该区间内的元素作为返回值return

// 8. slice: 提取，根据slice中的索引区间进行提取，然后将该区间内的元素作为返回值return
// (method) Array<number>.slice(start?: number | undefined, end?: number | undefined): number[]
// 数组
let arr8 = [1,2,3,4,5,6,7,8];
let arrSlice = arr8.slice(1,3);
console.log('slice','返回值：',arrSlice);
// slice 返回值： [ 2, 3 ]

// 字符串
let arr9 = '12345678';
let arrSlice1 = arr9.slice(1,3);
console.log('slice','返回值：',arrSlice1);
// slice 返回值： 23

9. findIndex： 接收一个测试函数，也可以叫做条件函数，最终返回满足该测试函数的元素的索引位置，如果没有找到符合条件的元素，则返回-1。(如果满足条件的有多个，那么只会返回第一个满足条件的元素索引)

// 9. findIndex： 接收一个测试函数，也可以叫做条件函数，最终返回满足该测试函数的元素的索引位置，如果没有找到符合条件的元素，则返回-1。
// 如果满足条件的有多个，那么只会返回第一个满足条件的元素索引。
// (method) Array<number>.findIndex(predicate: (value: number, index: number, obj: number[]) => unknown, thisArg?: any): number

let arr10 = [1,2,3,4,5,6]
let arrFindIndex = arr10.findIndex((item) => {
    return item > 4
})
console.log('findIndex','第一个value值大于4的索引为:', arrFindIndex);
// findIndex 第一个value值大于4的索引为: 4
let arr11 = [7,3,4,0,5,6]
let arrFindIndex1 = arr11.findIndex((item) => {
    return item > 4
})
console.log('findIndex','第一个value值大于4的索引为:', arrFindIndex1);
// findIndex 第一个value值大于4的索引为: 0

10. find: 返回find内第一个满足条件的，不会改变原数组

// 10. find: 返回find内第一个满足条件的，不会改变原数组
// 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
// 如果没有符合条件的元素返回 undefined
// find() 对于空数组，函数是不会执行的
// (method) Array<{ name: string; age: number; sex: string; }>.find(predicate: (value: {
//     name: string;
//     age: number;
//     sex: string;
// }, index: number, obj: {
//     name: string;
//     age: number;
//     sex: string;
// }[]) => unknown, thisArg?: any): {
//     name: string;
//     age: number;
//     sex: string;
// } | undefined

let arr12 = [
    {name: "hehe", age: 18,sex: 'a'},
    {name: "heihei", age: 40,sex: 'b'},
    {name: "enen", age: 35,sex: 'a'},
    {name: "hehe", age: 30,sex: 'b'},
  ]
let arrFind = arr12.find((item) => item.name == 'hehe')
console.log('find','name为hehe的返回：',arrFind );
// find name为hehe的返回： { name: 'hehe', age: 30, sex: 'b' }