ES6学习

最新推荐文章于 2024-05-14 12:51:33 发布
最新推荐文章于 2024-05-14 12:51:33 发布
阅读量410 收藏
点赞数
分类专栏： 学习 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsgjcxy13/article/details/86517173
版权

1、变量
    let     不能重复声明，变量——可以修改，块级作用域
    const    不能重复声明，常量——不能修改，块级作用域


2、箭头函数
    通常写法：
    function func(para1, para2) {
        // do something...
    }
    箭头函数：
    (para1, para2) => {
        // do something...
    }

    简化：
    (1)、如果只有一个参数，可以省略括号()
    (2)、如果{}内只有一个语句，且是return语句，可以省略大括号{}
    eg：para1 => return para1 * 2


3、函数参数
    参数扩展/展开
    (1)、收集参数
        function(para1, para2, ...paras){}
        *Rest Parameter必须是最后一个，paras只是一个名称，可以随意起
    (2)、展开数组
        *展开后的效果，跟把数组的内容写在这里一样
        eg：let arr = [1,2,3];
            let arrs = [...arr, ...arr]; == let arrs = [1,2,3,1,2,3];
    (3)、默认参数,默认参数后面的也必须是默认参数
        function(para1, para2=5) {}
    
    
4、解构赋值
    (1)、左右两边结构必须一样
    (2)、右边必须是正确的存在的结构，例如数组、json等等
    (3)、声明和赋值不能分开，必须在一句话里完成
    eg：let [a,b,c] = [12,5,8];
        let {a,b,c} = {a: 12, b: 5, c: 8};
        let [json, arr, str, num] = [{a:12, b:5}, [1, 2], 'str', 1];
        let [{a, b}, [c, d], e, f] = [{a:12, b:5}, [1, 2], 'str', 1];


5、数组方法
    (1)、map：映射，进入时什么回来的是什么
          eg：let arr = [1,2,3];
              // 这里item是每一个项
              let result = arr.map(item => item * 2); // [2,4,6]
    (2)、reduce：汇总，进去多个出来一个
             eg：let arr = [1,2,3];
                 // beforeResult：每一次return的值，默认第一次是第一个参数，这里就是1，
                 // currentItem：每一个项，从第二个位置开始
                 // index：当前项的索引
                 // 计算平均值
                 let avrg = arr.reduce(function(beforeResult, currentItem, index) {
                        if (index == arr.length - 1) {
                            return (beforeResult + currentItem) / arr.length;
                        } else {
                            return beforeResult + currentItem;
                        }
                     });
                 // 2
    (3)、filter：过滤，符合条件的返回
             eg：let arr = [1,2,3,4,5];
                 let result = arr.filter(item => item % 2 == 0); // [2,4]
    (4)、forEach：遍历


6、字符串
    (1)、两个新方法：startWith，endWith
    (2)、字符串模板、字符串连接、反单引号：
         eg：let content = '内容';
             let str = `<div>{content}</div>`;
             // 可以折行
             let str = `<div>
                            <h1>{content}</h1>
                        </div>`;
    

7、面向对象：
    (1)、class关键字
    (2)、constructor构造器初始化参数   

对比：
        旧写法：
            function User(name, password) {
                this.name = name;
                this.password = password;
            }
            // 原型链上的属性和方法
            User.prototype.eat = '吃东西';
            User.prototype.showName = function() {
                alert(this.name);
            }
            User.prototype.showPassword = function() {
                alert(this.password);
            }
            // 静态属性和方法
            User.say = '说话';
            User.sayHello = function() {
                alert('你好');
            };
            // 使用静态属性和方法
            console.log(User.say);
            console.log(User.sayHello));
            var user = new User('blue', '123456');
            user.showName();
            user.showPassword();

            // 继承
            function VipUser(name, password, level) {
                User.call(this, name, password); // 对象冒充实现继承：如果只写这个，则不会继承原型链上的属性和方法

                this.level = level;
            }
            VipUser.prototype = new User(); // 原型链继承：如果只写这个，则不能给父元素传值，比如访问不到name和password
            VipUser.prototype.constructor = VipUser;

            VipUser.prototype.showLevel = function () {
                alert(this.level);
            }

            var vipUser = new VipUser('red', '987654', '3');
            vipUser.showName();
            vipUser.showPassword();
            vipUser.showLevel();
        es6写法：
            class User {
                constructor(name, password) {
                    this.name = name;
                    this.password = password;
                }

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

                showPassword() {
                    alert(this.password);
                }
                
                // 静态属性和方法
                static sayHello() {
                    alert('你好');
                }

            }
            // 也可以是旧的写法
            User.say = '说话';
            User.sayHello = function() {
                alert('你好');
            };
            console.log(User.say);
            User.sayHello();


            let user = new User('blue', '123456');
            user.showName();
            user.showPassword();


            // 继承
            class VipUser extends User {
                constructor(name, password, level) {
                    super(name, password);

                    this.level = level;
                }

                showLevel() {
                    alert(this.level);
                }
            }
            let vipUser = new VipUser('red', '987654', '3');
            vipUser.showName();
            vipUser.showPassword();
            vipUser.showLevel();

 

单例：在实例化多个对象的时候，只执行一次构造方法，而不用每实例化一个对象的时候就重复的去执行构造方法，实际上是利用了静态方法来实现的。

/*
class Db  {
    constructor () {
        console.log('实例化的时候执行一次');
    }

    find() {
        console.log('数据库查询');
    }

    update() {
        console.log('数据库修改');
    }
}

var db1 = new Db();
// 实例化的时候执行一次

var db2 = new Db();
// 实例化的时候执行一次*/


class Db  {

    // 通过判断Db是否有instance，来判断当前的Db是否已经实例化过了，如果实例化过了就直接返回该实例，这样就实现了单例
    static getInstance() {
        if (!Db.instance) {
            Db.instance = new Db();
        }

        return Db.instance;
    }

    constructor () {
        console.log('实例化的时候执行一次');
    }

    find() {
        console.log('数据库查询');
    }

    update() {
        console.log('数据库修改');
    }
}

// 调用
var db1 = Db.getInstance();
// 实例化的时候执行一次

var db2 = Db.getInstance();

var db3 = Db.getInstance();

var db4 = Db.getInstance();

db3.find();
// 数据库查询

db4.find();
// 数据库查询


    

8、JSON对象
    简写：名字一样、方法简写
    json的标准写法：
    (1)、只能用双引号
    (2)、所有的名字都必须用引用包起来
    eg：{"a": 1} √
        {"a": '1'} ×

    json简写：
    名字和值一样的时候可以只写一个    
    eg：let a = 1
        let b = 2

        let json = {a: a, b: b}
        => 
        let json = {a, b}

        let json = {
                a: a,
                show: function() {
                    alert(1)
                }
            }
        =>
        let json = {
                a,
                show(){
                    alert(1)
                }    
            }


9、Promise——承诺（例子见11）
    异步：操作之间没啥关系，同时进行多个操作、代码更复杂
    同步：同时只能做一件事、代码简单

/*var p = new Promise( (resolve, reject) => {

    setTimeout(() => {
        var name = '张三';
        if (Math.random() < 0.7) {
            resolve(name);
        } else {
            reject('失败');
        }
    });

} );*/

var getName = function(resolve, reject) {
    setTimeout(() => {
        var name = '张三';
        if (Math.random() < 0.7) {
            resolve(name);
        } else {
            reject('失败');
        }
    });
};

var p = new Promise(getName);

p.then( (data) => {

    console.log(data)

} );

    Promise——消除异步操作
    *用同步一样的方式，来书写异步代码


10、generator——生成器（例子见11）
    普通函数——一路走到底
    生成器——中间能停

 

11、异步的Jquery写法、Promise写法、generator写法对比：

1、不带逻辑实现
    普通ajax：
    $.ajax({
        url: xx,
        dataType: 'json',
        success() {
            
        },
        error() {
            alert('失败了')
        }
    });
    
    
    Promise：
    // 这里$.ajax({url: xxx, dataType: 'json'})返回的就是一个Promise对象
    Promise.all([
        $.ajax({url: xxx, dataType: 'json'}),
        $.ajax({url: yyy, dataType: 'json'})
    ]).then(results=>{
        alert('都成功了')
    }, err=> {
        alert('至少一个失败了')
    })

    
    generator：
    // yield后面的值将作为它的返回值，返回给它前面的变量，去进行下一个动作的实现。
    // 1、这里就是先执行$.ajax({url: xxx, dataType: 'json'})，这里做完之后，返回一个Promise对象给yield
    // 2、前面返回的Promise对象，赋值给data1，作为然后处理完逻辑之后，可以作为$.ajax({url: yyy, dataType: 'json'})的
    // 参数或者其他逻辑判断
    runner(function *(){
        let data1 = yield $.ajax({url: xxx, dataType: 'json'})
        let data2 = yield $.ajax({url: yyy, dataType: 'json'})
    });
(runner需要下载 yield-runner-blue)
    
2、带逻辑
    普通ajax：
    $.ajax({
        url: xx,
        dataType: 'json',
        success(results) {
            if (result.type == 'XXX') {
                    $.ajax({
                        url: xx2,
                        dataType: 'json',
                        success() {
                            
                        },
                        error() {
                            alert('失败了')
                        }
                    });
            } else {
                $.ajax({
                    url: xx3,
                    dataType: 'json',
                    success() {
                        
                    },
                    error() {
                        alert('失败了')
                    }
                });
            }
        },
        error() {
            alert('失败了')
        }
    });
    
    
    Promise（这里会和jquery感觉上没有相差多少）：
    Promise.all([
        $.ajax({url: xxx, dataType: 'json'})
    ]).then(results=>{
    
        if (results[0].type == 'XXX') {
            Promise.all([
                $.ajax({url: xx2, dataType: 'json'})
            ]).then(results=>{
            
            }, err=> {
                alert('至少一个失败了')
            })
        } else {
            Promise.all([
                $.ajax({url: xx3, dataType: 'json'})
            ]).then(results=>{
                alert('都成功了')
            }, err=> {
                alert('至少一个失败了')
            })
        }
          
    }, err=> {
        alert('至少一个失败了')
    })
    
    
    generator（异步的同步写法）：
    runner(function *(){
        let data1 = yield $.ajax({url: xxx, dataType: 'json'})
        
        if (data1.type == 'XXX') {
            let data2 = yield $.ajax({url: xx2, dataType: 'json'})
        } else {
            let data2 = yield $.ajax({url: xx3, dataType: 'json'})
        }
    });

 

12、async和await

（1）、async：可以将同步方法变成异步方法

async function getData() {
    return '这是一个 getDataasync异步方法';
}

console.log(getData()); // Promise { '这是一个 getDataasync异步方法' }

（2）、await：等待异步方法执行完成，但必须在异步方法里面使用，因为await本身会阻塞程序。

/*async function getData() {
    return '这是一个 getDataasync异步方法';
}
async function getD() {
    let d = await getData();
    console.log(d);
}

getD();*/

function getData() {
    return new Promise( (resolve, reject) => {
        resolve('这是一个 getDataasync异步方法');
    } );
}
async function getD() {
    let d = await getData();
    console.log(d);
}

getD();

 

rising_chain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES6入门教程
又逢乱世
10-12 7292
VScode安装插件 Chinese (Simplified)、vscode-icons、Live Server 创建项目 新建文件夹ES6，在VScode中打开 新建两个文件夹src用于存放es6语法的代码，dist用于存放编译后的代码 打开VScode终端，使用命令 //意思是使用默认配置初始化项目 npm init -y 使用babel 安装babel 终端使用命令（babel的作用是把es6的代码转译成es5） // npm安装 非全局安装 babel客户端，b.....
Es6学习
qq_43540154的博客
02-19 187
Es6的学习
2024年最新超全 ES6 语法教程_es6语法，你们觉得作为一名程序员最大的悲哀是什么
最新发布
e846815793的博客
05-14 600
let user2 = new user(‘飞兔小哥哥’, 18, ‘阅读’);//我叫autofelix，年龄26。//我叫飞兔小哥哥，年龄18。//我爱好women。//使用es6语法模板字符串拼接。//使用es6语法模板字符串拼接。//其他相同，名字不同。//不会添加重复的值。
ES6基础教程
liwan09的博客
07-10 2557
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。其目标为使JavaScript可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript和JavaScript的关系：前者是后者的规格；后者是前者的一种实现。 ECMAScript 背景 JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，
JavaScript高级——ES6基础入门
明哥
07-29 4219
ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记。
ES6知识点汇总
liwan09的博客
05-21 2638
一、let关键字 let关键字用来声明变量，使用let声明的变量有几个特点： 不允许重复声明 有块级作用域 不存在变量提升 不影响作用域链 let关键字代码说明 //let不允许重复声明 let a=2; let a=3; console.log(a); //报错：uncaught SyntaxError:Identefter 'a'has already been declared //let不允许重复声明 function func(a){ let a=9; } func();//
ES6学习笔记.docx
04-27
ES6学习笔记 ES6（ECMAScript 6）是JavaScript语言的最新版本，引入了许多新的特性和变化。在本文中，我们将介绍ES6的学习心得，包括ES6的三种命名方式、箭头函数的介绍和应用、ES6字符串模板、ES6中的for和Array...
es6学习资料.zip
07-21
本资料包含的两份学习材料，即《es6标准入门》PDF文件和《es6入门》Word文件，将帮助你全面了解并掌握这个现代JavaScript的核心内容。** 首先，让我们来看看ES6中的关键特性之一——**箭头函数**。箭头函数提供了一...
ES6 学习笔记.pdf
07-05
这是一份关于JavaScript ES6 的整理笔记，包括块级作用域，解构，promise，class，proxy
ES6 学习文档
12-25
ES6，ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6
ES6学习总结
08-14
主要是学习了ES6的总结
ES6基础学习
m0_63302973的博客
12-30 243
ES6的基本学习
es6的学习
l10711097061的博客
04-05 337
es6的学习
ES6入门基础
weixin_46323827的博客
09-14 394
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
学习 ES6，一篇文章就够了
热门推荐
Xiaoming's Blog
06-24 1万+
ES6 简介ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系：前者是后者的语法规格，后者是前者的一种实现Babel：将ES6代码转为ES5代码 http://babeljs.io/新特性

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

rising_chain

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值