前端之ES6浅学习

松鼠先生

发布于 2022-02-22 07:00:18

30400

代码可运行

运行总次数：0

代码可运行

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);