ES6声明变量的6种方法

Axjy
449 阅读1分钟

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

基础知识常学常新系列！🙉

let 命令

声明变量的命令

  • 不存在变量提升

  • let声明的变量只在它所在的代码块有效。

    如:`for`循环的计数
for (let i = 0; i < 10; i++) { // ...}
console.log(i);
// ReferenceError: i is not defined

  • 暂时性死区（temporal dead zone，简称 TDZ）

    var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
//虽然先声明了tmp，但是块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

  • 同一个作用域不可使用 let 重复声明同一个变量。

    这段代码的输出结果是？
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

const命令

除了不能改变物理指针的特性，其他特性和let一样

  • const声明一个只读的常量。一旦声明，常量的值就不能改变。(这是针对简单的数据类型而言的)

    const PI = 3.1415;
PI // 3.1415

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

  • 声明复杂数据类型的时候，物理指针不可改变，但是可以改变数据内的属性值，以及可以给数据添加新属性等操作。

image-20220207220306058

  • const一旦声明变量，就必须立即初始化

    image-20220121000635363

import命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

这之前有说过详细的 👉 前端的模块化机制

class命令

声明类的命令

ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

  • constructor()方法是类的默认方法

    class Point {}
// 等同于
class Point {
  constructor() {}
}

//一个类必须有`constructor()`方法，如果没有显式定义，一个空的`constructor()`方法会被默认添加。

  • 类必须使用new调用，否则会报错

    image-20220121001943224

  • 在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

    class MyClass {
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

image-20220121002541033

var命令

声明变量的命令

  • var声明的变量可以提升。（这个现在应该用的少了。）

function命令

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

👉 细说JavaScript函数的三种创建方式

参考资料：let 和 const 命令

🎨【点赞】【关注】不迷路，更多前端干货等你解锁

往期推荐

👉 JavaScript的Proxy代理怎么用？

👉 JS中的getter和setter你会用吗？

👉 深入理解ES6箭头对象

👉 JS的装饰器模式实例分析

avatar
文章
阅读
粉丝