es6学习篇之 let和const命令 、变量的解构赋值

    xiaoxiao2021-08-29  95

    原文出处:http://es6.ruanyifeng.com/

    Babel提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行。

    let命令基本用法

    ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

    let 不像 var 那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。

    只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

    var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } 总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。 if (true) { // TDZ开始 tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceError let tmp; // TDZ结束 console.log(tmp); // undefined tmp = 123; console.log(tmp); // 123 }

    let不允许在相同作用域内,重复声明同一个变量。

    // 报错 function () { let a = 10; var a = 1; } // 报错 function () { let a = 10; let a = 1; }

    const声明一个只读的常量。一旦声明,常量的值就不能改变。

    const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.

    ES6为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。

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

    解构不仅可以用于数组,还可以用于对象。

    var { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"

    如果变量名与属性名不一致,必须写成下面这样。

    var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world'

    字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

    const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"

    (1)变量声明语句中,不能带有圆括号。

    // 全部报错 var [(a)] = [1]; var {x: (c)} = {}; var ({x: c}) = {}; var {(x: c)} = {}; var {(x): c} = {}; var { o: ({ p: p }) } = { o: { p: 2 } };

    可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。

    [(b)] = [3]; // 正确 ({ p: (d) } = {}); // 正确 [(parseInt.prop)] = [3]; // 正确

    变量的解构赋值用途很多。

    (1)交换变量的值

    [x, y] = [y, x];

    上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

    函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

    // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } var { foo, bar } = example();

    解构赋值对提取JSON对象中的数据,尤其有用。

    var jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]

    转载请注明原文地址: https://ju.6miu.com/read-677322.html

    最新回复(0)