1.前端技术栈与后端技术栈的类比

image.png

2.ES6是什么

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
由于一些历史原因，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。
ECMAScript是浏览器脚本语言的规范，而各种js语言，如JavaScript则是规范的具体实现，类似于JDBC是标准，各种驱动如mysql则是实现
ES6文档

3. ES6新特性

3.1 let声明变量与var的区别

-var 声明的变量往往会越域
-let声明的变量有严格的局部作用域

{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b);//Uncaught ReferenceError: b is not defined

-var可以声明多次
-let只能声明一次

var m = 1;
        var m = 2;
        let n = 3;
        let n = 4;

        console.log(m);//2
        console.log(n);//Uncaught SyntaxError: Identifier 'n' has already been declared

-var 会变量提升
-let 不存在变量提升

        console.log(x);//undefined
        var x = 10;
        console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initialization
        let y = 20;

3.2 const声明常量（只读变量）

        const a = 1;
        a = 0;//Uncaught TypeError: Assignment to constant variable.

3.3 结构表达式

数组结构

        //数组结构
        let arr = [1,2,3];
        // 传统赋值方式
        let a = arr[0];
        let b = arr[1];
        let c = arr[2];

        // es6
        let [a,b,c] = arr;

        console.log(a,b,c);

对象结构

const person = {
            name: "abc",
            age:21,
            language: ["java","js","css"]
        }
        //传统方式
        const name = person.name;
        const age = person.age;
        const language = person.language;
        //es6新特性
        const {name,age,language} = person
// 给name重命名
const {name:abc,age,language} = person
        console.log(name,age,language);

3.4 字符串扩展

A. 扩展几个API

image.png

B. 字符串模板

image.png

image.png

3.5 函数

A. 给参数设置默认值

        //es6以前，无法给一个函数参数设置默认值，只能采用变通写法
        function add(a,b){
            b = b ||1;
            return a+b;
        }
        //只传一个参数
        console.log(add(10));// 11

        //es6的写法，直接给参数写上默认值，没传就会自动使用默认值
        function add2(a,b=1){
            return a+b;
        }

        console.log(add2(20));// 21

B. 给函数设置不定参数

// 不定参数
        function fun(...values){
            console.log(values.length);
        }

        console.log(fun(1,2));//2
        console.log(fun(1,2,3));//3

C. 箭头函数

 //箭头函数
        //es6以前的声明方法
        var print = function (obj){
            console.log(obj);
        }
        // es6 
        var print = obj => console.log(obj);

        print("hello");
       //------------------------------
        // 多参数
         //es6以前
        var sum = function(a,b){
            return a+b;
        }
        //es6
        var sum2 = (a,b) => a+b;

        console.log(sum2(1,2));

        //es6以前
        var sum3 = function(a,b){
            c = a+b;
            return a+c;
        }

        //es6
        var sum4 = (a,b) => {
            c = a+b;
            return a+c;
        };

        console.log(sum4(1,2));

D. 箭头函数+解构

        // 箭头函数+解构
        const person = {
            name: "abc",
            age:21,
            language: ["java","js","css"]
        }
        // 常规方式
        var fun1 = (param) => console.log("hello,"+param.name);
        // 箭头函数+解构方式
        var fun2 = ({name}) => console.log("hello,"+name);

        fun1(person);
        fun2(person);

3.6 对象优化

A. 新增许多新方法

image.png

B. 声明对象简写

const age = 23;
        const name = "zhangshan";
        //传统声明对象方式
        const person = {name:name,age:age}
        //es6
        const person1 = {name,age}

C. 对象的函数属性简介

image.png

D.对象扩展运算符

image.png

3.7 map、reduce方法

A. map方法

image.png

B. reduce方法

image.png

image.png

3.8 Promise

image.png

image.png

使用Promise优化

image.png

image.png

3.9模块化

image.png

B. import导入

image.png

image.png