JavaScript数据结构与算法（9）对象Object常用操作

本是古典何须时尚 2022-01-29 12:49 196阅读 0赞

参考文章：  
[https://segmentfault.com/a/1190000016901888\#articleHeader5][https_segmentfault.com_a_1190000016901888_articleHeader5]  
[https://www.jianshu.com/p/a8faefbe2c91][https_www.jianshu.com_p_a8faefbe2c91]  
[https://juejin.im/post/5b0670506fb9a07a9a1140bc][https_juejin.im_post_5b0670506fb9a07a9a1140bc]

**1.Object.assign()**

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

常用示例：

1.可以用作对象的复制
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
    
    2.可以用作对象的合并
    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 } 注意目标对象自身也会改变。
    
    3.目标对象o1自身也发生了改变，假如不想让o1改变，可以把三个对象合并到一个空的对象中，操作如下：
     var obj = Object.assign({},o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1 }

**2.Object.create()**

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的\_\_proto\_\_。

`Object.create(proto, [propertiesObject])`

第一个参数proto是新创建对象的原型对象。第二个参数是可选的，主要用于指定我们创建的对象的一些属性，（例如：是否可读、是否可写，是否可以枚举等等）可以通过下面案例来了解第二个参数！

var o;
    o = Object.create(Object.prototype, {
      // foo会成为所创建对象的数据属性
      foo: { writable:true, configurable:true, value: "hello" },
      // bar会成为所创建对象的访问器属性
      bar: {
        configurable: false,
        get: function() { return 10 },
        set: function(value) { console.log("Setting `o.bar` to", value) }
    }})
    
    // 创建一个以另一个空对象为原型，且拥有一个属性p的对象
    o = Object.create({}, { p: { value: 42 } })
    
    // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的
    o.p = 24
    o.p
    //42
    
    o.q = 12
    for (var prop in o) {
       console.log(prop)
    }
    //"q"
    
    delete o.p
    //false
    
    //创建一个可写的,可枚举的,可配置的属性p
    o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });

**[3.Object.is][]（）**

用来判断两个值是否是同一个值。和===区别主要是NaN=NaN和-0！=0

Object.is('haorooms', 'haorooms');     // true
    Object.is(window, window);   // true
    
    Object.is('foo', 'bar');     // false
    Object.is([], []);           // false
    
    var test = { a: 1 };
    Object.is(test, test);       // true
    
    Object.is(null, null);       // true
    
    // 特例
    Object.is(0, -0);            // false
    Object.is(-0, -0);           // true
    Object.is(NaN, 0/0);         // true
    Object.keys(obj)

**4.Object.keys()**

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

// simple array
    var arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']
    
    // array like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']
    
    // array like object with random key ordering
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']
    
    // getFoo is a property which isn't enumerable
    var myObj = Object.create({}, {
      getFoo: {
        value: function () { return this.foo; }
      } 
    });
    myObj.foo = 1;
    console.log(Object.keys(myObj)); // console: ['foo']

再看一段代码：

let arr = ["a", "b", "c"];
    console.log(Object.keys(arr));
    // ['0', '1', '2']
     
    /* Object 对象 */
    let obj = { foo: "bar", baz: 42 },
    keys = Object.keys(obj);
    console.log(keys);
    // ["foo","baz"]

**5.Object.values()**

返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.values(an_obj)); // ['b', 'c', 'a']
     
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.values(obj)); // ['a', 'b', 'c']

**6.Object.entries()**

返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

const obj = { foo: 'bar', baz: 42 };
    console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]     
    const simuArray = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

**7.常用其他操作**

1.delete 删除对象中的某个值

var obj = {b:123};
    delete o.p // 或delete  obj[b];
    
    var myObj = {
        name:'jialin',
        sex:"woman',
    }
    //增加属性
    myObj.age = 23
    //删除属性
    delete myObj.sex;

2.遍历对象

2.1for-in遍历

var obj = {a: 'ss', b: 'bb', c: 'cc'};
    for (var i in obj){
        console.log(i+':'+obj[i]);
    }
    
    //枚举对象属性
    var myObj = {
      name:'gongjialin',
      sex:'woman',
      myFun:function(){
        console.log("this is test")
      }
    }
    
    for(var data in myObj){
      console.log(data+"---"+myObj[data])
    }
    
    name---gongjialin
    sex---woman
    myFun---function(){
        console.log("this is test")
    }

2.2forEach遍历,先通过Object.keys()返回一个数组

Object.keys(obj).forEach((value, index)=>{
        console.log(value, index,obj[value]);
    });
    
    //输出结果
    a 0 ss
    b 1 bb
    c 2 cc

2.3jQuery的$.each()方法：它接受两个参数，分别指代属性名和属性值

$.each(obj,function(key,value){
        console.log(key+": "+value)
    }

3.检测对象是否具有某个属性

var myObj = {
        name:'jialin',
        sex:"woman',
    }
    var hasName = 'name'  in myObj;   //true
    var hasAge = 'age' in myObj;  //false;

**8.一些不常用的对象操作属性**

1.Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

2.Object.seal() 方法可以让一个对象密封，并返回被密封后的对象。密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象。

3.Object.isFrozen() 方法判断一个对象是否被冻结（frozen）。

4.Object.isExtensible() 方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。

5.Object.isSealed() 方法判断一个对象是否是密封的（sealed）。

6.hasOwnProperty()判断对象自身属性中是否具有指定的属性。

7.Object.getOwnPropertyNames(obj)返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

8.Object.getOwnPropertySymbols(obj)返回一个数组，包含对象自身的所有 Symbol 属性的键名。

9.Reflect.ownKeys(obj)返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

**9.JavaScript数组和字符串常用操作方法**

JavaScript数组常用操作方法参考文章：  
[https://segmentfault.com/a/1190000016503330][https_segmentfault.com_a_1190000016503330]

JavaScript字符串常用操作方法参考文章：  
[https://segmentfault.com/a/1190000016603159][https_segmentfault.com_a_1190000016603159]

[https_segmentfault.com_a_1190000016901888_articleHeader5]: https://segmentfault.com/a/1190000016901888#articleHeader5
[https_www.jianshu.com_p_a8faefbe2c91]: https://www.jianshu.com/p/a8faefbe2c91
[https_juejin.im_post_5b0670506fb9a07a9a1140bc]: https://juejin.im/post/5b0670506fb9a07a9a1140bc
[3.Object.is]: http://3.Object.is
[https_segmentfault.com_a_1190000016503330]: https://segmentfault.com/a/1190000016503330
[https_segmentfault.com_a_1190000016603159]: https://segmentfault.com/a/1190000016603159