获取对象的属性个数jQuery javascript获取对象属性值的方法

目录

获取对象的属性：

对象解构：

基础使用方式及原理：

解构赋默认值：

嵌套解构：

部分解构：

---

获取对象的属性：

        方式一：通过点操作符。

        方式二：通过中括号语法。

// 通过点语法来存取对象的属性
const obj = {
    name: 'javascript',
    age: 28,
}

console.log(obj.name); // javascript

obj.age = 100;

console.log(obj.age); // 100

// 通过中括号语法来存取对象的属性
const obj = {
    name: 'javascript',
    age: 28,
}

console.log(obj['name']); // javascript

obj['age'] = 100;

console.log(obj['age']); // 100

        相对于点操作符，中括号语法的可操作空间要大得多，比如以下例子：

const symbol = Symbol(), obj_name = 'name', obj_age = 'age';
const obj = {
    name: 'javascript',
    age: 28,
    [symbol]: 'symbol',
}

// 中括号语法的优势一：可以通过变量来访问属性
console.log(obj[obj_name]); // javascript
console.log(obj[obj_age]); // 28
console.log(obj[symbol]); // symbol

// 中括号语法的优势二：可以通过求中括号内表达式的值来访问属性
console.log(obj['na' + 'me']); // javascript

// 当属性名中包含可能会导致语法错误的字符，或者关键字、保留字时，也可以使用中括号语法
obj['my name'] = 'javascrit';

点操作符有较多的局限性，但是它任然是首选的属性存取方式，除非访问属性时必须使用变量，比如使用Symbol类型的变量作为属性的。

对象解构：

基础使用方式及原理：

        如果你需要频繁的使用某个对象的某个属性，那么你一定会想到把这个属性取出后赋值给某个变量的操作，如以下例子：

const obj = {
    name: 'javascript',
    age: 28,
}

const name = obj.name, age = obj.age;

console.log(name);

console.log(age);

对象解构的方式来简化代码。

①先声明变量，②从对象中找到对应属性，然后赋值给声明的变量

const obj = {
    name: 'javascript',
    age: 28,
}

// 如果此时我需要取出name、age属性，那么对象解构语法应该这样写：
const { name: objName, age: objAge } = obj;
/* 
  上一行代码完全等价于：
  const objName = obj.name, objAge = obj.age; 
 */

// 如果想让变量直接使用属性名，那么可以简写：
const { name, age } = obj;
/* 
  上一行代码完全等价于：
  const name = obj.name, age = obj.age; 
 */

   tips：①除了点语法解构外，还可以使用中括号语法解构； ② undefined 和 null 是不能解构的，否则抛出错误；③解构操作是针对对象而言，非对象的源数据结构会被尝试转换为对象再解构；④ 解构只是对属性的浅复制

// 使用中括号语法解构
const symbol = Symbol();

const obj = {
  name: 'javascript',
  [symbol]: 'Symbolic attribute',
}

const { [symbol]: sym, name } = obj;

console.log(sym); // Symbolic attribute
console.log(name); // javascript


// 尝试解构null 、 undefined会抛出错误
const { _ } = null;
// Uncaught TypeError: Cannot destructure property '_' of 'null' as it is null.

// 对原始值进行解构
const { length } = 'javascript';
const { valueOf } = 123;

console.log(length, valueOf); // 10 ƒ valueOf() { }

解构赋默认值：

const obj = {
  name: 'javascript',
}

// 未设置默认值
const { name: obj_name, age: obj_age } = obj;
console.log(obj_name, obj_age); // javascript undefined

// 设置默认值
const { name: objName, age: objAge = 18 } = obj;
console.log(objName, objAge); // javascript 18

嵌套解构：

const obj = {
  name: 'javascript',
  info: {
    original: 'C',
    environment: 'Google',
  },
}

const { name, info: { original, environment: env } } = obj;
console.log(name); // javascript
console.log(original); // C
console.log(env); // Google

在外层属性没有定义的情况下，不能使用嵌套解构，这就相当于在undefined上读取一个属性，因此会抛出错误。

部分解构：

涉及多个属性的解构赋值是一个输出无关的顺序化操作。

const person = {
  name: 'Tom',
  age: 21,
}

let name, age, email;

try {
  ({ name, info: { email }, age } = person);
} catch (err) {
  console.log(err); 
// TypeError: Cannot read properties of undefined (reading 'email')
}

console.log(name, email, age); // Tom undefined undefined

解构赋值会在抛出错误的步骤终止。