object的一些方法

p_coder

已于 2022-07-08 23:44:18 修改

阅读量426

点赞数 1

文章标签： javascript 前端开发语言

于 2022-06-29 20:46:09 首次发布

本文链接：https://blog.csdn.net/weixin_54217534/article/details/125515738

版权

object.keys的用法

1.传入对象，返回属性名
var data={a:1,b:2,c:9,d:4,e:5};
    console.log(Object.keys(data));//["a", "b", "c", "d", "e"]
    Object.keys(data).map((key,item)=>{
        console.log(key,data[key]);//key=>属性名    data[key]=>属性值
});

2.传入字符串,返回索引
var str = 'ab1234';
console.log(Object.keys(str));  //["0","1","2","3","4","5"]

3.传入数组，返回索引
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

4.构造函数，返回空数组或者属性名
function Pasta(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.toString = function () {
            return (this.name + ", " + this.age + ", " + this.gender);
    }
}
console.log(Object.keys(Pasta)); //console: []
var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender","toString"]

注意点:当传入的对象的键为整数类型时,Object.keys()会返回有序的值组成的数组。

object.values的用法

与object.keys的区别是: 上面返回的是属性，而这返回的是属性值，与上述四种用法都一致，

当传入的对象的键为整数类型时,Object.values()会返回有序的值组成的数组。

object.entries的用法

object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable）属性的键值对数组

const object1 = {
    a: 'somestring',
    b: 42
};
for (const [key, value] of Object.entries(object1)) {
   console.log(`${key}: ${value}`);  
}
// 输出: 
// 'a': 'somestring'
// 'b': '42'

object.defineProperty和object.defineProperties的用法和区别

这两个方法的作用是一样的，唯一区别是：Object.defineProperty()只能定义或修改一个属性，Object.defineProperties()可以同时定义和修改多个属性

铺垫知识:

ES5中对象的属性可以分为数据属性和访问器属性

1.数据属性

configurable: 表示该属性是否可以被删除(delete)

enumerable: 表示是否可枚举，能否被 for ... in、object.keys() 所访问到

writable: 表示属性值是否可以修改

value: 属性的值

注意点:通过字面量直接定义的数据属性默认为true，如 obj.name = "晓明"; 属性name的三个数据属性都是true，允许被删除，修改和枚举,如果用object.degineProperty添加的属性则默认为false

2.访问器属性

configurable:表示该属性是否可以删除

enumerable: 表示是否可以枚举

set:设置属性值的函数

get:返回属性值的函数

注意点:如果使用存取属性set和get，则不可以设置wirtable和value。数据属性的特性和访问器属性的特性不能同时存在于一个属性中。

// 访问器属性的使用
    let Person = { _name: "pengweihao" };

    Object.defineProperties(Person, {
      name: {
        configurable: true,
        enumerable: true,
        get() {
          console.log("getter");
          return this._name;
        },
        set(newName) {
          console.log("setter");
          this._name = newName;
        }
      }
    })
    // 当访问name 属性时，get函数则被调用，当name属性值被修改，则会调用set函数
  
    console.log(Person.name);  
    Person.name = "晓明";

运行结果:

Object.defineProperty

语法: Object.defineProperty(obj,prop, descriptor)

obj: 对象

prop: 属性名

descriptor: 属性描述符

1.定义新的属性

let obj = { _name: "ahsdkah" };

Object.defineProperty(obj, 'age', {
     value: 18
})
console.log(obj);

运行结果:

2.修改原有属性(只能修改对象原有的属性，若修改通过defineProperty定义的属性，则会把错)

let obj = { _name: "ahsdkah" };
      
    Object.defineProperty(obj, 'age', {
      value: 18
    })
    console.log(obj);
    // 以下修改会报错
    Object.defineProperty(obj,'age',{
      value: 20
    })

运行结果如下:

let obj = { _name: "ahsdkah" };
      
    Object.defineProperty(obj, 'age', {
      value: 18
    })
    console.log(obj);
    // 修改对象上原有属性，不报错
    Object.defineProperty(obj,'_name',{
      value: "pengweihao"
    })
    console.log(obj);

运行结果如下: 修改成功!!!!!!!!

Object.defineProperties

语法:Object.defineProperties(obj, props)

obj: 对象

props:属性对象，其属性值为属性描述符

let obj = { _name: "ahsdkah" };
      
    Object.defineProperties(obj,{
      age: {
        value: 12
      },
      city: {
        value: "广东"
      }
    })
    console.log(obj);

运行结果如下:

两者区别就是后者可以同时定义和修改多个属性，定义属性和修改原有属性和Object.defineProperty都是一样的

Object.getOwnPropertyNames()与Object.keys(obj)的区别

前者可以返回enumerable:false的属性，后者只能返回enumerable:true的属性


    let Person = {age: 18};

    Object.defineProperties(Person, {
      name: {
        enumerable: false,
        value: "小王"
      }
    })
    
    console.log(Object.keys(Person));
    console.log(Object.getOwnPropertyNames(Person))

运行结果如下:

Object.getOwnPropertyDescriptors() 和Object.getOwnPropertyDescriptor的区别

前者可以将指定对象的所有属性的数据属性和访问器属性都展示出来,后者可以将指定对象的某个属性展示出来

 let Person = {age: 18};

    Object.defineProperties(Person, {
      name: {
        enumerable: false,
        value: "小王"
      }
    })
    console.log(Object.getOwnPropertyDescriptor(Person,'age'))
    console.log(Object.getOwnPropertyDescriptors(Person))

运行结果如下:

Object.getOwnPropertySymbols(obj)的使用

用法:此方法返回所有符号属性的数组(相当于返回了类似属性名的数组，但这个属性名只能是Symbol类型的)

let Person = {age: 18};
    let xx = Symbol("xx");
    
    Object.defineProperty(Person,xx, {
        value: "小王"
    })
    console.log(Object.getOwnPropertySymbols(Person))

运行结果如下:

Object.create()的用法

语法:Object.create(proto, [propertiesObject])

proto: 为指定一个对象作为新创建对象上的原型链上，可以为null

propertiesObject: 可选，用新创建对象添加属性，这些属性对应Object.defineProperties()的第二个参数

let Person = {age: 18};
// 创建了一个原型链上为空的新对象,且添加了name属性
console.log(Object.create(null,{
   name: {
     value: "哈哈哈"
   }
}));
// 将Person对象放在新创建对象的原型链上
console.log(Object.create(Person))

运行结果如下:

`Object.getPrototypeOf(obj)` 的用法

obj: 要返回其原型的对象

let Person = {age: 18};
    
let obj = Object.create(Person); // 创建了一个以Person为原型的新对象

console.log(Object.getPrototypeOf(obj));  // 返回对象原型

运行结果如下:

Object.assign()的用法

语法:Object.assign(target,sources,......)

target:为目标对象，将后面的源对象的属性浅拷贝给目标对象，并将目标对象返回(说明:浅拷贝和深拷贝是针对对象来说的，属性值这些只是单纯复制值而已,浅拷贝就是将对象的引用赋值)

sources,.....： sources表示源对象，可以有多个源对象，所有后面有省略号

      let target = {
         text: 3
      }
      let source = {
        text:2,
        value: 11
      }

      // cc 是target对象所返回的，故返回的target对象和cc是同一对象
      // Object.assign() 将source的属性赋值给 target，若两个对象都有同一属性，
      //则源对象会覆盖目标对象
      let cc = Object.assign(target,source);
      console.log(cc === target) // true
      console.log(cc === source) // false
      console.log(cc);

      // 源对象里面没有对象了，故浅拷贝在这里没有起到作用
      // 改变了返回target 的值 ,但source里面的text并不会改变
      cc.text = 6;
      console.log(source.text);  // 2
      console.log(cc.text);  // 6

运行结果如下:

以下为源对象中含有对象时，进行的浅拷贝

      let target = {
        text: 3
      }
      let source = {
        text:2,
        value: 11,
        a: {
          b: 4
        }
      }
      let cc = Object.assign(target,source);
      console.log(source.a.b); // 4
      // 改变了目标对象里面的对象的值，但源对象的值也发生改变，说明Object.assign()是浅拷贝
      cc.a.b = 20;
      console.log(source.a.b); // 20

运行结果如下:

这里简单说一下浅拷贝和深拷贝的区别:

浅拷贝和深拷贝是针对对象而已，若是普通的类型变量，则就是把值复制过去而已，就跟原来的完全独立开，浅拷贝指的是在复制时，复制的是对象的引用(即新的对象和原来对象都指向同一块地址)，这样双方的改变都是互相影响，深拷贝是指把完全拷贝了一份新的对象，新的对象和原来对象不指向同一块地址，双方值的改变互不影响

Object.is()的用法

用来比较两个值是否严格相等，与（===）基本类似

Object.is("q","q");      // true
Object.is(1,1);          // true
Object.is([1],[1]);      // false
Object.is({q:1},{q:1});  // false

//一是+0不等于-0
Object.is(+0,-0);  //false
+0 === -0  //true

//二是NaN等于本身
Object.is(NaN,NaN); //true
NaN === NaN  //false

hasOwnProperty()的用法

语法: Object.hasOwnProperty(prop)

Object: 必需的，对象实例

prop: 必需的，属性名

方法会检查obj对象中是否具有prop属性，若有则返回true，否则返回false,此方法不会检查对象原型链上的属性

      let obj = {
        text: 4
      }
      obj.__proto__.a = 10
      console.log(obj.a) // 10
      console.log(obj.hasOwnProperty('a')) // false
      console.log(obj.hasOwnProperty('text')); // true

运行结果如下: