变量的解构赋值 var、let、const

1、数组的解构赋值

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

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

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

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

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

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

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。下面的表达式都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。 // 报错

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

默认值解构赋值允许指定默认值。ES6内部使用严格相等运算符（===），判断一个位置是否有值

  var [foo = true] = [];
  foo // true
  var [x = 1] = [null];
  x // null

2、对象的解构赋值

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

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

  var { baz } = { foo: "aaa", bar: "bbb" };
  baz // undefined

改变量名

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

ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。也就是对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

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

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

  let foo;
  let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"

这个错误只会在使用let和const命令时出现。不能有第二个let命令。

  let foo;
  {foo} = {foo: 1}; // SyntaxError: syntax error

JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

  var x;
  ({x} = {x: 1});

多层级对象

  var node = {
    loc: {
      start: {
        line: 1,
        column: 5
      }
    }
  };
  var { loc: { start: { line }} } = node;
  line // 1
  loc  // error: loc is undefined
  start // error: start is undefined

只有line是变量，loc和start都是模式，不会被赋值。只有：后面的才是变量

  var {baz: {bar}} = {baz: 'baz'};
  baz //baz is not defined(…)
  bar //underfined

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

  let { log, sin, cos } = Math;

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

  var arr = [1, 2, 3];
  var {0 : first, [arr.length - 1] : last} = arr;
  first // 1
  last // 3

3、字符串的解构赋值

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

  const [a, b, c, d, e] = 'hello';
  a // "h"
  e // "o"
  let {length:len }= 'hello';

4、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

  let {toString: s} = 123;
  s === Number.prototype.toString // true
  let {toString: s} = true;
  s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

  let { prop: x } = undefined; // TypeError
  let { prop: y } = null; // TypeError

5、函数参数的解构赋值

函数的参数也可以使用解构赋值。

  function add([x, y]){
    return x + y;
  }
  add([1, 2]); // 3

默认值设置两种写法，各有不同

  function move({x = 0, y = 0} = {}) {
    return [x, y];
  }

怎么写都行

  function move({x, y} = { x: 0, y: 0 }) {
    return [x, y];
  }
  move({}) //[underfine,underfined]
  move() //[0,0]

6、圆括号问题

不能使用圆括号的情况以下三种解构赋值不得使用圆括号。

（1）变量声明语句中，不能带有圆括号。

// 全部报错

  var [(a)] = [1];

  var {x: (c)} = {};
  var ({x: c}) = {};
  var {(x: c)} = {};
  var {(x): c} = {};

  var { o: ({ p: p }) } = { o: { p: 2 } };

上面三个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。

（2）函数参数中，模式不能带有圆括号。

函数参数也属于变量声明，因此不能带有圆括号。

  // 报错
  function f([(z)]) { return z; }

（3）赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

  // 全部报错
  ({ p: a }) = { p: 42 };
  ([a]) = [5];

上面代码将整个模式放在圆括号之中，导致报错。

  // 报错
  [({ p: a }), { x: c }] = [{}, {}];

上面代码将嵌套模式的一层，放在圆括号之中，导致报错。

可以使用圆括号的情况可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。

  [(b)] = [3]; // 正确
  ({ p: (d) } = {}); // 正确
  [(parseInt.prop)] = [3]; // 正确

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。

7、用途

（1）交换变量的值

  var x=1,y=2;
  [x, y] = [y, x];

（2）从函数返回多个值

  // 返回一个数组
  function example() {
    return [1, 2, 3];
  }
  var [a, b, c] = example();
  // 返回一个对象
  function example() {
    return {
      foo: 1,
      bar: 2
    };
  }
  var { foo, bar } = example();

（3）函数参数的定义

  function f([x, y, z]) { ... }
  f([1, 2, 3]);
  function f({x, y, z}) {console.log(x,y,z);}
  f({z: 3, y: 2, x: 1});
  （4）提取JSON数据
  var jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
  };

  let { id, status, data: number } = jsonData;

（5）函数参数的默认值

  jQuery.ajax = function (url, {
    async = true
  }) {
    // ... do stuff
  };

（6）遍历Map结构

  var map = new Map();
  map.set('first', 'hello');
  map.set('second', 'world');
  for (let [key, value] of map) {
    console.log(key + " is " + value);
  }

（7）输入模块的指定方法

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

( 8 ) 对象圆括号使用

  let str ;
  ({str} = {str:123});

数值的扩展

1、二进制和八进制表示法

ES6 二进制前缀0b（或0B）和八进制0o（或0O）

  0b111110111 === 503 // true
  0o767 === 503 // true

2、判断是否有效数值

  Number.isFinite(15);  //ture
  Number.isFinite('15'); //false
  Number.isNaN(NaN) // true
  Number.isNaN(15) // false
  Number.isNaN('15') //false

3、格式转换：目的，是逐步减少全局性方法，使得语言逐步模块化。

  Number.parseInt === parseInt  // true
  Number.parseFloat === parseFloat  // true
  // 12
  Number.parseInt('12.34')===parseInt('12.34')

4、判断是否整数

  Number.isInteger(12) //true
  Number.isInteger(12.0) //true
  Number.isInteger(12.1) //false
  Number.isInteger('12') //false

5.Number.EPSILON

引入一个这么小的量的目的，在于为浮点数计算，设置一个误差范围。我们知道浮点数计算是不精确的。 Number.EPSILON的实质是一个可以接受的误差范围 Number.EPSILON

  // 2.220446049250313e-16
  Number.EPSILON.toFixed(20)
  // '0.00000000000000022204'

6、安全整数和Number.isSafeInteger()

JavaScript能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值。

  Math.pow(2, 53) // 9007199254740992
  9007199254740992  // 9007199254740992
  9007199254740993  // 9007199254740992
  Math.pow(2, 53) === Math.pow(2, 53) + 1
  // true

ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。

  Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
  // true
  Number.MAX_SAFE_INTEGER === 9007199254740991
  // true

  Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
  // true
  Number.MIN_SAFE_INTEGER === -9007199254740991
  // true

Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。

  Number.isSafeInteger('a') // false
  Number.isSafeInteger(null) // false
  Number.isSafeInteger(NaN) // false
  Number.isSafeInteger(Infinity) // false
  Number.isSafeInteger(-Infinity) // false

  Number.isSafeInteger(3) // true
  Number.isSafeInteger(1.2) // false
  Number.isSafeInteger(9007199254740990) // true
  Number.isSafeInteger(9007199254740992) // false

  Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
  Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true
  Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true
  Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false

实际使用这个函数时，需要注意。验证运算结果是否落在安全整数的范围内，不要只验证运算结果，而要同时验证参与运算的每个值。

  Number.isSafeInteger(9007199254740993 - 990)
  // true
  9007199254740993 - 990
  // 返回结果 9007199254740002
  // 正确答案应该是 9007199254740003

7、Math对象的扩展

截取整数

  Math.trunc(4.9) //4
  Math.trunc(-4.9) //-4
  Math.trunc('123.456') //123
  Math.trunc('foo') //NaN
  Math.trunc() //NaN

判断正负数参数为正数，返回+1；参数为负数，返回-1；参数为0，返回0；参数为-0，返回-0; 其他值，返回NaN。

  Math.sign(-5) //-1

八五创新

山东八五创新信息技术有限公司的前端交互部门的一些总结和资料