解构赋值、模板字符串

解构赋值、模板字符串

一、解构赋值

1.解构数组

（1）变量声明并赋值时的解构

（2）变量先申明后赋值的解构

（3）.默认值

（4）交换变量

（5）将剩余数组赋值给一个变量

（6）解析一个从函数返回的数组

（7）忽略某些返回值

2.解构对象

（1）基本赋值

（2）无声明赋值

（4）默认值

（5）给新的变量命名并提供默认值

二、模板字符串

---

一、解构赋值

       解构赋值语法是一种JavaScript表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。
对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。

1.解构数组

（1）变量声明并赋值时的解构

如下：

var foo = ['wh','rc','xl'];
var [wh,rc,xl] = foo;
console.log(wh);//wh
console.log(rc);//rc
console.log(xl);//xl

（2）变量先申明后赋值的解构

var a,b;
[a,b]=[12,34]
console.log(a);//12
console.log(b);//34

（3）.默认值

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

（4）交换变量

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

（5）将剩余数组赋值给一个变量

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

 注意：如果剩余元素右侧有逗号，会抛出SyntaxError，因为剩余元素必须是数组的最后一个元素。

（6）解析一个从函数返回的数组

function f() {
  return [1, 3];
}

var [a, b] = f();
console.log(a); // 1
console.log(b); // 3

（7）忽略某些返回值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

2.解构对象

（1）基本赋值

 var o = {p:42,q:true};
 var{p,q} = o;
 console.log(p);//42
 console.log(q);//true

（2）无声明赋值

 var a,b;
({a,b} = {a:1,b:2})
console.log(a);//1
console.log(b);//2

   需要注意的是，赋值语句周围的圆括号(...)在使用对象字面量无声明解构赋值时是必须的。
        {a,b} = {a:1,b:2}不是有效的独立语法，因为左边的{a,b}被认为是一个块而不是对象字面量。然而({a,b} = {a:1,b:2})是有效的，正如var {a,b} = {a:1.b:2}。而且(...)表达式之前需要有一个分号，否则可能会被当做上一行中的函数执行。

（3）给新的变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var o = {p:42,q:true};
var {p:foo,q:bar} = o;
console.log(foo);//42
console.log(bar);//true

（4）默认值

          变量可以先赋予默认值当要提取的对象对应属性解析为undefined,变量就被赋予默认值，如下:

var {a = 10,b = 5} = {a:3};
console.log(a);//3
console.log(b);//5

（5）给新的变量命名并提供默认值

         一个属性可以同时满足（1）从一个对象解构，并分配给一个不同名称的变量（2）分配一个默认值，以防未解构的值是undefined。如下：

var {a:aa = 10,b:bb = 5} = {a:3}
console.log(aa);//3
console.log(bb);//5

二、模板字符串

         ES5标准中一般输出模板是通过字符串拼接的方式进行的。在ES6中可以通过模板字符串简化字符串的拼接,模板字符串通过反引号来表示"``",如果要嵌入变量通过"${ 变量名 }"来实现：

let arr = [
    {
         name: '诸葛亮',
         age: 20
     },
     {
         name: '曹操',
         age: 23
     },
     {
         name: '刘备',
         age: 25
     }
 ]
 let str = "";
 for(let i=0;i<arr.length;i++){
     str += `姓名是${ arr[i].name },年龄是${ arr[i].age }岁\n`;
 }
 console.log(str)