js {}[]符号意识流

js []与{}符号解构

不是[]与{}的用法总结，借用符号增加对js的理解

[]

一个数组可以使用for…in…语法将值获取出来

for (i in [1,2,3,4]){
    console.log(i);
}

也可以这样获取

var [aa,bb] = [1,2,3,4]
console.log(aa);
console.log(bb);

这样的对象就是可被解构的。利用这样的特性，可以对多个变量进行交换

var a = 1;
var b = 2;
var c = 3;
[a,b,c] = [c,b,a];
for(i of [a,b,c]){
    console.log(i);
}

既然可以解构数组对象，为什么不可以解构普通对象呢？

var [aa,bb] = {name:"Jim",age:18};//=>not iterable

但这样写会报错，提示是对象不可迭代，那么可以简单地构建一个可迭代对象

function* Info(){
    this.name = "Jim";
    this.age = 18;
    yield this.name;
    yield this.age;
}

上面是js的语法糖，可以快速地写一个可迭代对象的构造函数。如果是修改对象原型，当然也可以

var i = Info();
var [aa,bb] = i;
console.log(aa);
console.log(bb);

这个构造函数调用后返回一个可迭代对象，就可以解构出来

{}

this

字面量创建对象，里面有个this

var obj = {
    name:"Tony",
    age:99,
    longName:this.name
}

在浏览器上，用字面量创建对象this绑到Window，this.name找不到。在nodejs中，这个this是绑到新对象地址上的，this.name正常找到。

如果写一个带this的函数

var obj = {
    name:"Tony",
    age:99,
    longName:this.name,
    go(){
        console.log(this)
    }
}

因为函数的代码不会立即执行，当调用函数的时候，this已经被绑到调用对象上

obj.go() //=>{go: ƒ}

一个简单对象不需要可迭代，也可以被解构

const obj = {
    name:"Jim",
    lastName:"Gockof",
    age:"99"
};

var {name,age} = obj;//通过与对象属性名相同的变量将值解构出来
console.log(name);
console.log(age);

var {name:aa,age:bb} = obj;//当然也可以改个名字
console.log(aa);
console.log(bb);

利用这个也可以进行数据交换，只不过没有[]方便

var num1 = "num1";
var num2 = "num2";
var {num1:num2,num2:num1} = {num2,num1};

与此同时也可以解构数组

const arr = [1,2,3,4];
var {0:aa,2:bb} = arr;
var {aa,bb} = arr;
console.log(aa);
console.log(bb);

创建块级作用域

{
    let a = 1;
    var b = 2;
    this.a = 111;
    console.log(this);// {}
    console.log("aa:"+this.a); //111
}
//console.log("a:",a);//找不到变量a
console.log("b:",b);

开辟一个临时上下文空间，this绑定到一个默认空对象，这个绑定不会开辟空间
如果当前临时上下文空间找不到变量，就会到上一层上下文空间去找

for循环创建块级作用域

for(var i=0;i<3;i++){
    console.log(i);
}

这样写是不会创建块级作用域的：

for(var i=0;i<3;i++){
    setTimeout(()=>{
        console.log(i);
    },500)
}//输出3个20
i = 20;

setTimeout函数一往外找变量就是全局上下文了
所以得用let声明变量，就会生成块级作用域：

for(let i=0;i<3;i++){
    setTimeout(()=>{
        console.log(i);
    },500)
}

其实就相当于：

for(var i=0;i<3;i++){
    {
        let a = i;
        setTimeout(()=>{
            console.log(a);
        },500)
    }
}

回顾块级作用域的创建，创建临时上下文，不需要开辟空间，
如果使用函数空间解决问题，函数会创建新空间，创建新的上下文，数量少还好，数量多了，性能太差。
如下比对：

console.time("a");
for(var i=0;i<=100000000;i++){
    {
        if(i == 100000000){
            console.log(i);
        }
    }
}
console.timeEnd("a");//a: 87.717ms

console.time("a");
for(var i=0;i<=100000000;i++){
    (()=>{
        if(i==100000000){
            console.log(i);
        }
    })(i);
}
console.timeEnd("a");//a: 573.49ms

性能上，块级作用域好很多，匿名函数差
可读性上，匿名函数不见得多好，块级作用域可以不会太差