JavaScript中 对象解构详解

简介: JavaScript中 对象解构详解

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"(访问到了原型链)




相关文章
|
2月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
30 1
JavaScript中对象的数据拷贝
|
2月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
3月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
53 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
64 1
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
33 2
|
3月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
46 2
|
3月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
64 0
|
3月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
53 0