鱼C论坛

 找回密码
 立即注册
查看: 2979|回复: 5

[见证历程] Js学习之路第八章

[复制链接]
发表于 2021-2-15 07:36:53 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
JS数组字面量

语法:
    []
    var arr = [];

例子:
  
//使用字面量创建数组时,可以在创建时就指定数组中的元素
        var arr  = [1,2,3,4,5,10];

        console.log(arr.length);

        /*
            使用构造函数创建数组时,也可以同时添加元素,将添加的元素作为构造函数的参数传递
            元素之间使用,隔开
        */
        var arr2 = new Array(10,20,30);

        console.log(arr2);

        //创建一个数组,数组中只有一个元素10
        arr = [10];

        //创建一个长度为10的数组
        arr2 = new Array(10);

        console.log(arr2.length);

        //数组中的元素可以是任意的数据类型
        arr = ["hello",1,true,null,undefined];

        //也可以是对象
        var obj = {name:"孙悟空"};
        arr[arr.length] = obj;
        arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]

        console.log(arr);//孙悟空


        //也可以是一个函数
        arr = [function(){alert(1)},function(){alert(1)}];

        arr[0]();

        //数组中也可以放数组(二维数组)
        arr = [[123],[3,4,5],[5,6,7]];

        console.log(arr);
---------------------------------
JS中四个常用的数组方法

      
//创建数组
        var arr = ["孙悟空","猪八戒","沙和尚"];

        /*
            push()
                -该方法可以向数组的末尾添加一个或多个元素,并返回数组的心的长度
                -可以将要添加的元素作为方法的参数传递,
                    这样这些元素将会自动添加到数组的末尾
                -该方法会将数组的长度作为返回值返回
        */

        var result = arr.push("唐僧","蜘蛛精","白骨精","嫦娥");

        console.log("result = " + result);
        console.log(arr);

        /*
            pop()
                -该方法可以删除数组的最后一个元素,删除的元素作为返回值返回

        */

        result = arr.pop();

        console.log("result = " + result);
        console.log(arr);

        /*
            unshift()
                -向数组开头添加一个火多个元素,并返回新的数组长度
                -向前边插入元素以后,其他元素的索引会依次后移
        */
       result = arr.unshift("牛魔王","二郎神");

       console.log("result = " + result);
       console.log(arr);

       /*
        shift()
            -可以删除数组第一个元素,并将被删除的元素作为返回值返回
       */

       result = arr.shift();

       console.log("result = " + reuslt);
       console.log(arr);
---------------------------
Js中数组的遍历

      
//创建数组
        var arr = ["孙悟空","猪八戒","沙和尚","唐僧","嫦娥","牛魔王","白骨精"];

        //所谓的遍历数组,就是将数组中的所有元素都去取出来
        for(var i=0; i<arr.length; i++){
            console.log(arr[i]);
        }
-----------------------
JS中forEach的用法

      
/*
            一般我们都是使用for循环去遍历数组,
                JS中还未我们提供了一个方法,用来遍历数组

            forEach()
                -这个方法只支持IE8以上的浏览器
                    IE8和以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
                    还是使用for循环来遍历
                
        */

        //创建一个数组
        var arr = ["孙悟空","猪八戒","沙和尚","唐僧","嫦娥","牛魔王","白骨精"];
        
        /*
            forEach()方法需要一个函数作为参数    
                -像这种函数,由我们创建但不是由我们调用的,我们成为回调函数
                -数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
                    以实参的形式传递进来,我们可以来定义形参,来读取这些内容
                
                -浏览器会在回调函数中传递三个参数:
                    1.第一个参数,就是当前正在遍历的元素
                    2.第二个参数,就是当前正在遍历的元素的索引
                    3.第三个参数,就是正在遍历的数组
        */
        arr.forEach(function(value,index,obj){
            console.log("value = " + value);//数组的元素
            console.log("index = " + index);//索引
            console.log("obj = " + obj)   ;//数组
        });
------------------------------------------
Js中的Slice和Splice


      
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]

        /*
            slice()
                -可以用来从数组提取指定元素
                -该方法不会改变元素组,而是将截取到的元素封装到一个新数组中返回
                -参数:
                    1.截取开始的位置的索引,包含开始索引
                    2.截取结束的位置的索引,不包括结束索引
                        -第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
                    -索引可以传递一个负值,如果传递一个负值,则从后往前计算
                        -1倒数第一个
                        -2倒数第二个 
        */

        var result = arr.slice(0,2);
        
        //包含索引1以后的所有元素
        result = arr.slice(1);

        console.log(arr);

        console.log(result);

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


        /*
            splice()
                -可以用于删除数组中的指定元素
                -使用splice()会影响到原数组,会将指定元素从原数组中删除
                    并将被珊瑚的元素作为返回值返回
                -参数:
                    1.表示开始位置的索引
                    2.表示删除的数量
                    3.第三个参数跟第三个以后的参数
                        可以传递一些新的元素,这些元素会自动插入到开始位置索引前边
        */

        var result2 = arr.splice(0,1,"牛魔王","铁扇公主","红孩儿");

        console.log(arr);
        console.log(result2);//打印删除的值
-------------------------------------------
JS数组的剩余方法:

      
var arr = ["孙悟空","猪八戒","沙和尚"];
        var arr2 = ["白骨精","玉兔","蜘蛛精"];
        var arr3 = ["二郎神","太上老君","玉皇大帝"];
        
        /*
            concat()可以连接两个或多个数组,并将新的数字返回
            -该方法不会对原数组产生影响
        */
        var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
        console.log(result);

        /*
            join()
            -该方法可以将数组转换为一个字符串
            -该方法不会对原数组产生影响,而是将装换后的字符串作为结果返回
            -在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
                默认连接符使用,(逗号)
        */

        result = arr.join(" ");

        console.log(result);

        /*
            reverse()
            -该方法用来反转数组(前边的去后边,后边的去前边)
            -该方法会直接修改原数组
        */

        arr.reverse();

        console.log(arr);

        /*
            sort()
            -可以用来对数组中的元素进行排序
            -该方法会直接修改原数组
            -默认按照Unicode编码进行排序
        */

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

            我们可以自己来指定排序的规则
                我们可以在sort()中添加一个回调函数,来指定排序规则
                    回调函数中需要定义两个形参
                    浏览器将会分别使用数组中的元素作为实参去调用回调函数
                    使用按个元素调用不确定,但是肯定的是在数组中a一定在b前面
            -浏览器会根据回调函数的返回值来决定元素的元素的顺序,
                如果返回一个大于0的值,则元素会交换位置
                如果返回一个小于0的值,则元素位置不变
                如果返回一个0,则认为两个元素相等,也不交换位置
            
            -如果需要升序排列, 则返回a-b
            -如果需要降序排列,则返回b-a
        */
        arr = [5,4,2,1,3,6,8,7];

        arr.sort(function(a,b){
            /* //前边的大
            if(a > b){
                return 1;
            }
            else if(a<b){
                return -1;
            }
            else{
                return 0;
            } */

            //升序排列
            return a-b;

            //降序排列
            //return b-a;
        })

        console.log(arr);
----------------------------------
Js中call和apply

            function fun(a,b){
                console.log("a = " + a);
                console.log("b = " + b);
                //alert(this);
            }

            var obj = {
                name:"obj",
                sayName: function(){
                    alert(this.name);
                }
            };

          /*
            call() 和 apply()
                -这两个方法都是函数对象的方法,需要通过函数对象来调用
                -当对函数调用call()和apply()都会调用函数执行
                -在调用call和apply时可以将一个对象指定为第一个参数
                    此时这个对象将会成为函数执行时的this
                -call()方法可以将实参在对象之后依次传递
                -aplly()方法需要将实参封装到一个数组中统一传递

                -this的情况:
                    1.以函数形式调用时,this永远都是window
                    2.以方法的形式调用时,this是调用方法的对象
                    3.以构造函数的形式调用时,this是新创建的那个对象
                    4.使用call和apply调用时,this是我们指定的那个对象
          */

          fun.call(obj,2,3);
          fun.apply(obj,[2,3]);

          
          var obj2 = {
                name:"obj2"
            
            };

          /* fun.apply();
          fun.call();
          fun(); */

          fun.call(obj);
          fun.apply(obj);

          obj.sayName.apply(obj2);
----------------------------------------------
Js中argument

  
 /*
            在我们调用函数时,浏览器每次都会传递进两个隐含的参数:
                1.函数的上下文对象this
                2.封装实参的对象arguments
                    -arguments是一个类数组对象,也可以通过索引来操作数据,也可以获取长度
                    -在调用函数时,我们所传递的实参都会封装到Arguments中保存
                    -arguments.length可以用来获取实参的长度
                    -我们不定义实参,也可以通过arguments来使用实参,只不过很麻烦
                        arguments[0] 表示第一个实参
                        arguments[1] 表示第二个实参....以此类推
                -它里边有一个属性叫做callee,
                    这个属性对应一个函数对象,就是当前正在执行的函数的对象
                
        */

        function fun(a,b){
            console.log(arguments);
            console.log(Array,isArray(arguments));
            console.log(arguments.length);
            console.log(arguments[0]);
            console.log(arguments.callee);
            console.log(arguments.callee == fun); //true
        } 

        fun("hello",true);
----------------------------------------------

试一试:

1.题目如下

创建一个函数,可以将perArr中的满18岁Person提取出来,
    然后封装到一个新的数组中并返回

        function Person(name,age,gender){
            this.name = name;
            this.age = age;
        }

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

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


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


2.题目如下  

把下面数组里面的重复的数字给去除掉(需要结合Splice跟Slice知识点来完成~)
hint: 需要使用到嵌套for循环
var arr = [1,2,3,2,2,1,3,4,2,5];
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-15 11:00:13 | 显示全部楼层

回帖奖励 +5 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-18 14:33:24 | 显示全部楼层

回帖奖励 +5 鱼币

继续跟你学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-18 17:22:29 | 显示全部楼层

回帖奖励 +5 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-18 18:05:25 | 显示全部楼层

回帖奖励 +5 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-18 20:37:39 | 显示全部楼层

回帖奖励 +5 鱼币

感谢分享!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 10:10

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表