笔记十五-前端基础之ES6及其新特性

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
promise进一步封装
image.png
3.9模块化

A. 概念
image.png

B. import导入


image.png

C. export导出
image.png

推荐阅读更多精彩内容