【ES6】对象笔记

69 阅读5分钟

一、对象的属性简洁表示法

ES6允许在大括号里面直接写入变量和函数直接作为对象的属性和方法。 案例1

<script>
     let age=11
     let obj={
        name:"CUYG",
        // age,等价于 age:age,
        age,
        // intro(){}等价于 intro:function(){}
        intro(){
            console.log("我叫"+name);
        },
     }
     console.log(obj);
</script>

结果:

image.png

案例2、

<script>
     function getInFO(name,age){
        return{name,age}
     }
     console.log(getInFO("张三","23"));//Object { name: "张三", age: "23" }
</script>

案例3 commonJS模块化输出一组变量(常用)。

导出使用module.export={getMax,getMin,removeDuplicate}

<script>
    // 求最大值
    function getMax(arr) {
        return Math.max(...arr)
    }
    // 求最小值
    function getMin(arr) {
        return Math.min(...arr)
    }
    // 数组去重
    function removeDuplicate(arr) {
        return [...new Set(arr)]
    }
    modules.exports = {
        // 等价于getMax:getMax,
        getMax,
        getMin, 
        removeDuplicate
    }
</script>

导入使用 import {getMax,getMin,removeDuplicate} from "@/xx/xx.js"

案例4、简洁写法用于对象打印

    let s1={
        name:"张三"
    }
    let s2={
        age:11
    }
    console.log(s1,s2);//Object { name: "张三" } Object { age: 11 }
    console.log({s1,s2});//Object { s1: {name: "张三"}, s2: {age: 11} }

二、对象的属名表达式

let obj={}
//方法一、直接用标识符定义对象属性
    obj.name="yt"
//方法二、用表达式定义对象属性/方法名
    obj["a"+"ge"]=11
    console.log(obj);//Object { name: "yt", age: 11 }
    let obj1={
    name:"NAME"
   }
   let obj2={}
   obj2[obj1.name]="111"
   console.log(obj2);//Object { NAME: "111" }
   
   let obj1={
    name:"NAME"
   }
   let obj2={}
   obj2[1+2]="111"
   console.log(obj2);//Object { 3: "111" }

三、方法的name属性

    let obj={
    name:"OBJ",
    fn(){
        console.log("FN");
    }
   }
   console.log(obj.name.name);//undefined
   console.log(obj.fn.name);//fn

四、对象属性的遍历

第一步:遍历所有的数值键,按照数值升序排列。 第二步:遍历所有字符串键,按照加入时间升序排列。 第三步:遍历所有Symbol键,按照加入时间升序排列。

1、for...in

循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

2、Object.keys(obj)

返回一个数组,包括对象自身(不含继承的)所有可枚举属性(不含Symbol属性)的键名。

3、Object.getOwnPropertyNames(obj)

返回一个数组,包括对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)的键名。

4、Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有Symbol属性的键名。

5、Reflect.ownKeys(obj)

返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是Symbol或字符串,也不管是否可枚举。

五、super关键字(只能用到对象的“方法”中)

this的关键字总数指向函数所在的当前对象,super可以使this指向当前对象的原型对象。

    let P={
        name:"MyFather"
    }
    let p = {
        name:"child",
        getName(){
            console.log( super.name);
        }
    }
    // 设置p的原型指向P
    Object.setPrototypeOf(p,P);
    p.getName()//MyFather

六、对象的解构赋值

    let { a, b, ...c } = {a:"A",b:"B",c:"C",d:"D",e:"E"}
    console.log(a);//A
    console.log(b);//B
    console.log(c);//Object { c: "C", d: "D", e: "E" }

变量c是解构赋值的所在对象,它获取等号右边的所有尚未读取的键,将它们连同值一起拷贝过来。

由于对象的解构赋值是浅拷贝,所以对于复合数据类型(对象、数组)是引用。

    let obj1={a:[1,2,3]}
    let {...obj2}=obj1
    obj1.a[0]="obj1里的1改变"
    console.log(obj2.a);//Array(3) [ "obj1里的1改变", 2, 3 ]

七、对象的扩展运算符 "..."

1、取出参数对象中所有的可遍历属性,拷贝到当前的对象之中。

let obj1={x:1,y:2}
let obj2={...obj1}
console.log(obj2);//Object { x: 1, y: 2 }

2、把数组转为对象形式

    let arr =["x","y","z"]
    let obj_arr={...arr}
    console.log(obj_arr);//Object { 0: "x", 1: "y", 2: "z" }

3、把字符串变为对象

    let str ="hello world"
    let obj_str={...str}
    console.log(obj_str);
//Object { 0: "h", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o", 8: "r", 9: "l", … }

4、数值、boolean、undefined、null无法变为对象

    console.log({...21});//Object {  }
    console.log({...true});//Object {  }
    console.log({...false});//Object {  }
    console.log({...null});//Object {  }
    console.log({...undefined});//Object {  }console.log({...21});//Object {  }
    console.log({...true});//Object {  }
    console.log({...false});//Object {  }
    console.log({...null});//Object {  }
    console.log({...undefined});//Object {  }

5、克隆对象并拷贝对象原型

    // 写法一:—__proto__属性在非浏览器的环境不一定部署
    const cloneOne = {
        __proto__: Object.getPrototypeOf(obj),
        ...obj
    }
    // 写法二(推荐)
    const cloneTwo = Object.assign(Object.create(Object.getPrototypeOf(obj)),
        obj
    );
    // 写法三(推荐)
    const cloneThree =Object.create(
        Object.getPrototypeOf(obj),
        Object.getOwnPropertyDescriptors(obj)
    )

6、合并两个对象(同名属性会被覆盖掉)

    let obj1={name:"yt",age:22}
    let obj2={sex:"男",sno:"xxxxx"}
    console.log({...obj1,...obj2});

7、对象中扩展运算符可以加表达式

    let i=true
    let obj ={
        ...(i?{b:true}:{b:false}),
    }
    console.log(obj);//Object { b: true }

八、对象的方法

1、比较两个值是否相等:Object.is()

【“==”会自动转换数据类型;“===”会出现NaN不等于自身】

    console.log(0=="0");//true
    console.log(Object.is(0,"0"));//false
    console.log(NaN===NaN);//false
    console.log(Object.is(NaN,NaN));//true

2、对象合并:Object.assign(obj1,obj2,obj3)【obj1是目标对象,obj2和obj3等是源对象】

调用Object.assign()方法后obj1会合并有自身和源对象的属性值。 浅拷贝 属性同名替换

    let obj1={
        a:"A"
    }
    let obj2={
        b:"B"
    }
    let obj3={
        c:"C"
    }
    Object.assign(obj1,obj2,obj3)
    console.log(obj1);//Object { a: "A", b: "B", c: "C" }
    

应用场景 (1)为对象添加属性和方法

class P {
        // 添加属性
        constructor(x, y) {
            Object.assign(this, { x, y })
        }
    }
    // 添加方法
    Object.assign(P.prototype,{
        go(){
            console.log("GO");
        }
    })
    console.log(P);

image.png (2)克隆对象 把传入的源对象origin拷贝到空对象,但是目标对象无法继承origin的链

function clone(origin)
    {
        return Object.assign({},origin)
    }
    console.log(clone({name:"yt"}));//Object { name: "yt" }
 

把传入的源对象origin和链都拷贝出来

function clone(origin) {
        let originProto = Object.getPrototypeOf(origin);
        return Object.assign(Object.create(originProto),origin)
    }
    console.log(clone({name:"yt"}));//Object { name: "yt" }

(3)合并多个对象和为属性指定默认值

let obj1={
        name:"yt"
    }
    let obj2={
        sex:"男"
    }
    let obj3={
        age:22
    }
    let obj={}
    Object.assign(obj,obj1,obj2,obj3)
    console.log(obj);//Object { name: "yt", sex: "男", age: 22 }

3、返回指定对象所有自身属性(非继承性)的描述对象:Object.getOwnProtertyDescriptors()

     let obj = {
        name:"yt",
        get go(){
            return "go"
        }
    }
    console.log(Object.getOwnPropertyDescriptors(obj));

image.png

4、proto

Object.setPrototypeOf()(写操作)、 Object.getPrototypeOf()(读操作)、 Object.create()(生成操作)

5、遍历对象的键或值:

   let obj = {
        name: "yt",
        age: 11,
        sex: "男"
    }
    console.log(Object.keys(obj));//Array(3) [ "name", "age", "sex" ]
    console.log(Object.values(obj));//Array(3) [ "yt", 11, "男" ]
    console.log(Object.entries(obj));
    //Array(3) [  [ "name","yt",],  ["age",11], ["sex","男"] ]

    let arr = [["a", "A"], ["b", "B"]]
    console.log(Object.fromEntries(arr));
    //Object { a: "A", b: "B" }"name","yt",],  ["age",11], ["sex","男"] ]