JS对象基本用法

JS 对象基本用法

目录

1. 对象
2. 增加对象的属性
3. 删除对象的属性
4. 修改对象的属性 + 隐藏属性
5. 查看对象的属性
6. 奇怪的属性名
7. 'name' in obj 和 obj.hasOwnProperty('name')区别

---

一、对象

• 定义

  1、无序的数据集合。

  2、键值对的集合。

• 写法

  1、--- let obj = {'name':'jack','age':18};
  
  2、--- let obj = new Object({'name':'jack','age':18})
  

• 细节

  1. 键名是字符串，不是标识符，可以包含任意字符
  2. 引号可以省略，省略后只能写标识符
  3. 就算引号省略了，键名也是字符串（重要）

---

二、增加对象的属性

• 语法

  let obj = { name: "jack" };
  1、obj.age = 18; //增加age属性
  2、obj.gender = "man"; //增加gender属性
  ------
  3、obj['age']=18;
  4、obj['gender']='man';
  

---

三、删除对象的属性

• 语法
  1. delete obj.xxx
  2. delete obj['xxx']
• 坑点
  1. obj.xxx === undefined 不能断定'xxx'是否为obj的属性

---

四、修改对象的属性 + 隐藏属性

• 直接赋值

  let obj = { name: "jack" };
  1、obj.name = "rose";
  2、obj["name"] = "rose";
  3、obj['na'+'me']='rose';
  
  

• 批量赋值

  Object.assign(obj, { age: 18, gender: "man" });
  

• 隐藏属性 proto

  1. 不推荐使用 proto 修改

  let obj1 = { name: "jack" };
  let obj2 = { name: "rose" };
  let common = { kind: "human" };
  obj1.__proto__ = common;
  obj2.__proto__ = common;
  

  2. 推荐使用 Object.create

  let obj1 = Object.create(common);
  obj1.name = "jack";
  let obj2 = Object.create(common);
  obj2.name = "rose";
  

---

五、查看对象的属性

• 查看自身的属性

  1、属性名：Object.keys(obj);
  2、属性值：Object.values(obj);
  3、属性名+属性值：Object.entries(obj);
  

• 查看自身+共有属性

  console.dir(obj);
  
  或;
  
  Object.keys(obj.__proto__);
  

• 判断一个属性是自身的还是共有的

  obj.hasOwnProperty("tostring");
  

• 查看属性

  1. 中括号语法：obj['key']
  2. 点语法：obj.key
  3. 坑点：obj.name === obj['name'] , obj.name !== obj[name]。简单来说，这里的name是字符串而不是变量。

---

六、奇怪的属性名

• 所有的属性名都会变成字符串

    let obj={
        1:'a',
        3.2:'b',
        1e2:true,
        1e-2:true,
        .234:true,
        0xFF:true
    };
    Object.keys(obj);
    => ["1","100","255","3.2","0.01","0.234"]
  

  坑点：
  1. JS 会将1e2形式的科学计数法的先转成十进制数字再转换成字符串，0xFF形式也会
  2. 推荐写属性名时加上引号，以免引起争议
• 变量作属性名

  let p1 = "name";
  let obj = { p1: "jack" }; //属性名为p1;
  let obj2 = { [p1]: "rose" }; //属性名为'name'
  

• 对比:
  1. 不加[]的属性名会自动变成字符串
  2. 加了[]则会对变量求值

---

七、‘name’ in obj 和 obj.hasOwnProperty(‘name’) 的区别

let obj = { name: "frank", age: 18, gender: "man" };
"toString" in obj; //true
obj.hasOwnProperty("toString"); //false