【0.4 - 前端基础】ES6简单了解，var、let、const的区别

目录

0.前端基础

【0.1 - 前端基础】前端开发，工具推荐与环境搭建
【0.2 - 前端基础】Node.js安装与简单使用
【0.3 - 前端基础】NPM包管理器常用命令
【0.4 - 前端基础】ES6简单了解，var、let、const的区别
【0.5 - 前端基础】Babel转码器
【0.6 - 前端基础】模块化开发
【0.7 - 前端基础】Webpack打包
【0.8 - 前端基础】Mock实现模拟数据

简介

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

var、let、const的区别

简单的说，var没有加任何的限制，let有了作用域、声明限制、变量提升的限制（更像java的变量了），const是常量。

具体区别如下：

1. 局部作用域

// var 声明的变量没有局部作用域
// let 声明的变量有局部作用域
{
	var a = 1
	let b = 1
}
console.log(a)
console.log(b)
//a可以运行，b会报错

2. 声明次数

// var 可以声明多次
var a = 1
var a = 2
// let 只能声明一次
let b = 1
let b = 2
console.log(a)
console.log(b)

3. 变量提升

// var 会变量提升
console.log(a)
var a = 1
// let 不存在变量提升
console.log(b)
let b = 1

4. const必须初始化且只能初始化一次

//const必须初始化
const a

//const只能初始化一次
const a = 3.14
a = 3

ES6新特性

1. 解构赋值

//传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
//ES6
let [d, e, f] = [1, 2, 3]
console.log(d, e, f)
//可嵌套
let [g, [[h],i]] = [1,[[2],3]]
console.log(g, h, i)
//结构对象
let user = {name:'超快是我的小名',age:24}
//传统
let usual_name = user.name
let usual_age = user.age
console.log(usual_name,usual_age)
//ES6
let {name,age} = user //解构的变量必须和user中的属性同名
console.log(name,age)

更多参考：菜鸟教程 - 解构赋值

2. 箭头函数

//语法：参数 => 函数体
let sum_one = (a,b,c) => {
	return a + b + c
}
console.log(sum_one(1,2,3))
//再缩减
let sum_two = (a,b,c) => a + b +c
console.log(sum_two(1,2,3))

3. 声明对象简写

const num = 123
const text = 'Text'
// 传统
const const1 = {num:num, text: text}
console.log(const1)
// ES6
const const2 = {num, text}
console.log(const2)

4. 其它

//变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式
let name = 'ECMAScript'
let info = `Hello,${name}`
console.log(info)

//方法定义简写
const funA = {
	test:function(){
		console.log('hello')
	}
}
//ES6
const funB = {
	test(){
		console.log('hello')
	}
}

//对象拷贝
let demo = {name:'超快是我的小名',age:1}
let demo2 = {...demo}

//默认函数
function demoInfo(a,b = '超快是我的小名'){
  console.log(a + ',' + b)  
}
// null 值被认为是有效的值传递，只有在未传递参数，或者参数为 undefined 时，才会使用默认参数。
demoInfo('你好', 'wlx')
demoInfo('你好')
demoInfo('你好', undefined)
demoInfo('你好', null)

更多函数使用请参考：ES6教程、github开源项目es6tutorial