[笔记]JavaScript ES6的对象拓展

1.属性的简洁表示:
// ES5定义对象属性时:


let name = 'jianshu';

let age = 18;

let obj1 = {

name:name,

age:age

}

//ES6中如果key和value的值是一样的,可以直接写成:


let obj2 = {

name,

age

}

console.log(obj1,obj2)        //  {name: "jianshu", age: 18}   {name: "jianshu", age: 18}  //结果相同

2.属性名表达式:
若有需求需要将对象中key设置为变量,则可以用中括号包裹变量的方式 [key] 来表达,例:


let s = 'company'

let obj = {

name,

age,

[s]:'简书'

}

console.log(obj)        //{name: "jianshu", age: 18, company: "简书"}

3.Object.is(data1,data2) 判断


//Object.is()的作用其实与'==='类似,都是判断,例:

console.log(Object.is(1,'1'))  //false

// Object.is()与 '==='的异同

Object(NaN,NaN) 判断结果为true

NaN == NaN 判断结果为false

4.拓展运算符与assign()对对象的拷贝与合并:


// let obj1 = {

// a:1,

// b:2

// }

// let obj2 ={

// c:3,

// d:4

// }

// let obj3 = {...obj1,...obj2}

// let obj4 = Object.assign(obj1,obj2)  {a:1,b:2,c:3,b:4}

// console.log(obj3,obj4)

// 注意:若合并对象有相同的属性,则后拷贝对象的属性会覆盖前一个拷贝对象的属性:

// 例:


// let obj1 = {

         a: 1,

         b: 2

         }

 let obj2 = {

         b: 3,

         c: 4

         }

 let obj3 = { ...obj1,...obj2} //{a: 1, b: 3, c: 4}

 let obj4 = Object.assign(obj1, obj2) //{a: 1, b: 3, c: 4}

// 需注意的是拓展运算符对浅层的基本数据类型都可以实现深拷贝,拷贝后的对象与原对象互不影响,但是,对于复杂数据类型,比如对象内再套对象,数组,这些数据,无法实现深拷贝,故,该方法不适用于复杂对象的拷贝,

例:


 let obj1 = {

         a:1,

         b:{

                 f:2

             }

             }

 let obj2 = {

        c:3,

         d:4

         }

 let obj3 = {...obj1,...obj2}

 obj1.a = 5;

 obj1.b.f = 8;

 console.log(obj1)          //{a: 5, b:{f:8}}      可发现我们对obj1做的更改都已经成功

 console.log(obj3)          //{a: 1,b: {f: 8},c: 3,d: 4}     第一层的a值的修改并未影响obj3中的a的值,但是b中的f跟随obj1的修改做了修改

而assign()的拷贝,也存在以下问题


 let obj1 = {

         a:1,

         b:2,

         c:{

            d:5,

             h:12,

             e:{

                 f:6,

                 g:7

                 }

              }

         }

 let obj2 = {

         a:1,

         b:2,

         c:{

             e:{

                f:8,

                 g:9

                 }

             }

         }

 let obj3 = Object.assign(obj1,obj2)

// console.log(obj3)  //{a: 1,b: 2,c:e:{f: 8,g: 9}}  输出结果中,objc3拷贝自原obj1中c下面的d跟h消失了,也就是说,obj2,覆盖了obj1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。