JavaScript数组及数组中常用方法

最新推荐文章于 2021-11-19 18:44:18 发布

原创最新推荐文章于 2021-11-19 18:44:18 发布 · 454 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了JavaScript数组的基础操作、遍历方法、常用API及其高级应用，包括数组的创建、增删改查、各种遍历技巧及高级方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 数组

1.1 创建数组对象

通过字面量创建数组:
```
var arr=[10,20,30,40];
```
通过构造函数创建对象
```
var arr1= new Array(10,20,30,40);
```

数组中的元素是可重复且有序的

注意:用构造函数创建一个数组对象时,如果传入的只有一个参数且这个参数为整数时,此时这个参数会被认为是数组的长度

如 :

var arr2=new Array(10);
console.log(arr2.length);
//输出的是10 ,且数组中为空

数组中的长度是可以动态改变的arr2.length=值;

1.2 数组基本操作

数组中的元素都有一个索引,索引从0开始,到数组名.length-1结束

访问数组中的元素

arr[索引]

索引超出正常的范围之后, 并不会抛出异常, 而是返回一个undefined
向数组中添加元素

arr[10]=200;

如果数组中不存在10这个索引,则会在10这个索引的地方添加一个200;然后前面如果没有元素就是为空
修改数组中的元素

arr[2]=20;

如果有2这个索引,则会修改它的值为20,如果没有,则会自动添加进去.这个元素就会成为最后一个元素
arr[arr.length] = 10在数组的尾部添加元素

1.3 数组的遍历

通过for循环

var arr=[10,20,10];
for(var i=0; i<arr.length;i++){
    arr[i]
}

通过for in

 var arr=[10,20,10];
    for(var i in arr) {
        console.log(arr[i]);
    }

通过 for of

// for...of, 是es6新增的一种遍历方式, 他遍历出来的是数组中的具体的元素
// 通过for...of只能读取到数组中元素, 不能修改数组中的元素.等于是复制一遍arr中的值给a
 var arr=[10,20,10];
for(var a of arr){
    console.log(a);
}

通过forEach

 var arr=[10,20,10];
arr.forEach(function (ele, index, self){
  console.log(ele);
})

forEach的内部实现方法

  //往原型中添加一个myForEach方法
    Array.prototype.myForEach = function (fun) {  // fun是传进来的参数
        for(var i=0;i<this.length;i++){
            //fun(this[i],i,this);  //调用的时候把实参赋给形参

        }
    };
    var arr = new Array(10,20,30,40);
    arr.myForEach(function (ele,index,self) {     // 声明一个函数,让myForEach去调用并传递实参过来
            console.log(ele,index,self);
    });

1.4 数组的常用方法

1.4.1 `toString`方法

将数组中的每一个元素转换为一个字符串,然后用逗号隔开

undefined和null会被变成""长度为0的字符串

1.4.2 `join`方法

arr.join("连接符")

1.4.3 `push`方法

向数组的末尾添加元素,可以添加多个

1.4.4 `pop`方法

删除数组末尾的元素

1.4.5 `unshift`方法

向数组的开头添加一个或多个元素

1.4.6 `shift`方法

删除开头第一个元素

var arr=[20,22,12]
while (arr.length > 0){
    console.log(arr.pop());
}

2. 数组的方法

一般开始位置和结束位置都是包括开始位置,不包括结束位置

...arr展开数组arr

2.1 `splice`方法

splice方法会改变原数组

splice()方法可以完成任意位置的删除,添加,替换

语法:

参数一:开始操作的位置的索引,如果不写,默认是0

参数二:删除的个数,如果不需要删除则传入0

参数三,参数四...参数n:添加的元素

返回值是由删除元素组成的新数组

var arr = [1,2,3,4,5];
//将索引为3的元素替换为100
arr.splice(3,1,100);
//在索引为2的元素前添加元素99,98
arr.splice(2,0,99,98);
console.log(arr);

2.2 `reverse`方法

reverse方法会改变原数组

reverse方法是对数组进行倒置

返回值也是倒置后的数组

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);  //5,4,3,2,1

2.3 查找元素索引方法(`indexOf`)

indexOf方法不会改变原数组

arr.indexOf(元素)从前往后开始查找元素在arr数组中第一次出现的位置的索引

返回值是索引或者-1 (如果没有找到该元素则返回-1)

也可以指定第二个参数为开始查找的位置,默认是从索引为0开始找

lastindexOf是从后往前找,也可以指定第二个参数,为开始查找的位置

2.4 `concat`方法

concat方法不会改变原数组

concat方法是用来连接两个数组的

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr1,arr2,arr3);
//不会改变arr1和arr2和值,将连接起来的数组结果作为返回值返回

2.5 `slice`方法

slice方法不会改变原数组

slice方法是用来截取数组的,截取到的元素将封装到一个数组中作为返回值返回

语法:

参数1:截取的开始索引位置,如果不提供参数1,则默认是0;

参数2:截取的结束位置,如果不提供参数2,则默认截取到数组的末尾

注意:

参数2必须大于参数1,否则截取不到元素
参数也可以是负数,如果是负数的话,则是倒着数,如-3就是倒数第3个

3. 数组测试

使用Array.isArray(测试对象)来测试对象是否是数组类型,如果是返回true,如果不是,返回false

像这种直接使用构造函数.方法名的方法称为静态方法

4, 静态方法

静态方法就是直接用构造函数.方法名

这种方法是由构造函数自己定义,所以就算是构造函数new出来的对象也是访问不到的

 function Person(name) {
        this.name=name;
    }
    Person.isPerson=function () {   //这就是一个静态方法
        console.log("hhh");
    }
    var p1=new Person("小猪");
    //p1.isPerson();  //错误,不存在这个方法
    //p1.__proto__.isPerson();  //错误,证明原型中是肯定不存在的
    //console.log(p1.__proto__.constructor == Person);   //true
    //p1.__proto__.constructor.isPerson();  //正确  因为构造器指向的是构造函数本身
    //console.log(Person.prototype.constructor == p1.__proto__.constructor);  //true

5. 三种高级方法

 三种方法都不会改变原数组的值,而是将结果作为返回值返回
        1.map()方法  映射
        2.filter()方法  过滤
        3.reduce()方法  归纳
     */
    var arr = [10, 20, 30, 1, 2, 3];
    var arr1 = arr.map(function (ele) {
        //ele 就代表了arr对象中的每个元素
        return ele * ele;
    });

    //console.log(arr1);

    var arr2 = [10, 11, 12, 13, 14];
    var arr3 = arr2.filter(function (ele, index, self) {
        //ele代表arr对象中的元素,index代表数组中每一个索引,self代表arr本身
        return ele % 2 && index % 2;  //返回元素为奇数且索引也为奇数
    });
    //console.log(arr3);

    var arr4 = [9, 5, 2, 4, 1, 19];
    var arr5 = arr4.reduce(function (last,ele) {
        //last代表上一次归纳好的值,ele代表每个元素初始值为0
        //就是0与ele先归纳,归纳的值赋给last.  不给初始值也是一样的,就是直接第一个和第二个归纳
        return last+ele*ele;   //返回所有元素平方的和
    },0);
    console.log(arr5);