JS6-函数

Posted 2020-10-03 YC小杨

====ECMAScript是什么?

====ECMAScript 和 javascript 的关系

1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。

 

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字(JavaScript 本身也已经被 Netscape 公司注册为商标),二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

 

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。

 

====ES6 与 ECMAScript 2015 的关系

ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。

2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

 

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能.因为不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版，过一段时间再发6.1版，然后是6.2版、6.3版等等。

 

但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

 

标准委员会最终决定，标准在每年的6月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的6月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

 

ES6 的第一个版本，在2015年6月发布，正式名称就是《ECMAScript 2015标准》（简称 ES2015）。2016年6月，小幅修订的《ECMAScript 2016标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。2017年6月发布 ES2017 标准。

 

因此，ES6 既是一个历史名词，也是一个泛指，含义是5.1版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

 

====语法提案的批准流程

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。

 

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

 

Stage 0 - Strawman（展示阶段）

Stage 1 - Proposal（征求意见阶段）

Stage 2 - Draft（草案阶段）

Stage 3 - Candidate（候选人阶段）

Stage 4 - Finished（定案阶段）

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案，可以在 TC39 的官方网站Github.com/tc39/ecma262查看。

 

====ECMAScript 的历史

ES6 从开始制定到最后发布，整整用了15年。

 

ECMAScript 1.0 是1997年发布的，接下来的两年，连续发布了 ECMAScript 2.0（1998年6月）和 ECMAScript 3.0（1999年12月）。3.0版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习 JavaScript，其实就是在学3.0版的语法。

 

2000年，ECMAScript 4.0 开始酝酿。这个版本最后没有通过，但是它的大部分内容被 ES6 继承了。因此，ES6 制定的起点其实是2000年。

 

为什么 ES4 没有通过呢？因为这个版本太激进了，对 ES3 做了彻底升级，导致标准委员会的一些成员不愿意接受。ECMA 的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等大公司。

 

2007年10月，ECMAScript 4.0 版草案发布，本来预计次年8月发布正式版本。但是，各方对于是否通过这个标准，发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。

 

2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为 Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。

 

2009年12月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。TC39 委员会的总体考虑是，ES5 与 ES3 基本保持兼容，较大的语法修正和新功能加入，将由 JavaScript.next 完成。当时，JavaScript.next 指的是ES6，第六版发布以后，就指 ES7。TC39 的判断是，ES5 会在2013年的年中成为 JavaScript 开发的主流标准，并在此后五年中一直保持这个位置。

 

2011年6月，ECMAscript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。

 

2013年3月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。

 

2013年12月，ECMAScript 6 草案发布。然后是12个月的讨论期，听取各方反馈。

 

2015年6月，ECMAScript 6 正式通过，成为国际标准。从2000年算起，这时已经过去了15年。        

 

 

所以我们学习的和目前绝大部分公司用到的版本是ECMAScript5的规则,6是在5的基础上添加了一部分新的东西

 

====let

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

 

{

  let a = 1;

  var b = 1;

}

Console.log(a) // ReferenceError: a is not defined.

Console.log(b) // 1

 

 

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {}

console.log(i);// ReferenceError: i is not defined

 

 

 

下面的代码如果使用var，最后输出的是10。

var a = [];

for (var i = 0; i < 10; i++) {

  a[i] = function () {

    console.log(i);

  };

}

a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是10。

 

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。

 

var a = [];

for (let i = 0; i < 10; i++) {

  a[i] = function () {

    console.log(i);

  };

}

a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

 

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

 

for (let i = 0; i < 3; i++) {

  let i = ‘abc‘;

  console.log(i);

}

// abc

// abc

// abc

上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

 

不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

 

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

 

// var 的情况

console.log(foo); // 输出undefined

var foo = 2;

 

// let 的情况

console.log(bar); // 报错ReferenceError

let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

 

====不允许重复声明

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

 

// 报错

function () {

  let a = 10;

  var a = 1;

}

 

// 报错

function () {

  let a = 10;

  let a = 1;

}

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

 

function func(arg) {

  let arg; // 报错

}

 

function func(arg) {

  {

    let arg; // 不报错

  }

}

 

====暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

 

var tmp = 123;

 

if (true) {

  tmp = ‘abc‘; // ReferenceError

  let tmp;

}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

 

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

 

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

 

if (true) {

  // TDZ开始

  tmp = ‘abc‘; // ReferenceError

  console.log(tmp); // ReferenceError

 

  let tmp; // TDZ结束

  console.log(tmp); // undefined

 

  tmp = 123;

  console.log(tmp); // 123

}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

 

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

typeof(x); // ReferenceError

let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

 

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

 

typeof(gg) // "undefined"

上面代码中，gg是一个不存在的变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

 

有些“死区”比较隐蔽，不太容易发现。

 

function bar(x = y, y = 2) {

  return [x, y];

}

 

bar(); // 报错

上面代码中，调用bar函数之所以报错（某些实现可能不报错），是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于”死区“。如果y的默认值是x，就不会报错，因为此时x已经声明了。

 

function bar(x = 2, y = x) {

  return [x, y];

}

bar(); // [2, 2]

另外，下面的代码也会报错，与var的行为不同。

 

// 不报错

var x = x;

 

// 报错

let x = x;

// ReferenceError: x is not defined

上面代码报错，也是因为暂时性死区。使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。上面这行就属于这个情况，在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。

 

 

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

 

 

 

 

====块级作用域

为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

 

var tmp = new Date();

 

function f() {

  console.log(tmp);

  if (false) {

    var tmp = ‘hello world‘;

  }

}

 

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

 

第二种场景，用来计数的循环变量泄露为全局变量。

 

var s = ‘hello‘;

 

for (var i = 0; i < s.length; i++) {

  console.log(s[i]);

}

 

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

 

ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。

function f1() {

  let n = 5;

  if (true) {

    let n = 10;

  }

  console.log(n); // 5

}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是10。

 

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

{{{{{let a= ‘Hello World‘}}}}};

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

 

{{{{

  {let a= ‘Hello World‘}

  console.log(a); // 报错

}}}};

内层作用域可以定义外层作用域的同名变量。

 

{{{{

  let a= ‘Hello World‘;

  {let a= ‘Hello World‘}

}}}};

 

====块级作用域与函数声明

函数能不能在块级作用域之中声明？

 

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

//非法函数

if (true) {

  function f() {}

}

但是，很多浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面情况实际能运行，不会报错。

 

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

 

function f() { console.log(‘6666‘); }

(function () {

  if (false) {

    // 重复声明一次函数f

    function f() { console.log(1111); }

  }

 

  f();

}());

上面代码在 ES5 中运行，会得到“111”，因为在if内声明的函数f会被提升到函数头部，规定运行时的代码如下。

function f() { console.log(666666); }

(function () {

  function f() { console.log(11111); }

  if (false) {

  }

  f();

}());

但是:ES5很多浏览器都是这样实现的

function f() { console.log(666666); }

(function () {

var f=undefined

   if (false) {

 function f() { console.log(11111); }

  }

  f();

}());

因此会报错

 

 

ES6

允许在块级作用域内声明函数。

函数声明类似于var，即会提升到全局作用域或函数作用域的头部。

同时，函数声明还会提升到所在的块级作用域的头部。

根据这三条规则，在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。

 

// 浏览器的 ES6 环境

function f() { console.log(‘666666‘); }

 

(function () {

  if (false) { function f() { console.log(‘11111‘); }

  }

 

  f();

}());

// Uncaught TypeError: f is not a function

上面的代码在符合 ES6 的浏览器中，都会报错，因为实际运行的是下面的代码。

 

// 浏览器的 ES6 环境

function f() { console.log(‘I am outside!‘); }

(function () {

  var f = undefined;

  if (false) {

    function f() { console.log(‘I am inside!‘); }

  }

 

  f();

}());

// Uncaught TypeError: f is not a function

 

 

 

 

 

ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

 

// 不报错

if (true) {

  function f() {}

}

 

// 报错

if (true)

function f() {}

 

 

 

 

 

====const

 

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

 

const PI = 3.1415;

console.log(PI) // 3.1415

PI = 3;// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

 

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

对于const来说，只声明不赋值，就会报错。

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

 

 

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

if (true) {

  const MAX = 5;

}

MAX // Uncaught ReferenceError: MAX is not defined

 

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

if (true) {

  console.log(MAX); // ReferenceError

  const MAX = 5;

}

在常量MAX声明之前就调用，结果报错。

 

 

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";

let age = 25;

// 以下两行都会报错

const message = "Goodbye!";

const age = 30;

 

 

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

const f = {};

// 为 f 添加一个属性，可以成功

foo.prop = 123;

foo.prop // 123

 

// 将 f指向另一个对象，就会报错

f = {}; // TypeError: "f" is read-only

上面代码中，常量f储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把f指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

 

另一个例子:

const a = [];

a.push(‘Hello‘); // 可执行

a.length = 0;    // 可执行

a = [‘karen’];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

 

====顶层对象的属性

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

 

window.a = 1;

Console.log(a) // 1

 

b = 2;

Console.log(window.b )// 2

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

 

顶层对象的属性与全局变量挂钩，被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

 

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

 

var a = 1;//声明一个全局变量

console.log(this.a)//1  全局变量

console.log(window.a) // 1  顶层对象的属性

 

let b = 1;

window.b // undefined

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。

 

 

 

 

 

 

====解构赋值

 

1.数组的解构赋值

基本用法

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

 

以前，为变量赋值，只能直接指定值。

let a = 1;

let b = 2;

let c = 3;

 

ES6 允许写成下面这样。

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

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

 

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

 

例:

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

a// 1

b// 2

c// 3

 

let [ , , c] = ["1", "2", "3"];

c// "3"

 

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

x // 1

y // 3

 

let [A1, ...An] = [1, 2, 3, 4];

A1// 1

An// [2, 3, 4]

 

let [x, y, ...z] = [‘1‘];

x // "1"

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

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

 

 

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

 

// 报错

let [foo] = 1;

let [foo] = false;

let [foo] = NaN;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

上面的语句都会报错，因为等号右边的值不是数组

 

 

 

 

====默认值

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

 

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。

 

 

 

 

 

如果默认值是一个表达式，那么这个表达式是惰性求值(懒加载)的，即只有在用到的时候，才会求值。

function f() {

  console.log(‘aaa‘);

}

let [x = f()] = [1];

上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;

if ([1][0] === undefined) {

  x = f();

} else {

  x = [1][0];

}

 

 

 

 

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

 

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

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

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

let [x = y, y = 1] = [];     // ReferenceError

上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。

 

 

 

====对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let {name , age} = { name : "aaa", age: "bbb" };

name // "aaa"

age// "bbb"

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

let { name , age} = { name : "aaa", age: "bbb" };

name // "aaa"

age// "bbb"

 

let { age} = { name : "aaa", age1: "bbb" };

age// undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

 

 

 

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

var { name : mingzi} = { name1 : ‘aaa‘, age: ‘bbb‘ };

mingzi// "aaa"

 

let obj = { first: ‘hello‘, last: ‘world‘ };

let { first: f, last: l } = obj;

f // ‘hello‘

l // ‘world‘

 

实际上，对象的解构赋值是下面形式的简写

let { name: name, age: age} = { name: "aaa", age: "bbb" };

 

 

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

let { name: mingzi} = { name: "aaa", age: "bbb" };

mingzi// "aaa"

name// error: foo is not defined

上面代码中，name是匹配的模式，mingzi才是变量。真正被赋值的是变量mingzi，而不是模式name。

 

注意点，采用这种写法时，变量的声明和赋值是一体的。对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。

let name;

let {name} = {name: 1}; // SyntaxError

 

 

let age1;

let {age: age1} = {age: 1}; // SyntaxError

上面2段代码中，解构赋值的变量都会重新声明，所以报错了。不过，因为var命令允许重新声明，所以这个错误只会在使用let和const命令时出现。如果没有第二个let命令，上面的代码就不会报错。

 

let name;

({name} = {name: 1}); // 成功

 

let age;

({age: age1} = {age: 1}); // 成功

上面代码中，let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。

 

 

 

]

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

 

var {x = 3} = {};

x // 3

 

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 { name: mingzi= ‘karen‘ } = {};

mingzi// ‘karen‘

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

 

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

x // 3

 

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

x // null

上面代码中，如果x属性等于null，就不严格相等于undefined，导致默认值不会生效。

 

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

 

let {name} = {age: ‘karen‘};

name// undefined

 

 

 

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

let { log, sin, cos } = Math;

上面代码将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。

 

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

 

let arr = [1, 2, 3];

let {0 : first, [arr.length - 1] : last} = arr;

first // 1

last // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。方括号这种写法，属于“属性名表达式”

 

 

====字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = ‘hello‘;

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = ‘hello‘;

len // 5

 

 

 

====解构赋值用途

 

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]

上面代码可以快速提取 JSON 数据的值。

 

 

3.从函数返回多个值

 

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

 

// 返回一个数组

function example() {

  return [1, 2, 3];

}

let [a, b, c] = example();

 

// 返回一个对象

 

function example() {

  return {

    foo: 1,

    bar: 2

  };

}

let { foo, bar } = example();