变量作用域与解构赋值

知识点：作用域、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"

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