ES6基础-------对象的扩展

Pluto & Ethereal

已于 2023-12-15 11:01:27 修改

阅读量341

点赞数 10

文章标签： es6 前端 javascript

于 2023-12-14 09:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_69190490/article/details/134927214

版权

在ES5中，我们可以对象直接添加新的属性和值，但是添加已经定义的属性，会将值覆盖.

接下来我们将在现有对象上添加新的属性或方法。在 JavaScript 中，可以使用以下几种方式来扩展对象：

一、Object.is()

用于判断两个值是否相等，它和全等运算符（===）用法一样

扩展：== 相等（值相等） === 全等（值和数据类型都相等）

将两个对象属性相加，如果属性一样，后面的属性值覆盖前面的属性值，前面独有的属性和值的还会存在

Object.assign(对象1，对象2)

Object.assign() 是实现浅拷贝

浅拷贝：只拷贝引用地址，如果修改一个值，其他值会全部改变 ------Object.assign()，拷贝和被拷贝的数据被关联起来。关联起来的对象对应的属性的值一样，没有多余属性的则不会显示.

深拷贝：拷贝引用地址和值，如果修改一个值，不会影响其他值 --------let 和 const

拷贝到一开始定义的值，之后将定义的值改变，拷贝的值不会改变

在ES5中，我们可以对象直接添加新的属性和值，但是添加已经定义的属性，会将值覆盖.

  const obj1={

            name: "张三",

            age:20,

        }

       console.log(obj1.address="昆明市");//昆明市   ----新添加属性和值并打印出来

       console.log(obj1);//{name: "张三", age: 20, address: "昆明市"}

接下来我们将在现有对象上添加新的属性或方法。在 JavaScript 中，可以使用以下几种方式来扩展对象：

一、Object.is()

用于判断两个值是否相等，它和全等运算符（===）用法一样

扩展：== 相等（值相等） === 全等（值和数据类型都相等）

Object.is(值1，值2)


    console.log(Object.is("abc","abc"))//true

//等同于

    console.log("abc"==="abc")//true

二、Object.assign()

是浅拷贝

用于拼接对象或字符串

将两个对象属性相加，如果属性一样，后面的属性值覆盖前面的属性值，前面独有的属性和值的还会存在

Object.assign(对象1，对象2)

      const obj1={
            name: "张三",
            age:20,
            test:"测试"
        }
        const obj2={    
            name: "李四",
            age:30,
            address:"昆明市"
        }



  // ------直接将对象相加，是属性类型相加 

    console.log(obj1+obj2);//[object Object][object Object]  

 // //------将两个属性相加，如果属性一样，后面的覆盖前面的，前面的还会存在

    console.log(Object.assign(obj1,obj2));//{name: '李四', age: 30, test: '测试', address: '昆明市'}

三、Object.keys()

用于遍历对象的 key（属性）

Object.keys(对象名)

const obj1={
            name: "张三",
            age:20,
            test:"测试"
        }

 console.log(Object.keys(obj1));//['name', 'age', 'test']  ---key值

四、Object.values()

用于遍历对象的 value（值）

Object.values(对象名)

  const obj1={
            name: "张三",
            age:20,
            test:"测试"
        }

 console.log(Object.values(obj1));//['张三', 20, '测试']  ---value值

五、Object.entries()

用于遍历对象的 key、value

Object.entries(对象名)

   const obj1={
            name: "张三",
            age:20,
            test:"测试"
        }
    console.log(Object.entries(obj1));//[ [ 'name', '张三' ], [ 'age', 20 ], [ 'test', '测试' ], [ 'address', '昆明市' ] ]  ---key和value

六、浅拷贝和深拷贝

Object.assign() 是实现浅拷贝

浅拷贝：只拷贝引用地址，如果修改一个值，其他值会全部改变 ------Object.assign()，拷贝和被拷贝的数据被关联起来。关联起来的对象对应的属性的值一样，没有多余属性的则不会显示.

  const obj1={
            name: "张三",
            age:20,
            test:"测试"
        }
        const obj2={    
            name: "李四",
            age:30,
            address:"昆明市"
        }

//浅拷贝（拷贝引用地址，修改一个值其中的都会变）            拷贝和被拷贝的数据被关联起来，所以三个对象的值一样
            const obj3=Object.assign(obj1,obj2);
            console.log(obj1);//{name: '李四', age: 30, test: '测试', address: '昆明市'}
            console.log(obj3);//{name: '李四', age: 30, test: '测试', address: '昆明市'} 因为是两个对象相加，所以具有两个的属性
            console.log(obj2);//{name: '李四', age: 30, address: '昆明市'} ---没有对应的address属性所以不显示

深拷贝：拷贝引用地址和值，如果修改一个值，不会影响其他值 --------let 和 const

拷贝到一开始定义的值，之后将定义的值改变，拷贝的值不会改变


//let和const是深拷贝（拷贝地址和值，修改一个值别的不被影响）     拷贝和被拷贝值无关联
     
  let a=20,b;

      b=a;//就拷贝到a 之前定义的值，之后a改变值，b不会改变
      
      a=200;
           
     console.log(a);//200
            
     console.log(b);//20