ES6入门笔记整理

看了看ES6，发现前端没有我想象的那么简单……慢慢学习吧

附GitHub源码地址

7.16再次看pink老师的讲解视频笔记再整理

ES6：

ECMAScript是JavaScript的标准，JS是ES的实现，主流实现只有JS，所以很多时候JS就等同于ECMA

正式名称：ES2015，是ECMA标准的第六版

ES6语法特性：

变量
新的声明方法

//不能重复声明，块级作用域
let		变量
const	常量

ES6简介

为什么使用ES6?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

let

ES6中新增的用于声明变量的关键字

• let声明的变量具有块级作用域【可以防止循环变量变成全局变量】
• 不存在变量提升【只能先声明再使用】

两者输出的都是全局变量i的值2 2

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值。答案为0 1

const

作用：声明常量，常量就是值（内存地址）不能变化的量

• 具有块级作用域
• 声明常量时必须赋值
• 常量赋值后，值不能修改
  

解构赋值

1. 两边的结构必须一样
2. 右边必须是个东西
3. 赋值和结构必须同时完成

json={a:12,b:5};
let {a,b} = json;

arr=[12,5,8];
let [a,b,c]=arr;

$.ajax('xxxx')=>
{
	code:xx,
	data:xx,
	msg,
	xxx
}
let {code,data} = $.ajax('xxx');

函数

箭头函数：ES6中新增的定义函数的方式，是用来简化函数定义语法的

1. 有且仅有一个参数，()也可不写
2. 如果有且仅有一个语句，并且是return，{}也可不写
3. 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

function (){
}

()=>{}

const fn = () => {}
fn();

obj是个对象，不能产生作用域，所以箭头函数被定义在了全局作用域下，在调用say方法是this指向window，window没有age属性，所以弹出undefined

修正this

参数扩展 数组展开 json展开 -> 收集 展开

原生对象扩展

Array扩展：
map 映射 一一对应
[68,59,90] => [及格，不及格，及格]
reduce n=>1
filter 过滤
forEach 遍历

模板字符串
返单引号``，将输出字符括起来

let arr=[68,53,12,98,65];
arr.forEach((item,index)=>{
     // alert("第"+index +"个:"+item);
     // 返单引号``
     alert(`第${index}个:${item}`);
});

默认分隔符是逗号，

利用扩展运算符将伪数组转换为真正的数组

var oDivs = document.getElementByTagName('div');// oDivs是伪数组
console.log(oDivs);
var ary = [...oDivs];// ary是一个真正的数组
console.log(ary);

String的拓展方法

Set数据结构

可以用来做数组去重

json写法 json对象

json必须用双引号

JSON.stringify();		序列化			json->对象
JSON.parse();			反序列化		对象->json

babel编译

nodejs安装
因为之前安装过了，所以没有尝试过，但是看上面有修改保存路径的，感觉挺好的hhh

在线：

1. 引入browser
2. type=“text/babel”

本地：

1. 安装node
2. 创建一个默认的工程
   创建目录: babel 打开命令行进入项目根目录，输入 npm init -y 创建一个默认的工程
   文件路径不能有中文，如果有中文会提示安装失败
   正确后显示

Wrote to D:\vscode\ES6\2_babel\package.json:

{
  "name": "2_babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build":"babel src -d dest"//这句话是新添加的！如果复制记得删除注释w
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4. 安装babel
   npm i @babel/core @babel/cli @babel/preset-env
   npm i @babel/polyfill
5. 添加脚本
   “build”:“babel src -d dest”
6. 添加配置

{
    "presets":[
        "@babel/preset-env"
    ]
}

6. 执行
   npm run build
   这是配置了之后的编译

原js文件

let a=12;
let b=5;

let sum=(n1,n2)=>n1+n2;

alert(sum(a,b));

编译后js文件

"use strict";

var a = 12;
var b = 5;

var sum = function sum(n1, n2) {
  return n1 + n2;
};

alert(sum(a, b));

异步操作

异步操作——ajax

• 异步操作：同时进行多个操作，用户体验，代码混乱
• 同步操作：一次只能进行一个操作，用户体验不好，代码清晰

异步同步相融合：
Promise

1. 封装
2. promise.all{[ p1, p2,…]}.then
3. promise.race，运行最快的那个，如果都失败才运行错误的

async/await

• 普通函数——一直执行，直到结束
• async函数——能够"暂停"

// async/await

async function show{
	xxx;
	xxx;
	
	let data=await $.ajax();
	
	xxx;
}

show();

面对对象，模块化

面向对象语言发展：
机器语言->汇编语言->低级语言（面向过程）->高级语言（面向对象）->模块系统->框架->系统接口（API）

封装

• ES5面向对象（假的） 没有统一的写法

• ES6面向对象（假的） 统一的写法

  继承：

• 省事

• 便于扩展

  ES6新加：

• class 类声明

• constructor 构造函数

• extends 继承

• super 父类/超类

ES5代码

// 使用函数的形式来写对象
        function Person(name,age){
            this.name=name;
            this.age=age;

            this.showName=function (){
                alert(this.name);
            };
            this.showAge=function (){
                alert(this.age);
            }
        }

        // 添加方法
        // Person.prototype.showName=function (){
        //     alert(this.name);
        // };
        // Person.prototype.showAge=function (){
        //     alert(this.age);
        // }

        // let p=new Person("niko",20);
        // p.showName();
        // p.showAge();


        function Worker(name,age,job){
            Person.call(this,name,age);
            this.job = job;
        }
        Worker.prototype=new Person();
            Worker.prototype.constructor=Worker;

            Worker.prototype.showJob = function (){
                alert(this.job);
            }

            let w = new Worker("niko",20,"dududu");
            w.showName();
            w.showAge();
            w.showJob();

ES6代码

class Person{
            // 有单独的类的声明，构造函数声明
            constructor(name,age){
                this.name = name;
                this.age = age;
            }

            showName(){
                alert(this.name);
            }

            showAge(){
                alert(this.age);
            }
        }

        // let p=new Person("niko",20);
        
        // p.showName();
        // p.showAge();

        class Worker extends Person{
            constructor(name,age,job){
                super(name,age);
                this.job = job;
            }
            showJob(){
                alert(this.job);
            }
        }

        let w = new Worker("niko",20,"dilili");
        w.showName();
        w.showAge();
        w.showJob();

webpack

webpack安装

模块系统
定义
使用

1. 导出（export）

//变量
export let a=1;
//一组变量
let a,b,c=...;
export {a,b,c,...};

//函数
export function show(){
	......
}
//类
export calss Person{
	.......
}
//默认成员
export default xxx;//xxx可以是数字，函数，等等任何东西

2. 导入

import * as model from xxx          //引入所有成员
import model from xxx               //引入default成员
import {a,b as name} from xxx		//as起别名

//只引入，不使用，如可引入css
import 'xxx'
//异步引入,简化代码体积
let p=import("./model");

3. webpack编译

ES7/8/9预览

ES7(ECMA-2016):
ES7官方文档

1. 幂操作

alert(Math.pow(3,5));
alert(3**5);

2. Array.includes()

ES8(ECMA-2017):
ES8官方文档
async/await

ES9(ECMA-2018):
ES9官方文档
rest/spread
异步迭代
Promise.all/race/finally
增则表达式

~

附在最后
搜集了一些能够帮助理解的文档
小白学前端——Babel、模块化与webpack
npm全局安装和局部文件安装区别
ECMAScript 6 入门
ES6 入门文档 感觉这个看起来舒服一些