ES6详解大全

1、const / let

1. 不会造成变量提升

console.log(a)//undefined
var a = 1

console.log(a,b)//报错
const a = 1
let b = 1

2. 相对与 var 新建块级作用域

if(true) {
	var a = 1
} 
console.log(a)//1

if(false) {
	let a = 1
	const b = 1
}
console.log(a,b)//报错

3. const 表示定义一个常量，也就是不能改变其定义的变量值

const a =1
a = 2//报错

但其实这样理解不太准确，应该说不能改变变量地址值

比如说

const a = 1 
a = 2 //报错
b = {}
b.a = 1//不报错

因为操作对象的过程中，只改变对象的属性，并没有改变变量的指向地址值，所以不会报错
因为这一机制，const在声明变量的时候就需要初始化变量

2、模板字面量

简单，方便的语法

es5用的是双引号 “” 或者单引号 ‘’ 。

var a = "asd"
var b = 'nvi'
var c = a+b+'sadasd'

模板字面量用的是反引号也就是 `` 。
可以用 ${} 来实现 + 的操作

var a = `asd`
var b = `nvi`
var c = `${a}${b}sadasd`

${}中还可以进行简单的计算

var a = 1
var b = 2
function sum(a, b) {
	return a + b
}
console.log(`${a + b}===${sum(a, b)}`)//"3===3"

还可以实现换行操作

var a = `asdasdas
asdasdasd`
//等同于
var a = 'asdasdas\nasdasdasd'

还可以实现传参的操作

var fn = function() {
	//arguments[0]是数组里面有两个字符串代表${a}前的字符串和${a}后的字符串
	console.log(arguments[0].join('')+arguments[1])
	//arguments[0].raw中的字符串是将特殊符号写出来的
}
var a = `123`
fn `${a}abc`
//输出123abc

3、展开运算符

可以将数组或类数组或对象拆开传参...

比如

var a = ['a','b','c']
//它传入数组并展开
var b = [...a,1,2] // ['a','b','c',1,2]
//也可以传入函数并展开
function c(a,b,c) {
	console.log(a,b,c)
}
c(...a)//'a' 'b' 'c'

比如类数组

//将类数组转化为真正的数组（就可以调用数组的方法）
function a(c, d){
	console.log([...arguments])
}
a(1, 2)//[1, 2]

再比如对象

//对象的浅拷贝
var a = {b:1, c:2}
var d = {...a}
console.log(d)//{b:1, c:2}
console.log(d === a)//false

//对象的合并
var a = {b:1, c:2}
var e = {f:1, g:2}
var d = {...a,...e}
console.log(d)//{b:1, c:2,f:1, g:2}

但是不可以这样赋值

function a(b, c) {
	console.log(b, c)
}
var d = {f:1, g:2}
a(...d)//报错，可能因为arguments是一个类数组吧

4、可变参数

可以使传入的参数数量可变...,也就是把传进来的参数组合在一起变成一个数组，不管传多少个参数，都变成一个数组

案例

function a(c,...b) {
	console.log(c)
	console.log(b)
}
a(1,2,3,4,5,6)//1 [2,3,4,5,6]

5、默认参数/值

有时候想要给参数设置默认值，使这个参数可以不填也可以填

案例

function a(d, b = 1, c = 2){
	console.log(d,b,c)
}
a(3, 4)//3 4 2

6、解构赋值

方便拿去属性值或者初始化变量

案例

1、数组的解构赋值

//按照索引一个一个赋值下去，如果没有值给一个变量赋则为undefined
 var [a, b, c] = [1,2]
 console.log(a, b, c)//1 2 undefined

骚操作1(变量互换)

var a = 1, b = 2
//一行代码搞定变量互换
var [a, b] = [b, a]
console.log(a, b)//2 1

骚操作2(默认值)
第五条中的默认值可以在这里用到，防止变量没有赋值而变为undefined,也只有赋的值为undefined时会取默认值

var [a, b, c = 3] = [1, null]
console.log(a, b, c)//1 null 3

骚操作3(字符串赋值)

let [a, b, c, d, e] = "hello"
console.log(a,b,c,d,e)//h e l l o

2、对象的解构赋值

//对象是根据变量名一个一个赋值下去的
var {a, b} = {a:1, b:2}
console.log(a, b)//1 2
//和顺序没有关系
var {c, d} = {d:1, c:2}
console.log(c, d)//2 1
//也可以这样赋值
var e = {f:1, g:2}
var {f, g} = e
console.log(f, g)//1 2

骚操作1(提取字符串长度)

let {length} = "hi"//2

7、对象简写

能让对象书写起来更加简单，简洁

//es6
var a = 1
var b = 2
var c = {a, b}

等同于

//es5
var a = 1
var b = 2
var c = {a : a, b : b}

8、es6继承与类

参考类与继承

9、箭头函数

参考箭头函数及this

10、import与export

参考模块化详解