数组——JS基础

_洋

已于 2022-04-24 15:20:17 修改

阅读量529

点赞数 1

分类专栏： JavaScript 文章标签： js

于 2022-04-04 20:19:18 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/123956474

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

内建对象——数组。

文章目录

数组定义
数组操作
数组的方法
数组的遍历
ForEach()
- 补充：回调函数
习题：数组去重

数组定义

数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的；
不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素
索引:

从 0 开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

普通对象和数组对象的存储：
在这里插入图片描述

数组操作

数组创建

对象方法创建数组

 var arr = new Array();

创建并初始化

 var arr1 =new Array(1,23,4,12,3);

字面量方法创建数组

语法： []

  var arr = [];

创建数组并初始化

var arr = [1,23,43,21,45];

当初始化时只有一个值：
创建一个数组数组中只有一个元素10

arr = [10];

创建一个长度为10的数组

arr2 = new Array ( 10);

数组添加元素

语法：数组[索引] = 值

 //  添加元素
 arr[0] = 1;
 arr[1] = 2;
 arr[2] = 3;

数组末尾添加值

arr[arr.length] = 4;

读取数组元素

语法：数组[索引]
如果读取不存在的索引,他不会报错而是返回undefined

获取数组长度

获取数组长度：数组.length
对于连续的数组，使用length可以获取到数组的长度（元素的个数）;
对于非连续的数组，使用length会获取到数组的最大的索引+1。
尽量不要使用不连续的数组。

//   创建数组：
        var arr = new Array();
        //  添加元素
        arr[0] = 1;
        arr[1] = 2;
        arr[2] = 3;
        // 获取数组长度：数组.length
        console.log(arr.length);

输出： 3

length修改数组长度：数组.length=长度
如果修改的length大于原长度，则多出部分会空出来；
如果修改的length小于原长度，则多出的元素会被册除

数组中的元素可以是任意的数据类型

arr = [ "hello",1,true,null,undefined];
console.log(arr[3]);

可以是对象

arr = [ "hello",1,true,null,undefined];
console.log(arr[3]);
// 也可以是对象
var obj = {
    name: "孙悟空",
    age : 18,
    gender : "男"
}
arr[arr.length] = obj;
console.log(arr[arr.length-1].name)

输出：

null
孙悟空

也可以使函数

   var arr =[function(){alert("我是函数1")},
  function(){alert("我是函数2")}]
  // 调用
  arr[0]();

也可以是数组——二维数组

  var arrs= [[1,2,3],[4,5,6],[7,8,9]];

数组的方法

在这里插入图片描述

push()该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

     var arr = ["孙悟空","猪八戒","沙和尚"];
     var result = arr.push("唐僧","白骨精","蜘蛛精");
     console.log(arr);
     console.log(result);

输出：

 ['孙悟空', '猪八戒', '沙和尚', '唐僧', '白骨精', '蜘蛛精']
 6

pop():删除并返回数组的最后一个元素

  var arr = ["孙悟空","猪八戒","沙和尚"];
        arr.push("唐僧","白骨精","蜘蛛精");
        var result = arr.pop();

        console.log(result);
        console.log(arr);

输出：

蜘蛛精
['孙悟空', '猪八戒', '沙和尚', '唐僧', '白骨精']

unshift（）：向数组开头添加一个或多个元素,并返回新的数组长度

     var arr = ["孙悟空","猪八戒","沙和尚"];
     var result = arr.unshift("唐僧","白骨精","蜘蛛精");
     console.log(arr);
     console.log(result);

输出：

['唐僧', '白骨精', '蜘蛛精', '孙悟空', '猪八戒', '沙和尚']
6

shift() 可以删除并返回数组第一个元素

      var arr = ["孙悟空","猪八戒","沙和尚"];
     var result = arr.shift();
     console.log(arr);
     console.log(result);

输出：

['猪八戒', '沙和尚']
孙悟空

slice(start，end) : 从某个数组提取指定元素
start：截取开始位置的索引
end：截取结束位置的索引
[start,end):左闭右开
该方法不影响原数组,返回一个新数组。

        function Person(name,age){
            this.name = name;
            this.age = age;
        }
       var per1 =new Person("孙悟空",18);
       var per2 =new Person("猪八戒",28);
       var per3 =new Person("红孩儿",10);
       var per4 =new Person("金吒",12);
       var per5 =new Person("牛魔王",40);
       var arr=[per1,per2,per3,per4,per5];

       console.log( arr.slice(0,2));

输出：
在这里插入图片描述
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素。
索引可以传递一个负值，表示从后向前计算。

splice （）：可以用于删除数组中的指定元素，并像数组添加新元素
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
参数:
第一个，表示开始位置的索引
第二个，表示删除的数量
第三个及以后，可以传递—些新的元素，这些元素将会自动插入到开始位置索引前边

       function Person(name,age){
            this.name = name;
            this.age = age;
        }
       var per1 =new Person("孙悟空",18);
       var per2 =new Person("猪八戒",28);
       var per3 =new Person("红孩儿",10);
       var per4 =new Person("金吒",12);
       var per5 =new Person("牛魔王",40);
       var arr=[per1,per2,per3,per4,per5];

      var result = arr.splice(1,1,"铁扇公主","唐僧")
        console.log(result);
        console.log(arr);

输出：
在这里插入图片描述

concat（）连接两个或多个数组
格式： 数组1.concat(数组二);
concat不会对原数组产生影响

        var arr = ["孙悟空","猪八戒","沙和尚"];
        var arr2 = ["白骨精","玉兔精","蜘蛛精"];
         var arr3 = ["二郎神","金蝉子","太上老君"];
        //  数组1.concat(数组二);concar不会对原数组产生影响
        var result = arr.concat(arr2,arr3,"牛魔王","红孩儿");
        console.log(result);

输出：

['孙悟空', '猪八戒', '沙和尚', '白骨精', '玉兔精', '蜘蛛精', '二郎神', '金蝉子', '太上老君', '牛魔王', '红孩儿']

join()：将数组转换成字符串，不会对原数组产生影响。

var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.join();
console.log(typeof result);

输出：

string

在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定则使用 , 进行连接

        var arr = ["孙悟空","猪八戒","沙和尚"];
        var result = arr.join("-T-");
        console.log(typeof result);
        console.log(result);

输出：
在这里插入图片描述

reverse（）:对数组进行反转，该方法会直接修改原数组
该方法用来反转数组（前边的去后边，后边的去前边)

        var arr = ["孙悟空","猪八戒","沙和尚"];
        arr.reverse();
        console.log(arr);

输出：

['沙和尚', '猪八戒', '孙悟空']

sort（）：对数组排序，对眼数组产生影响，默认按Unicode进行编码

        var arr = ["孙悟空","猪八戒","沙和尚"];
        arr.sort();
        console.log(arr);

输出：

['孙悟空', '沙和尚', '猪八戒']

即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果：

        var arr = [3,4,11,2,5];
        arr.sort();
        console.log(arr);

输出：

[11, 2, 3, 4, 5]

我们可以在sort()添加一个回调函数，来指定排序规则：
回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边。
浏览器会根据回调函数的返回值来决定元素的顺序：
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置
eg：

        var arr = [3,4,11,2,5];
        arr.sort(function(a,b){
            // 从小到大排序
          /* if(a > b){
               return 1;
           }else if(a<b){
               return -1;
           }else{
               return 0;
           }*/
           //相当于
           return a - b;
        });
        console.log(arr);

输出：

[2, 3, 4, 5, 11]

数组的遍历

就是将数组中的全部元素都取出来。

var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.unshift("唐僧","白骨精","蜘蛛精");
for(var i =0 ;i < arr.length;i++){
 console.log(arr[i]);
}

输出：
在这里插入图片描述
习题：创建函数将满18岁的人提取出来，封装到一个新的数组中

   function Person(name,age){
            this.name = name;
            this.age = age;
        }
       var per1 =new Person("孙悟空",18);
       var per2 =new Person("猪八戒",28);
       var per3 =new Person("红孩儿",10);
       var per4 =new Person("金吒",12);
       var per5 =new Person("牛魔王",40);
       var arrPer=[per1,per2,per3,per4,per5];

       function getAdult(arr){
           var arrAdult = new Array();
           for(var i =0 ;i< arr.length;i++){
               if(arr[i].age >= 18){
                   arrAdult.push(arr[i])
               }
           }
           return arrAdult;
       }

        var arrAdult = getAdult(arrPer);
        console.log(arrAdult);

输出：
在这里插入图片描述

ForEach()

只支持IE8以上的浏览器

forEach()方法需要一个函数作为参数，我们通常使用匿名函数作为foreach的参数
格式： 函数.forEach(回调函数）

补充：回调函数

像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
如：
```
arr.forEach(function(){
    console.log("hello");
})
```
我们只是定义了函数（匿名函数），没有调用，但是控制台还是输出了结果，这就说明有人调用了函数，可以理解为是浏览器调用了函数，这种函数就是回调函数。
数组中有几个元素，forEach中的回调函数就会执行几次
每次执行时浏览器调用回调函数，并且将遍历到的数组元素作为实参传递给回调函数；所以我们可以定义形参来处理这些函数。

forEach的回调函数会传递3个参数：
第一个参数（value），就是当前正在遍历的元素
第二个参数（index），就是当前正在遍历的元素的索引
第三个参数（obj），就是正在遍历的数组
例子：

        function Person(name,age){
            this.name = name;
            this.age = age;
        }
       var per1 =new Person("孙悟空",18);
       var per2 =new Person("猪八戒",28);
       var per3 =new Person("红孩儿",10);
       var per4 =new Person("金吒",12);
       var per5 =new Person("牛魔王",40);
       var arr=[per1,per2,per3,per4,per5];

       arr.forEach(function(value, index, obj){
           console.log(value);
       })

输出：
在这里插入图片描述

习题：数组去重

        var arr = [1,2,3,2,1,3,4,2,5];
        for(var i =0;i<arr.length;i++){
            for(var j =i+1;j <= arr.length;j++){
                if(arr[i]==arr[j]){
                    arr.splice(j,1);
                    // j要-1，防止两个相等的重复元素连在一起
                    j--;
                }
            }
        }
        console.log(arr);

输出：

[1, 2, 3, 4, 5]

_洋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数组——JS基础

内建对象——数组。文章目录数组定义数组操作数组创建对象方法创建数组字面量方法创建数组数组添加元素数组末尾添加值读取数组元素获取数组长度数组中的元素可以是任意的数据类型数组的方法数组的遍历数组定义数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的；不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素索引:从 0 开始的整数就是索引数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据普通对象和数组对象的存储：数组操作数组创建对象方
复制链接

扫一扫