对象的解构赋值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果解构失败，变量的值等于undefined。
let {foo} = {bar: 'baz'};
foo // undefined
上面代码中，等号右边的对象没有foo属性，所以变量foo取不到值，所以等于undefined。
对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量
默认值
对象的解构也可以指定默认值。
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
函数参数的解构赋值
函数的参数也可以使用解构赋值。
function add([x, y]){
return x + y;}
add([1, 2]); // 3
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y
function demo([x,y]){
return x+y;
}
console.log(demo([10,20]));
function demo([x,y=30]){
return x+y;
}
console.log(demo([10]));
function demo(x,y=20){
return x+y;
}
console.log(demo(10))
解构赋值用途
(1)交换变量的值
let x = 1;let y = 2;
[x, y] = [y, x];
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰
面试题：
请用一句代码，实现两个数据值互换？
(2)提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
(3)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
解构赋值：
后面使用react使用方便：
比如想获取 state里面的数据 普通写法：this.data.state
var state={
flag:true,
msg:'ok'
}
var {flag,msg}=state;
console.log(flag,msg)
ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。
字符串的扩展
字符的 Unicode 表示法
"\u0061"
// "a"
但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
"\uD842\uDFB7"
// ""\u20BB7"
// " 7"
字符串的遍历器接口
ES6 为字符串添加了遍历器接口(详见《Iterator》一章)，使得字符串可以被for...of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)}
// "f"// "o"// "o"
除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
模板字符串(重点)
传统的 JavaScript 语言，输出模板通常是这样写的(下面使用了 jQuery 的方法)。
$('#result').append(
'There are ' + basket.count + '
'items in your basket, ' +
'' + basket.onSale +
' are on sale!');
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`  There are ${basket.count} items   in your basket, ${basket.onSale}  are on sale! `);
字符串的新增方法
实例方法：includes(), startsWith(), endsWith()
实例方法：repeat()
实例方法：padStart()，padEnd()
实例方法：trimStart()，trimEnd()
includes(), startsWith(), endsWith()
传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
· includes()：返回布尔值，表示是否找到了参数字符串。
· startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
· endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true
这三个方法都支持第二个参数，表示开始搜索的位置。
let s = 'Hello world!'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。