js声明变量的方式

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

JavaScript中可以通过var、let、const、function、import、class这几种方式来声明变量，下面分别进行介绍：

1、var声明变量

var x = 'global'; //全局变量
function local(){
  var x = 'local variable'; //局部变量
  console.log(x)
}
local() // 'local variable'
console.log(x) // 'global'

var在方法中定义的变量是局部变量，在全局作用域定义的变量是全局变量，var存在变量提升。

2、let声明变量

let命令用于声明变量,let声明的变量是可变的。

let lt= 520;
var lzp= 1314;

lt = 410;
lzp = 1122; 
console.log(lt) // 410

上面代码中，let声明的变量lt是可以重新赋值。

3、const声明变量

const命令用于声明变量，const声明的变量是不可变的。

const lzp= 410;
lzp = 1122; // 报错

上面代码中，如果对lzp声明的变量重新赋值，就会报错。

注意，如果const声明的变量指向一个对象，那么该对象的属性是可变的。

const lt= {
  lzp: 520
};

lt.lzp= 1314;

上面代码中，变量foo本身是不可变的，即foo不能指向另一个对象。但是，对象内部的属性是可变的，这是因为这时foo保存的是一个指针，这个指针本身不可变，但它指向的对象本身是可变的。

4、function声明变量

ES5之前表达形式

function() {}

ES6表达形式

() => {}

ES6允许我们为函数的参数设置默认值，即直接写在参数定义的后面。当参数值为undefined的时候，默认值生效。

function log(x , y = "lutian"){
  console.log(x,y);
}
log('love'); //love lutian
log('love','only'); //love only

5、import声明变量

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

Module 语法是 JavaScript 模块的标准写法，使用import取代require

import { func1, func2 } from 'moduleA';
import { Button } from 'antd';

在导入导出时可以根据需求起别名，方便理解和开发

import {longlonglongName as name} from './moduleA.js';

6、class声明变量

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 ES5类的定义

function Person(x, y) {
  this.name = x;
  this.age = y;
}

Person.prototype.getInfo = function () {
  return '(' + this.name + ', ' + this.age + ')';
};

var info = new Person('lutian', 18);

ES6类的定义

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getInfo() {
    return '(' + this.name + ', ' + this.age + ')';
  }
}

typeof Person // "function"
Person === Person.prototype.constructor // true