变量作用域与解构赋值

知识点：作用域、var、let、 const、ES6解构赋值

1.作用域

ES5中只有全局作用域和函数作用域的概念

我们应当避免使用全局变量

使用var声明变量

var a = 1;
a = 1;
window.a = 1;

上面三种结果都一样

值得注意的是，如果在函数里使用了var声明变量，则此变量只在该函数内可用，在外部调用会报错！

function name(){
  var b = 2;
  b += 1; // 2
}

b += 1; // Uncaught ReferenceError: b is not defined

那如果外部函数访问内部函数呢？当然访问不到！

function fun1(){
  var a = 1;
  console.log(b)  // Uncaught ReferenceError: b is not defined
  function fun2(){
    var b = 2;
    console.log(a) // 1
  }
}

可以看到，内部函数可以访问外部函数的变量，但是外部函数不能访问内部函数的变量，这里涉及到作用域链的知识点，你只要记住： 函数寻找变量是由内到外，由下到上的过程，中途遇到变量会立即停止，不会一直向上查找。

var a = 1;
function fun1() {
  var a = 2;
  function fun2() {
    var b = 3;
    console.log(a); // 2
  }
}

2. ES6新增`let`和`const`命令，和`var`的使用方法一致，但是用`let`和`const`声明的变量，只在所在的块级作用域内有效。

{
  let a = 1;
  const B = 2;
  var c = 3;
}

console.log(a) // Uncaught ReferenceError: a is not defined
console.log(B) // Uncaught ReferenceError: B is not defined
console.log(c) // 3

let和const命令在同一作用域内不能重复声明，并且const命令只声明不赋值，也会报错

{
  let a = 1;
  let a = 2; // Identifier "a" has already been declared
  const B; // Missing initializer in const declaration
  const B = 1;
  const B = 2; // Identifier "B" has already been declared
}

let和const命令会形成"暂时性死区";，导致如果在声明之前使用该变量会报错!

var a = 1;
{
  a += 1; / /Uncaught ReferenceError: a is not defined
  let a;
}

3. 数组和对象解构赋值

ES6允许这样赋值：

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

可以这样：

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

也可以这样：

let [,, c] = [1, 2, 3]
c // 3

还可以这样：

let [a, ...b] = [1, 2, 3, 4];
a // 1
b // [2, 3, 4]

允许设置默认值：

let [a, b = 1] = [2]; // a=2, b=1

ES6使用严格相等===判断一个值是否有效，当===undefined时，默认值才会生效

对象的解构赋值使我们更轻易地提取数据

我们以这个对象为例:

var opt = {
  name: "zhang",
  age: 23,
  compony: "众安",
  family:{
    father: "zhang2",
    mather: "ma",
    number: 3,
  }
}

在以前我们想要拿到对象的值可能会这么写：

opt.name // "zhang"
opt.family.number // 3
opt.family.father // "zhang2"

现在我们可以这么写：

var {name} = opt
var {family:{number}} = opt
var {family:{father}} = opt
family // undefined
name // "zhang"
number // 3
father // "zhang2"

这里的family 为undefined ,只是起到一个指示作用，真正的值存在于后面

我们还可以设置默认值：

var {a=true} = opt
a // true

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，要使用的变量名和值不一致时，我们可以这么做：

var {name: people} = opt
name: undefined
people // "zhang"

文中部分引用阮老师，廖老师的例子