js数组进阶
凯 4/27/2024 js
# 1.数组方法
unshift 前增 返回新数组长度
push 后增 返回新数组长度
shift 前删 返回删除的元素
pop 后删 返回删除的元素
splice 任意位置的增删改查（位置索引，删除的个数，新增元素1，新增元素2） 返回删除的元素组成的新数组
concat 合并
# 1.push
作用：末尾增加元素
返回值：数组的新长度
特点：修改原数组
语法：
arr.push()
1
案例：
let arr = [100,200]
console.log(arr.push(300,400,500)); //5
console.log(arr); //[100, 200, 300, 400, 500]
1
2
3
4
2
3
4
# 2.pop
作用：末尾删除元素
返回值：被删除的元素
特点：要修改原数组
语法：
arr.pop()
1
案例：
let arr = [100,200]
console.log(arr.pop()); //200
console.log(arr); //[100]
1
2
3
4
2
3
4
# 3.unshift
作用：前面增加元素
返回值：数组的新长度
特点：要修改原数组
语法：
arr.unshift()
1
案例：
let arr = [100,200]
console.log(arr.unshift(30,50)); //4
console.log(arr); // [30, 50, 100, 200]
1
2
3
4
2
3
4
# 4.shift
作用：前面删除元素
返回值：被删除的元素
特点：要修改原数组
语法：
arr.shift()
1
案例：
let arr = [100,200]
console.log(arr.shift()); //100
console.log(arr); //[200]
1
2
3
2
3
# 5.splice
作用：在任意位置 增加 删除 替换元素
返回值：被删除的元素组成的数组
特点：要修改原数组
语法：
arr.splice(索引位置，删除掉元素个数，新增的元素值1，新增元素值2，新增····)
1
案例：
let arr = [100,200,300,400,500]
consolelog(arr.splice(1,1)); //[200]
console.log(arr); //[100, 300, 400, 500]
1
2
3
2
3
let arr = [100,200,300,400,500]
arr.splice(1,1,1000,2000); //[200]
console.log(arr); //[100,1000,2000, 300, 400, 500]
1
2
3
2
3
let arr = [100,200,300,400,500]
arr.splice(1,0,1000,2000); // []
console.log(arr); //[100,1000,2000, 200,300, 400, 500]
1
2
3
2
3
let arr = [100,200,300,400,500]
arr.splice(2,2); //[300,400]
console.log(arr); //[100,200,500]
1
2
3
2
3
# 6.concat
作用：将后面数组的元素 合并 到数组1上
返回值：合并后的新数组
特点：不改变原数组
语法：
数组1.concat（数组2，数组3）
let 合并后的新数组 = 原数组.concat（数组2，数组3）
1
2
2
案例：
let arr = [100,200,300,400,500]
let arr1 = [1000,2000]
let arr2 = [3000,4000]
// 合并
let newArrr = arr.concat(arr1,arr2)
console.log(newArrr);//[100, 200, 300, 400, 500, 1000, 2000, 3000, 4000]
console.log(arr); // [100,200,300,400,500]
console.log(arr1); //[1000,2000]
console.log(arr2); //[3000,4000]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 阶段练习：
let userList = [
{ sno:100,name: '罗美洁', gender: "女", age: 21 },
{ sno:101,name: '彭代晶', gender: '男', age: 22 },
{ sno:105,name: '陈玉婷', gender: '女', age: 23 }
]
let userList1 = [
{ sno:107,name: '刘玉清', gender: "女", age: 22 },
]
//1.请添加张敏敏102 刘欢104
let user1 = { sno: 102, name: '张敏敏', gender: "女", age: 21 }
let user2 = { sno: 104, name: '刘欢', gender: "男", age: 21 }
userList.splice(2, 0, user1,user2)
console.log(userList);
//2.请修改 101的同学 年龄：23
//方法一
userList[i].age=23;
//方法二
let user3 = { sno: 101, name: '彭代晶', gender: '男', age: 23 }
userList.splice(1, 1, user3)
console.log(userList);
//3.请在尾部添加 106徐练 信息
let user4 = { sno: 106, name: '徐练', gender: "女", age: 21 }
userList.push(user4)
console.log(userList);
//4.请删除 106同学的信息
userList.pop()
console.log(userList);
//5.请在前面添加一个 99 徐练
userList.unshift(user4)
console.log(userList);
//6.请删除最前面的 99徐练的信息
userList.shift()
console.log(userList);
//7.请合并另userList1 数组到 userList 中 ，打印输出userList
userList = userList.concat(userList1)
console.log(userList);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 7.forEach
数组遍历，单纯数组遍历，跟for循环效果完全一样，只是for的简写
特点：不改变原数组
let arr = [1,2,3]
arr.forEach(function(item,index){
arr1.
})
1
2
3
4
2
3
4
# 8.map
数组遍历，返回一个新数组
特点：不改变原数组
let arr = [1,2,3]
let arr1 = arr.map(function(item,index){
return item+1000；
})
1
2
3
4
2
3
4
# 9.filter 过滤-数组的遍历
数组过滤，建立数组，返回满足条件的元素，组成一个新数组
特点：不改变原数组
let arr = [1,2,3,-1]
let arr1 = arr.filter(function(item,index){
return item>0；
})
1
2
3
4
2
3
4
# 练习
<script>
let userList = [
{ sno: 100, name: '罗美洁', gender: "女", age: 21 },
{ sno: 101, name: '彭代晶', gender: '男', age: 22 },
{ sno: 102, name: '陈玉婷', gender: '女', age: 23 },
{ sno: 103, name: '张敏敏', gender: '女', age: 18 },
{ sno: 104, name: '苏鹏', gender: '男', age: 20 },
{ sno: 105, name: '豆江涛', gender: '女', age: 22 }
]
//1.请遍历该数组，返回一个新数组，给每个同学都加上一个属性 成绩：80分 num:80
let userList1 = userList.map(function (item, index) {
return { ...item, num: 80 };
})
console.log(userList1);
//2.请删选出该班级的男同学信息，用新数组展示
let userList2 = userList1.filter(function (item, index) {
return item.gender === '女';
})
console.log(userList2);
//3.请删选出年龄在21及以上的同学信息
let userList3 = userList1.filter(function (item, index) {
return item.age >= 21;
})
console.log(userList3);
//4.请修改所有同学的学号，在原有的基础上 前面加上 '219980'+原来的学号，返回一个新数组展示
let userList4 = userList.map(function (item, index) {
return {...item,sno: '219980' + item. sno} ;
})
console.log(userList4);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 10.find
查找满足条件的元素，并返回满足条件的第一个元素，如果没有找到返回 undefined
特点：不改变原数组
arr.find(function(item,index){
return 条件;
})
1
2
3
2
3
# 11.findIndex
查找满足条件的元素，并返回 满足条件的第一个元素的 索引，如果没有找到 返回 -1
特点：不改变原数组
arr.findIndex(function(item,index){
return 条件;
})
1
2
3
2
3
# 12.indexOf
查找相同的元素，并返回 相同元素的 第一个元素的索引，如果没有找到 返回 -1
特点：不改变原数组
arr.indexOf(需要查找的元素)
1
# 13.lastIndexOf
从后面往前面找 查找相同的元素，并返回相同的 最后一个元素的索引，如果没有找到 返回 -1
特点：不改变原数组
arr.lastIndexOf(需要查找的元素)
1
# 案例
let nums = [-1, 100,3, 200, 6, 15, 18, 23, 22];
// 请查找出该数组中 第一个正数是多少？
let num = nums.find(function (item, index) {
return item > 0;
})
console.log('第一个正数是', num);
//请查找出该数组中 能够整除3的第一个元素
let num1 = nums.find(function (item, index) {
return item % 3 == 0;
})
console.log('能够整除3的第一个元素 ', num1);
// 请查找出该数组中 能够整除3的第一个元素的索引
let num2 = nums.findIndex(function (item, index) {
return item % 3 == 0;
})
console.log('能够整除3的第一个元素的索引 ', num2);
//请查找出该数组中能够整除10的第一个元素的索引
let num3 = nums.findIndex(function (item, index) {
return item % 10 == 0;
})
console.log('整除10的第一个元素的索引 ', num3);
// 请查找出该数组中 等于-1的元素索引
// let num4 = nums.findIndex(function(item,index){
// return item==-1;
// })
let num4 = nums.indexOf(-1);
console.log('等于-1的元素索引 ', num4);
// 请查找出该数组中 等于1000的元素的索引
let num5 = nums.indexOf(1000)
console.log(num5);
// 请查找出该数组中第一个质数的索引
// 除了1和本身以外 不能被其他数字整除的正整数
let num6 = -1;
//循环这个数组 ：判断该元素是否是一个正数
// 2--这个数字-1 ：判断该元素是否可以有一个整除的数字，
// 如果有：不是质数 结束当前循环
// 如果这个循环运行到了最后一次 都没有找到整除的数字， 结束所有的循环 返回最终数字
for(let i =0;i<nums.length;i++){
if(nums[i]>0){
// 假设这个数字是质数 状态
let status = true;
for(let j=2;j<nums[i];j++){
// 如果找到一个能够整除的数字，结束当前循环
if(nums[i]%j ==0){
status=false;
break;
}
}
//如果一直没有找到整除的数字，质数
if(status==true){
num6 = i; //将质数索引复制给num6
break;
}
}
}
console.log(num6);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# 练习：
let userList = [
{ sno: 100, name: '罗美洁', gender: "女", age: 21 ,num:40},
{ sno: 101, name: '彭代晶', gender: '男', age: 22 ,num:20},
{ sno: 102, name: '陈玉婷', gender: '女', age: 23 ,num:67},
{ sno: 103, name: '张敏敏', gender: '女', age: 18,num:83 },
{ sno: 104, name: '苏鹏', gender: '男', age: 20,num:88 },
{ sno: 105, name: '豆江涛', gender: '女', age: 22,num:99 }
]
//请查找出 学号为103 的同学的信息
let userList1 = userList.find(function(item,index){
return item.sno = 103
})
console.log(userList1);
//请查找出 学号为100的同学的性别
let userList2 = userList.find(function(item,index){
return item.sno = 100
})
console.log(userList2.gender);
//请查找出及格的第一个同学的信息
let userList3 = userList.find(function(item,index){
return item.num > 60
})
console.log(userList3);
//请查找出年龄为20的 同学的索引序号
let userList4 = userList.findIndex(function(item,index){
return item.age === 20
})
console.log(userList4);
//请查找出 分数为80-90分分段的第一一个同学的索引序号
let userList5 = userList.find(function(item,index){
return item.num > 80 &&item.num < 90
})
console.log(userList5);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 14.includes 包含
查找数组中 是否 包含 某个元素，如果包含返回:true 不包含：false
特点：不改变原数组 【字符串可以共用这个方法】
arr.includes(需要查找的元素)
let arr = [200,300,600]
arr.includes(200) //true
arr.includes(500) //false
arr.includes(200) && arr.includes(300) //同时查找
1
2
3
4
5
6
2
3
4
5
6
# 15.some 一些
判断 是否 至少有一个元素满足 条件，如果有返回true, 一个满足条件的元素都没有返回：false
arr.some(function(item,index){
return 条件
})
1
2
3
2
3
let arr = [100,200,300,-1,-100];
let status = arr.some(function(item,index){ //true
return item>0;
})
1
2
3
4
2
3
4
# 16.every 所有
判断 是否 所有的元素都满足条件，如果都满足返回true ,否则：false
arr.every(function(item,index){
return 条件
})
1
2
3
4
2
3
4
let arr = [100,200,300,-1,-100];
let status = arr.every(function(item,index){ //false
return item>0;
})
1
2
3
4
2
3
4
# 17.join
将数组转换为 字符串 ，且以分隔符分割
将字符串转换为数组，且以分隔符分割 split
//将，改为；
let str = '张三,李四,王五,黄四郎'
//将字符串转为数组
let strArr = str.split(',') //['张三','李四','王五','黄四郎']
//将数组转为字符串
let str1 = strArr.join(';') //'张三;李四;王五;黄四郎'
1
2
3
4
5
6
7
2
3
4
5
6
7
# 18.slice
数组的截取，和字符串截取功能完全一样,返回一个截取出来的新数组
arr.slice(起始索引)
arr.slice(起始索引,结束索引) //左闭右开 包含起点 不包含终点 索引可以为负数，为负数：倒数第几个
1
2
3
2
3
let arr = [100,200,3003,44,5,5,3,3];
//请截取索引为4的后面所有元素
let arr1 = arr.slice(4) //[5,5,3,3]
//索引2-4之间的两个元素
let arr2 = arr.slice(2,4) //[3003,44]
//截取 倒数第4个到倒数第2个元素
let arr3 = arr.slice(-4,-2); //[5,5]
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 19.reduce 求和求积
求和求积 ，遍历整个数组，将每一项的元素的值进行累加或累乘 返回计算完成之后的结果 数字
arr.reduce(function(pre,next){},初始值) //初始值：累加 0 ，累乘：1 pre:上一次计算完成后的值 next：下一次参与计算的元素
1
let arr = [100, 2003, 3, 34, 3, 43, 43, 4]
let sum = arr.reduce(function (pre, next) {
return pre + next; //上一次计算完成后的结果 + 下一次参与运算的元素的值
}, 0)
console.log(sum) //2233
let goods = [
{ money: 11 },
{ money: 22 },
{ money: 30 }
]
let totalMoney = goods.reduce(function (pre, next) {
return pre * next.money;
}, 1)
console.log(totalMoney); //7260
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 20.sort
排列数组的顺序，升序 降序
不传递数据： 只对数字数组排序有效
特点:会修改原数组
不传值： 只支持 纯字符串
arr.sort() //不传值 从小到大
1
数字的排序 或者 对象的属性排序
arr.sort(function(a,b){ //a:前一个元素|小的元素 b:后一个元素|大的元素
return a - b; // - :不是算数运算的减法， xxx到xxxx 从小到大
})
arr.sort(function(a,b){ //a:前一个元素|小的元素 b:后一个元素|大的元素
return b - a; // - :不是算数运算的减法， xxx到xxxx 从大到小
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
let arr = [-1, 100, 200, -3, 5];
arr.sort(function (a, b) {
return a - b;
})
console.log(arr); // [-3, -1, 5, 100, 200]
let arr1 = ['B', 'a','AA', 'b', 'c', 'A', 'aA', 'AB'];
arr1.sort()
console.log(arr1); // [-3, -1, 5, 100, 200]
let goods = [
{ money: 119 },
{ money: 22 },
{ money: 300 },
{ money: 1 }
]
// a:前一个元素 小 b:后一个元素 大
goods.sort(function(a,b){
return a.money - b.money
})
console.log(goods);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 21.flat 拉平
将多维数组 转换为 低位数组
特点：不改变原数组
arr.flat(数字/无限层) 数字：需要拉平的层数 无限层(未知层数):Infinity 返回一个一维数组
1
let arr =[[[[1,2],3,4],[[[[[5,6],[7,8]]]]]]];
let arr1 = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr1);
1
2
3
4
2
3
4
# 22.reserve 反向
将数组反向输出
特点：改原数组
arr.reverse()
1
let arr = [100,200,300]
arr.reverse(); //[300,200,100]
1
2
2
//字符串从大到小
let arr1 = ['B', 'a','AA', 'b', 'c', 'A', 'aA', 'AB'];
arr1.sort().reverse()
console.log(arr1); ['c', 'b', 'aA', 'a', 'B', 'AB', 'AA', 'A']
1
2
3
4
2
3
4
# 作业
let goods = [
{id:10033,name:'iphone 15',price:6000},
{id:10011,name:'华为mate60',price:4500},
{id:10022,name:'小米11pro',price:3200},
]
//1.请将该数组以id进行升序排序
//2.请添加一个真实售价信息 nowPrice 为原有价格的9.5折
//3.请查找出价格符合4000-5000的手机信息
//4.请添加一个新数据，id为110044，商品名是'oppo 10 plus ',价格为2800，并通过代码修改该商品的真实售价9.5折
//5.该商品列表中是否包含 'iphone 14 max' 的手机？
//6.如果我需要购买该商品列表中的所有商品，一共需要消费多少？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24