JavaScript 对象基本语法

100 阅读2分钟

JavaScript 对象基本语法

前言: 涉及内容

  1. 声明对象的两种语法
  2. 如何删除对象的属性
  3. 查看对象的属性
  4. 如何修改或增加对象的属性
  5. 'name' in obj 和 obj.hasOwnProperty('name') 的区别


声明对象的两种语法

  1. 第二种比较正规,第一种方便。
  2. 中括号语法 1. obj['key'] 等价于 obj.key, 此时的 key 是一个字符串。 2. obj[name] 请注意这时候的 name 是一个变量。tips:对象得键名key只能是字符串。
let obj = {};
let obj2 = new Object();
  1. symbol 也可以作为属性
let a = Symbol();
let obj = { [a]: "hello" };
console.log(obj);

删除对象的属性 只能删除对象的属性

<!-- 删除整个键值对 -->
 let obj2 = new Object();
    obj2.name = "张三";
    delete obj2.name;
    console.log(obj2);
<!-- value 为undefined,键值key还在 -->
 let obj3 = {
      name: "李四",
    };
    obj3.name = "undefined";
    console.log(obj3);

查看对象的属性

  1. console.dir(obj) 打印对象的目录
  2. Object.entries() 返回一个数组,以键值对的形式
  3. Object.keys() 返回一个数组,自身的 key 属性组合成的。

修改或者增加对象的属性

  1. 增加多个对象的属性,以键值对的形式
let obj4 = {
  name: "123",
};
console.log(Object.assign(obj4, { a: 2, b: 3, c: 4 }));
  1. 在对象的原型上 prototype 增加
Object.prototype.hello = "hello";
let obj = {};
console.log(obj);
  1. 不推荐使用 proto 修改共有属性。并且无法通过自身修改或增加共有属性。因为每个浏览器叫法不一(firefox和chrome浏览器就不一样),并且规范不支持这种写法。
  2. 推荐使用 Object.create()
  3. 读的时候会查看隐藏属性_proto_ 但是写入的时候并不会改变隐藏属性。
// obj2 上没有person
let obj2 = {};
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();
console.log(me);

针对第五条:读的时候会查看隐藏属性_proto_ 但是写入的时候并不会改变隐藏属性。(原型_proto_)

//也就是说 并不会改变原型上的共有属性

 let obj1={}
obj1.toString='1234'
let obj2={}
console.log(obj2.toString()) // [object Object]

'name' in obj 和 obj.hasOwnProperty('name') 的区别

  1. obj.hasOwnProperty('name') 查看属性是否是独有的。
  2. 'name' in obj 缺点是不能知道是自己的还是共有的
  3. obj.name==="undefined" 只能够判断 属性值
let obj = {
  name: "undefined",
};
console.log("name" in obj); //true
console.log(obj.hasOwnProperty("name"));
console.log("toString" in obj); //true