js解构赋值,关于es6中的解构赋值的用途总结

更新日期: 2017-12-13阅读量: 4003标签: es6

什么是ES6解构

在ES6中添加了一个新属性:解构,允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。解构是一种打破数据结构,将其拆分为更小部分的过程,允许我们将右边的表达式看起来也像变量声明一般,然后在左边将值一一提取。 解构这种赋值语法较为简洁,比传统的属性访问更为清晰。


ES6解构赋值用途  

(1)交换变量的值

[x, y] = [y, x];

上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。


(2)从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();


(3)函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});


(4)提取jsON数据

解构赋值对提取jsON对象中的数据,尤其有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代码可以快速提取JSON数据的值。


(5)函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。


(6)遍历Map结构

任何部署了Iterator接口的对象,都可以用for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名,或者只想获取键值,可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}


(7)输入模块的指定方法

加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/244

ES6的循环和可迭代对象

本文将研究 ES6 的 for ... of 循环。在过去,有两种方法可以遍历 javascript。首先是经典的 for i 循环,它使你可以遍历数组或可索引的且有 length 属性的任何对象。

对ES6的yield示例分析

这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成。

ES6 系列之私有变量的实现

在阅读 《ECMAScript 6 入门》的时候,零散的看到有私有变量的实现。旨在加深 ES6 部分知识点的理解,重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容

了解ES6中的模板字符串的标签函数

模板字符串是可能是我们耳熟能详的一个ES6新特性,它可以允许我们在字符串中插入变量,还能够换行等等,确实使用起来非常地方便。然而,ES6还新增了一种主要用于和模板字符串配合使用的标签函数。

ES6常见题

ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015ES6是继ES5之后的一次改进

ES6中export default 与export区别

export与export default均可用于导出常量、函数、文件、模块等,有什么区别呢?在一个文件或模块中,export、import可以有多个,export default仅有一个

ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。

ES6 动态计算属性名

在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问,而且这种动态计算属性名的方式 在字面量中 是无法使用的

jses6语法:Iterator遍历器 promise async函数

Iterator遍历器他是一种接口,为不同的数据结构体用统一的访问机制,接口部署在数据结构的Symbol.Iterator属性,或者说一个数据结构只要具备Symbol.Iterator属性就认为是可以遍历的

ES6新特性:JavaScript中内置的延迟对象Promise

利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;通过new实例化Promise, 构造函数需要两个参数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!