前端之ES6浅学习
ES6我没有学完，毕竟JS我也才过了一遍基础，其实我也就跟着B站的Pink老师的视频学了一下CSS和JS，而且是跳跃式的学习，毕竟我不是前端，估计也不会以前端为职业。仅仅是为了兴趣，所以jQuery这等老爷爷级别的框架我就没学了，毕竟我不会维护老的项目。我学前端大概率就是从0-1搭建网站而已。
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
说人话就是ES6是JS的增添版，目的是为了使得JS更健壮而出来的。为什么要学它呢？因为JS有些语法太反人类，可能是反我这种小白，而ES6里好多新特性都真香。
一、let/const VS var
JS一直都是使用var，var的弊端就是作用域问题。首先说说我觉得的重要的区别：
- var会有声明提前，let不会
- var是全局作用域，let是块级作用域
var的声明提升貌似称为变量提升，就是无论你在哪里定义的var a；都会把a的声明编译时放在最前面。这里要重点提示一下，var a = 1;前面var a是声明，= 1是赋值。变量提升，仅仅是提升了var a。并没有提升赋值。下面代码就是所谓的变量提升。
console.log(a); //此时显示a为undefined
var a = 1;
//变量提升即为
var a;
console.log(a); //打印为undefined
a = 1;
//let不提升和
console.log(b); //直接报错
let b = 1;接下来讲一下var 的全局作用域和let的块级作用域的区别。直接上代码吧，通俗易懂。
if(true){
var a = 1;
}
console.log(a); //打印1
//let作用域展示
if(true){
let b = 1; //b的作用域仅仅是在if条件内
}
console.log(b); //报错，提示b没有定义。看完代码可以看到，全局内只要使用var声明了a，a就存在，是全局作用域。而let声明的是块级作用域，这里主要解决了ES5里面if和for等没有块级作用域，引入let之后就可以解决这个问题，从而不需要依赖函数的作用域了。这里需要注意的是在函数内，如果是想声明并赋值一个变量，一定要有声明（即var）不然该变量会变成全局变量。
ES6里面const用于定义常量。需要注意一下几点：
- const修饰的标识符为常量，不可以再次赋值
- 在使用const定义标识符，必须进行赋值
- 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。比如const app = new Vue({})里面的数据是可以修改的
二、ES6对象字面量增强写法
这里依然复习一下在JS里如何创建对象，有三种方式：
那么对象字面量增强，我们也得先了解一下什么是对象字面量法，无代码无真相，如下。
const person = {
name: 'll',
age: 18,
run: function(){
console.log('running')
},
eat: function(){
console.log('eating')
}
}这种是直接声明定义，假如我们需要添加性别属性怎么办？或者说我们声明对象的时候，还没想好是名字到底用哪个。还有字面量增强写法到底是什么呢？
//ES5写法
const name = 'll';
const age = 18;
const obj = {
name: name,
age: age
}
//ES6写法
const name = 'll';
const age = 18;
const obj = {
name,
age,
run(){
console.log('runnning');
}
}其实字面量增强说起来超级简单，就是以前在{}里面定义属性需要key: value型，现在在外面定了常量，直接使用key就好了。说到底，字面量增强只是简化了对象声明时的写法。不管用哪种，只要自己顺手都行。
三、ES6模块导入和导出
导入和导出使用的是import和export，接下来看看代码，感觉跟python很像。
导出：
//导出变量/常量
export var age = 18;
export var name = 'll';
export const sex = male;
//导出类
export class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
}
//导出函数
export function add(num1, num2){
return num1 + num2;
}
导入：导入可以全部一起导入，也可以导入某几个，也可以指导入一个
//全部导入
import * as example from './example.js';
//导入几个
import {add, Person, age} from './example.js'
//导入一个
import {add} from './example.js'此外还有默认导出:
function add(num1, num2){
reutrn num1 + num2;
}
export default add;导入默认导出的方式跟普通导出是一样的。
四、ES6箭头函数
箭头函数是什么？直接上代码吧
//箭头函数
let ccc = () => {}
//两个参数的箭头函数
const sum = (num1, num2) => {
return num1 + num2;
}
//一个参数时的箭头函数，可以省略()
const power = num => {
return num * num;
}
//只有一行代码的箭头函数，可以省略return自动返回
const mul = (num1, num2) => num1 * num2;
//只有一行代码，只有一个参数的箭头函数
const power = num => num * num;够简单的吧？必然小括号里面就是形参，{}里的就是函数内部代码，ccc是函数名。上面代码接下来展示了两个参数时的形式，这也是标准形式。但是ES6处处替程序猿着想，该简写的一定能让你简写，简直太贴心了。但凡有一就可简写，只有一个参数时，可以省略括号，只有一行代码时，可以省略return。那么只有一个参数，一行代码，必然就是最后一个啦。要不是有个=>简直简略到认不出来了。
五、ES6的高阶函数
5.1 filter()
主要作用：过滤，返回一个数组
形参为回调函数，该函数的参数为要过滤数组的每一个元素，该回调函数必须返回boolean值，返回true时，将该元素加入新的数组中，返回false时，回调函数内部会过滤掉这次的元素
let nums = [1,2,3,4,5,6,7,8];
let newNew = nums.filter(function(item){
return item < 4;
})
//newNew为[1,2,3];
使用箭头函数简写回调函数
let newNew = nums.filter(item => item < 4)5. 2 map()
主要作用：将原来数组做一些操作输出新的数组
let nums = [1,2,3,4,5,6,7,8];
let numNew = nums.map(item => item * 10);
console.log(numNew);5.3 reduce()
主要作用：对数组里的元素进行汇总
输入：两个参数，第一个参数是一个回调函数，该回调函数有两个参数，回调函数的第一个参数为输入数组的当前元素的上一个元素，回调函数的第二个参数为输入数组的当前元素。reduce的第二个参数为初始值。下面代码实现累加：
let nums = [20, 40, 60, 80];
//reduce实现累加
let total = nums.reduce((prev, cur) => prev + cur, 0);
console.log(total);
//reduce实现累乘
let sum = nums.reduce((prev, cur) => prev * cur, 1);
console.log(sum);