javascript——数组、数组遍历、forEach、增加删除元素

数组(Array)

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

对象中是用属性，数组中用索引

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

<script>
        // 创建数组对象
        var arr = new Array();
        // 使用typeof检查数组时，会返回object
        // console.log(typeof arr);
        // 向数组中添加元素：语法：数组[索引]=值
        arr[0] = 0;
        arr[1] = 1;
        arr[2] = 2;
        // arr[10] = 10;
        // 读取数组中的元素：语法：数组[索引]
        console.log(arr[1]);
        // 如果读取不存在的索引，他不会报错而是返回undefined
        console.log(arr[5]); //undefined
        // 获取数组的长度： 语法：数组.lenght
        // 对于连续的数组，使用lenght可以获取到数组的长度(元素的个数)
        //  对于非连续的数组，使用lenght会获取到数组的最大的索引+1。
        // 中间未赋值的元素开辟了空间但是未使用,浪费空间，所以尽量创建连续的空间
        console.log(arr.length);
        // 修改lenght的值，如果值大于原长度，多出来的部分则会空出来（开辟空间了，但还未赋值）
        // 如果修改的lenght的值小于原长度，多出的部分会被删除
        // 向数组的最后一个位置添加元素 
        // 语法：数组[数组的长度]=值
        arr[arr.length] = 20;
        console.log(arr);
    </script>

数组中可以存放任意的数据，也可以存放对象，函数，数组（称为二维数组）

<script>
        // 使用字面来创建数组，可以在创建时就指定数组中的元素
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // 使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
        // 元素之间用,隔开
        var arr2 = new Array(9, 8, 7, 6, 5, 4, 3, 2, 1);
        // 创建一个只有元素10的数组
        var arr3 = [10];
        // 创建一个长度为10的数组
        var arr4 = new Array(10)
        console.log(arr4.length);
        console.log(arr2);
        console.log(arr);
        // 数组里面存放函数
        var arrFn = [function() {
            console.log(88888);
        }, function() {
            console.log(66666);
        }];
        // 调用数组中的函数
        arrFn[1]();
    </script>

数组的增删操作

<script>
        // 创建一个数组
        var arr = ['孙悟空', '猪八戒', '沙悟净'];
        console.log(arr);
        // push()：可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
        // 将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
        var res = arr.push('唐三藏', '女儿国国王', '白骨精');
        console.log(arr);
        console.log(res); //push返回数组新的长度
        // pop()：可以删除数组的最后一个元素，调一次删一次，并将删除的元素作为返回值返回
        res = arr.pop();
        console.log(arr);
        console.log(res);
        // unshift()：向数组的开头添加一个或多个元素，并返回新的数组长度,
        // 在前边插入元素后，原先的元素索引会发生变化
        res = arr.unshift('如来佛祖');
        console.log(arr);
        console.log(res);
        // shift()：可以删除第一个元素，并将删除的元素作为返回值返回
        res = arr.shift();
        console.log(arr);
        console.log(res);
    </script>

数组的遍历

<script>
        // 创建一个数组
        var arr = ['孙悟空', '猪八戒', '沙悟净'];
        // 遍历数组：就是将数组中的所有的元素都取出来
        // index是数组的索引
        for (var index = 0; index < arr.length; index++) {
            // 每个ele是数组每个索引所对应的值
            var ele = arr[index];
            console.log(ele);
        }
    </script>

数组小练习

<script>
        // 创建一个构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        // 对象
        var p1 = new Person('孙悟空', 996);
        var p2 = new Person('猪八戒', 985);
        var p3 = new Person('沙悟净', 965);
        var p4 = new Person('唐僧', 211);
        var p5 = new Person('国王', 220);
        // 将这些Person类的实例对象放到一个数组中
        var arr = [p1, p2, p3, p4, p5];
        // console.log(arr);
        // 创建一个函数，将arr中的满500岁的对象提取出来，放到一个新的数组并返回
        // 形参arr是要提取信息的数组
        function oldPer(arr) {
            // 创建一个新的数组
            var newArr = [];
            // 遍历数组，获取arr中的对象
            for (let index = 0; index < arr.length; index++) {
                // 将遍历数组中的每一个元素都赋值给ele
                const ele = arr[index];
                // 判断对象的年龄age是否大于等于500
                // ele.age>=500
                if (ele['age'] >= 500) {
                    // 将满500岁的对象添加到新数组中，并返回
                    newArr.push(ele);
                }
                // console.log(ele.age);
            }
            return newArr;
        }
        // res是返回的新数组，也就是age满500的对象的集合
        var res = oldPer(arr);
        // len是age满500的对象的个数
        var len = res.length;
        console.log(res);
        console.log(len);
    </script>

forEach遍历

<script>
        // 除了for可以遍历数组，js还提供了另一个方法来遍历数组：forEach(function(){})，需要一个匿名函数作为参数
        // 向作为forEach的参数的匿名函数，由我们创建但是不由我们调用的函数，称为回调函数
        // var arr = ['孙悟空', '猪八戒', '沙悟净', '唐三藏'];
        var arr = [{
            name: '孙悟空',
            age: 996
        }, {
            name: '猪八戒',
            age: 985
        }, {
            name: '沙悟净',
            age: 965
        }, {
            name: '唐三藏',
            age: 221
        }];
        // 这个forEach()只支持IE9+(包含IE9)，不支持IE8(包含)以下的的版本
        // 如果需要兼容IE8，就使用for遍历数组，不要用forEach
        // 数组有多少个元素，forEach就执行多少次，每次执行时，浏览器会将遍历到的元素以实参的形式传递过来，
        // 我们可以定义形参，来读取这些内容，浏览器会在回调函数中传递三个参数：
        // 第一个参数v是当前正在遍历的元素，第二个参数i是当前元素所对应的索引。第三个参数c就是正在遍历的数组
        arr.forEach(function(v, i, c) {
            /* console.log(i);
            console.log(v);
            console.log(c); */
            console.log(v.name);
            console.log(v.age);

        });
    </script>