一、解构赋值
????????解构赋值语法是一种JavaScript表达式,通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。 对象和数组逐个对应表达式,或称对象字面量和数组字面量,提供了一种简单的定义一个特定的数据组的方法。
var x = [1,2,3,4,5];
????????解构赋值使用了相同的语法,不同的是在表达式左边定义了要从原变量中取出什么变量。如下:
var x = [1,2,3,4,5];
var [y,z] = x;
console.log(y);
console.log(z);
打印的结果为:
1、解构数组
1、变量声明并赋值时的解构
如下:
var foo = ['wh','rc','xl'];
var [wh,rc,xl] = foo;
console.log(wh);
console.log(rc);
console.log(xl);
打印结果为:
2、变量先声明后赋值的解构
通过解构分离变量的声明,可以为一个变量赋值,如下:
var a,b;
[a,b] = [1,2];
console.log(a);
console.log(b)
打印结果为:
3、默认值
????????为了防止从数组中取出一个值为undefined 的对象,可以在表达式左边的数组中为任意对象预设默认值。如下:
var a,b;
[a=5,b=7] = [1];
console.log(a);
console.log(b);
打印结果为:
4、交换变量
在一个结构表达式中可以交换讲个变量的值。如下:
var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a);
console.log(b);
打印的结果为:
5、解析一个从函数返回的数组
例如,让[1,2] 成为函数f() 的输出值,可以使用解构在一行内完成解析。
function f(){
return [1,2];
}
var a,b;
[a,b] = f();
console.log(a);
console.log(b);
打印的结果为:
6、忽略某些返回值
(1)我们可以忽略掉不需要的值,如下:
function f(){
return [1,2,3];
}
var [a,,b] = f();
console.log(a);
console.log(b)
打印的结果为: (2)还可以忽略全部返回值,如下:
[,,] = f();
7、将剩余数组赋值给一个变量
????????当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量,如下:
var [a,...b] = [1,2,3];
console.log(a);
console.log(b)
打印结果为: 注意:如果剩余元素右侧有逗号,会抛出SyntaxError ,因为剩余元素必须是数组的最后一个元素。
2、解构对象
1、基本赋值
var o = {p:42,q:true};
var{p,q} = o;
console.log(p);
console.log(q);
打印结果为:
2、无申明赋值
一个变量可以独立于其申明进行解构赋值,如下:
var a,b;
({a,b} = {a:1,b:2})
console.log(a);
console.log(b);
打印结果为: ????????需要注意的是,赋值语句周围的圆括号(...) 在使用对象字面量无声明解构赋值时是必须的。 ????????{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);
console.log(bar);
打印结果为:
4、默认值
????????变量可以先赋予默认值当要提取的对象对应属性解析为undefined ,变量就被赋予默认值,如下:
var {a = 10,b = 5} = {a:3};
console.log(a);
console.log(b);
打印的结果为:
5、给新的变量命名并提供默认值
????????一个属性可以同时满足(1)从一个对象解构,并分配给一个不同名称的变量(2)分配一个默认值,以防未解构的值是undefined 。如下:
var {a:aa = 10,b:bb = 5} = {a:3}
console.log(aa);
console.log(bb);
打印结果为:
二、模板字符串
????????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)
打印结果为:
|