对象 js

作者: 洱月 | 来源:发表于2017-08-09 11:38 被阅读0次

    对象

    创建对象的方法

    • Object方法

      • var zhangsan=new Object;
    • 类名的方式

      • class person{
        • constructor(){
          • 属性=属性值
        • }
        • 方法名(){
          • 函数体
        • }
      • }
      • var zhangsan= new person;
    • json方法

      • var zhangsan={}
    • 构造函数方法

      • function person(name,age){
        • this.name=name;
        • this.age=age
      • }
      • person.prototype={
        • play:function(){
        • }
      • }
      • var zhangsan = new person('zhangsan',56);
      • var li= new person('lisi',33)

    遍历对象

    for(let i in iphone){}
    

    对象如果没有这个属性 会返回undefined


    原型上的方法删不掉

    清空对象

    obj = null
    

    遍历对象

    for in
    for(let i in apple){
        i代表对象的属性 name age
        apple[i]代表对象的方法
    }
    

    继承 new extends super()

    冒充 zhangsan.play.call(lisi,45,88)
    把zhangsan的play方法冒充给lisi;只能使用一次;
    冒充 zhangsan.play.apply(lisi,[45,88])

    构造函数方法

    function  person(name,age){
        this.name=name,
        this.age=age,
        this.play=function(){
            alert('敲代码')
        }
    };
    person.prototype={
        teacher:function(){
            alert('濛细雨')
        },
        dudao:function(){
            alert('冯佳佳')
        }
    }
    person.prototype.aa=function(){
        alert('这是aa')
    }
    function  student(name,age){
        this.name=name,
        this.age=age,
        this.mack=function(){
            alert('睡觉')
        }
    };
    student.prototype=new person;
    var lian=new person('这是person',23)
    var fei=new student('这是student',93)
    // lian.play()
    fei.play()
    fei.mack()
    fei.aa()
    fei.dudao()
    

    类的方法

    class person{
        constructor(name,num){
            this.name=name;
            this.num=num
        }
        play(){
            alert('敲代码')
        }
    }   
    class student extends person{
        //extends 继承   
        constructor(name,cla){
            super();
            // super()函数必须写
            this.name=name;
            this.cla=cla;
        }
        mack(){
            alert('睡觉')
        }
    }
    var lian=new person('这是person',170201)
    var fei=new student('这是student','学生的');
    fei.mack()
    fei.play()
    console.log(fei.name)
    console.log(fei.cla)
    

    String 字符串对象

    属性

    • length 返回长度(不区分中英文,识别空格 )
    • constructor 字符串的构造函数

    方法

    获取类型
    • str.charAt() 返回指定位置的字符;
    • charCodeAt() 返回指定位置所对应的Unicode编码
    • String.fromCharCode() 接受一个或多个Unicode编码,返回对应的字符串
    查找类型
    • indexOf('ac') 返回某个字符串在str中首次出现的位置;如果未找到相应字符串,会返回-1;
    • lastIndexOf('a') 返回某个字符串在str中最后出现的位置;
    • match() 在字符串检索指定的值,返回值就是指定的值,返回一个数组 找不到目标值返回null
    • replace('a','*') 用一段字符替换另外一段字符; 只会替换首次出现的目标字符
    • search() 只用于正则
    截取类
    • slice(start,end) 从指定开始的位置,到结束的位置(不包括)的所有字符串。。如果不指定结束位置,则从指定的开始位置,取到结尾slice参数可以是负数,如果是负数,从-1开始指的是字符串结尾,-2是倒数第二个;
    • substring(start,end) 从指定的开始位置,到结束位置(不包括)的所有字符串。如果不指定结束位置,则一直取到结尾,不支持负数;
    • substr(start,length) 从指定的位置开始取指定长度的字符串。如果没有指定长度,从指定开始的位置取到结尾。
    重复
    • 'a'.repeat(5) 会输出'aaaaa'; 重复的输出某一个字符一定次数;
    判断
    • str.includes('a') 判断字符串内是否包含指定的字符串,返回布尔值;
    转换类
    • split("分割位置",[指定分割后数组的长度]) 将一个字符串分割成数组 var str='a-b-c-d-f' str.split('-',3)
    • toLowerCase(); 用于把字符串转换为小写。
    • toUpperCase() 将字符串转换为大写
    去空
    • trim() 字符串去空
    • trimLeft() 字符串开始去空
    • trimRight() 字符串结尾去空

    案例

    // 判断一个字符串中是否包含另一个字符串
    function isInClude(str,str2){
        if(str.indexOf(str2)==-1){
                return false;
        }else{
            return true;
        }
    }
    
    // 将制定的字符串替换成'*'号
    function tihuan(str,str1){
        // str是原字符串  str1是要替换掉的内容
    
        let xing='';
        for (var i = 0; i < str1.length; i++) {
            // 通过循环判断要替换内容的长度,来决定*号的数量
            xing+="*"
        };
        //可以用let xing='*'.repeat(str1.length)替换
    
        let newstr=str;
        while(newstr.match(str1)!=null){
             // 可用(newstr.indexOf(str1)!=-1)替换
            // 通过循环不停的替换,然后赋值给新的字符串
            newstr=newstr.replace(str1,xing)
        }
        return newstr;
    }
    
    // 打印出一段字符串中某一节字符串的位置  方法1
    function dump(str,str1){
        let arr=[]
        let xing="*".repeat(str1.length)
        let newstr=str;
        while(newstr.match(str1)!=null){
            arr.push(newstr.indexOf(str1))
            // 通过空数组保存下标 然后在循环外部return,避免直接终止循环,可以在最后获取到下标值,从而进行操作
            newstr=newstr.replace(str1,xing);
        }
            return arr;
    }
    
    // 打印出一段字符串中某一节字符串的位置  方法2
    
    function dumpF(str,str1){
        let arr=[];
        for (var i = 0; i < str.length; i++) {
            if(str.substr(i,str1.length)===str1){
                arr.push(i)
            }
        }
        return arr;
    }
    
    // 查找数组内随机元素
    function yuansu(a,b){
        if(a instanceof Array && arguments.length==2){
            // 参数a是一个数组对象,并且参数为2 
            var arr=[];
            for (var i = 0; i <b; i++) {
                var num=Math.floor(Math.random()*b);
                arr.push(a[num]);
            };
            return arr;
        }
        
    }
    

    Math 数学对象

    • Math.abs() 取绝对值
    • Math.round() 四舍五入
    • Math.floor() 向下取整,取最大的
    • Math.ceil() 向上取整,取最小的值
    • Math.max() 取最大值
    • Math.min() 取最小值
    • Math.random() 取随机数
    • Math.pow(x,y) 返回x的y次幂 平方
    • Math.sqrt(x) 平方根
    • numberObj.toFixed(2) 指定小数四舍五入后保留的位数

    Array 数组对象

    属性

    • length 返回长度(不区分中英文,识别空格 )
    • constructor 数组的构造函数

    var arr= new Array(5); 代表数组length为5;

    arr.push(...['x','y','z']) 加上...会把元素单独插入进去,不加会插入一个数组

    方法

    删除添加类

    • arr.push() 在数组末尾添加新的元素
    • unshift('a','b',7) 在数组最前面添加
    • pop() 删除数组最后一个元素,返回删除的元素,不用传参。
    • shift() 删除数组第一个元素,不用传参。返回删除的元素;
    • splice(index,数量,添加的元素...) 万能的添加删除,
      • index 开始删除或添加的位置,下标
      • 数量 要删除的个数,如果为0,则不删除
      • 需要添加的元素,可以当做替换的元素
      • 如果删除了元素,返回被删除的数组

    转换类

    • split() 字符串分割为数组
    • join([分隔符])把数组元素按照指定分隔符组合成一个字符串,如果没有指定分隔符,默认是用“,”返回结果就是组合成的字符串

    分割

    • myarr.slice()
      • 从截取指定的开始位置,到结束位置(不包括)的元素。如果不指定结束位置,则从 指定的开始位置,取到结尾(数组的下标)
      • 支持负数(-1开头)
      • 返回新数组。
    数组的连接
    • myarr.concat() 连接两个或更多的数组,并返回新数组,但是对原数组没有任何影响。

      var con=arr(...arr1,['zhangsan','lisi'])

    数组内容反转

    • arr.reverse() 反转数组内的元素顺序

    数组排序

    • arr.sort([fn]) 排序

      默认按照字符编码顺序排序,会把所有元素默认成字符串;
      如果要实现其他排序则要传入一个参数,这个参数必须要函数,并且这个函数要有两个参数
      * 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
      * 若 a 等于 b,则返回 0。
      * 若 a 大于 b,则返回一个大于 0 的值

    some

    • some(fn回调函数) 数组里面的每一个元素都需要执行一次回调函数

    遍历

    • filter(function(value,index,arr){return value>0}) 满足条件的会打印到ss数组里
    • some(function(value,index,arr){return value>0}) 有一个满足条件的返回true
    • every(function(value,index,arr){return value>0}) 所有元素满足条件的返回true

    案例

    var ss=arr1.filter(function(value,ss,sff){
        return value>3;
    //满足条件的会打印到ss数组里
    })
    var ss=arr1.some(function(value,ss,sff){
        return value>3;
    //有一个满足条件的返回true
    })
    var ss=arr1.every(function(value,ss,sff){
        return value>3;
     //所有元素满足条件的返回true
    })
    数组里面的每一个元素都需要执行一次回调函数
    

    作业

    1. 判断数组是否存在 >0
    2. 判断数组元素>0
    3. 筛选出元素 >0
    4. 删除重复
    5. 数组里随机获取任个元素
    6. 数组里随机获取任意个不重复元素

    案例

    // 判断数组内是否存在 > 0
    function a1 (arr) {
        if(!(arr instanceof Array)){
            return;
        }
        for (var i = 0; i < arr.length; i++) {
            if(arr[i]>0){
                return true;
            }
        };
        return false;
    }
    
    
    // 判断数组内是否所有元素都 > 0
    function a2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if(arr[i]<=0){
                return false;
            }
        };
        return true;
    }
    
    // 筛选数组内 > 0 的元素
    function filter(arr){
        let newarr=[];
        for (var i = 0; i < arr.length; i++) {
            if(arr[i]>0){
                newarr.push(arr[i]);
            }
        }
        return newarr;
    }
    // 判断数组内是否存在某一个元素
    function arrP(arr,ele){
        for (var i = 0; i < arr.length; i++) {
            if(arr[i]==ele){
                return true;
            }
        };
    }
    // 删除数组重复的元素
    function quchong1(arr){
        let newarr=[];
        for (var i = 0; i < arr.length; i++) {
            if(newarr.indexOf(arr[i])==-1){
            // 当newarr里查询不到arr[i]的时候,插入
                newarr.push(arr[i]);
            }
        }
        return newarr;
    }
    function quchong2(arr){
        let newarr=[];
        for (var i = 0; i < arr.length; i++) {
            var flag=arrP(newarr,arr[i]);
            // 调用另外一个函数,判断newarr里是否包含arr[i]
            if(!flag){
                newarr.push(arr[i])
            }
        }
        return newarr;
    }
    
    function quchong3(arr){
        // 如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组
        var newArr = [];
        for(var i=0, len=arr.length; i<len; i++){
             if(arr.indexOf(arr[i]) == i){
                 newArr.push(arr[i]);
             }
         }
         return newArr;
    }
    // 数组内随机获取任意个元素
    function a5(arr){
        let newarr=[];
        let n=Math.floor(Math.random()*arr.length);
        // 让获取的元素个数随机
        for (var i = 0; i < n; i++) {
            let num=Math.floor(Math.random()*arr.length);
            // 让获取元素的内容随机
                newarr.push(arr[num]);
                // 插入新数组
        }
        return newarr;
    }
    // 数组里随机获取任意个不重复元素
    function a6(arr){
        let newarr=[];
        let n=Math.floor(Math.random()*arr.length);
        // 让获取的元素个数随机
        for (var i = 0; i < n; i++) {
            let num=Math.floor(Math.random()*arr.length);
            // 让获取元素的内容随机
            while(newarr.includes(arr[num])){
                 num=Math.floor(Math.random()*arr.length);
                 n=Math.floor(Math.random()*num);
            }
            newarr.push(arr[num]);
        }
        return newarr;
    }
    

    数组的遍历方式

    优化版for循环
    for(j = 0,len=arr.length; j < len; j++) {
       
    }
     对于数组较大时,优化比较明显;
    
    第二种:foreach
    arr.forEach(function(e){  
       
    });
    
    
    第三种:for ……in
    var arr = new Array("first", "second", "third") 
    for(var item in arr) {
    document.write(arr[item]+",");
    }
     for……in 的效率比较低
     
    
    第四种:map 遍历
    arr.map(function(n){  
       
    });
    
    
    第五种:for……of 遍历(需要ES6支持)
    for(let value of arr) {  
       
    });
    

    Date 日期对象

    var date=new Date()

    1.“时:分:秒 月/日/年” “月/日/年 时:分:秒" 字符串
    2.年,月,日,时,分,秒 不能加""  月份要-1
    

    获取日期信息的方法

     getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
     getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
     getMonth() 从 Date 对象返回月份 (0 ~ 11)。
     getFullYear() 从 Date 对象以四位数字返回年份。
     getYear() 请使用 getFullYear() 方法代替。
     getHours() 返回 Date 对象的小时 (0 ~ 23)。
     getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
     getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
     getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
     getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
     getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟
    差。
    

    设置日期的方法

     setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
     setMonth() 设置 Date 对象中月份 (0 ~ 11)。
     setFullYear() 设置 Date 对象中的年份(四位数字)。
     setYear() 请使用 setFullYear() 方法代替。
     setHours() 设置 Date 对象中的小时 (0 ~ 23)。
     setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
     setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
     setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
     setTime() 以毫秒设置 Date 对象。
     setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
     setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
     setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
     setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
     setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
     setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
     setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
    

    浏览器对象模型 BOM

    window是BOM核心对象

    属性

    尺寸

    • window.innerWidth/innerHeight
    • document.documentElement.clientWidth/clientHeight;

    调试工具

    • confirm() 自带取消 确定按钮的对话框 点击返回布尔值
    • prompt() 显示可提示用户输入的对话框。
    • close() 关闭浏览器窗口。
    • open(url,name,feafurse,replace) 通过脚本打开新的窗口
      URL要在新窗口中显示的文档的 URL。如果省略了这个参
      数,那么新窗口就不会显示任何文档。

    nane

    _blank -- 在新窗口中打开链接 
    _parent -- 在父窗体中打开链接 
    _self -- 在当前窗体打开链接,此为默认值 
    _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页) 
    一个对应的框架页的名称 -- 在对应框架页中打开
    

    feafurse
    样式


    我叫洱月,我愿意陪你到洱海风花雪月,你,看到我了吗?

    码字不易,点个赞呗

    相关文章

      网友评论

        本文标题:对象 js

        本文链接:https://www.haomeiwen.com/subject/lzvfrxtx.html