ES 6 基础
注意：在看这一文档之前我已经是默认你们已经可以熟练的使用HTML，CSS，JavaScript的了，es 6是现代前端语法的规范，所以当你没有前端三剑客的基础知识 我希望你们可以先去掌握了再来学习es 6
常量和变量
-
let声明 可以做出修改
-
const声明 表示常量 不可被修改
-
块级作用域：可以使用{}在里面写专属于这一块的代码 在{}外面就不受到此块的影响
例如：
{
let a =2
a++
}
console.log(a)
此时 控制台时报错的 因为a只在块级中被定义了 在块级定义域外面是不受影响的
模板字符串
在原来的js当中 我们连接字符串的时候一般是这样子的
const str1 = 'abc' + 'efg'
但是在Es6当中我们可以这样子写
const str2 = 'efg${str1}'
看见了吗 这个${}的写法是不是很方便 请记住这种写法可以引入外部的变量
当然你换行也可以 比如这样子
const str2 ='efg${str1}
这也是字符串
'
那么控制台输出时候就会是
'efg${str1} 这也是字符串 '
所以你明白了吗！
解构赋值
首先我们先来说一下数组的解构赋值
传统的数组书写应该是这样子的 一步一步的
const arr = [1,2,3]
var v1 = arr[0]
var v2 = arr[1]
console.log(v1,v2)
但是其实这样子太繁琐了 所以Es6就推出了一种新写法就是这样子
const [v1,v2,v3] = [1,2,3]
console.log(v1,v2,v3)
看见了吗 这样子是不是便利了很多 所以在以后的学习和工作中大家也要有这样的简化思想 让我们把精力主要放在重要的地方
现在我们来讲一下对象的解构赋值
传统的对象书写也是一步一步的 like that：
const pzt = {
name:'pzt',
age:'19'
gender'male'
}
但是使用了解构赋值后就是这个样子
const{userName，age：userAge,gender} = {
name:'pzt',
age:'19'
gender:'male'
}
console.log(userName,userAge,gender)
大家注意一下这个age：userAge这里，是什么意思呢 其实就是我不想使用age这个名称来当作age属性 所以我使用了一个别名userAge 所以你看在下面console.log()这里我也是直接引用userAge这个别名来输出的。
当然还有一种写法 我也来给大家介绍一下
const{userName，age：userAge,...otherInfo} = {
name:'pzt',
age:'19'
gender:'male'
hobby：'basketball'
}
console.log(userName,userAge,otherInfo)
有没有发现什么不同 没错 就是新添加了一个属性hobby但是在定义的时候我使用了...otherInfo 这里其实就是使用...来获取剩下没有被引用的属性 但是在console.log（）这里引用时就不需要加... 直接otherinfo即可。
数组和对象的扩展功能
扩展运用符
好那么我们就直接上代码演示
const arr1 = [1,2,3]
const arr2 = [4,5,6]
那么我现在有一个需求就是要新建一个数组使得数组里面是arr1和arr2数组的合并，那么我们应该怎么操作呢，下面我来告诉你
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1,...arr2]
console.log(arr3)
这样子即可，你发现了吗 扩展运用符其实和我们上面讲的剩余属性引用的写法其实是一样的 但是不同的是此时扩展运用符其实是在=后面
所以当你看见有代码是这样子写的时候 就不要有疑惑 其实只是合并在了一起而已 当然你想在arr3后添加其他元素元素也是可以的 只需要加个，再写你想写的元素即可
同时对象也是可以使用这个扩展运用符号的 我就不做过多的赘述 你们自己看代码就可以看的明白
const obj1 = {
a:1
}
const obj2 = {
b:2
}
const obj3 = {
name:'pzt',
...obj1,
...obj2
}
数组方法
举个很简单的例子 arguments就是一个伪数组 它们具有length属性和数字索引，但没有数组方法
那么Es6就有一个数组方法叫做Array.from()可以将伪数组转为数组从而可以使用数组方法
function fn (){
Array.from(arguments).forEach(function (item){
console.log(item)
})
}
在这里你就可以发现arguments使用了Array.from()方法后可以使用forEach方法了
可能有人会有疑问 这个function （item）是啥意思 其实这是一个匿名函数 让每遍历一次就执行一次此函数
在Es6中 你可以使用上面所讲的剩余参数全面代替这个arguments
function fn (...Ifon){
Ifon.forEach(function (item){
console.log(item)
})
}
看见了吗 完全就不需要Array.from这个方法 但是为什么需要你知道这个方法呢 因为 伪数组不止arguments这一种
所以你还是要了解的 只不过我为了好解释才这样子和你说
对象的方法
现在我们介绍一个新增的方法就是Object.assign()方法
这个方法有两个功能
1.可以浅拷贝一个对象
2.可以将两个对象合并在一起成为一个新的对象
我们先介绍第一个方法：
const objA={
name = 'pzt',
age = 18
}
const objB = Object.assign({},objA)
//在这里我们修改他的属性来展示objA和objB是两个截然不同的数组 只不过objB是从objA里拷贝而来
objB.name = 'a'
console.log(objA,objB)
你可以复制这段代码自己去试一试
接下来我们介绍第二个方法：
const objA={
name = 'pzt',
age = 18
}
const objB={
gender = 'male'
}
consy objC = Object.assign({},objA,objB)
console.log(objC)
此时控制台输出的便是两个数组合并在一起的新数组
Class
好的接下来我们开始讲Es 6中Class的方法 如果学过了Java和Python的同学就会一点就通
其实就是构造方法 没什么区别
class A{
constructor(name,age){
this.name
this.age
}
read(){
console.log('阅读')
}
}
const a1 = new A('pzt',18)
A.read()
你看 其实和Java是一模一样的
现在我们再介绍一个和Java一样的东西：继承
在class里面也是可以继承的
class B extends A{
constructor (name,age,gender) {
super(name,age)
this.gender = gender
}
sayHello(){
console.log('hello')
}
}
你看见了吗 和Java一点区别都没有 没错就是这么爽！
（是不是有种见到亲人的感觉 反正我学的时候我就觉得：卧槽太爽了 终于有自己能看懂的东西了）
ok 我们开始下一节的学习
箭头函数
箭头函数可是一个好东西 你会用了之后就很上头了
按照传统的写法
const getSum1 = function (n){
return n+3
}
console.log (getSum1)
应该是这样子的 但是我用箭头函数 一行就写完了
const getSum1 = n => n+3
console.log(getSum1)
是不是想大喊一句卧槽 没错 箭头函数就是这么容易 当然这只是对于你的函数逻辑简单一点的写法 如果你的函数复杂一点你就可以这样子写
const getResult = arr => {
let sum = 0
arr.forEach(item => sum += item)
return sum
}
console.log(getResult([1,2,3,4,5]))
看见没 就是如此的简单
然后你想调用getResult函数的时候直接写getResult()即可
本章结束！！完结撒花 接下来我会再写一个关于Es6异步处理的md
