• JavaScript的进阶之路(五)理解数组1


    数组是值得有序结合,每个值叫做一个元素,每个元素的位置称为索引,索引从0开始。

    在JavaScript中,数组是对象的特殊形式。继承自Array.prototype中的属性,有丰富的数组操作方法。

    通常数组的实现是经过优化的,用数字索引访问数组元素比访问常规的对象属性要快很多。足够稀疏的数组查找元素和常规对象属性的查找时间一样长。

    首先:创建数组

                var a1=[];
                var a2=[1,2,3];
                var a3=[1,"a",2,"b"];
                var a4=[1,[2,3],4];
                var a5=new Array();
                var a6=new Array(10);  //预分配一个数组空间,没有存储值,甚至索引属性还未定义
                var a7=new Array(1,2,3,"hello,world");
                var base =1024;
                var a8 = [base,base+1,base+2];
                var a9 = [1,,]; //省略数组直接量中的某个值,将被赋予undefined值,直接量的写法允许有可选的结尾逗号,因此a9数组有2个元素
                console.log(a9.length); //2

    其次:数组元素的读和写。除了正常的读和写,数组也可以从原型继承元素,在ECMA5中可以定义数组元素的getter和setter方法(暂不研究)。

                //定义一个测试数组
                var arr=[1,2,3,null,4,5,6];
                //读操作
                console.log(arr[3]);  //获得数组下标是3的元素
                console.log(arr[arr.length-1]); //获得数组最后一个元素
                //写操作
                arr[arr.length] = 7; //给数组末尾添加一个元素
                //数组遍历
                for(var i=0,len=arr.length;i<len;i++){
                    //跳过null undefined 和不存在的元素
                    if(!arr[i]){
                        continue;
                    }
                    console.log(arr[i]);
                }
                //将对象中的值变成数组
                var obj={x:1,y:2,z:5,m:3,n:"a"};
                var array1=[];
                var keys=Object.keys(obj);  //将对象的属性变为数组
                console.log(keys);
                for(var i=0,len=keys.length;i<len;i++){
                    var key=keys[i];
                    array1[i]=obj[key];                
                }
                console.log(array1);

    第三:关于稀疏数组

                var test = new Array(10);  //利用new Array()构造函数创建稀疏数组
                var test1 = [1,2,3];
                delete test1[1];  //如果从数组中删除一个元素,也会变为稀疏数组,但不影响数组的下标和长度
                console.log(test1[1]);  // 返回undefined
                console.log(test1[2]);  //还是3
                test1[99] = 100;  //利用大于索引值大于当前数组长度创建稀疏数组
                console.log(0 in test);  //false  判断test在索引0处有没有元素  true有 false没有 
                console.log(1 in test1); //false  删除后在下标位置没有元素

    第四:数组的长度

    如果给数组设置长度(array.length=2);若设置的长度小于数组长度则移除数组中的项,大于数组的长度则添加undefined项

    数组的长度是:array.length;数组最后一项的下标是:array.length-1

    设置数组的特性Object.defineProperty()

    封闭数组Object.seal()可以改,但是不能删除和扩展

    冻结数组Object.freeze()不能修改 删除 扩展

                //定义一个测试数组
                var arr=[1,2,3,null,4,5,6];
                console.log(arr.length); //7
                arr.length =4; 
                console.log(arr);  // [1,2,3,null]
                arr.length = 5;
                console.log(arr); //[1,2,3,null,empty]  长度为5
                Object.defineProperty(arr,"length",{writable:false}); //设置数组对象的特性 长度不能修改
                arr.length = 0;
                console.log(arr);   //[1,2,3,null,empty]  长度为5
                Object.seal(arr);  //封闭数组arr 能改 但是不能删除和扩展
                delete arr[0];
                console.log(arr[0]);  //1 没有删除
                arr[0] = 7;
                console.log(arr[0]);  //但是可以修改
                Object.freeze(arr);  //冻结数组arr,完全不能修改 删除 扩展
                arr[0] = 9;
                console.log(arr[0]); //还是 7  被冻结不能修改

    第五:数组元素的添加和删除 

    添加:下标方法  push() unshift()  

    删除:设置长度 pop()  shift()  delete操作符 

    万能大法:splice()

    第六:数组遍历:使用for循环是遍历数组元素最常见的方法,for(var e in arr)不推荐使用,在ECMAScript5中,还定义了数组的forEach(v,i,a){}方法

               //创建一个对象,获得对象的属性组成的数组
                var obj={x:1,y:2,z:5,m:null,n:"a"};
                var keys = Object.keys(obj);
                console.log(keys);   //  [x,y,z,m,n]
                //利用for循环获得对象的值,添加到新数组中
                var array1 = [];
                for(var i=0,len=keys.length;i<len;i++){
                    var key = keys[i];   //key= x,y,z,m,n
                    array1.push(obj[key]);   // 等同于array1[i]=obj[key];    
                }
                console.log(array1);   // [1,2,5,null,a]
                
                //如果数组是稀疏数组呢?如果想要排除null,undefined,不存在的元素
                for(var i=0,len=array1.length;i<len;i++){
                    //跳过不存在的元素
                    if(!(i in array1)) continue;
                    //跳过不存在的元素和undefined
                    if(array1[i]===undefined) continue;
                    //跳过null undefined 和不存在的元素
                    if(!array1[i]) continue;
                    console.log(array1[i]); //1,2,5,a
                }
                //由于for in 循环能够枚举继承的属性名,所以在数组上不应该使用for in循环 ,若使用应检测过滤掉不想要的属性
                for(var e in array1){      
                    if(!array1.hasOwnProperty(e)) continue;  //跳过了数组继承的属性
                    if(String(Math.floor(Math.abs(Number(e))))!==e) continue; //跳过不是非负整数的e
                    //以上检测 二者取其一就可以
                }
                //在ECMAScript5中  可以使用forEach()方法 遍历数组元素
                var array2 = [1,2,3,4,5];
                var squares = 0;
                array2.forEach(function(v){
                    squares += v*v;
                });
                console.log(squares);

    第七:多维数组 arr[0][0]  访问数组中第一个数组元素的第一个元素

                var arr = new Array(10); //创建一个长度为10的数组
                for(var i=0;i<arr.length;i++){
                    arr[i] = new Array(10);   //利用for循环给每个数组的元素添加一个长度为10的数组
                }
                //初始化数组(给多维数组赋值)
                for(var i=0;i<arr.length;i++){
                    for(var j=0;j<arr[i].length;j++){
                        arr[i][j] = i*j;   
                    }
                }
                console.log(arr);   
                console.log(arr[5][7]);
    仅此杂文,留待后用。
  • 相关阅读:
    spring @component的作用
    Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
    servlet中实现页面跳转return “r:”和return “f:
    MyEclipse中SVN的使用方法 此博文包含图片 (2012-04-19 12:18:35)
    MyEclipse使用总结——MyEclipse10安装SVN插件
    javaweb学习总结(九)—— 通过Servlet生成验证码图片
    Spring-springmvc-mybatis整合
    MyBatis连接SQLServer数据库
    mybatis入门基础(二)----原始dao的开发和mapper代理开发
    MyBatis入门基础(一)
  • 原文地址:https://www.cnblogs.com/wow1314/p/8406092.html
Copyright © 2020-2023  润新知