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));



  • 相关阅读:
    Palindrome Partitioning
    Minimum Path Sum
    Maximum Depth of Binary Tree
    Minimum Depth of Binary Tree
    Unique Binary Search Trees II
    Unique Binary Search Trees
    Merge Intervals
    Merge Sorted Array
    Unique Paths II
    C++ Primer Plus 笔记第九章
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11360861.html
Copyright © 2011-2022 走看看