es6中的解构赋值、扩展运算符和rest参数使用详解

前言

本文主要给大家介绍了关于es6中解构赋值、扩展运算符和rest参数使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

es6中较为常用的书写风格

为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：

本文希望能够学习其中的主要的用法，方便书写和简洁性。

字符串模板

在以前的日子，我们经常捡到各种类别的字符串拼接，无论是跳转链接还是请求，很多时候见到这样的代码

let url = location.protocol + '//baidu.com/query?q=' + word +   '&qn=' + queryWord;

现在书写的时候不需要这么多的+加好来连接，可以使用字符串模板变成这个样子

let url = `${location.protocol}//baidu.com/query?q=${word}&qn=${queryWord}`;

写起来还是简便不少，有一个简单的猜想，这个字符串模板会不会具有react、vue那样的效果，动态的绑定数据，也就是说字符串模板的内容会跟着模板中的变量变化而变化

let m = 'test';let n = `m+:${m}`;n //"m+:test"m //"test"m += 'noTest' //改变字符串模板中的 m 的值m //"testnoTest"n //"m+:test" 

所以上面说的假想不会发生，react、vue都是存在虚拟dom来diff数据的不同，来出发数据的重新加载，以达到动态绑定的目的。

字符串模板的一些特性和注意

1、在模板字符串中如果需要使用 ` 字符的话，需要使用反斜杠转译 /`;

2、字符串模板可以表示多行字符串，所有的空格和缩进都会被保留在输出之中；

let k = `one line two line 3 line`;k //输出如下"one linetwo line3 line"

3、字符串模板的 ${} 里面可以书写JavaScript的表达式，

四则运算

test:${1+1} //"test2"

函数

`TEST:${new Date()}` //"TEST:Wed Sep 27 2017 15:48:53 GMT+0800 (CST)"

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法

var tt = {a:1,b:2};`test:${tt}` //"test:[object Object]"tt.toString() //"[object Object]"

如果模板字符串中的变量没有声明，将报错。

模板字符串甚至还能嵌套

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构运算可以算是一种很优雅的书写方式，只要赋值表达式=的两边的模式相同的时候，左边的变量就会被赋予右边数组或者对象对应的值，直接看代码：