javascript解构赋值

canopus4u 发布于2019-08-22 13:58 / 525人阅读

摘要：此文章为意译并非直译，可参考具体原文解构赋值具体干什么解构赋值是中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。

此文章为意译并非直译，可参考具体原文

解构赋值具体干什么？

解构赋值是javascript中的一个表达式语法糖，帮助开发者将数组，对象属性解构出来并且直接赋值到具体变量上面。

直接来段代码感受下

let a,b,rest;
[a,b] = [10,20];
console.log(a);// 10,
console.log(b);// 20;
[a,b,...rest] = [10,20,30,40,50,60];
console.log(a); // 10
console.log(b); // 20
console.log(rest);// [30,40,50,60]

简单实践，将a,b的值进行交互

let a=10,b=20;
[a,b]=[b,a];
console.log(a);// 20
console.log(b);// 10;

解构赋值具体使用方式

数组对象进行解构赋值

// 1. 从已有对数组中解构赋值
let foo = ["one","two","three"];
let [a,b] = foo;
console.log(a);
console.log(b);

// 2. 从字面量中解构赋值
let [a,b] = [1,2];

// 3. 在解构赋值对时候设置默认值
let [a=5, b=10] = [1];
console.log(a); // 输出：1
console.log(b); // 输出：10

// 4. 解构从函数返回对数组
function getArr(){
    return [1,2]
}
let [a,b] = getArr();

// 5. 解构对时候，忽略特殊位置对值
let [a,,b] = [1,2,3];
// 全部忽略
[,,] = [1,2,3];

// 6. 解构对时候将数组的其他值赋值给变量
let [a,...b] = [1,2,3,4,5];
console.log(a);// 1
console.log(b);// [2,3,4,5]

对象数据进行解构赋值

// 1. 解构对象
let obj = {name:"hello",age:18};
let {name,age} = obj;
console.log(name);// hello;
console.log(age);// 18
// 2. 解构字面量对象
let name,age;
({name,age} = {name:"hello",age:18});// 结果和上面一样,注意，这里为什么需要用`()`包裹起来呢?
// 独立的写法
let {name,age} = {name:"hello",age:18};

// 3. 解构的时候，设置别名
let obj = {name:"hello",age:18};
let {name:nameA,age:ageA} = obj;
console.log(nameA);// hello
console.log(ageA);// 18
// 4. 设置默认值，这个和数组解构类似
let obj = {name:"hello",age:18};
let {name="tom",age=20,city="sh"}=obj;
console.log(city);// sh
// 5. 设置默认值，同时又设置别名
let obj = {n:"hello",age:18};
let {n:name="tom",age:a=19,city:c="sh"} = obj;
console.log(name); // hello
console.log(a);    // 18
console.log(c);    // sh
// 6. 设置函数参数的默认值
function drawES2015Chart({size = "big", cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES2015Chart({
  cords: {x: 18, y: 30},
  radius: 30
});

嵌套对象解构和数组解构

let data = {
  title:"objetAdnArray",
  list:[
    {
      id:1,
      des:"第一个对象",
      proList:[]
    },
    {
      id:2,
      des:"第二个对象",
      proList: []
    }
  ]
}

let {
  title,
  list:[{id,des}]
} = data;

console.log(title); // objetAdnArray
console.log(id);    // 1
console.log(des);   // 第一个对象

for of 循环中使用解构

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 (let {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 userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

将变量最为解构的key

let key = "z";
let {[key]:foo} = {z:"this is z"};
console.log(foo); // this is z
// 注意，这个用户很类似对象字面量赋值的用法
let obj = {
    [key]:"hello"
}

obj.z // hello

总结：es6提供了许多语法糖，在客户端使用的时候需要通过进行编译才能运行，而在服务器端nodejs已经很好的支持了

GPU云服务器云服务器解构赋值 javascript连续赋值 javascript_json赋值对象解构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92685.html

JavaScript中的解构赋值

摘要：是这样描述解构赋值的解构赋值语法是一种表达式用来将数组中的值或对象中的属性取出来区分为不同变量。现在让我们将坐标点放进一个数组中现在要对这些点进行处理，传统可以想到的方法是这样的借助解构赋值，能变得这样简洁使用箭头函数更简洁 JavaScript是一种很有趣的语言，我个人很喜欢它，虽然仍还有些人不大喜欢它。在ECMAScript6（ES6）中，有许多有用的特性来使JavaScript开...

Panda 2019-08-23 18:07 评论0 收藏0
ECMASCRIPT 6 实战之解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是...

yangrd 2019-08-26 13:54 评论0 收藏0
[译]JavaScript ES6解构赋值指南

摘要：解构赋值允许我们将右边的表达式看起来也像变量声明一般，然后在左边将值一一提取。数组的解构赋值现在假设我们有一个变量，其值为。通过，这会看上去更清晰简洁最后的解构赋值给的语法带来了更多的现代化。前言让我们来仔细地看看ES6所带来的更清晰的变量声明与赋值语法。现今的变量声明语法十分的直接：左边是一个变量名，右边可以是一个数组：[]的表达式或一个对象：{}的表达式，等等。解构赋值允许我...

Jeff 2019-08-21 10:33 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
JavaScript基础之ES6对象解构赋值

摘要：具体的分析暂时不讨论解决的方式很简单，把上面的代码块变成一段表达式就小明总结解构赋值是提供一个十分方便的表达式。的解构赋值小明的对象赋值这里可以被赋予初始值小明对象的属性不存在能够赋值给多个变量对象解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。 --- 阮一峰《ECMAScript...

sutaking 2019-08-22 15:31 评论0 收藏0