JavaScript解构赋值

2020-10-31 02:02:30 阅读：175 来源： 互联网

标签：const name JavaScript 解构 console 属性赋值

JavaScript解构赋值

JavaScript解构赋值为我们提供了很多方便，但是用法比较多，本文就来梳理一下。总体来说，主要就两种地方使用解构赋值，一种是数组的解构赋值，另一种是对象的解构赋值。以这两个为基础就可以得到比较复杂的解构赋值，本质上就是这些结构的嵌套。

先来看数组的解构赋值：

const arr = ["little", "moon", 1, 2, 3];
const [first, second, ...rest] = arr; 
console.log(first, second); // little moon
console.log(rest); //[1, 2, 3]

first、second和rest只是变量名，...rest叫做剩余表达式，将所有剩余下来的放到rest里。数组的解构按顺序将数组赋值给解构表达式左边的变量，左边的变量如果少于数组元素，不会报错，而是有几个赋值几个，比如下面的写法依然可以获取数组前两个元素的值：

const arr = ["little", "moon", 1, 2, 3];
const [first, second] = arr;

如果想忽略某个（些）元素也可以，使用一个占位符，或者直接省略占位符也可以：

const arr = ["little", "moon", 1, 2, 3];
// 忽略不感兴趣的元素
const [, _, one, two, three] = arr;
console.log(one, two, three);

可以利用解构赋值简洁地实现变量交换：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log("a:" + a + ", b:" + b); // a:2, b:1

下面来看对象的解构，最基础的用法是使用和属性相同的名字，就可以解构到属性值，如下所示：

// 解构对象
const person = {
  name: "xiaoyuhang",
  age: 22,
  address: {
    home: "nanjing",
    work: "shanghai",
    school: {
      middleschool: "sy",
      highschool: "wg",
      graduateschool: "sh"
    }
  }
}

const {name, age} = person; // 获取到xiaoyuhang 和 22两个属性值

对于这种相对来说层次较多的对象，可以解构到我们想要的层次，下面的例子中，只获取highschool这个属性：

// 可以只解构我们想要的部分，解构到想要的层次
const { address: { school: { highschool } } } = person;

有时候觉得对象属性的命名不太直观，可以在获取的同时为它重命名，使用name: alias这种方式即可，如下所示，将highschool重命名为high_school_address：

const { address: { school: { highschool: high_school_address } } } = person;

有些时候，我们用于获取的属性名不是硬编码到程序中的，而是通过字符串计算得到，这时候就要使用[property]方法来计算属性名，看下面的例子就明白了：

// 计算属性名 
const obj1 = { zz: "2020", yy: "2021" }
const z = "zz";
const { [z]: year } = obj1;
console.log(z); // zz
console.log(year); // 2020

此外，通过提供有效的代替名，也可以计算出属性：

const { "yy": nextyear } = obj1;
// const { "yyy": nextyear } = obj1; // 这就不行了 必须要和属性同名的字符串

使用解构，可以方便的在循环中进行赋值：

// 解构 + 迭代
var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];
for (var { name: n, family: { father: f } } of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}
// Name: Mike Smith, Father: Harry Smith
// Name: Tom Jones, Father: Richard Jones

解构对象，会依次查看原型链上的所有属性，直到找到为止或最终查找失败：

// 解构对象会访问原型链
function Person() {
  this.name = "yhx";
  this.age = 18;
}
Person.prototype.foo = "bar";

const ps1 = new Person();

const { name, age, foo } = ps1;
console.log(name, age, foo);

ps1对象的原型是Person，我们在Person的prototype属性上添加了一个foo属性，然后解构ps1对象时，对于foo，会沿着原型链查找到foo。

以上大概就是JavaScript解构表达式中最常用且最重要的内容了。

The end.

标签：const,name,JavaScript,解构,console,属性,赋值
来源： https://www.cnblogs.com/yhxcs/p/13905012.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript解构赋值

JavaScript解构赋值