码迷,mamicode.com
首页 > 编程语言 > 详细

JS数组

时间:2019-09-03 09:46:14      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:log   大于   部分   蜘蛛   eof   从后往前   数据类型   就是   改变   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
1.使用构造函数创建数组
            /*
             * 内建对象
             * 宿主对象
             * 自定义对象
             * 
             * 数组(Array)
             *     - 数组也是一个对象
             *     - 它和我们普通对象功能类似,也是用来存储一些值的
             *     - 不同的是
                     1.普通对象是使用字符串作为属性名的,而数组时使用数字来作为索引操作元素
             *     - 索引:
             *         从0开始的整数就是索引
             *     - 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
             */
            
            //创建数组对象
            var arr = new Array();
            
            //使用typeof检查一个数组时,会返回object
            //console.log(typeof arr);
            
            /*
             * 向数组中添加元素
             * 语法:数组[索引] = 值
             */
            arr[0] = 10;
            arr[1] = 33;
            arr[2] = 22;
            arr[3] = 44;
            /*arr[10] = 31;
            arr[100] = 90;*/
            
            /*
             * 读取数组中的元素
             * 语法:数组[索引]
             *     如果读取不存在的索引,他不会报错而是返回undefined
             */
            
            //console.log(arr[3]);
            
            /*
             * 获取数组的长度
             * 可以使用length属性来获取数组的长度(元素的个数)
             *     语法:数组.length
             * 
             * 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
             * 对于非连续的数组,使用length会获取到数组的最大的索引+1
             *         尽量不要创建非连续的数组
             */
            /*console.log(arr.length);
            console.log(arr);*/
            
            /*
             * 修改length
             *     如果修改的length大于原长度,则多出部分会空出来
             *  如果修改的length小于原长度,则多出的元素会被删除
             */
            //arr.length = 10;
            
            /*arr.length = 2;
            
            console.log(arr.length);
            console.log(arr);*/
            
            arr[4] = 50;
            arr[5] = 60;
            
            //向数组的最后一个位置添加元素
            //语法:数组[数组.length] = 值;
            arr[arr.length] = 70;
            arr[arr.length] = 80;
            arr[arr.length] = 90;
            
            console.log(arr);

2.使用字面量来创建数组

            //使用字面量来创建数组
            //语法:[]
            //var arr = [];
            
            //console.log(typeof arr);
            
            //使用字面量创建数组时,可以在创建时就指定数组中的元素
            var arr = [1,2,3,4,5,10];
            
            //console.log(arr[3]);
            
            //使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递
            //元素之间使用,隔开
            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:"猪八戒"}];
            
            //也可以是一个函数
            arr = [function(){alert(1)},function(){alert(2)}];
            
            //console.log(arr);
            //arr[0](); 调用函数
            
            //数组中也可以放数组,如下这种数组我们称为二维数组
            arr = [[1,2,3],[3,4,5],[5,6,7]];
            console.log(arr[1]);
            [] :  数组定义 
            {} : 对象定义

3.数组的四个元素操作方法
        //创建一个数组
            var arr = ["孙悟空","猪八戒","沙和尚"];
            
            /*
             * push()
             *     - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
             *     - 可以将要添加的元素作为方法的参数传递,
             *         这样这些元素将会自动添加到数组的末尾
             *     - 该方法会将数组新的长度作为返回值返回
             */
            
            var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
            
            //console.log(arr);
            //console.log("result = "+result); 新的数组长度
            
            /*
             * pop()
             *     - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
             */
            result = arr.pop();
            /*console.log(arr);
            console.log("result = "+result);*/
            
            /*
             * 数据长度=unshift()
             *     - 向数组开头添加一个或多个元素,并返回新的数组长度
             *     - 向前边插入元素以后,其他的元素索引会依次调整
             */
            //console.log(arr);
            
            arr.unshift("牛魔王","二郎神");
            
            console.log(arr);
            
            /*
             *数组元素=  shift()
             *     - 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
             */
            result = arr.shift();
            result = arr.shift();
            
            console.log(arr);
            console.log("result = "+result);


            
4. forEach
            * 一般我们都是使用for循环去遍历数组,
             *     JS中还为我们提供了一个方法,用来遍历数组
             * forEach()
             *         - 这个方法只支持IE8以上的浏览器
             *             IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
             *             还是使用for循环来遍历
             */
            
            //创建一个数组
            var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
            
            /*
             * forEach()方法需要一个函数作为参数
             *     - 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
             *     - 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
             *         以实参的形式传递进来,我们可以来定义形参,来读取这些内容
             *     - 浏览器会在回调函数中传递三个参数:
             *         第一个参数,就是当前正在遍历的元素
             *         第二个参数,就是当前正在遍历的元素的索引
             *         第三个参数,就是正在遍历的数组对象
             *         
             */
            arr.forEach(function(value , index , obj){
                console.log(value);
            });

5. slice 和splice  
            /*
             * slice()
             *     - 可以用来从数组提取指定元素
             *     - 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
             *     - 参数:
             *         1.截取开始的位置的索引,包含开始索引
             *         2.截取结束的位置的索引,不包含结束索引
             *             - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
             *         - 索引可以传递一个负值,如果传递一个负值,则从后往前计算
             *             -1 倒数第一个
             *             -2 倒数第二个
             */
            
            var result = arr.slice(1,4);
            
            result = arr.slice(3);
            
            result = arr.slice(1,-2);
            
            //console.log(result);
            
            /*
             * splice()
             *     - 可以用于删除数组中的指定元素
             *     - 使用splice()会影响到原数组,会将指定元素从原数组中删除
             *         并将被删除的元素作为返回值返回
             *     - 参数:
             *         第一个,表示开始位置的索引
             *         第二个,表示删除的数量
             *         第三个及以后。。
             *             可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
             *     
             */
            
            arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
            var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
            
            console.log(arr);
            //console.log(result);
            
6.数组去重练习
            <script type="text/javascript">
            
            //创建一个数组
            var arr = [1,2,3,2,2,1,3,4,2,5];
            
            //去除数组中重复的数字
            //获取数组中的每一个元素
            for(var i=0 ; i<arr.length ; i++){
                //console.log(arr[i]);
                /*获取当前元素后的所有元素*/
                for(var j=i+1 ; j<arr.length ; j++){
                    //console.log("---->"+arr[j]);
                    //判断两个元素的值是否相等
                    if(arr[i] == arr[j]){
                        //如果相等则证明出现了重复的元素,则删除j对应的元素
                        arr.splice(j,1);
                        //当删除了当前j所在的元素以后,后边的元素会自动补位
                        //此时将不会在比较这个元素吧,我需要在比较一次j所在位置的元素
                        //使j自减
                        j--;  //为了解决相邻元素重复而被跳过
                    }
                }
            }

7.数组的concat,sort,reverse,join方法

            var arr = ["孙悟空","猪八戒","沙和尚"];
            var arr2 = ["白骨精","玉兔精","蜘蛛精"];
            var arr3 = ["二郎神","太上老君","玉皇大帝"];
            
            /*
             * concat()可以连接两个或多个数组,并将新的数组返回
             *     - 该方法不会对原数组产生影响
             */
            var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
            
            /*
             * join()
             *     - 该方法可以将数组转换为一个字符串
             *     - 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
             *     - 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
             *         如果不指定连接符,则默认使用,作为连接符
             */
            arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
            
            result = arr.join("@-@");
            /*
             * reverse()
             *     - 该方法用来反转数组(前边的去后边,后边的去前边)
             *     - 该方法会直接修改原数组
             */
            
            arr.reverse();
            
            //console.log(arr);
            
            arr = ["b","d","e","a","c"];
            
            /*
             * sort()
             *     - 可以用来对数组中的元素进行排序
             *     - 也会影响原数组,默认会按照Unicode编码进行排序
             */
            arr.sort();
            //arr.reverse();
            
            /*
             * 即使对于纯数字的数组,使用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);            
            
            console.log(arr);

8. 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()
             *     - 这两个方法都是函数对象的方法,需要通过函数对象来调用
             函数名是函数对象 fun,  fun()是函数的执行结果,即返回值
             *     - 当对函数调用call()和apply()都会调用函数执行
             *     - 在调用call()和apply()固定将一个对象指定为第一个参数
             *         此时这个对象将会成为函数执行时的this
             *     - call()方法可以将实参在对象之后依次传递
             *     - apply()方法需要将实参封装到一个数组中统一传递
             * 
             *     - this的情况:
             *         1.以函数形式调用时,this永远都是window
             *         2.以方法的形式调用时,this是调用方法的对象
             *         3.以构造函数的形式调用时,this是新创建的那个对象
             *         4.使用call和apply调用时,this是指定的那个对象
             */
            
            //fun.call(obj,2,3);//a=2 b=3
            //fun.apply(obj,[2,3]); //a=2 b=3

            

            var obj2 = {
                name: "obj2"
            };

            //fun.apply(); //a=undefined b=undefined
            //fun.call(); //a=undefined b=undefined
            //fun(); //a=undefined b=undefined

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

            //fun();
            
            //obj.sayName.apply(obj2); // 调用obj2的对象

9. arguments 类(似)数组            
        /*
             * 在调用函数时,浏览器每次都会传递进两个隐含的参数:
             *     1.函数的上下文对象 this
             *     2.封装实参的对象 arguments
             *         - arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
             *         - 在调用函数时,我们所传递的实参都会在arguments中保存
             *         - arguments.length可以用来获取实参的长度
             
             *         - 我们即使不定义形参,也可以通过arguments来使用实参,

             *             只不过比较麻烦
             *             arguments[0] 表示第一个实参
             *             arguments[1] 表示第二个实参 。。。
             *        - 它里边有一个属性叫做callee,
             *             这个属性对应一个函数对象,就是当前正在指向的函数的对象
             *         
             */
            
            function fun(a,b){
                //console.log(arguments instanceof Array);
                //console.log(Array.isArray(arguments));
                //console.log(arguments[1]);
                //console.log(arguments.length);
                console.log(arguments.callee == fun); //true
            }
            
            fun("hello",true);
        </script>
    </head>
    <body>
    </body>
</html>

 

JS数组

标签:log   大于   部分   蜘蛛   eof   从后往前   数据类型   就是   改变   

原文地址:https://www.cnblogs.com/luoxuw/p/11450854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!