(一) Promise

promise是承诺，允诺的意思。(是将来发生的事)

(1) Promise是什么？

• 从用途上来说：
  (1) promise主要用于异步计算。
  (2) 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。
  (3) 可以在对象之间传递和操作promise，帮助我们处理队列。
• 从语法上说：
  Promise 是一个对象，从它可以获取异步操作的消息。
  Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理
• executor是执行器，执行者的意思

(2) Promise对象的特点？

• (1) 对象的状态不受外界影响。
  Promise对象代表一个异步操作，有三种状态：(--------三种状态--------)
  pending（进行中）
  fulfilled（已成功）
  rejected（已失败）
  只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

• (2) 一旦状态改变，就不会再变，任何时候都可以得到这个结果。
  Promise对象的状态改变，只有两种可能：(--------两种改变--------)
  从pending变为fulfilled
  从pending变为rejected
  只要这两种情况发生，状态就凝固，不会再变，会一直保持这个结果。
  如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

(3) Promise的缺点？

• (1) 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
• (2) 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• (3) 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

(4) Promise的基本用法？

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) { 
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);                // 异步操作成功时调用，并将异步操作的结果作为参数传递出去
  } else {
    reject(error);                 // 异步操作失败时调用，并将异步操作的结果作为参数传递出去

  }
});

promise.then(function(value) {     // 这两个函数都接受Promise对象传出的值作为参数。
  // success                       // 成功时，调用第一个函数
}, function(error) {
  // failure                       // 失败时，调用第二个函数
});


说明：
(1) promise构造函数，接受一个函数作为参数。
(2) 这个函数又有两个参数，接受 resolve 和 reject 这两个参数。
(3) resolve 和 reject 也是函数


resolve 函数的作用：
将Promise对象的状态从pending 变为 resolved，
在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。!!!


reject 函数的作用：
将Promise对象的状态从“从 pending 变为 rejected，
在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。!!!

(5) Promise 新建后就会立即执行?

 componentDidMount() {
    let p = new Promise((resolve,reject) => {
      console.log('1')
      resolve();
    })
    p.then(result => {
      console.log('2')
    })
    console.log('3')
 }

 // 执行结果：
 // 1
 // 3
 // 2

说明：
上面代码中，Promise 新建后立即执行，所以首先输出的是 1 。
然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以 2 最后输出。

(6) 用Promise封装一个ajax请求

• Ajax
  ajax是 Asynchronous JavaScript and XML 的缩写(异步的 JavaScript 和 XML)
  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• XMLHttpRequest 对象

实例化对象：

const xmlhttp= new XMLHttpRequest()

• open(method,url,async)

xmlhttp.open("GET","test1.txt",true);


open(method,url,async)  // 规定请求的类型、URL 、是否异步处理请求


// method：请求的类型；GET 或 POST
// url：文件在服务器上的位置
// async：true（异步）或 false（同步）

• send(string)

xmlhttp.send();

send(string)  // 将请求发送到服务器。

string：仅用于 POST 请求

• setRequestHeader(header,value)

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//  xmlhttp.setRequestHeader("Accept", "application/json");


setRequestHeader(header,value)    // 向请求添加 HTTP 头。


// header: 规定头的名称
// value: 规定头的值

• responseText
• responseXML

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;


responseText    // 获得字符串形式的响应数据。
responseXML     // 获得 XML 形式的响应数据。

• onreadystatechange 事件

onreadystatechange: 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。




readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪




status

// 200: "OK"
// 404: 未找到页面

完整例子：

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {   // 没完成就返回，readyState有0，1，2，3，4几种状态
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
        //reject函数的参数通常是Error对象的实例，表示抛出的错误；
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

(二) this关键字

(1) 涵义

(1) 简单说，this就是属性或方法“当前”所在的对象。

JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。

(2) this总是返回一个对象

• this可以用在构造函数之中，表示实例对象
• this还可以用在别的场合
• 不管是什么场合，this都有一个共同点：它总是返回一个对象。

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：张三"


// 说明：
(1) this.name表示name属性当前所在的那个对象

(2) this.name在describe方法中调用，describe方法当前所在的对象是person

(3) 所以this指向person对象，this.name就是person.name

(3) 由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

var A = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var B = {
  name: '李四'
};

B.describe = A.describe;
B.describe()
// "姓名：李四"


// 说明：
(1) A.describe属性 赋值给 B对象后 this的指向发生变化

(2) describe方法中的this由 指向A对象 变为 指向B对象 (B.describe就表示describe方法当前所在的对象是B)

(3) 所以 this.name 指向 B.name

(4) 只要函数被赋给另一个变量，this的指向就会变。

• JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。

var A = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var name = '李四';
var f = A.describe;     // 只要函数被赋值给一个变量，函数内部的this指向 变量 运行时所在的 对象
f() // "姓名：李四"


// 说明：

上面代码中，A.describe被赋值给变量f，内部的this就会指向f运行时所在的对象（本例是顶层对象）。

(2) this 关键字使用场合

(1) 全局环境

this === window // true

function f() {
  console.log(this === window);     // this是函数运行时所在的对象
}
f() // true                         // 函数在这里运行，所在的对象是顶层对象 window



// 不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window

(2) 构造函数

• 构造函数中的this，指的是实例对象。

(3)对象的方法

• 如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向
• 如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

var a = {
  p: 'Hello',
  b: {
    m: function() {      // this指向 m方法所在的对象 b， b对象中没有 p属性
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

(3) this 注意点

(1) 避免多层 this

• 解决 多层this指向改变的办法：
  事实上，使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法

var o = {
  f1: function () {
    console.log(this);       // 该this指向方法运行时所在的对象，0.f1()，即指向 o对象
    var f2 = function () {
      console.log(this);    // 赋值给变量，指向var定义的变量所在的对象 window
    }();
  }
}

o.f1()
// Object
// Window



----------------------------------------------------------------------------


var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}

o.f1()
// Object
// Object


 // 定义变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变

(4) 绑定 this 的方法

JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

call 方法

Function.prototype.call()

• 函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。
• call方法的参数，是一个对象。如果参数为空、null和undefined，则默认传入全局对象。
• call方法的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

例一：

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true


-----------------------------------------------


例二：
var av = {
    name: 'wang',
    age: function() {
        return this.name
    }
}
var ac = {
    name: 'li'
}
av.age.call(ac)  // li



--------------------------------------------------



call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456



--------------------------------------------------


function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3

上面代码中，call方法指定函数add内部的this绑定当前环境（对象），并且参数为1和2，

因此函数add运行后得到3。

apply 方法

Function.prototype.apply()

• apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。
• apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。
• 第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。
• apply() 只有两个参数，第一个是this所要指向的对象，第二个是数组

func.apply(thisValue, [arg1, arg2, ...])

• 利用Function.prototype.applay() 方法 做一些算法

1.计算数组中最大的值？

var arr = [1,333,444,34,56,3];
Math.max.apply(null,arr)       // Math.max方法返回参数之中最大的那值  Math.max(2, -1, 5) => 5
444

2.将数组的空元素变为undefined

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]



-----------------------------------------------------

空元素与undefined的差别在于，数组的forEach方法会跳过空元素，但是不会跳过undefined。

var a = ['a', , 'b'];

function print(i) {
  console.log(i);
}

a.forEach(print)
// a
// b

Array.apply(null, a).forEach(print)
// a
// undefined
// b

bind 方法

Function.prototype.bind()

• bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。
• bind方法的参数就是所要绑定this的对象
• 区别：
  bind方法只是返回新的函数，但是函数不是自己执行。而外两个方法call和apply都会绑定this指向后，调用该函数。
• 如果bind方法的第一个参数是null或undefined，等于将this绑定到全局对象，函数运行时this指向顶层对象（浏览器为window）。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

上面代码中，counter.inc方法被赋值给变量func。

这时必须用bind方法将inc内部的this，绑定到counter，否则就会出错。



-------------------------------------------------------------------------------

this绑定到其他对象也是可以的。


var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();

• bind还可以接受更多的参数，将这些参数绑定原函数的参数。

var add = function (x, y) {
  return x * this.m + y * this.n;    // x是4， this.m是2，y是1， this.n是2
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 4);
newAdd(1) // 10


上面代码中，bind方法除了绑定this对象，还将add函数的第一个参数x绑定成5，

然后返回一个新函数newAdd，这个函数只要再接受一个参数y就能运行了。

• bind结合回调函数使用

var counter = {
  count: 0,
  inc: function () {
    'use strict';
    this.count++;
  }
};

function callIt(callback) {
  callback();
}

callIt(counter.inc.bind(counter));
counter.count // 1

使用bind需要注意的点

• 有一种情况比较隐蔽，就是某些数组方法可以接受一个函数当作参数。这些函数内部的this指向，很可能也会出错。

var obj = {
  name: '张三',
  times: [1, 2, 3],
  print: function () {   // 对象内的方法中的this，指向方法运行时所在的对象，this.times 指向 obj
    this.times.forEach(function (n) {
      console.log(this.name);    // 但是里层的this.name 指向的是 window对象
    }); 
  }
};

obj.print()
// 没有任何输出


上面代码中，obj.print内部this.times的this是指向obj的，这个没有问题。

但是，forEach方法的回调函数内部的this.name却是指向全局对象，导致没有办法取到值。



--------------------------------------------------------------------
解决办法：

var obj = {
  name: '张三',
  times: [1, 2, 3],
  print: function () {    
      // 或者在这里定义一个  var that = this，然后that.times.forEach(.....that.name.....)
      this.times.forEach( 
          function (n) {
              console.log(this.name);    
          }.bind(this)          // 对里层的函数绑定this要指向的对象。
      ); 
  }
};

obj.print() 
// 张三 
// 张三 
// 张三

• 结合call方法使用!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!(重要)

[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]


上面的代码中，数组的slice方法从[1, 2, 3]里面，按照指定位置和长度切分出另一个数组。


这样做的本质是:
在[1, 2, 3]上面调用Array.prototype.slice方法，因此可以用call方法表达这个过程，得到同样的结果。



-------------------------------------


call方法实质上是调用Function.prototype.call方法，因此上面的表达式可以用bind方法改写。

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]

// 上面代码的含义就是，将Array.prototype.slice变成Function.prototype.call方法所在的对象，
// 调用时就变成了Array.prototype.slice.call。

类似的写法还可以用于其他数组方法。

(1) let 命令

ES6 新增了let命令，用来声明变量。

• 它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，外部无效。

{
  let a = 10;   // let声明的变量，只在let命令所在的代码块内有效，块级作用域
  var b = 1;
}


a // ReferenceError: a is not defined.        // 代码块外部无法访问let变量
b // 1                                        // var可以



-------------------------------------------------------------



for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

说明：计数器i只在for循环体内有效，在循环体外引用就会报错。



-------------------------------------------------------------



for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {   // 循环变量部分，父作用域
  let i = 'abc';                // 循环体部分内部是，一个单独的子作用域
  console.log(i);
}
// abc
// abc
// abc


上面代码正确运行，输出了 3 次abc。

这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

• let不存在变量提升
  (1) var声明的变量存在变量提升，变量可以在声明前使用，值为undefined
  (2) let命令所声明的变量一定要在声明后使用，否则报错。

• 暂时性死区
  在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;    // 块级作用域内，let声明tmp变量前，先给tmp变量赋值，报错
}

存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，

所以在let声明变量前，对tmp赋值会报错。




------------------------------------------------------------

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;




------------------------------------------------------------

function bar(x = y, y = 2) {     // y在声明前就赋值给x，报错
  return [x, y];
}

bar(); // 报错




------------------------------------------------------------

function bar(x = 2, y = x) {     // 先声明了x值是2， 再赋值给y，正确
  return [x, y];
}
bar(); // [2, 2]




------------------------------------------------------------

// 不报错
var x = x;

// 报错
let x = x;

• 不允许重复声明
  let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}



---------------------------------------------------------

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}

function func(arg) {      // arg属于不同的作用域，和for类似
  {
    let arg; // 不报错
  }
}

(2) 块级作用域

• es5有全局作用域和函数作用域：
  函数外声明的变量是全局变量，函数内声明的变量是局部变量，函数内部可以使用全局变量，但函数外部无法使用函数内定义的局部变量，(可以用闭包解决)
• 只有全局作用域和函数作用域带来的不合理场景：
  一是：内层变量可能会覆盖外层变量。
  二是：用来计数的循环变量泄露为全局变量。比如for循环中的计数变量i
• 块级作用域

function f1() {
  let n = 5;          // let命令，外层代码块不受内层代码块的影响，在外层代码块内，打印变量，仍然是5
                      // 如果两次都是var命令，则里层会覆盖外层，最后结果输出是10 
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}


上面的函数有两个代码块，都声明了变量n，运行后输出 5。

这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10

• ES6 允许块级作用域的任意嵌套。

(3) const命令

• const声明一个只读的常量。一旦声明，常量的值就不能改变。

const a = 10;
a = 20;           // const声明的常量不能被改变
console.log(a)    // 报错

• const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

• const的作用域与let命令相同：只在声明所在的块级作用域内有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined   
    // 在const声明所在的块级作用域外无法使用。

• const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
• const声明的常量，也与let一样不可重复声明。

const命令 本质

• const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

(4) 顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。
ES5 之中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。

• ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1


let b = 1;
window.b // undefined

(一) 解构赋值

(1) 解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

(2) 解构赋值的用途

• （1）交换变量的值

let x = 1;
let y = 2;

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

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

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();




----------------------------------
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { 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 对象中的数据，尤其有用。

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

let { id, status, data: number } = jsonData;   // data:number，属性和变量名不一致，number是变量

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

• （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 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const 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

• （7）输入模块的指定方法
  加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

import {connect} from 'react-redux';

(3) 数组的解构赋值

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。



-----------------------------------------


let [head, ...tail] = [1, 2, 3, 4];    // 解构赋值: 从数组或者对象中取值，对变量进行赋值

head // 1
tail // [2, 3, 4]


-----------------------------------------


let [x, y, ...z] = ['a'];     
x // "a"
y // undefined
z // []

• 如果解构不成功，变量的值就等于undefined。

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

• 不完全解构
  不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2


let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4       // 注意：这里的d是4，而不是3


上面两个例子，都属于不完全解构，但是可以成功。




--------------------------------------------------------------


如果等号的右边不是数组（或者严格地说，不是可遍历的结构，那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

(4) 默认值

解构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。

所以，只有当一个数组成员严格等于undefined，默认值才会生效。



-------------------------------------------------------------------------
let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

(二) 对象的解构赋值

对象的解构与数组有一个重要的不同。

• 数组的元素是按次序排列的，变量的取值由它的位置决定；
• 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"



let { baz } = { foo: "aaa", bar: "bbb" };   // 对象的解构赋值，变量必须与属性同名才能取到正确的值
baz // undefined

• 如果变量名与属性名不一致，必须写成下面这样。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

• 也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined


foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

说明：对象的解构赋值，是先找到同名属性，在赋值给对应的变量，被赋值的是属性的值，而不是属性 
(被赋值的是后者)

• 对象的解构也可以指定默认值。

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};       // (重要)
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"




--------------------------------------------------------------------

默认值生效的条件是，对象的属性值严格等于undefined。


var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

• 如果解构失败，变量的值等于undefined。

let {foo} = {bar: 'baz'};
foo // undefined

(三) 字符串的解构赋值

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 move({x = 0, y = 0} = {}) {   // 为变量x,y指定了默认值，同时为参数指定了默认值
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

• 为函数参数指定默认值，和为变量指定默认值不一样--------------对比

function move({x, y} = { x: 0, y: 0 }) {    
  // 上面 这样是为函数参数指定默认值，而不是为变量x,y指定默认值
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值