JS---数组

zyt0502

于 2024-08-16 20:58:53 发布

阅读量1k

点赞数 15

文章标签： javascript 开发语言 ecmascript 前端 java

本文链接：https://blog.csdn.net/zyt0502/article/details/141261017

版权

一、什么是数组

1) 数组是值的有序集合。

2) 每个值叫做一个元素。

3) 每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。

4) 数组的元素可以是任何类型。

5) 数组索引从 0 开始,数组最大能容纳 4294967295 个元素。

二、数组方法

2.1常用方法

2.2.1原数组改变

表达式	作用	参数	返回值
Pop()	向数组的尾部添加内容	可以是多项	新数组的长度
Push()	向数组的尾部删除内容	无	被删除的那行
Shift()	向数组的头部删除内容	无	被删除的那行
unshift()	向数组的头部添加内容	可以是多项	新数组的长度
reverse()	倒叙排列	无	倒叙后的新数组
sort()	排序	有、无默认：升序多位数值排序，必须传参，否则会乱	排序后的新数组
splice()	新增到开始索引的前面	arr.splice(开始的索引,删除的个数,新增的内容(多个))	空数组
splice()	删除	arr.splice(开始的索引,删除的个数)	删除的数组内容，存放到数组里
splice()	修改(先删除，后新增,并且是新增到开始索引的前面)	arr.splice(开始的索引,删除的个数,新增的内容(多个));	删除后的内容，放到一个数组里
fill()	填充	填充值不写值 undefined	填充后的新数组

示例代码：

1.Pop()

var colors = ['red', 'pink'];
var res = colors.pop();
// 原数组
console.log(colors);//['red']
// 返回值
console.log(res);//'pink'

2.Push()

var colors = ['red', 'pink'];
var res = colors.push('blue');
// 原数组
console.log(colors);//['red', 'pink', 'blue']
// 返回值
console.log(res);//3

3.Shift()

var colors = ['red', 'pink'];
var res = colors.shift();
// 原数组
console.log(colors);//['pink']
// 返回值
console.log(res);//red

4.unshift()

var colors = ['red', 'pink'];
var res = colors.unshift('blue', 'green');
// 原数组
console.log(colors);//['blue', 'green', 'red', 'pink']
// 返回值
console.log(res);//4

5.reverse()

var ary=[1,2,3];
var res=ary.reverse();
console.log(res);//[3,2,1];
console.log(ary);//[3,2,1];

6.sort()

//----------------------不传参的时候

//=====>10 以内的可以排
var ary=[3,2,1,6,8];
ary.sort();

[1, 2, 3, 6, 8]

//=====> 超出10
 var ary2=[1,21,5,33,26]
 ary2.sort();
 [1, 21, 26, 33, 5];
 
 //---------------------------传参的时候
 var ary2=[1,21,5,33,26]
 ary2.sort(function(a,b){
    return a-b; // 升序
    return b-a; //降序
 })

7.splice()

//增加
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(3, 0, 7, 8, 9);
console.log(nums);//[1, 2, 3, 7, 8, 9, 4, 5, 6] 
console.log(res);// []

//删除
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 2);
console.log(nums);// [3, 4, 5, 6]
console.log(res);// [1,2]

//修改
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 3, 7, 8, 9);
console.log(nums);//[7, 8, 9, 4, 5, 6] 
console.log(res);// [1, 2, 3]

8.fill()

     //arr.fill(内容,开始索引, 结束索引)  含头不含尾
      // arr.fill(内容)  开始和结尾，就是完全替换
      // arr.fill(内容,开始索引)  开始索引到最后
      // arr.fill()  可以有复制

2.2.2原数组未改变

方法名	作用	参数	返回值
slice()	从原有的数组中获取特定的内容	可以有一个或者两个	返回值是一个数组，获取的子数组(新的数组)
concat()	拼接	拼接的内容	拼接后的新数组
toString()	转化为字符串	无	字符串,用逗号分隔
join()	转换为字符串	无/有	字符串用逗号分隔（无参数，默认）根据自定义参数拼接（有参数）
indexOf	获取某项在数组中首次出现的索引（也可以用来判断是否包含某项）	n:检测的项 m:从索引m开始检索	-1或者具体的索引值
lastIndexOf()	获取某项在数组中最后出现的索引（也可以用来判断是否包含某项）	n:检测的项 m:从索引m停止检索	-1或者具体的索引值
includes()	检测数组中是否包含某一项	具体项	布尔值（true false)
flat()	数组扁平化	无(拍平一层)有（数值、Infinity 表示无限无穷）	拍平后的数组

示例代码

1.slice()

//1.如果只有一个参数，slice()会返回该索引到数组末尾的所有元素
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5, 6]

//2.如果有两个参数，slice()返回从开始索引到结束索引对应的所有元素
//但是不包含结束索引nums.slice(n,m),包含n，不包含m
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1, 5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

//3.如果slice()的参数有负值，那么就以数组长度加上这个负数来确定位置，案例如下
//长度为6，slice（-5，-1）就相当于slice(1，5)
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-5, -1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]

//4.如果结束位置小于开始位置，则返回空数组
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-1, -5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// []

2.concat()

var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "快乐", "同学");
console.log(ary1);//[1, 2, 3]
console.log(res);//[1, 2, 3, 4, 5, 6, '快乐', '同学']

3.toString()

var ary1 = [1, { a: 1 }, null, undefined, 3];
var res = ary1.toString();
console.log(ary1);//[1, {a:1},null, undefined, 3]
console.log(res)//1,[object Object],,,3

4.join()

var ary1 = [1, 2, undefined, 3, { a: 1 }];
var res = ary1.join("|");
console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
console.log(res)// 1|2||3|[object Object]  
eval(res) //==> eval  执行计算

5.indexOf

作用：检测数组中的某项在数组中（首次indexOf/最后lastIndexOf）出现的位置

    var ary=[1,2,3,4,1,55,1];
    //检测1这个项目在数组ary 中首次出现的位置
    ary.indexOf(1); //0
    //从索引2开始，检测1这个项目在数组中首次出现的位置
    ary.indexOf(1,2); //4

6.lastIndexOf()

 // 检测1这个项目在数组中最后一次出现的索引
    ary.lastIndexOf(1);
    // 检测1这个项目在数组中最后出现的索引，在索引5的位置停止检测
    ary.lastIndexOf(1,5)
    
    //如果此项在数组中没有出现，返回值就是-1
    ary.indexOf(66)===>-1

7.includes()

 var arr = [1, 2, 3];
        var res = arr.includes(100);
        console.log(res); // false
        console.log(arr); // [1, 2, 3]

8.flat()

var arr = [1, 2, [3, 4, ["a", "b", ["A", "B", "C"]]]];
var res = arr.flat(Infinity); //无限次拉平
console.log(res); //[1, 2, 3, 4, "a", "b", "A", "B", "C"]
console.log(arr); //[1, 2, [3, 4, ["a", "b", ["A", "B", "C"]]]]

2.2 迭代数组方法

2.2.1方法总结

方法名	作用	参数	返回值	是否修改原数组
foreach()	遍历数组中的每一项,注意return没任何作用	函数三个参（item,index,arr)	undefined	否
map()	把一个数组可以映射成一个新的数组	函数三个参（item,index,arr)	映射后的新数组(就是return的值）	否
filter()	过滤把满足条件（return）的内容都有查找出来	函数三个参（item,index,arr)	过滤后的新数组	否
find()	查找把满足条件（return）的内容查找出来，只要第一项	函数三个参（item,index,arr)	查找的那项值查找不到就是 undefined	否
findIndex()	查找把满足条件（return）的内容索引查找出来，只要第一项	函数三个参（item,index,arr)	查找的那项索引值查找不到就是 -1	否
some()	数组中有满足条件(return)的那项(有一项满足就可以) 有true 没有false	函数三个参（item,index,arr)	true false	否
every()	数组中的每一项都要满足条件才是true 否则false	函数三个参（item,index,arr)	true false	否
reduce()	方向：从左向右循环正序作用：一般用于求和	函数三个参（item,index,arr)	求的和	否
reduceRight（）	倒叙循环从右向左循环	函数三个参（item,index,arr)	返回计算结果	否

2.2.2示例代码

1.foreach()

// 使用forEach迭代数组，计算数组元素的和

//一个家庭的年龄 过年了  每个人长1岁
//方法1 创建一个新数组
var userAages = [19,21,18,34,32,25,45];
var newUserAges = [];
userAages.forEach(function (item,index,array) {
    newUserAges[index] = item + 1;
})
console.log(newUserAges);
//方法2 直接改变原来数组
var re = userAages.forEach(function (item,index,array) {
    userAages[index] = item + 1;
})
console.log(userAages);
console.log(re);

2.map()

// 有一个数组装着2021年所有人的年龄，2022年以后，每个人的年龄都增加1岁
var allAge = [19,15,2,30,32,43,45];
var age2020 = allAge.map(function (item,index,arr) {
    return item+1;
})
console.log(age2020);

3.filter()

          var arr = [10, 20, 30, 40, 50];
        var res = arr.filter((item, index) => {
          return item > 30;
        });
        console.log(res);// [40, 50]
        console.log(arr);// [10, 20, 30, 40, 50]

4.find()

 var arr = [10, 20, 30, 40, 50];
        var res = arr.find((item, index) => {
            return item > 300;
        });
        console.log(res);// undefined
        console.log(arr);// [10, 20, 30, 40, 50]

5.findIndex()

  var arr = [10, 20, 30, 40, 50];
        var res = arr.findIndex((item, index) => {
            return item > 30;
        });
        console.log(res);// 3
        console.log(arr);// [10, 20, 30, 40, 50]

6.some()


        var arr = [10, 20, 30, 40, 50];
        var res = arr.some((item) => {
            return item > 30;
        });
        console.log(res); // true
        console.log(arr); // [10, 20, 30, 40, 50]

7.every()

        var arr = [10, 20, 30, 40, 50];
        var res = arr.every((item) => {
            return item > 30;
        });
        console.log(res);// false
        console.log(arr);// [10, 20, 30, 40, 50]

8.reduce()

        var arr = [10, 20, 30, 40, 50];
        var resa = arr.reduce((res, item, index) => {
            console.log(res, item, index);
            return res + item;
        });
        console.log(resa);// 150
        console.log(arr);// [10, 20, 30, 40, 50]

        参数可以有两个, 第二个参数是初始值
        var arr = [10, 20, 30, 40, 50];
        var resa = arr.reduce((res, item, index) => {
            console.log(res, item, index);
            return res + item;
        }, 0);
        console.log(resa);// 150
        console.log(arr);// [10, 20, 30, 40, 50]

9.reduceRight（）

        var arr = [10, 20, 30, 40, 50];
        var resa = arr.reduceRight((res, item, index) => {
            console.log(res, item, index);
            return res + item;
        }, 0);
        console.log(resa);// 150
        console.log(arr);// [10, 20, 30, 40, 50]

        //8 可以改变原数组 · 9循环  24