JS变量作用域与解构赋值

用var变量是有作用域的

变量在函数内部声明时，那么该变量只属于整个函数体，函数外不可调用

当两个不同的函数里，使用了用一个相同的变量名，二者不互相影响，相互独立

遇到嵌套函数时，外部函数不可调用内部函数的变量，而内部函数可调用外部函数变量

当遇到同一变量时，也是同理，“就近原则”

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部

function test(){

var x = 'test, ' + y;

console.log(x);

var y = '2';

}

foo();

返回：

//test, undefined

打印并不会出错，这是因为此时，变量 y 已经被声明，当未被赋值

在引擎里面看到的代码

function test(){

var x;

var y;

x = 'test, ' + y;

console.log(x);

y = '2';

}

基于Javascript特性，我们在函数定义变量时，应该遵守，首先声明所有变量的规则

最常见的做法是用一个var申明函数内部用到的所有变量

function test(){

var x = 1, y = 2, z;

...

}

全局作用域

不在任何函数内定义的变量就具有全局作用域，全局作用域的变量会被绑到window的一个属性上

var course = 'Learn Js';

console.log(course); // 'Learn Js'

console.log(window.course); // 'Learn Js'

我们以前用变量定义函数，同样的，其也会成为全局变量

提升ReferenceError错误，是因为没有该变量

命名空间

为了避免使用了相同全局变量，造成命名冲突

我们把所有的变量和函数全部绑定到一个全局变量(对象)里

//唯一全局变量 myApp

var myApp = {};

//其他变量

myApp.name = 'Job';

myApp.edition = 1.0;

myApp.test = function(){

...

}

局部作用域

变量作用域在函数内部，但for等语句块无法定义其局部的作用域，所有可以被当前函数所调用

function test() {

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

...

}

console.log(i); // 2

}

为了解决类似这样的问题，ES6标准引入了关键字let，功能和var一样，但let可以声明一个块级作用域变量

function test() {

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

...

}

console.log(i); // ReferenceError 该作用域没有此变量

}

常量

在ES6标准之前，无法没有此功能，通常用变量整体大写来表示常量

var EDITION = 1.0;

ES6标准则引入关键字，const来定义常量，const与let一样具有块级作用

const edition = 1.0;

edition; // 1.0

解构赋值

ES6标准引入了解构赋值，可以同时对一组变量进行赋值

什么是解构赋值？

var array = ['Job', 'Steven', 'Ben'];

var x = array[0];

var y = array[1];

var z = array[2];

ES6演示

var [x, y, z] = ['Job', 'Steven', 'Ben'];

console.log('x = ' + x + ', y = ' + y + ', z = ' + z)

// x = Job, y = Steven, z = Ben

也可以选择解构赋值某一个值

var [, , z] = ['Job', 'Steven', 'Ben'];

z; // Ben

同样也可以获取对象属性

var person = {

name: 'Job',

age: 18,

school: 'No.1 school',

email: 'xxx.@xx.com'

};

var {name, age, email} = person;

console.log('name = ' + name + ', age = ' + age + ', email = ' + email);

// name = Job, age = 18, email = xxx.@xx.com

对嵌套的对象属性进行赋值时, 只要保证对应的层次是一致的

var person = {

name: 'Job',

age: 18,

school: 'No.1 school',

email: 'xxx.@xx.com'

address: {

city: 'Earch',

mail: 10001

}

};

var {name, address: {city, street}} = person;

name; // Job

city; // Earch

street; // undefined

解决解析赋值对应不存在问题

var {name, city: test} = person;

name; // Job

test; // Earch

这里的city并非变量，仅仅是把值赋给test

city; // ReferenceError

解构赋值也可以使用默认值

var {name, single = true} = person;

当变量被声明后，解析赋值所被赋值的变量则无效

// 声明变量

var x, y;

// 解构赋值

{x, y} = { name: '小明', x: 100, y: 200};

// 语法错误: SyntaxError

这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来

({x, y} = { name: '小明', x: 100, y: 200});

这里暂时看不懂

使用场景

交换两个临时变量

var x=1, y=2;

[x, y] = [y, x]

快速获取当前页面域名和路径

var {hostname:main, pathname:path} = location;