ES6详解大全
1、const / let
- 不会造成变量提升
console.log(a)//undefined
var a = 1
console.log(a,b)//报错
const a = 1
let b = 1
- 相对与 var 新建块级作用域
if(true) {
var a = 1
}
console.log(a)//1
if(false) {
let a = 1
const b = 1
}
console.log(a,b)//报错
- 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
参考模块化详解