zoukankan      html  css  js  c++  java
  • ES6 对象的拓展(三)

    一、对象中的属性及方法
    1、属性
    属性简写:
    当对象属性名与属性值变量相同可以简写
    eg:

        let [name,age]=['nzc','18'];
        let obj = {
            name:name,
            age:age
        };
        //简写方式:
        let obj = {
            name,
            age
        };

    表达式属性名:
    可以使用[]里面放置变量或表达式来构建对象属性名
    eg:

        let temp = 'my';
        let myAge = 18;
        let obj = {
            [temp+'Name']:'nzc',    //类似  myName:'nzc'
            [temp+'Age']:myAge    //类似 myAge:myAge  该种情况下虽然添加的属性名为myAge,但不能简写为[temp+'Age'] ->属性名与属性值变量名此刻是不同的
        };


    2、方法
    a、方法简写及多种写法
    当对象方法名与赋值函数名相同时,对象方法可以简写
    eg:

        function getAge(){};
        let obj = {
            getName(){},    //  getName:function(){}   形式的简写【可以省略 :function 】
            getAge,    // getAge:getAge   形式的简写方式
            sayHi:()=>{}       //ES6中箭头函数的使用
        };    

    注:
        ES6中箭头函数中的this指向为该箭头函数【声明时】所处的父模块作用域中的this指向
        ES6中箭头函数中的arguments不保存实参,不进行实参的使用
        
    b、方法(函数)的name属性    【返回函数名
    eg:

        function test(){};
        let obj = {
            //下面四种函数定义方法类似,只不过第一种函数的定义引用地址为外部函数test()空间地址
            test
            //test(){}
            //test:function(){}
            //test:()=>{}
        };
        console.log(obj.test.name);        //test


    3、新增的对象属性及方法
    Object.is(param1,param2)   【判断两参数值是否全等 === ,返回boolean】    
    该方法与全等 === 不同之处在于:
    a、判断NaN 与 NaN返回结果为true
    eg:

        Object.is(NaN,NaN);    //true         isNaN(NaN)  //true  可以判断一个数是否为NaN
       console.log(NaN === NaN);  //false

    b、判断+0 与 -0返回结果为false
    eg:

        Object.is(+0,-0);    //false
       console.log(+0 === -0);  //true


    Object.assign(targetObj,o1,o2...)    【对象的复制(值赋值)】(区别值传递赋值与址传递赋值)
    a、参数为一个时,返回该对象的引用地址
    b、参数为多个时,获取一个或多个对象中的所有属性及方法复制到第一个targetObj参数,返回targetObj对象
    c、参数为多个时,复制对象中的函数(function)、数组(array)、对象(object)仍为址传递赋值,相同属性名值为其最后出现的值
    eg:

        //Object.assign()   对象的浅复制,对象的合并
        let obj = {
            name:'zhangsan',
            friends:[1,2,3],
            sayName:function(){}
        };
    
        //let obj2 = obj;
        let obj2 = Object.assign(obj);
        console.log(obj === obj2);  //true
        obj2.name = 'nzc';
    
        //对象的合并
        let obj3 = Object.assign({},obj);
    
        console.log(obj3 === obj); //false
        console.log(obj3.sayName === obj.sayName); //true
        console.log(obj3.firends === obj.firends); //true
    
        let obj4 = {};
        Object.assign(obj4,obj,obj2);
        console.log(obj4);
    Object.assign示例


    __proto__     内部属性,指向当前对象的原型对象【一般不直接使用

    Object. setPrototypeOf(obj,prototype)    【设置一个对象的原型对象  prototype指向

    Object. getPrototypeOf(obj)    【获取一个对象的原型对象

    Object.keys(obj)    【返回包含所有属性名的数组

    Object.values(obj)        【返回包含所有属性值的数组

    Object.entries(obj)    【返回对象中属性名、属性值以key-value形式的数组组成的二维数组】  [[key1,value1],[key2,value2]]
    注:
        迭代器对象可以使用for-of来遍历获取里面的值
    eg:

        for(let [key,value] of Object.entries(obj)){
            console.log(key,value);    //key为obj的属性名,value为对应的属性值
        }


    for-of遍历数组    【类似与for-in方法对对象的遍历
    a、可以遍历数组及类数组对象
    b、不能直接用来遍历对象,但可以遍历entries转化对象后的迭代器数组对象
    eg:

        let obj = {
            name:'nzc',
            age:18,
            sayName(){}
        };
        //遍历打印对象的所有属性名
       console.log(Object.keys(obj));  //['name','age',sayName]
    for(let key of Object.keys(obj)){ console.log(key);   } //遍历打印对象的所有属性值
       console.log(Object.values(obj));  //['nzc',18,[Function:sayName]]
    for(let value of Object.values(obj)){ console.log(value);   } //遍历打印对象的属性名和属性值【不能直接遍历打印对象】 for(let [key,value] of Object.entries(obj)){ console.log(key,value); } //打印对象key-value形式转化的二维数组 [['name','nzc'],['age',18],['sayName',[Function:sayName]]] console.log(Object.entries(obj));



  • 相关阅读:
    最小生成树示例程序_Prim算法
    邻接表示例程序
    拓扑排序示例程序
    hdu1754 I Hate It && hdu1166 敌兵布阵 ——线段树复习
    2013年4月26日 晴
    Snakes & Ladders ——BFS入门题
    zoj1203 Swordfish ——最小生成树入门题_Kruscal算法
    poj3087 Shuffle'm Up ——水题
    poj1002 4873279 ——水题
    2013年4月21日 阴
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11360861.html
Copyright © 2011-2022 走看看