es6 —— let和const命令以及变量的解构赋值

不念不忘少年蓝@ 2023-06-09 15:25 15阅读 0赞

##### 一、 let和const命令 #####

###### 1. let命令 ######

> ① let命令的用法类似于var，但其所声明的变量只在let命令所在的代码块内有效

{ 
    let a=0;
    var b=1;
    for(let i=0;i<5;i++){ }
    console.log(i);//i is not defined
    }
    console.log(a);//a is not defined
    console.log(b);

> ② 用var定义的变量在for循环的函数中每次只能取得最终值，而用let定义的变量在for循环的函数中可以取得不同的i值

var a=[];
    for(let i=0;i<5;i++){ 
    	a[i] = function(){ 
    		console.log(i);
    	}
    }
    a[3]();//3

> ③ 不存在变量提升

console.log(foo);//undefined
    var foo = 2;
    console.log(bar);//报错ReferenceError
    let bar  = 1;

> ④ let不允许在同一作用域内重复声明同一个变量（var和let分别声明也不行  
> ）

function func(arg){ 
    	let arg;
    }
    func();//报错
    function func(arg){ 
    	{ 
    		let arg;
    	}
    }
    func();//不报错

> ⑤ let不允许在声明之前使用变量。只要块级作用域内存在let命令，它所声明的变量就"绑定"在这个区域（死区），不会受外部的影响

> ⑥ 若在声明前检测一个变量的类型则会报错。但整个块级作用域都没有声明该变量则检测其类型为undefined。  
> ⑦ 若在一个块级作用域内未声明所需变量，此时会去父块级作用域中查找该变量，若有，则该变量的取值为父级块级作用域中该变量的值  
> ⑧ 块级作用域：在es5中，无块级作用域会有两种麻烦出现：a,内存变量可能会覆盖外层变量。b,用来计数的循环变量泄漏为全局变量

//es5中的两种情况
    var tmp = new Date();
    
    function f() { 
      console.log(tmp);
      if (false) { 
        var tmp = 'hello world';
      }
    }
    
    f(); // undefined（由于变量提升，故tmp值为undefined）
    
    var s = 'hello';
    
    for (var i = 0; i < s.length; i++) { 
      console.log(s[i]);
    }
    
    console.log(i); // 5

//es6
    function f1(){ 
    	let n=5;
    	if(true){ 
    	let n=10;
    	}
    	console.log(n);//5
    }

> ⑨ 块级作用域与函数声明：ES5规定函数只能在顶级作用域和函数作用域之中声明。不能在块级作用域声明。在ES6中，明确允许在块级作用域之中声明函数。但是函数声明语句的行为类似于let，在块级作用域以外不可引用。（注意：ES6浏览器的执行和规定有出入，具体看文档。也是因为这方面故不推荐在块级作用域中声明函数。若确实需要，应写成函数表达式（即将函数赋值给一个变量），而不是函数声明语句（即一般函数声明））  
> ⑩ ES6块级作用域必须有大括号，如果没有大括号，js引擎则认为不存在块级作用域（不存在块级作用域便不可声明变量）

if(true) let x = 1;//报错
    if(true){ //不报错
    	let x=1;
    }

###### 2. const命令 ######

> 本质：const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不能动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址。而对于复合类型的数据（主要是对象和数组），变量指向的是内存地址，保存的只是一个指向实际数据的指针。const只是保证该内存地址是不变的，而对于内存地址中保存的数据是否可变就不能完全控制了

> ① const声明一个只读常量，一旦声明，常量的值不能改变  
> ② const声明的变量不得改变值，即const一旦声明变量就必须立即初始化，不能留到以后赋值  
> ③ const的作用域与let命令相同，只在声明所在的块级作用域内有效。  
> ④ const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。  
> ⑤ 不可重复声明  
> ⑥ 对于下述例子中，若想真正冻结对象，则使用`object.freeze()`方法，此时不可为对象添加属性/方法。除了冻结对象，也可冻结对象的属性

//对于本质中复合类型的例子
    const foo={ };
    foo.prop = 123;
    console.log(foo.prop);//123
    foo = { };// TypeError: "foo" is read-only
    const a=[];
    a.push("hello");//正确
    a.length = 0;//正确
    a=["1"];//错误

//针对⑥的例子
    const foo = Object.freeze({ });
    // 常规模式时，下面一行不起作用；
    // 严格模式时，该行会报错
    foo.prop = 123;
    
    
    //冻结对象的属性
    var constantize = (obj) => { 
      Object.freeze(obj);
      Object.keys(obj).forEach( (key, i) => { 
        if ( typeof obj[key] === 'object' ) { 
          constantize( obj[key] );
        }
      });
    };

###### 3. 顶层对象的属性 ######

> 顶层对象中，在浏览器环境指的是`window`对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。  
> 实际上，顶层对象的属性和全局变量挂钩是有问题的。① 没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）② 程序员很容易不知不觉地就创建了全局变量（比如打字出错）③ 顶层对象的属性是到处可以读写的，这非常不利于模块化编程  
> ES6中，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

var a = 1;
    // 如果在 Node 的 REPL 环境，可以写成 global.a
    // 或者采用通用方法，写成 this.a
    window.a // 1
    
    let b = 1;
    window.b // undefined

###### 二、 变量的解构赋值 ######

> 1.  ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值。这被称为解构。本质上，其属于"模式匹配"。只要等号两边的模式相同，左边的变量就会被赋予对应的值。若解析不成功，则变量的值为undefined
> 2.  在解构赋值中，扩展运算符必须放在最后一个

//模式匹配例子
    //1-1
    let [a,b,c] = [1,2,3];
    console.log(a,b,c);//1,2,3
    
    //1-2
    let [foo,[[bar],baz]] = [1,[[2],3]]
    console.log(foo,bar,baz);//1,2,3
    
    //1-3
    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"
    
    //1-4
    let [x, , y] = [1, 2, 3];
    x // 1
    y // 3
    
    //1-5
    let [x,...y] = [1,2,3,4]
    x//1
    y//[2,3,4]
    
    //1-6
    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []

① 数组的解构赋值

> ① 等号的右边不是可遍历的结构会报错（数组、对象）  
> ② 若左边是多个变量，则右边必须以数组进行赋值  
> ③ 不完全解构：等号左边的模式只匹配一部分的等号右边的数组。（即若右边与左边不匹配也可以解析成功(但格式必须相同，例如：左边是数组，右边是数字，此时无法匹配成功)）

let [x,y] = [1,2,3];
    x//1
    y//2
    let [a,[b],c] = [1,[2,3],4]
    a//1
    b//2
    c//4

> ④ 解构赋值允许指定默认值。只有当赋值为undefined时会采用默认值

let [foo=true] = []
    foo//true
    let [x=1] = [undefined];
    x//1
    let [x=1] = [null];
    x//null

> ⑤ 如果默认值是一个表达值，那么这个表达值是惰性求值的，只有在真正用到时才会求值。

function f(){ 
    //该方法只有在用到时才会执行
    	return "1111"
    }
    let [x=f()] = [1];

> ⑥ 默认值可以引用解构赋值的其他变量，但该变量必须已经声明过。

let [x=1,y=x] = []//x=1,y=1
    let [x=y,y=1]=[]; // ReferenceError: y is not defined

② 对象的解构赋值

> ① 对象的解构与数组有一个重要的不同：数组的元素是按次序排列的，但是对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { foo,bar,baz}={ bar:"123",foo:"345"};
    foo//345
    bar//123
    baz//undefined

> ② 对象的解构赋值，可以将先有对象的方法赋值给某个变量

let { sin,cos} = Math();
    sin(1);//可以求出1的sin值
    let { log} = console;
    log("123");//输出123

> ③ 如果变量名与属性名不一致，必须写成下述例子中的样子。

//1-1
    let { foo:baz} = { foo:'aaa',bar:'sss'};
    baz//aaa
    foo//foo is not defined
    
    //1-2
    let { a:c,b:d} = { b:1,a:3}
     console.log(c,d)//3,1
    
    //1-3
     let { a:c,b:d} = { b:1,c:3}
     console.log(c,d)//undefined,1

> ④ 解构也可以用于嵌套结构的对象。但下述1-1例中不能对p赋值。若相对p赋值必须要如1-2写(注意：要给某一个模式赋值，该模式必须要和等号右边对象中模式相同，否则无法赋值成功)

//1-1
    let obj = { 
    	p:[
    		'hello',
    		{ y:"world"}
    	]
    }
    let { p:[x,{ y}]} = obj;
    x//hello
    y//world
    p// p is not defined
    
    //1-2
    let { p,p:[x,{ y}]} = obj;
    x//hello
    y//world
    p//['hello',{y:"world"}]
    
    //1-3
    const node = { 
      loc: { 
        start: { 
          line: 1,
          column: 5
        }
      }
    };
    
    let {  loc, loc: {  start }, loc: {  start: {  line }} } = node;
    line // 1
    loc  // Object {start: Object}
    start // Object {line: 1, column: 5}

> ⑤ 对象的解构赋值可以取到继承的属性

const obj1 = { };
    const obj2 = {  foo: 'bar' };
    Object.setPrototypeOf(obj1, obj2);
    
    const {  foo } = obj1;
    foo // "bar"

> ⑥ 对象的结构可以指定默认值.默认值生效的条件是:对象的属性的取值为undefined

var { x=3} = { }
    x//3
    var { y=4}={ null}
    y//null
    var { x:y=3}={ }
    y//3
    var { x:y=3}={ x:5}
    y//5
    x//x is not defined

> ⑦ 若要将一个声明的变量用于解构赋值，必须在赋值时带`()`。若不带括号，js引擎会将`{x}`理解为一个代码块。

let x;
    { x} = { x:1}//错误
    ({ x} = { x:1})//正确

> ⑧ 解构赋值允许等号左边的模式中不放置任何变量。该写法语法没有错误，但没有意义。  
> ⑨ 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr=[1,2,3];
    let { 0:first,[arr.length-1]:last}=arr;
    first;//1
    last;//3

> ⑩ 字符串可以解构赋值，是因为字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性进行操作

const [a,b,c,d,e] = "hello";
    a//h
    b//e
    c//l
    d//l
    e//o
    let { length:len} = "hello";
    len//5

> 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let { toString: s} = 123;
    s === Number.prototype.toString // true
    
    let { toString: s} = true;
    s === Boolean.prototype.toString // true

> 函数的参数可以使用解构赋值。函数的参数的解构也可以使用默认值。默认值中两个例子需要注意（1-1,1-2）。在默认值例子中，传来的值替换了等号右边的对象，而默认值在左右不同方。故两个例子有不同的结果

//虽然add函数的参数是一个数组，但在传入参数的时候被解构成变量x和y
    function add([x, y]){ 
      return x + y;
    }
    add([1, 2]); // 3

//默认值
    //1-1
    function move({ x=0,y=0}={ }){ 
    	return [x,y];
    }
    move({ x:2,y:8});//[2,8]
    move({ x:3})//[3,0]
    move({ });//[0,0]
    move();//[0,0]
    
    //1-2
    function move({ x,y}={ x:0,y:0}){ 
    	return [x,y];
    }
    move({ x:2,y:8});[2,8]
    move({ x:3});[3,undefined]
    move({ });//[undefined,undefined]
    move();//[0,0]