数组

  • 数组也是一个对象
  • 它和我们普通对象功能类似,也是用来存储一些值的
  • 不同的是:
    • 普通对象是使用字符串作为属性名的
    • 数组是使用数字来作为索引操作元素
  • 索引(index)
    • 从0开始的整数就是索引
  • 数组的存储性能比普通对象要高,在开发中我们经常使用数组来存储一些数据
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
//创建一个数组对象
var arr = new Array();

//使用typeof检查一个数组时,会返回object
//console.log(typeof arr);

arr[0] = 10;
arr[1] = 33;
arr[2] = 22;

// 读取数组中的元素
// 语法:数组[索引]
// 如果读取不存在的索引,它不会报错,而是返回undefined
console.log(arr[3]);// undefined

// 获取数组长度
// 对于连续的数组,使用length可以获取到数组的长度(数的个数)
// 对于非连续的数组,使用length会获取到数组的最大索引+1
// 尽量不要创建非连续数组
console.log(arr.length);

//修改length
//如果修改的length大于原长度,则多出来的部分会空出来
//如果修改的length小于原长度,则多出来的元素会被删除
arr.length = 10;

//向数组的最后一个位置添加元素
arr[arr.length] = 70;

数组字面量

  • 创建一个数组:var arr = new Array();

  • 使用字面量来创建数组:var arr = [];

  • 使用字面量创建数组时,可以在创建时就指定数组中的元素

    var arr = [1,2,3,4,5,10];

1
2
3
4
5
// 创建一个数组,数组中只有一个元素10
arr = [10];

// 创建一个长度为10的数组
arr2 = new Array(10);
  • 数组中的元素可以是任意数据类型

    var arr = ["hello",1,true,null,undefined];

  • 也可以是对象

    1
    2
    3
    4
    5
    6
    var obj ={name:"孙悟空"};
    arr[arr.length] = obj;

    arr2 = [{name:"孙悟空"},{name:"猪八戒"},{name:"沙和尚"}]

    console.log(arr2[1].name);// 猪八戒
  • 也可以是一个函数

    1
    2
    3
    arr = [function(){alert(1)},function(){alert(2)}];

    arr[0]();
  • 也可以是一个数组,这种数组称为二维数组

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

    输出结果为:

    image-20201208210553411

数组的四个方法

push()

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

  • 可以将要添加的元素作为方法的参数传递

    这样这些元素将会自动添加到数组的末尾

  • 该方法会将数组新的长度作为返回值返回

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

输出结果为:

image-20201208211836183

pop()

  • 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
1
2
3
4
5
6
7
8
var arr = ["孙悟空","猪八戒","沙和尚"];
arr.push("唐僧","蜘蛛精","白骨精");
console.log(arr);
arr.pop();
console.log(arr);
var result = arr.pop();
console.log(arr);
console.log("result = "+result);

输出结果为:

image-20201208212615516

unshift()

  • 向数组开头添加一个或多个元素,并返回新的数组长度
  • 向前面插入元素以后,其它元素索引会依次调整
1
2
3
4
5
var arr = ["孙悟空","猪八戒","沙和尚"];
arr.push("唐僧","蜘蛛精","白骨精");
console.log(arr);
arr.unshift("牛魔王","二郎神");
console.log(arr);

输出结果为:

image-20201208213540909

shift()

  • 删除数组的第一个元素,并将删除的元素作为返回值返回
1
2
3
4
5
6
var arr = ["孙悟空","猪八戒","沙和尚"];
arr.push("唐僧","蜘蛛精","白骨精");
console.log(arr);
var result = arr.shift();
console.log(arr);
console.log("result = "+result);

输出结果为:

image-20201208214311158

数组的遍历

  • Demo

    1
    2
    3
    4
    5
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

    for(var i = 0; i<arr.length; i++){
    console.log(arr[i]);
    }

    输出结果为:

    image-20201219160306938

  • 进阶练习

    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
    function Person(name,age){
    this.name = name;
    this.age = age;
    }

    //修改Person原型的toString
    Person.prototype.toString = function(){
    return "Person[name="+this.name+",age="+this.age+"]";
    };

    //创建一个Person对象
    var per = new Person("孙悟空",18);
    var per2 = new Person("猪八戒",28);
    var per3 = new Person("红孩儿",8);
    var per4 = new Person("蜘蛛精",16);
    var per5 = new Person("二郎神",38);

    console.log(per.toString());

    //将这些person对象放入到一个数组中
    var perArr = [per,per2,per3,per4,per5];
    console.log(perArr);

    /*
    创建一个函数,可以将perArr中的满18岁的Person提取出来
    然后封装到一个新的数组中返回
    */
    //arr:形参,要提取信息的数组
    function getAdult(arr){
    //创建一个新的数组
    var newArr = [];

    //遍历arr,获取arr中的Person对象
    for(var i = 0; i<arr.length; i++){
    var p = arr[i];
    //判断Person对象的age是否大于等于18
    if(p.age >=18){
    //如果大于18,则将这个对象添加到newArr中
    newArr.push(p);
    }
    }
    //将新的数组返回
    return newArr;
    }

    var result = getAdult(perArr);
    console.log(result);

    输出结果为:

    image-20201219165037987

forEach

  • JS中还为我们提供了一个方法,用来遍历数组

  • forEach()

    • 这个方法只支持IE9以上的浏览器
  • forEach()方法需要一个函数作为参数

  • 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数

    • 数组有几个元素函数就会执行几次
    • 每次执行时,浏览器会将遍历到的元素以实参的形式传递进来
    • 我们可以定义形参,来读取这些内容
    1
    2
    3
    4
    5
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

    arr.forEach(function(){ //由浏览器调用
    console.log("hello");
    })

    该程序将会输出4次hello

    1
    2
    3
    4
    5
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

    arr.forEach(function(a){ //由浏览器调用
    console.log("a = "+a);
    })

    输出结果为:

    image-20201219171335408

  • 浏览器会在回调函数中传递三个参数

    • 第一个参数,就是当前正在遍历的元素value
    • 第二个参数,就是当前正在遍历元素的索引index
    • 第三个参数,就是正在便利的数组arr
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

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

    输出结果为:

    image-20201219172325084

slice和splice

slice

  • 可以用来从数组提取选定元素

  • 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回

  • 参数:

    1. 截取开始位置的索引,包含开始索引
    2. 截取结束位置的索引,不包含结束索引
    3. 第二个参数可以不写,此时会截取从开始索引往后的所有元素
    4. 索引可传递一个负值,如果传递一个负值,则从后往前计算
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

    var result = arr.slice(1,3);
    console.log(result);

    var result = arr.slice(1);
    console.log(result);

    result = arr.slice(0,-1);
    console.log(result);

    输出结果为:

    image-20201219174614779

splice

  • 可以删除数组中的指定元素

  • 使用splice()会影响到原数组,会将指定元素从原数组中删除

    并将删除的元素作为返回值返回

  • 参数:

    1. 第一个参数:表示开始位置的索引
    2. 第二个参数:表示删除的数量
    3. 第三个及以后参数:可以传递一些新的元素,这些元素将会自动插入到开始位置的前面
    1
    2
    3
    4
    5
    6
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

    var result = arr.splice(1,1,"牛魔王","铁扇公主");

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

    输出结果为:

    image-20201219175854305

持续更新中。。。