JavaScript中 对象解构详解

Posted 2022-09-14 明天也要努力

1. 使用解构从对象中获取值

首先，我们定义一个对象，传统上，我们将使用点 ( . ) 表示法或下标 ( [ ] ) 表示法从对象中检索值。

const user =  userName: '明天也要努力',city: '南京';
const userName = user.userName;
const city = user['city'];

console.log(userName,city); // 明天也要努力 南京

当然这两种方式在当前情况下是没有问题的，但是当 user 的属性多了，我们就要不停的复制粘贴，产生很多重复的代码。
通过解构赋值，可以快速的来获取值。
如：使用对象的键名来创建变量，并将对象的值分配给相同的键。这样无论有多少属性，只要赋值属性名即可，同样的也减少了很多重复代码。

const user =  name: '明天也要努力',city: '南京';
const name, city = user;
console.log(name,city); // 明天也要努力 南京

// 上面的赋值代码变成了这样:在对象解构的写法中，等号左边的写法就类似于一个对象，不过属性名对应的不是值，而是将要赋值的变量名。
const name:newName, city:newCity  =  name: '明天也要努力',city: '南京';
console.log(newName,newCity);

null 和 undefined 不能被解构

根据 ToObject() 的定义，null 和 undefined 不能被解构，否则会抛出错误：

const  _  = null;       // TypeError
const  _  = undefined;  // TypeError

这里的 _ 只是用于测试而已，实际上对象里面并没有 _ 这个属性。因为在尝试解构 null 的时候就已经报错了，不管前面解构的属性名是什么都是同样的结果。

给事先声明的变量赋值
解构并不要求变量必须在解构表达式中声明。不过，如果是事先声明的变量赋值，则赋值表达式必须包含在一对括号中：

let newName, newCity;
const user =  name: '明天也要努力',city: '南京';
(name:newName, city:newCity = user);
console.log(newName,newCity); // 明天也要努力 南京

2. 使用解构从嵌套对象中获取值

在上面的例子中，user 只是一个简单的单层对象，我们在日常的开发中也会遇到嵌套的对象，那么使用结构赋值该如何检索嵌套对象中的值。

const user =  
  name: '明天也要努力',
  city: '南京',
  job:
    post:'前端'
  
;
const name, job:post = user;

console.log(name,post); // 明天也要努力 前端

3. 使用对象解构定义新变量以及默认值

默认值

可能被解构的对象中没有被引用的属性，可通过下面这种方法来定义默认值，也就是如果对象中没有对应属性，就使用默认值：

const user =  
  name: '明天也要努力',
  city: '南京',
  job:
    post:'前端'
  
;
const 
  name = 'test',
  age = 25,
  sex,
  job: 
    post,
    level = '初级'
  
 = user;

console.log(name,age,sex,post,level); // 明天也要努力 25 undefined 前端 初级

新变量

创建一个全新的变量并分配一个使用对象属性值计算的值

const user =  
  name: '明天也要努力',
  city: '南京',
  job:
    post:'前端'
  
;
const 
  name = 'test',
  age = 25,
  job: 
    post,
  ,
  detail=`$name今年$age,岗位：$post`
 = user;

console.log(detail); // 明天也要努力今年25,岗位：前端

4. For of 迭代和解构

let list = [
  
    name: '小明',
    age: 20,
    info: 
      city: '南京',
      job: '开发',
    ,
  ,
    name: '小刚',
    age: 25,
    info: 
      city: '重庆',
      job: '产品',
    ,
  
];

for (let name, age:newAge, sex = '男',info: city,job of list) 
  console.log(name, newAge, sex,city,job);


// 小明 20 男 南京 开发
// 小刚 25 男 重庆 产品

5. 从作为函数实参的对象中提取数据

function userId(id) 
  return id;


function getInfo(name, info: city, job:newJob, money=8000)
  console.log(name,city,newJob,money);


var user = 
  id: 42,
  name: "小明",
  info: 
    city: '南京',
    job: '开发',
  ,
;

console.log("userId: " + userId(user)); // "userId: 42"
getInfo(user); // 小明 南京 开发 8000

6. 对象属性计算名和解构

计算属性名，可以被解构。

let key = "z";
let  [key]: foo  =  z: "bar" ;

console.log(foo); // "bar"

7. 对象解构中的 Rest

Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

const a, b, ...rest = a: 10, b: 20, c: 30, d: 40;
console.log(a, b, rest); // 10 20 c: 30, d: 40

8. 无效的 javascript 标识符作为属性名称

通过提供有效的替代标识符，解构可以与不是有效的 JavaScript 标识符的属性名称一起使用。

const foo =  'fizz-buzz': true ;
const  'fizz-buzz': fizzBuzz  = foo;

console.log(fizzBuzz); // true

9. 解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）

// 声明对象 和 自身 self 属性
var obj = self: '123';
// 在原型链中定义一个属性 prot
obj.__proto__.prot = '456';
// test
const self, prot = obj;
// self "123"
// prot "456"（访问到了原型链）