JavaScript学习（四）对象方法和深拷贝

JavaScript学习（四）对象方法和深拷贝

1、Object.assign() 

Object.assign() ：方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

2、Object.create()

Object.create():方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};
 
const me = Object.create(person);
 
me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten
 
me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

3、Object.defineProperties()

Object.defineProperties(): 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

        var obj = {
            id: 1,
            name: '小米',
            price: 1000
        }

        // Object.defineProperty  定义新属性或修改原有的属性       
        Object.defineProperty(obj, 'id', {
            // 不允许修改
            writable: false
        })
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: false
        })
        Object.defineProperty(obj, 'price', {
            value: 1099
        })
        Object.defineProperty(obj, 'address', {
            value: '中国山东找蓝翔',
            writable: false,
            // enumerable如果值为false就不允许遍历
            enumerable: true,
            //configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        })
        console.log(obj);

4、Object.keys() 

Object.keys(): 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

        var obj = {
            id: 1,
            name: '小米',
            price: 1000
        }
        //Object.keys 获取对象身上所有属性
        var arr = Object.keys(obj)

5、Object.values()

Object.values():方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
 
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
 
// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
 
// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']
 
// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']

深拷贝

在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。

arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。
因此，数组以及对象的深拷贝就是javascript的一个基本功了。
 

 
var obj = {
            id: 1,
            name: "hobby",
            msg: {
                age: 20
            },
            color: ["pink", "yellow"]
        }
        var o = {}
        // 1.Object.assign 浅拷贝
        Object.assign(o, obj)
        console.log(o);
        o.msg.age = 18
        console.log(o);
        // 2.深拷贝
        function deepcopy(newobj, oldobj) {
            for (k in oldobj) {
                let item = oldobj[k]
                if (item instanceof Array) {
                    newobj[k] = []
                    deepcopy(newobj[k], item)
                } else if (item instanceof Object) {
                    newobj[k] = {}
                    deepcopy(newobj[k], item)
                } else {
                    newobj[k] = item
                }
            }


        }
        deepcopy(o, obj)
        console.log(o);