JS-对象相关

对象介绍

• 对象是js中的一种复杂类型数据object
  • object类型是js中所有复杂类型数据的基类
    • 所有复杂类型数据都具有对象数据类型的特性
• 对象就是无序的数据集合
• 对象中存储数据的方式
  • 通过键值对存储：键名 --> 键值
    • 键名和键值是一一对应关系
    • 键名也叫对象的属性名，键值也叫对象的属性值
  • 对象中的键值可以是任意数据类型
  • 对象中的键名
    • 对象的键名只能是字符串或者symbol数据类型，默认为字符串数据类型
    • 对象的键名在对象集合中是唯一的（不重复）
• 创建对象的两种方式
  1. 内置构造函数创建
     • 语法：变量 = new Object()
       • new关键字是专门用于创建对象的（实例对象）
       • Object()是内置构造函数
         • js中常见的内置构造函数：Object, Number, String, Boolean, Function, Array, Date, Error, RegExp
     • 得到一个空对象
  2. 字面量创建
     • 语法1：变量 = {}
       • 创建一个空对象
     • 语法2：变量 = { 键值对 }
       • 创建有数据的对象
     • 在字面量对象中，键值对的键名和键值通过:连接
       • 多个键值对之间通过,分隔
     • 在字面量对象中，如果属性名没有特殊符号（和变量命名一样）则可以不使用引号包裹
     • 在字面量对象中，如果属性名有特殊符号则必须使用引号包裹
     • 在字面量对象中，如果属性名是变量的值则必须使用[]包裹

// 创建对象

var o1 = new Object();
console.log(o1); // {}

var o2 = {};
console.log(o2); // {}

var varName = 'like';
var o3 = {
    // 键名(属性名) : 键值(属性值)
    // 键名只能是字符串，键值可以是任意数据类型
    // 键名在对象中是唯一（不重复）的
    'age': 17,
    username: 'zs',
    '*afss': 17,
    ff: function() {},
    info: { a: 1 },
    age: 18, // 因为age属性名已经存在，所以会将age属性名中之前存储的值覆盖为18
    // []可以识别varName变量
    [varName]: 'ctrl',
    // []内可以字符串拼接
    ['user' + 'Gender']: '男'
}
console.log(o3); 
// { *afss: 17, age: 18, ff: ƒ (), info: { a: 1 }, like: "ctrl", userGender: "男", username: "zs" }

操作对象数据

• 操作xxx对象就是对xxx对象的“curd”（增删改查）
  • c: create（新增）
  • u: update（修改）
  • r: read（读取）
  • d: delete（删除）
• 操作对象数据
  • 操作对象中的键值对数据
  • 有两套操作对象数据的语法
    1. 点语法
    2. 数组关联法
  • 点语法操作对象数据
    • 新增语法：对象.属性名 = 属性值
      • 只有当对象中**没有该属性名（键名）**的时候才是新增
    • 修改语法：对象.属性名 = 属性值
      • 只有当对象中**有该属性名（键名）**的时候才是修改
    • 读取语法：对象.属性名
      • 返回对象对应属性名的属性值
        • 如果属性名不存在则返回undefined
    • 删除语法：delete 对象.属性名
      • 将对象中对应属性名键值对数据删除

  var obj = { username: 'zs', age: 17 }
  
  // 新增
  obj.gender = '男';
  
  // 修改
  obj.age = 18;
  
  // 读取
  var r = obj.username; // 获取对象username属性名的属性值
  console.log(r); // 'zs'
  console.log(obj.abc); // undefined
  
  // 删除
  delete obj.age;
  
  console.log(obj); // { username: 'zs', gender: '男' }
  

  • 数组关联法操作对象数据
    • 新增语法：对象['属性名'] = 属性值
      • 只有当对象中**没有该属性名（键名）**的时候才是新增
    • 修改语法：对象['属性名'] = 属性值
      • 只有当对象中**有该属性名（键名）**的时候才是修改
    • 读取语法：对象['属性名']
      • 返回对象对应属性名的属性值
        • 如果属性名不存在则返回undefined
    • 删除语法：delete 对象['属性名']
      • 将对象中对应属性名键值对数据删除

  var obj = { username: 'zs', age: 17 }
  
  // 新增
  obj['gender'] = '男';
  
  // 修改
  obj['age'] = 18;
  
  // 读取
  var r = obj['username']; // 获取对象username属性名的属性值
  console.log(r); // 'zs'
  console.log(obj['abc']); // undefined
  
  // 删除
  delete obj['age'];
  
  console.log(obj); // { username: 'zs', gender: '男' }
  

  • 点语法和数组关联法操作对象数据的区别
    1. 如果对象的属性名包含特殊字符则只能使用数组关联法
    2. 如果对象的属性名存储在变量中，则此时只能使用数组关联法

  var obj = {
      age: 17,
      '!qwert': 666,
      'background-color': 'red'
  }
  
  console.log(obj.!qwert); // 报错
  console.log(obj['!qwert']); // 666
  console.log(obj['background-color']); // 'red'
  
  // 将属性名存储在变量中
  var varName = 'age';
  
  // 点语法会直接将varName当作obj的属性名查找，没有varName属性名
  console.log(obj.varName); // undefined
  
  // 数组关联法中属性名位置不加引号，则会将其当作变量识别解析
  // 此处就是将varName当作变量解析值为'age' --> 在obj对象中找age属性名
  console.log(obj[varName]); // 17
  

遍历对象数据

• 遍历对象数据使用for-in语法
  • 将对象中的属性名逐个获取出来
  • 语法：

  for (变量 in 对象) {
      // 此处是循环执行的代码
      // 变量表示对象中的每一个属性名，则属性值为：对象[变量]
  }
  

var obj = {
    userName: 'zs',
    userAge: 17,
    gender: '男',
    123: 'qwer'
}

for (var key in obj) {
    console.log(key, '---', obj[key]);
}

/* 
输出结果：
'123' --- 'qwer'
'userName' --- 'zs'
'userAge' --- 17
'gender' --- '男'
*/

对象扩展

• 对象中的数据并不是完全无序的
  1. 若属性名为数字，则会自动将数字提前按照大小排列
  2. 若属性名为普通字符，则会按照添加顺序排列

var obj = {
    username: 'zs',
    12: 'qwre',
    userage: 17,
    1: 'a',
    '1a': 'ab',
    gender: '男',
    2: 'c'
}

obj.abc = '12345';
obj.b = '345609';
obj[4] = 888;
obj[0] = 999;

for (var key in obj) {
    console.log(key);
}

/* 
输出结果：
'0'
'1'
'2'
'4'
'12'
'username'
'userage'
'1a'
'gender'
'abc'
'b'
*/