对象日常操作总结

网页三兄弟

tip
mozilla的对象介绍
Object
https://www.cnblogs.com/anrainie/p/6543891.html
https://www.cnblogs.com/chenyablog/p/6477866.html

遍历对象

详细见：对象和数组遍历方法总结

  • for..in
  • Object.keys(obj)
  • Object.getOwnPropertyNames(obj)
  • Reflect.ownKeys(obj)

侦听对象值变化

Object.defineProperty函数

这是ES5的方法

1
2
3
4
5
6
7
8
var user= { name:'张三'}
Object.defineProperty(user, 'name', {
     set:function(key,value){
        console.log(key,value)
     }
});
user.name = '李四';
//李四

Proxy()

Proxy是ES6的新方法 详细介绍，Proxy 可以理解成代理，对数据做了什么先经过Proxy里走一遍，相当强大
语法：
let p = new Proxy(target,handler)

  • target：用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  • handler：{get: function (target, key, receiver) { },set: function (target, key, value, receiver) { } }
    handler是当执行一个操作时定义代理的行为的函数。
    get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。
    set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = { name:"ken"}
var newObj = new Proxy(obj, {
  get: function(target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === 'text') {
      input.value = value;
      p.innerHTML = value;
    }
    return Reflect.set(target, key, value, receiver);
  },
});
newObj.name ="maoshiba"

合并对象

Object.assign(target, source)
Object.assign() 方法将一个或多个源对象复制到目标对象。目标对象自身也会改变，如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。

1
2
3
4
5
6
7
8
9
var o1 = { a: 1 }
var o2 = { b: 2 }
var o3 = { b: 3,c:4 }
var obj = Object.assign(o1, o2, o3)

console.log(obj) //{a: 1, b: 3, c: 4}
console.log(o1) //{a: 1, b: 3, c: 4}
console.log(o2) //{b: 2}
console.log(o3) //{b: 3, c: 4}

…的用处还是满大的，同样，重复的属性会覆盖值

1
2
3
4
5
6
let o1 = { a: 1,b: 2 }
let o2 = { b: 3,c:4 }
let _obj={...o1,...o2};

console.log(_obj)
//{a: 1, b: 3, c: 4}

拷贝对象

通过 JSON.parse( JSON.stringify()) 这样转一下，新和拷贝的对象就不搭噶了；

1
2
3
var obj = {a:1,b:2,c:["hhh","jjj"]},
newObj = JSON.parse( JSON.stringify(obj) );
console.log( newObj );

删除对象属性

已声明的对象不可删除, 对象中的对象属性可以删除

1
2
3
var obj={name: 'ken',age: 18}
delete obj.name //true
console.log( obj )//{age: 18}
1
2
3
var obj={name: 'ken',age: 18}
delete obj
console.log( obj )//{name: 'ken',age: 18}

JSON对象和字符串互转

  • JSON.stringify()，json对象转json字符串

    1
    2
    3
    4
    var json = { name: "zhangsan", age: 23, email: "chentging@aliyun.com" }
    var jsonStr = JSON.stringify(json);
    console.log(jsonStr);
    //输出: "{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}"

  • JSON.parse()，json字符串转json对象

    1
    2
    3
    4
    5
    var jsonStr = '{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}';
    var json = JSON.parse(jsonStr);
    console.log(json);

    //输出: Object {name: "zhangsan", age: 23, email: "chentging@aliyun.com"}

Object属性和方法表

Object属性

属性 描述
prototype 可向对象添加属性和方法

Object方法

属性 描述
assign() 通过复制一个或多个对象来创建一个新的对象
create() 使用指定的原型对象和属性创建一个新对象
defineProperty() 给对象添加一个属性并指定该属性的配置
defineProperties() 给对象添加多个属性并分别指定它们的配置
entries() 返回给定对象自身可枚举属性的 [key, value] 数组
freeze() 冻结对象：其他代码不能删除或更改任何属性
getOwnPropertyDescriptor() 返回对象指定的属性配置
getOwnPropertyNames() 返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名
getOwnPropertySymbols() 返回一个数组,包含对象自身的所有Symbol属性
getPrototypeOf() 返回指定对象的原型对象
is() 比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）
isExtensible() 判断对象是否可扩展
isFrozen() 判断对象是否已经冻结
isSealed() 判断对象是否已经密封
keys() 返回一个包含所有给定对象自身可枚举属性名称的数组
preventExtensions() 防止对象的任何扩展
seal() 防止其他代码删除对象的属性
setPrototypeOf() 设置对象的原型（即内部 [[Prototype]] 属性）
values() 返回给定对象自身可枚举值的数组