JS对象进阶

1.this

    //注意:构造函数不能使用箭头函数定义

    function Person(name,age){

            //在构造函数中,this关键字,用于给类添加成员

            this.name = name

            this.age = age

            this.sayHi = function(){

                console.log(`大家好!我叫${this.name},今年${this.age}岁`);

            }

    }

    //创建对象。该对象会拥有,类型中定义的所有成员。

    let p1 = new Person('张三',20)

    console.log(p1);

    p1.sayHi()

    let p2 = new Person('李四',24)

    console.log(p2);

    p2.sayHi()

    console.log('---------------------');

    let obj1 = {

            //对象的两个属性

            name:'周杰伦',

            age:20,

            //对象的方法

            sayHi:function(){

                //在方法中,this指向方法的调用者,谁在调用该方法,this就指向谁

                //如果一个方法,不是由对象调用执行的,而是直接执行的,那么该方法里面的this

                  就执行window对象

                console.log(`Hi!我是${this.name},今年${this.age}岁`);

            },

            sayHello:()=>{

                //在箭头函数中没有this,如果在箭头函数中使用了this,它会向上一层函数中去找this

                //如果上一层函数也是箭头函数,或者没有上一层函数了,这个时候this就指向

                  window对象。

                console.log(`Hello!我是${this.name},今年${this.age}岁`);

            }

    }

    obj1.sayHi()

    let obj2 = {

            name:'关晓彤',

            age:22

    }

    //可以将obj1的函数传给obj2,其实是obj2的sayHi方法,指向obj1的方法

    obj2.sayHi = obj1.sayHi

    obj2.sayHi()

    //将obj1身上的函数,传给了一个sayHi变量

    let sayHi = obj1.sayHi

    window.name = '小明'    //设置window对象的name属性

    window.age = 22         //设置window对象的age属性

    sayHi()

    console.log('-----------------');

    obj1.sayHello()

    obj2.sayHello = obj1.sayHello

    obj2.sayHello()

    let sayHello = obj1.sayHello

    sayHello()

    //var定义的成员(变量和方法)都会成为window对象的成员

    var address = '安德门'

    var showAddress = function(){

            console.log(`地点在${this.address}`);

        }

    console.log(window);

    showAddress()

    window.showAddress()

    console.log('-----------------');

    // 定义一个对象

    let obj1 = {

            name:'鹿晗',

            age:30,

            //自我介绍方法

            sayHi:function(){

                console.log(`Hi!我叫${this.name},今年${this.age}岁`);

            },

            showMyFriend(){

                // 备份this

                //let that =  this

                return {

                    name:'关晓彤',

                    age:20,

                    sayHi(){

                        console.log(`Hi!我叫${this.name},今年${this.age}岁`);

                    },

                    //介绍鹿晗

                    showlh:()=>{

                        //console.log(`Hi!我的男朋友叫${that.name},今年${that.age}岁`);

                        console.log(`Hi!我的男朋友叫${this.name},今年${this.age}岁`);

                    }

                }

            }

    }

    obj1.sayHi()

    let obj2 = obj1.showMyFriend()

    obj2.sayHi()    //调用自我介绍的方法

    obj2.showlh()   //调用介绍鹿晗的方法

    // obj1.showMyFriend().sayHi()

2.call apply bind

    //call apply bind 更改方法里面this的指向

    let obj1= {

            name:'李现',

            age:30,

            sayHi(a,b){

                console.log(`Hi!我叫${this.name},今年${this.age}岁。${a}-${b}`);

            }

    }

    let obj2 = {

            name:'彭于晏',

            age:32

    }

    //使用call()改变方法里面,this的指向

    //call()方法的第一个参数必须是指定的对象,方法的原有参数,挨个放在后面

    obj1.sayHi.call(obj2,200,100)

    let obj3 = {

            name:'胡歌',

            age:35

    }

    //使用apply(),也可以改变方法里面this的指向,第一个参是指定的对象,方法的原有

      参数,统一放到第二个数组参数中。

    obj1.sayHi.apply(obj3,[200,100])

    let obj4 = {

            name:'胡军',

            age:40

    }

    //使用bind(),也可以改变方法里面this的指向,用法给call()一样

    //call()是直接运行方法,bind()是返回新的方法,然后再重新调用。

    obj1.sayHi.bind(obj4,200,100)()

3.将一个对象转为字符串

    //定义一个对象

    let obj1 = {}

    //给对象添加属性有两种方式:1.对象名.属性名    2.对象名["属性名"]

    obj1.name = '张三'

    console.log(obj1);

    obj1['age'] = 20

    console.log(obj1);

    console.log('--------------------');

    //定义一个手机对象

    let phone = {

            name: "小米10",

            color: '红色',

            size: '1000*200*500',

            price: '2999'

    }

    //转成下面的字符串

    //"name=小米10&color=红色&size=1000*200*500&price=2999"

    //for in 循环,可以循环出对象里面的所有的key,(key就是属性名)

    //方式一:

    let arr = []    // 定义一个空数组

    for(let key in phone){

            //获取对象的属性值,可以通过['属性名']

            arr.push(key+'='+phone[key])

    }

    let str1 = arr.join('&')

    console.log(str1);

    //方式二

    //Object.keys(指定的对象),该方法可以获取指定对象的所有key,返回值是一个数组

    let keys = Object.keys(phone)

    //Object.values(指定的对象),该方法可以获取指定对象的所有的value,返回值是一个数组

    //let values = Object.values(phone)

    let arr2 = keys.map(function(k){

            return [k,phone[k]].join('=')

    })

    let str2 = arr2.join('&')

    console.log(str2);

    //方法二:简化写法

    let str3 = Object.keys(phone).map(k=>[k,phone[k]].join('=')).join('&')

    console.log(str3);

4.将字符串转为对象

    //调用kai.js(具体代码在下文5.封装js库中)

    <script src="./js/kai.js"></script>

    <script>

        //定义一个字符串

        let str = "name=小米10&color=红色&size=1000*200*500&price=2999"

        //转成一个对象

        /* {

            name: "小米10",

            color: '红色',

            size: '1000*200*500',

            price: '2999'

        } */

        let obj2 = {}   //定义一个空对象

        str.split('&').forEach(r=>{

            let arr=r.split('=')

            // arr=>['name','小米10']

            // obj['name'] = '小米10'

            obj2[arr[0]] = arr[1]

        })

        console.log(obj2);

        console.log('----------------------------------');

        let obj3 = {

            name:'周杰伦',

            age:20,

            sex:'男',

            job:'歌手'

        }

        console.log($b.objectToStr(obj3));

        console.log($b.objectToStr(obj3,'@'));

        console.log($b.objectToStr(obj3,'哈哈'));

        let str2 = 'name=周杰伦&age=20&sex=男&job=歌手'

        console.log($b.strToObject(str2));

        console.log($b.strToObject(str2,'&'));

        let str3 = 'name=谢霆锋@age=21@sex=男@job=厨师'

        console.log($b.strToObject(str3,'@'));

     </script>

5.封装js库

    //kai.js文件

    let $b = {

        //将对象转为字符串

        objectToStr:(obj,split='&') => Object.keys(obj).map(k=>[k,obj[k]].join('=')).join(split),

        //将字符串转为对象

        strToObject:(str,split='&')=>{

            let obj = {}  //定义一个空对象

            str.split(split).forEach(r=>{

                let arr = r.split('=')

                obj[arr[0]] = arr[1]

            })

            return obj

        }

    }

6.练习

1.统计字符串中每个字符串出现的次数

    //字符串

    let str = "fasdfsadfsegsageqwgersfdhrhdfsergterwhefweteqheq"

    //转成下面格式的对象

    /*{

            a:5,

            b:7,

            c:9,

            ...

    } */

    let obj = {}

    // 循环字符串中的所有的字符串

    for(let i=0;i<str.length;i++){

        //根据字符的名称,查找对象中,有没有对应的属性

        if(obj[str[i]]){

            //如果有,对应的属性值加1

            obj[str[i]]++

        }

        else{

            //如果没有,添加这个属性,属性值赋为1

            obj[str[i]] = 1

        }

    }

    console.log(obj);

    console.log('-----------------------');

2.找出出现次数最多的字符

    //定义一个出现次数最多的字符对象

    let max = {

            name:'',

            count:0

    }

    Object.keys(obj).forEach(k=>{

        //判断是否有别的字符串大于max

        if(obj[k]>max.count){

                max.name = k

                max.count = obj[k]

        }

    })

    console.log(max);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 如果你自以为会对象深拷贝的话,快来看看这篇对象进阶的文章吧~~~ 1.创建对象 对象创建的三种方式var obj ...
    learninginto阅读 554评论 6 10
  • 对象就是拥有一组属性和方法的集合 如果 a.b ,那么a就是对象,b是a的属性 如果 a.c(),那么a就是对象,...
    kygo阅读 153评论 0 1
  • 一、面向对象编程 对象:包括字符串 数组 自定义对象等,万物皆对象对象是单个事物的抽象,包含属性和行为(方法,功能...
    我爱学习111阅读 478评论 0 0
  • [if !supportLists]第一章 [endif]ES2015 ECMAScript 6(简称ES6)是于...
    海绵宝宝_b8a2阅读 543评论 0 0
  • 十一、对象进阶 1.this (1).构造函数里面的this,用于给类定义成员(属性和方法) (2).方法里面的t...
    默默_01cf阅读 142评论 0 0