js基础之变量作用域和变量提升以及解构赋值

变量作用域

首先来看一个例子：

var a = 1;
function test()
{
    console.log(a); // 1
    var b = 2; 
    console.log(b); // 2
    for(var i=10; i<13; i++) {
        console.log(i)
    }
    console.log(i) // 13
}
test()
// console.log(b) 直接报错：Uncaught ReferenceError: b is not defined

根据上边的运行结果，我们可以得到关于变量作用域的以下几点结论：

• 函数体内声明的变量只能函数内部使用。
• 函数外部声明的变量函数内部依然可以使用。
• 结构语句中使用var声明的变量，在当前函数中仍然可以使用。（使用let则只在块作用域内生效）

变量提升

先看个例子：

function test () {
    console.log(a);  //undefined
    var a = 123; 
};
test();

我们发现，打印后面声明的变量并没有报错。说明同一作用域下的变量会被提前声明，变量提升了！
再来看一道面试题：

console.log(v1); // undefined
var v1 = 100;
function foo() {
    console.log(v1); // undefined
    var v1 = 200;
    console.log(v1); // 200
}
foo();
console.log(v1); // 100

我们可以看到：当v1变量重复声明的时候，会优先从函数内部查找变量，外部重名变量会被自动忽略。

解构赋值

ES6开始支持解构赋值， 解构赋值很多语言都会支持，这个功能是为了方便获取数组或者对象内部的变量，而不需去遍历它。
示例：

var [x, y] = ['hello', 'world'];

支持嵌套和忽略赋值：

let [x, [y, z]] = ['hello', ['my', 'world']];
x; // 'hello'
y; // 'my'
z; // 'world'
let [, , z] = ['hello', 'my', 'world']; // 忽略前两个元素
z; // 'world'

当然对于对象也是一样的：

var person = {
    name: '小明',
    age: 20,
    address: {
        city: 'Beijing',
        street: 'No.1 Road'
    }
};

// 如果person对象没有single属性，默认赋值为true:
var {name, single=true} = person;
// 对象也支持嵌套
var {name, address: {city, street}} = person;

来看几个实用的小栗子：

// 交换变量
var x=1, y=2;
[x, y] = [y, x]

// 获取页面的域名和路径
var {hostname:domain, pathname:path} = location;
console.log(domain);
console.log(path);

// 如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
}