js引用类型

1.数组

  -在ECMAScript中数组是非常常用的引用类型。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。

首先,数组也是一种对象。

  -特点:

    -数组是一组数据的组合

    -js数组更加类似java的容器,长度可变,元素类型也可以不同

    -数组长度随时可变,随时可以修改(length属性)

  -常用方法:

    -push,pop

    -shift,unshift

    -splice,slice

    -concat,join,sort,reverse等

    -位置方法:indexOf,lastIndexOf

    -迭代方法:every filter forEach some map

    -缩小方法:reduce reduceRight

  

<script type="text/javascript" charset="UTF-8">
            //var arr1 = new Array();
            var arr = [1,2,3,4,true,'abc',new date()];
            
            alert(arr.length);
            // 改变数组长度        
            arr.length = 5;    
            alert(arr);  // 1,2,3,4,true 默认调用了toString,将这个对象转换成了字符串
            
            
            var arr2 = [];
            var result = arr2.push(1,2,true); // 压栈,返回值是新数组长度
            var obj = arr2.pop();    //弹栈,从数组的尾部移除一个元素,返回值是移除的元素内容
            
            var arr3 = [1,2,3,true,new date()];
            var result1 = arr3.shift();// 移除数组第一个元素,返回值是移除的元素内容
            var result2 = arr3.unshift(10,false);// 从头部插入元素,返回值是数组的长度
            
            var arr4 = [1,2,3,4,5];
            // splice 第一个参数表示起始位置,第二个参数表示截取的个数,第三个参数以后表示追加的新元素
            // splice操作数组本身
            arr4.splice(1,2,3,4,5); //12345->134545  
            arr4.splice(1,2);//12345->145
            arr4.splice(1);//12345->1
            
            var arr5 = [1,2,3,4,5];
            // slice不操作数组本身
            arr5.slice(2,4);// 12345->34,左闭右开
            
            // 操作数组的方法
            // concat方法不操作数组本身
            var arr6 = [1,2,3];
            var arr7 = [true,4,5];
            var result3 = arr6.concat(arr7);// 数组合并操作
            
            // join方法不操作数组本身
            var resilt4 = arr6.join('-');//123->1-2-3 在每个元素之间加入内容
            
            // sort方法操作数组本身
            // reverse方法操作数组本身
            var arr8 = [1,4,3,5,2];
            var arr9 = [10,2,4,1,7];
            arr8.reverse();//倒序排序,并非按照大小排序,而是按照元素位置 1,4,3,5,2->2,5,3,4,1
            arr9.sort();//正序排序,按照java中string类型比较的方法去比较的,10.2.4.1.7->1,10,2,4,7
            
            // 想要实现自然排序,需要自己写排序方法。
            function compare (value1, value2){
                if(value1 < value2) {
                    return -1;
                } else if(value1 > value2) {
                    return 1;
                } else {
                    return 0;
                }
            }
            
            arr8.sort(compare); // 1,4,3,5,2 ->1,2,3,4,5
            
            // 位置方法
            var array1 = [1,2,3,4,5,4,3,2,1];
            // 比较的时候使用"==="来进行比较,不自动转换
            var value = array1.indexOf(4);// 返回结果为3,返回参数第一次出现的位置
            var value1 = array1.indexOf(4,4);// 第一个参数是起始位置,第二个参数是查找的内容,即从起始位置4开始查找第一次元素4出现的位置
            var value2 = array1.lastIndexOf(2);//返回7,从后往前查找
            
            // 迭代方法
            // every:对数组每一个元素进行一个函数的运行,函数如果都返回为true,最后结果返回true,如果有一个返回false,则结果为false。
            var res = array1.every(function(item, index, array) {
                return item > 2;
            });
            
            // filter:对于数组的每一个元素也是进行函数的运行,给定的函数去执行,把过滤后的结果返回
            var res1 = array1.filter(function(item, index, array) {
                return item > 2;
            });
            
            // foreach:循环数组每一项的值,并执行一个方法
            array1.foreach(function(item, index, array) {
                alert(item);
            });
            
            // map:对数组每个元素进行一个函数的运行,可以经过函数执行完毕后,将新的结果返回
            var res2 = array1.map(function(item, index, array) {
                return item * 3;
            });
            
            // some:对数组每一个元素进行一个函数的运行,函数如果有一个返回true,则结果为true,如果都为false,结果才为false
            var res3 = array1.some(function(item, index, array) {
                return item > 10;
            });
            
            // 缩小方法
            // 第一个参数为前一个值,第二个参数为当前值,第三个参数为当前索引位置,第四个参数是数组本身
            var res4 = array1.reduce(function(previous, current, index, array) {
                return previous + current;//求和
            });
            // 和reduce方法的区别,reduce方法是从左开始遍历,reduceRight方法是从右边开始遍历
            var res5 = array1.reduceRight(function(previous, current, index, array) {
                return previous + current;//求和
            });
        </script>

 

2.Object

  1.我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型。(如同Java.lang.Object一样,Object类型是所有它的实例的基础)

    -Object类型的创建方式,使用

      

// Object 类的创建
            var obj = new Object();
            var obj1 = new Object; // 不建议
            var obj2 = {};

    -对于Object类型应用for in枚举循环

  2.Object每个实例都会有下列属性和方法

    -Constructor:保存着用于创建当前对象的函数(构造函数)

    -hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在

    -isPrototypeOf(Object):用于检查加入的对象是否是另外一个对象的原型

    -propertyisElemerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举

    -toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应

    -toString():返回对象的字符串表示

    -valueOf():返回对象的字符串,数值或布尔表示

  

<script type="text/javascript" charset="UTF-8">
            // Object 所有类的基础类
            // Object 类的创建
            var obj = new Object();
            var obj1 = new Object; // 不建议
            var obj2 = {};
            
            // 给对象设置一些属性
            obj.name = 'zhangsan';
            obj.age = 17;
            obj.sex = 'male';
            // 下面的赋值方式,一定要加''
            obj['birthday'] = '1998-03-21';
            obj.say() = function() {
                alert('hello world');
            };
            // 访问对象的属性和方法
            alert(obj.name);
            alert(obj.age);
            obj.say();
            
            // 删除对象属性或方法 delete操作符
            delete obj.age;
            delete obj.say;
            
            alert(obj.age); // undefind
            obj.say();  //obj.say is not a function
            
            // 如何去遍历一个js对象 使用for in语句式
            for (var item in obj) {
                alert(item);
            }// name,sex,birthday会被输出
            
            for (var item in obj) {
                alert(obj[item]);
            }// zhangsan,male,1998-03-21被输出
            
            
            // Constructor: 保存对象的创建函数
            alert(obj.constructor); // function Object() {[native code]}
            var arr = [];
            alert(arr.constructor); // function Array(){[native code]}
            
            // hasOwnProperty(propertyName):用于检测给定属性在对象中是否存在
            obj.hasOwnProperty('name');// 返回值为boolean类型 
            
            // isPrototypeOf(Object): 检测原型
            
            // propertyEnumerable(propertyNmae):用于检查给定的属性是否能通过for in语句来枚举
            obj.propertyEnumerable('name');// 返回值为true
        </script>

 3.利用js特性,模拟java中的Map

<script type="text/javascript" charset="UTF-8">
            function Map() {
                // 空的对象容器,存放键值对
                var obj = {};
                // put方法
                this.put = function(key, value) {
                    // 把键值对绑定到obj对象上
                    obj[key] = value;
                };
                // size方法
                this.size = function() {
                    var count = 0;
                    for (var attr in obj){
                        count++;
                    }
                    return count;
                };
                // get方法
                this.get = function(key) {
                    if (obj[key] || obj[key] === 0 || obj[key] === false) {
                        return obj[key];
                    } else {
                        return null;
                    }
                };
                // remove方法
                this.remove = function(key) {
                    if (obj[key] || obj[key] === 0 || obj[key] === false) {
                        delete obj[key];
                    }
                };
                // 遍历方法
                this.each = function(fn) {
                    for(var attr in obj) {
                        fn(attr, obj[attr]);
                    }
                };
                m.each(function (key, value) {
                    alert(key +" : " + value);
                });
            }
        </script>

4.利用js特性,去掉数组中的重复项

<script type="text/javascript" charset="UTF-8">
            var arr = [2,1,2,10,2,3,5,5,5,5,1,10,3,8,9,8];
            // js特性:在js对象中 key是永远不会重复的。
            // 1.将数组转换成为一个js对象
            var toObject = function(arr) {
                var obj = {}; // 私有的对象
                var j;
                for (var i = 0, j =arr.length; i < j; i++) {
                    // 2.把数组中的值变成js对象中的key
                    obj[arr[i]] = true;
                }
                return obj;
            };
            // 3.把对象转换成为数组
            var toArray = function(obj) {
                var arr = [];
                for (var item in obj) {
                    if(obj.hasOwnProperty(item)) {
                        arr.push(item);
                    }
                }
                return arr;
            };
            
            function unique(arr) {
                return toArray(toObject(arr));
            };
            alert(unique(arr));
        </script>

 5.其他引用类型对象

  -单体对象

    -Global对象(全局)这个对象不存在,无形的对象。

      -其内部定义了一些方法和属性,encodeURI,encodeURIComponent,decodeURI,decodeURICompent,eval,parseInt,parseFloat,isNaN,Escape,unescape

    -Math对象

      -内置的Math对象可以用来处理各种数学运算。

      -可以直接调用的方法:Math.数学函数(参数)

      -求随机数的方法:Math.random(),产生[0,1)范围一个任意数

  -Date对象

    -获取当前时间的一系列详细方法

  -基本包装类型:Boolean,String,Number和java的用法类似

  -Function类型,RegExp类型(以后再补充)

 

<script type="text/javascript" charset="UTF-8">
            // Global 全局的,终极的,不存在的对象
            // encodeURI,encodeURIComponent,decodeURI,decodeURIComponent
            // encodeURI,encodeURIComponent 编码
            var uri = 'http://www.baidu com';
            var str1 = encodeURI(uri); // 空格=》%20  // (uri: // 不会进行转码)
            var str2 = decodecodeURIComponent(uri);// 常用的,任何不标准的文字都会进行转码
            alert(str1);
            alert(str2);
            
            // decodeURI,decodeURIComponent 解码
            alert(decodeURI(str1));
            alert(decodeURIComponent(str2));
            
            //eval(String)方法。无形的javaScript解析器。参数是一个String类型字符串,结果是一个js脚本
            var str3 = 'a = 10; var b = 20;';
            eval(str3);
            alert(a + b);
            
            // 数组字符串 直接使用eval(Stringarr)
            // 将对象转为js脚本
            var strObj = "{name = 'zhangsan', age = 20}";
            var obj = eval('('+strObj+')');
            alert(obj.name); // zhangsan
            
            // parseInt parseFloat
            var num1 = parseInt('20');
            var num2 = parseFloat('20.5');
            alert(typeOf(num1));
            alert(typeOf(num2));
            
            // isNaN 如果不是number类型返回true,否则false
            var flg = 'flag';
            alert(isNaN(flg));
            // 在js中,只有NaN是自己不等于自己本身的
            if (NaN == NaN) {
                alert('eaqul');
            } else {
                alert('not equal');
            }
            
            // escape unescape  URI 中文编码和解码
            var str = '中国清华大学';
            var stri = escape(str);
            
            var stri2 = unescape(str2);
            
            
            // Date类型
            var date = new Date();
            // 获取年
            var year = date.getFullYear();
            // 获取月
            var month = date.getMonth() + 1;
            // 获取日期
            var day = date.getDate();
            // 获取星期  星期几
            var week = date.getDay();
            // 获取小时
            var hour = date.getHours();
            // 获取分
            var minute = date.getMinutes();
            // 获取秒
            var secend = date.getSeconds();
            
               document.write('今天是' + year + '年' + month + '月' + day + '日');
               // 获得当前时间毫秒数
               date.getTime();
        </script>

 

posted @ 2017-06-22 22:06  noooooob  阅读(609)  评论(0编辑  收藏  举报