zoukankan      html  css  js  c++  java
  • 对象扩展内容

    对象扩展内容

    简洁表示法和属性名表达式

    const function def () {
    	return {
    		name: name,
    		age: age,
    		say: function() {
    			console.log(this.name)
    		}
    	}
    }
    
    //ES6可以简洁如下表示,上下是一样的
    const function def () {
    	return {
    		name,
    		age
    		say() {
    			console.log(this.name)
    		}
    	}
    }
    

    属性名表达式

    我们知道访问属性的方式(点运算符和中括号运算符,区别在于点运算符后面不可以是变量或者数字,而中括号却可以!!!)
    
    let obj = {
    	1:3,
    	name: "kangkang",
    	"adfasdfqwe0qre92323@#@3423": 6
    }
    obj.name //3
    obj[1] //"kangkang"
    obj[adfasdfqwe0qre92323@#@3423]//6
    
    const key ="age"
    const profile = {
    	name: "kangkang",
    	[key]: 21
    }
    // [key] 变量代表是age ,它可以是任何计算的量,在中括号内
    profile.age
    //21
    profile.key
    //undefined
    

    扩展运算符用于快速复制对象

    const obj1 = {
    	a:1,
    	b:2
    }
    
    const obj2 = {...obj1}//成功!
    
    // 当属性存在对象的情况
    
    const obj3= {
    	a:1,
    	b:2,
    	profile: {
    		name: "kangkang",
    		age: 25
    	}
    }
    
    const obj4 = {...obj3}
    console.log(obj3.profile.name) //"kangkang"
    obj4.profile.name = "xiaolan"
    console.log(obj3.profile.name) //"xiaolan"
    console.log(obj4.profile.name) //"xiaolan"
    
    

    当进行复制时,扩展运算符遇到属性是对象时只是将对象的地址进行拷贝,所以会出现复制出来的对象可以更改原对象的属性值!!!(浅复制)

    合并对象

    const newObj = {
    	...obj1,
    	...obj2
    }
    
    遇到相同的属性是会保留后面一个对象的同名属性的值!!!
    合并也是浅拷贝!!
    

    Object.is() 判断两个值是否相等

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

    Object.assign() 复制或者合并对象

    const obj = Object.assign({a:1},{b:2},{c:3})
    第一个会作为合并最终返回的对象!
    也是浅拷贝!
    

    其他

    Objectkeys()

    Object.values()

    Object.entries()

    const obj = {
    	a:1,
    	b:2,
    	c:3,
    	d:4
    }
    
    console.log(Objcet.keys(obj)) //属性名组成的数组
    console.log(Object.values(obj)) //值组成的数组
    console.log(Object.entries(obj)) // 属性名和值组成的数组
    
    
    for (let [k,v] of Object.entries(obj)) {
    	console.log(k,v)
    } //好好看!
    
    

    __proto__

    Object.setPrototypeOf 修改对象的原型

    let obj1 = {
    	a:1
    }
    let obj2 = {
    	b:2
    }
    
    let obj3 = Object.create(obj1)
    console.log(obj3.__proro__)
    // {a:1}
    
    Object.setPrototypeOf(obj3,obj2)
    console.log(obj3.__proto__)
    //{b:2}
    //性能不好!
    

    super关键字访问对象的原型(不是原型链,直接访问原型上的)

    const obj = {name: "kangkang"}
    
    const obj2 = {
    	say(){
    		console.log(super.name)
    	} // 只有使用简写形式的方法才可以使用super,否则不行(箭头函数也不行)!
    }
    obj2.say()//undefined
    
    Object.setPrototypeOf(obj2,obj)
    obj2.say()//kangkang
    
  • 相关阅读:
    django学习-33.【一对多】表关系对应的完整业务操作
    django学习-32.发送满足【邮件正文值为一个html页面+有多个附件】的单个邮件
    django学习-31.发送满足【邮件正文值为一个html页面】的单个邮件
    东芝TC10 512G使用半年后掉速严重
    添加Linux服务(Debian 8+,Systemd)
    C# LinkedList
    在VS2019里面 C# 和SqlSerer的勾兑
    Jquery垂直下拉二级菜单
    (二十六)运输层--TCP的拥塞控制的一般原理
    (二十五)运输层--TCP的流量控制
  • 原文地址:https://www.cnblogs.com/daixixi/p/11056204.html
Copyright © 2011-2022 走看看